/* Veilborn — the Veilgate kit on the web: dark violet glass over full-bleed art, gold primary
   actions, veil-blue selection. Tokens are the game's own (CLAUDE.md, "Colour tokens"). */

:root {
    --ground: #090714;
    --ground-2: #0c0a19;
    --ground-3: #141029;
    --text: #eeeaf6;
    --text-2: #bcb6d2;
    --muted: #8e88aa;
    --gold: #e9c06b;
    --gold-light: #fbe6a8;
    --gold-deep: #cf9e47;
    --gold-rim: #7a5520;
    --gold-ink: #1c1407;
    --veil: #7ccbff;
    --veil-light: #cfebff;
    --ember: #ff8f66;
    --violet: #b496ff;
    --hairline: rgba(206, 196, 255, 0.22);
    --hairline-soft: rgba(206, 196, 255, 0.12);

    --glass: linear-gradient(180deg, rgba(44, 36, 86, 0.58), rgba(22, 17, 46, 0.62));
    --glass-strong: linear-gradient(180deg, rgba(30, 24, 60, 0.9), rgba(14, 11, 30, 0.92));

    --font-title: "Cinzel", "Times New Roman", serif;
    --font-body: "Signika", "Segoe UI", system-ui, sans-serif;
    --font-caption: "Josefin Sans", "Segoe UI", system-ui, sans-serif;

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 64px);
    --radius: 22px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text-2);
    font: 400 17px/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--veil); text-decoration: none; }
a:hover { color: var(--veil-light); }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--font-title); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: rgba(124, 203, 255, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--veil); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ground-3); border-radius: 10px; }
.skip:focus { left: 12px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.caption {
    font: 700 13px/1.2 var(--font-caption);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.caption--gold { color: var(--gold); }

.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 36em; }

.glass {
    background: var(--glass);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Blur only where there's art behind the glass; over the plain ground it costs a repaint for nothing. */
.tally__inner, .auth__card {
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
}
.glass--strong { background: var(--glass-strong); border-color: var(--hairline); border-radius: 24px; }

/* ---------- Buttons ---------- */

/* The game's CTA: a long hexagon with a dark gold rim and a lit top edge. */
.btn {
    --h: 48px;
    --cut: calc(var(--h) * 0.28);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--h);
    padding: 0 calc(var(--cut) + 18px);
    border: 0;
    background: none;
    cursor: pointer;
    font: 800 15px/1 var(--font-title);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    isolation: isolate;
    transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn::before, .btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
}
.btn::before { inset: 0; }
.btn::after { inset: 2px; clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn--gold { color: var(--gold-ink); filter: drop-shadow(0 8px 22px rgba(233, 192, 107, 0.28)); }
.btn--gold:hover { color: var(--gold-ink); filter: drop-shadow(0 10px 30px rgba(233, 192, 107, 0.5)); }
.btn--gold::before { background: var(--gold-rim); }
.btn--gold::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 2px) top / calc(100% - 2 * var(--cut)) 100% no-repeat,
        linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
}
.btn--gold:hover::after { background: linear-gradient(180deg, #fff1c6, #f1cd7f 55%, #d9a953); }

.btn--ghost { color: var(--text); }
.btn--ghost::before { background: rgba(142, 136, 170, 0.75); }
.btn--ghost::after { background: linear-gradient(180deg, rgba(34, 28, 64, 0.94), rgba(20, 16, 40, 0.94)); }
.btn--ghost:hover { color: #fff; }
.btn--ghost:hover::before { background: var(--veil); }

.btn--pill {
    --cut: 0px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(26, 21, 52, 0.75);
    color: var(--text-2);
    font: 600 15px/1 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}
.btn--pill::before, .btn--pill::after { display: none; }
.btn--pill:hover { color: var(--text); border-color: rgba(124, 203, 255, 0.6); }

.btn--sm { --h: 40px; font-size: 13px; padding-inline: calc(var(--cut) + 12px); }
.btn--lg { --h: 60px; font-size: 17px; padding-inline: calc(var(--cut) + 26px); }
.btn--block { width: 100%; }
@media (max-width: 480px) {
    .btn--lg { --h: 54px; font-size: 14px; padding-inline: calc(var(--cut) + 12px); }
}

/* ---------- Navigation ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
    border-bottom: 1px solid transparent;
}
.nav.is-solid, .nav.is-open, body:not(.home) .nav {
    background: rgba(9, 7, 20, 0.78);
    border-bottom-color: var(--hairline-soft);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
}
.nav__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    width: min(1360px, 100% - 2 * var(--gutter));
    height: 72px;
    margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: #fff; }
.brand__mark { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(124, 203, 255, 0.55), 0 0 18px rgba(124, 203, 255, 0.35); }
.brand__word { font: 800 21px/1 var(--font-title); letter-spacing: 0.08em; text-transform: uppercase; }
.nav__links { display: flex; gap: 28px; margin-right: auto; }
.nav__links a, .nav__login, .nav__drawer a {
    color: var(--text-2);
    font: 700 13px/1 var(--font-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
}
.nav__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--veil);
    transform: scaleX(0);
    transition: transform 0.25s var(--ease);
}
.nav__links a:hover, .nav__login:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__discord { display: grid; place-items: center; color: var(--text-2); transition: color 0.2s; }
.nav__discord:hover { color: #5865F2; }
.nav__discord .icon { width: 22px; height: 22px; }
.nav__account { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.nav__avatar, .account__avatar {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, #3a2f74, #1d1740);
    border: 1.5px solid var(--veil);
    color: var(--veil-light);
    font: 700 15px/1 var(--font-title);
    box-shadow: 0 0 14px rgba(124, 203, 255, 0.35);
}
.nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(26, 21, 52, 0.8); cursor: pointer; padding: 0; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.25s var(--ease); }
.nav__toggle span:first-child { top: 16px; }
.nav__toggle span:last-child { top: 24px; }
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__drawer { display: none; }

@media (max-width: 900px) {
    .nav__links, .nav__login, .nav__account span:last-child { display: none; }
    .nav__toggle { display: block; }
    .nav__actions { margin-left: auto; gap: 12px; }
    .nav.is-open .nav__drawer {
        display: grid;
        gap: 4px;
        padding: 8px var(--gutter) 20px;
        border-top: 1px solid var(--hairline-soft);
    }
    .nav__drawer a { padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
}
@media (max-width: 480px) {
    .brand__word { font-size: 18px; }
    .nav .btn--sm span { display: none; }
    .nav .btn--sm { padding-inline: calc(var(--cut) + 8px); }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: max(640px, 100svh);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    overflow: hidden;
    isolation: isolate;
}
.hero__art { position: absolute; inset: 0; z-index: -2; container-type: size; }

/* The art keeps its own proportions, hung from the top of the hero and fading into the ground
   below, so the portal can be animated in the art's own coordinates (its centre is at 50%, 49.7%
   and its disc 33.5% of the art's width across; mat_bg_login's _Portal). */
.hero__layer {
    position: absolute;
    left: 50%;
    top: -2%;
    width: max(102cqw, calc(94cqh * 2688 / 1514));
    aspect-ratio: 2688 / 1514;
    translate: -50% 0;
    transition: transform 0.9s var(--ease);
    -webkit-mask: linear-gradient(180deg, #000 72%, transparent 99%);
    mask: linear-gradient(180deg, #000 72%, transparent 99%);
}
.hero__layer img { width: 100%; height: 100%; object-fit: cover; }
.hero__swirl, .hero__glow {
    position: absolute;
    left: 50%;
    top: 49.7%;
    width: 33.5%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}
/* The portal's own vortex, cut out of the art and turned slowly inside its rim. */
.hero__swirl {
    background: url("../img/portal-hall.webp") 50% 49.26% / 298.5% auto no-repeat;
    -webkit-mask: radial-gradient(circle closest-side, #000 0 80%, transparent 93%);
    mask: radial-gradient(circle closest-side, #000 0 80%, transparent 93%);
    animation: swirl 80s linear infinite;
    will-change: rotate;
}
.hero__glow {
    width: 52%;
    background: radial-gradient(circle, rgba(124, 203, 255, 0.28) 0 30%, rgba(124, 203, 255, 0.08) 48%, transparent 66%);
    mix-blend-mode: screen;
    animation: breathe 5.5s ease-in-out infinite;
}
@keyframes swirl { to { rotate: 360deg; } }
@keyframes breathe { 0%, 100% { opacity: 0.55; scale: 0.96; } 50% { opacity: 1; scale: 1.04; } }

.hero__motes { position: absolute; inset: 0; overflow: hidden; }
.mote {
    position: absolute;
    bottom: -10px;
    width: var(--s, 4px);
    height: var(--s, 4px);
    border-radius: 50%;
    background: var(--c, var(--veil));
    box-shadow: 0 0 10px 2px var(--c, var(--veil));
    opacity: 0;
    animation: rise var(--d, 12s) linear var(--delay, 0s) infinite;
}
@keyframes rise {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: var(--o, 0.8); }
    80% { opacity: var(--o, 0.8); }
    100% { transform: translate(var(--x, 30px), -95vh); opacity: 0; }
}

.hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(9, 7, 20, 0.7) 0, rgba(9, 7, 20, 0) 22%),
        linear-gradient(0deg, var(--ground) 0, rgba(9, 7, 20, 0.92) 22%, rgba(9, 7, 20, 0.35) 55%, rgba(9, 7, 20, 0) 75%),
        radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(9, 7, 20, 0.65));
}
.hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 22px;
    padding: 0 var(--gutter) clamp(96px, 14vh, 150px);
    text-align: center;
}
.hero__title {
    font: 900 clamp(40px, 12vw, 160px)/0.9 var(--font-title);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: -0.06em;
    background: linear-gradient(180deg, #fff8e6 10%, var(--gold-light) 40%, var(--gold) 70%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 0 rgba(28, 20, 7, 0.9)) drop-shadow(0 18px 50px rgba(9, 7, 20, 0.9));
}
.hero__lede { max-width: 34em; font-size: clamp(18px, 1.8vw, 22px); color: var(--text); text-shadow: 0 2px 18px rgba(9, 7, 20, 0.9); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: 8px; }
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    color: var(--muted);
    font-size: 15px;
}
.hero__meta .icon { width: 16px; height: 16px; color: var(--veil); }
.dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 26px;
    height: 42px;
    translate: -50% 0;
    border: 1.5px solid var(--hairline);
    border-radius: 999px;
}
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--veil); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } }

@media (max-width: 640px) {
    .hero__layer { top: 0; width: max(170cqw, calc(62cqh * 2688 / 1514)); }
    .hero__scroll { display: none; }
    .hero__ctas .btn { width: 100%; }
}

/* ---------- Tally ---------- */

.tally { position: relative; z-index: 2; margin-top: -48px; }
.tally__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(1000px, 100% - 2 * var(--gutter));
    margin-inline: auto;
    padding: 22px 12px;
    border-radius: 24px;
}
.tally__inner > div { display: grid; justify-items: center; gap: 6px; padding: 4px 8px; }
.tally__inner > div + div { border-left: 1px solid var(--hairline-soft); }
.tally strong { font: 700 clamp(28px, 3.4vw, 42px)/1 var(--font-title); color: var(--text); font-variant-numeric: tabular-nums; }
.tally span { font: 700 12px/1.2 var(--font-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
    .tally__inner { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .tally__inner > div:nth-child(4) { border-left: 0; }
}

/* ---------- Sections ---------- */

.section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.section h2 { font-size: clamp(34px, 4.6vw, 56px); }
.section__head { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head .lede { text-align: center; }

.run::before, .classes::before, .bestiary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 85% 40%, rgba(124, 203, 255, 0.08), transparent 70%),
                radial-gradient(50% 50% at 10% 70%, rgba(180, 150, 255, 0.07), transparent 70%);
}
.classes::before { background: radial-gradient(60% 60% at 20% 30%, rgba(180, 150, 255, 0.09), transparent 70%), radial-gradient(40% 50% at 90% 80%, rgba(233, 192, 107, 0.05), transparent 70%); }
.bestiary::before { background: radial-gradient(50% 40% at 50% 45%, rgba(255, 143, 102, 0.06), transparent 70%); }

/* The run */
.run__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.run .shot--tilt { position: sticky; top: 120px; margin-top: 40px; }
.run__text { display: grid; gap: 18px; }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hairline-soft); }
.step h3 { font-size: 21px; margin-bottom: 6px; }
.step p { font-size: 16px; }
.step__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    color: var(--gold);
    background: linear-gradient(180deg, rgba(233, 192, 107, 0.16), rgba(233, 192, 107, 0.04));
    border: 1px solid rgba(233, 192, 107, 0.35);
}
.step__icon .icon { width: 26px; height: 26px; }
@media (max-width: 960px) { .run__grid { grid-template-columns: 1fr; } .run .shot--tilt { position: static; margin-top: 0; } }

/* Screenshots */
.shot { margin: 0; display: grid; gap: 12px; }
.shot__frame {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    overflow: hidden;
    background: var(--ground-2);
    cursor: zoom-in;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(20, 16, 41, 0.6);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s;
}
.shot__frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.8s var(--ease); }
.shot__frame:hover { border-color: rgba(124, 203, 255, 0.6); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(20, 16, 41, 0.6), 0 0 40px rgba(124, 203, 255, 0.25); }
.shot__frame:hover img { transform: scale(1.03); }
.shot figcaption { font-size: 14px; color: var(--muted); text-align: center; }
.shot--tilt .shot__frame { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
.shot--tilt .shot__frame:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0); }
@media (max-width: 960px) { .shot--tilt .shot__frame { transform: none; } }

/* Features */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 30px 28px 32px;
    border-radius: var(--radius);
    background: var(--glass);
    border: 1px solid var(--hairline-soft);
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.card::after {
    content: "";
    position: absolute;
    inset: auto -40% -60% auto;
    width: 80%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(124, 203, 255, 0.12), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s;
}
.card:hover { transform: translateY(-4px); border-color: var(--hairline); }
.card:hover::after { opacity: 1; }
.card h3 { font-size: 22px; }
.card p { font-size: 16px; }
.card__icon {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    margin-bottom: 6px;
    border-radius: 50%;
    color: var(--veil-light);
    background: radial-gradient(circle at 50% 35%, rgba(124, 203, 255, 0.3), rgba(124, 203, 255, 0.06));
    border: 1px solid rgba(124, 203, 255, 0.4);
}
.card__icon .icon { width: 24px; height: 24px; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* Classes */
.classes__body { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.classes__tabs { display: grid; gap: 10px; }
.class-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--hairline-soft);
    border-radius: 16px;
    background: rgba(24, 19, 48, 0.6);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.class-tab img { border-radius: 10px; filter: saturate(0.75) brightness(0.85); transition: filter 0.25s; }
.class-tab strong { display: block; font: 700 19px/1.2 var(--font-title); color: var(--text); }
.class-tab small { font: 700 11px/1.4 var(--font-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.class-tab:hover { border-color: var(--hairline); transform: translateX(3px); }
.class-tab:hover img { filter: none; }
.class-tab.is-active {
    border: 1.5px solid var(--veil);
    background: linear-gradient(90deg, rgba(124, 203, 255, 0.14), rgba(24, 19, 48, 0.7));
    box-shadow: 0 0 24px rgba(124, 203, 255, 0.28), inset 0 0 18px rgba(124, 203, 255, 0.08);
}
.class-tab.is-active img { filter: none; }
.class-tab.is-active small { color: var(--veil-light); }

.class-panel { display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 40px); }
.class-panel.is-active { animation: panel-in 0.45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.class-panel__head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.class-panel__head h3 { font-size: clamp(36px, 4vw, 48px); margin: 8px 0 4px; }
.class-panel__line { font: 600 18px/1.4 var(--font-body); color: var(--gold); }
.class-panel__crest { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 0 1.5px rgba(233, 192, 107, 0.5), 0 0 36px rgba(233, 192, 107, 0.2); }
.class-panel__text { color: var(--text-2); max-width: 44em; margin-bottom: 8px; }
.abilities { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.abilities li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.abilities img { width: 64px; height: 64px; border-radius: 14px; background: rgba(9, 7, 20, 0.6); border: 1px solid var(--hairline-soft); padding: 4px; transition: transform 0.25s var(--ease); }
.abilities li:hover img { transform: translateY(-3px) scale(1.05); }
.abilities span { font: 600 14px/1.25 var(--font-body); color: var(--text); }
.abilities small { font: 700 10px/1 var(--font-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.trees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trees li { --tree: var(--gold); display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(9, 7, 20, 0.45); border: 1px solid var(--hairline-soft); border-left: 3px solid var(--tree); }
.trees .tree--strength { --tree: #f59a6b; }
.trees .tree--dexterity { --tree: #7de8b8; }
.trees .tree--intelligence { --tree: #7ccbff; }
.trees .tree--vitality { --tree: #ff8698; }
.trees span { font: 700 16px/1.2 var(--font-title); color: var(--text); }
.trees small { font: 700 10px/1 var(--font-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tree); }

@media (max-width: 960px) {
    .classes__body { grid-template-columns: 1fr; }
    .classes__tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .class-tab { flex-direction: column; text-align: center; padding: 12px 6px; gap: 8px; }
    .class-tab:hover { transform: none; }
    .class-tab strong { font-size: 15px; }
    .class-tab small { display: none; }
    .abilities { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .trees { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .class-tab img { width: 36px; height: 36px; }
    .class-tab strong { font-size: 12px; }
    .class-panel__crest { width: 64px; height: 64px; border-radius: 16px; }
}

/* Gallery */
.gallery { background: linear-gradient(180deg, var(--ground), #0e0b20 50%, var(--ground)); }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
@media (max-width: 720px) { .gallery__grid { grid-template-columns: 1fr; } }

/* Bestiary */
.bands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.band { display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); }
.band__head h3 { font-size: 28px; }
.band__levels { margin-top: 6px; font: 700 12px/1 var(--font-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--veil); }
.band__text { font-size: 16px; }
.monsters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.monster {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 6px;
    padding: 12px 6px 10px;
    min-height: 116px;
    border-radius: 14px;
    background: radial-gradient(90% 70% at 50% 30%, rgba(124, 203, 255, 0.08), transparent 70%), rgba(9, 7, 20, 0.5);
    border: 1px solid var(--hairline-soft);
    cursor: help;
    transition: border-color 0.2s, transform 0.25s var(--ease);
}
.monster img { width: 84%; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); transition: transform 0.3s var(--ease); }
.monster__name { font: 600 13px/1.2 var(--font-body); color: var(--text-2); text-align: center; }
.monster:hover, .monster:focus-visible { border-color: rgba(124, 203, 255, 0.5); transform: translateY(-2px); outline: none; }
.monster:hover img { transform: scale(1.1); }
.monster__card {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 5;
    width: 230px;
    padding: 12px 14px;
    translate: -50% 6px;
    border-radius: 14px;
    background: rgba(14, 11, 30, 0.97);
    border: 1px solid var(--hairline);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, translate 0.18s var(--ease);
}
.monster__card strong { display: block; margin-bottom: 4px; font: 700 15px/1.2 var(--font-title); color: var(--text); }
.monster:hover .monster__card, .monster:focus-visible .monster__card { opacity: 1; translate: -50% 0; }
.monsters .monster:nth-child(4n + 1) .monster__card { left: 0; translate: 0 6px; }
.monsters .monster:nth-child(4n + 1):hover .monster__card, .monsters .monster:nth-child(4n + 1):focus-visible .monster__card { translate: 0 0; }
.monsters .monster:nth-child(4n) .monster__card { left: auto; right: 0; translate: 0 6px; }
.monsters .monster:nth-child(4n):hover .monster__card, .monsters .monster:nth-child(4n):focus-visible .monster__card { translate: 0 0; }
.named { display: grid; gap: 10px; }
.named__tile {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid;
}
.named__tile img { width: 104px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.named__tile h4 { font-size: 19px; margin: 4px 0; }
.named__tile p:last-child { font-size: 14px; line-height: 1.45; }
.named__tile--miniboss { border-color: rgba(233, 192, 107, 0.45); background: linear-gradient(90deg, rgba(233, 192, 107, 0.14), rgba(233, 192, 107, 0.02)); }
.named__tile--miniboss .caption { color: var(--gold); }
.named__tile--boss { border-color: rgba(255, 143, 102, 0.5); background: linear-gradient(90deg, rgba(255, 143, 102, 0.16), rgba(255, 143, 102, 0.02)); }
.named__tile--boss .caption { color: var(--ember); }
@media (max-width: 960px) { .bands { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
    .monsters { grid-template-columns: repeat(3, 1fr); }
    .monster__card { display: none; }
    .named__tile { grid-template-columns: 64px 1fr; }
    .named__tile img { width: 64px; height: 56px; }
}

/* News */
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { display: grid; align-content: start; gap: 12px; padding: 28px; transition: transform 0.35s var(--ease), border-color 0.3s; }
.post:hover { transform: translateY(-3px); border-color: var(--hairline); }
.post h3 { font-size: 22px; }
.post p { font-size: 16px; }
.post__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.tag {
    padding: 5px 10px 4px;
    border-radius: 999px;
    background: rgba(124, 203, 255, 0.14);
    border: 1px solid rgba(124, 203, 255, 0.4);
    color: var(--veil-light);
    font: 700 11px/1 var(--font-caption);
    letter-spacing: 0.16em;
}
@media (max-width: 960px) { .news__grid { grid-template-columns: 1fr; } }

/* Finale */
.finale { position: relative; isolation: isolate; padding: clamp(96px, 12vw, 160px) 0; overflow: hidden; text-align: center; }
.finale__art { position: absolute; inset: 0; z-index: -1; }
.finale__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.finale__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--ground) 0, rgba(9, 7, 20, 0.55) 30%, rgba(9, 7, 20, 0.55) 60%, var(--ground) 100%),
                radial-gradient(70% 70% at 50% 50%, rgba(9, 7, 20, 0.5), rgba(9, 7, 20, 0.85));
}
.finale__content { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
.finale h2 { font-size: clamp(38px, 5.5vw, 68px); }
.finale .lede { text-align: center; color: var(--text); }
.howto { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; }
.howto li { display: grid; justify-items: center; gap: 10px; padding: 18px; font-size: 15px; color: var(--text-2); border-radius: 18px; background: rgba(12, 10, 25, 0.6); border: 1px solid var(--hairline-soft); }
.howto span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font: 700 15px/1 var(--font-title); }
@media (max-width: 720px) { .howto { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(9, 7, 20, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: fade-in 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; gap: 14px; max-width: min(1600px, 100%); }
.lightbox img { max-height: calc(100svh - 120px); width: auto; margin: auto; border-radius: 14px; border: 1px solid var(--hairline); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); }
.lightbox figcaption { text-align: center; color: var(--text-2); }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(26, 21, 52, 0.9); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { border-color: var(--veil); }
@keyframes fade-in { from { opacity: 0; } }

/* Footer */
.footer { border-top: 1px solid var(--hairline-soft); background: #07060f; padding-top: 56px; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: 40px; }
.footer__brand { display: grid; gap: 14px; max-width: 320px; }
.footer__brand p { font-size: 15px; color: var(--muted); }
.footer__cols { display: flex; gap: clamp(40px, 8vw, 96px); }
.footer__cols div { display: grid; align-content: start; gap: 10px; }
.footer h4 { font: 700 12px/1 var(--font-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.footer__cols a { color: var(--text-2); font-size: 15px; }
.footer__cols a:hover { color: var(--text); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 20px 0 28px; border-top: 1px solid var(--hairline-soft); font-size: 14px; color: var(--muted); }

/* ---------- Forms ---------- */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field__label { font: 700 12px/1 var(--font-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.field__box {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 16px;
    border-radius: 16px;
    background: rgba(9, 7, 20, 0.72);
    border: 1px solid var(--hairline);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field__box .icon { color: var(--muted); width: 20px; height: 20px; }
.field__box:focus-within { border-color: var(--veil); box-shadow: 0 0 0 3px rgba(124, 203, 255, 0.16), 0 0 20px rgba(124, 203, 255, 0.18); }
.field__box:focus-within .icon { color: var(--veil); }
.field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 500 17px/1 var(--font-body);
}
.field input::placeholder { color: var(--muted); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s; caret-color: var(--text); }
.field__reveal { border: 0; background: none; padding: 6px 2px; color: var(--veil); font: 600 13px/1 var(--font-body); cursor: pointer; }
.field__reveal:hover { color: var(--veil-light); }
.field__hint { font-size: 13px; color: var(--muted); }
.field.is-invalid .field__box { border-color: var(--ember); }
.strength { display: block; height: 4px; border-radius: 4px; background: rgba(206, 196, 255, 0.12); overflow: hidden; }
.strength span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--ember); transition: width 0.3s var(--ease), background 0.3s; }
.strength[data-level="2"] span { background: var(--gold); }
.strength[data-level="3"] span, .strength[data-level="4"] span { background: var(--veil); }

.alert { padding: 12px 16px; border-radius: 14px; font-size: 15px; border: 1px solid; }
.alert--error { color: #ffd9cb; background: rgba(255, 143, 102, 0.12); border-color: rgba(255, 143, 102, 0.5); }
.alert--ok { color: var(--veil-light); background: rgba(124, 203, 255, 0.1); border-color: rgba(124, 203, 255, 0.45); }

/* ---------- Log in and sign up ---------- */

.auth {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr minmax(0, 480px);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding: 120px max(var(--gutter), calc((100% - 1200px) / 2)) 72px;
}
.auth__art { position: absolute; inset: 0; z-index: -1; }
.auth__art img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.auth__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 7, 20, 0.55) 0, rgba(9, 7, 20, 0.35) 40%, rgba(9, 7, 20, 0.9) 75%), linear-gradient(0deg, rgba(9, 7, 20, 0.8), transparent 40%); }
.auth__pitch { display: grid; gap: 18px; max-width: 460px; }
.auth__pitch h2 { font-size: clamp(32px, 3.6vw, 46px); text-shadow: 0 4px 30px rgba(9, 7, 20, 0.9); }
.auth__pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth__pitch li { display: flex; gap: 12px; align-items: start; color: var(--text); text-shadow: 0 2px 12px rgba(9, 7, 20, 0.9); }
.auth__pitch .icon { color: var(--veil); margin-top: 3px; }
.auth__card { display: grid; gap: 14px; padding: clamp(28px, 4vw, 44px); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.auth__card h1 { font-size: clamp(32px, 3.4vw, 42px); }
.auth__lede { color: var(--text-2); margin-bottom: 10px; }
.auth__card .form { margin-top: 4px; }
.auth__card .btn--block { margin-top: 8px; }
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; padding-top: 104px; }
    .auth__pitch { display: none; }
    .auth__card { width: min(480px, 100%); margin-inline: auto; }
}

/* ---------- Account ---------- */

.account { position: relative; isolation: isolate; min-height: 100svh; padding: 128px 0 96px; }
.account__art { position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; overflow: hidden; }
.account__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.55; }
.account__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 7, 20, 0.5), var(--ground)); }
.account .wrap { display: grid; gap: 28px; }
.account__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.account__who { display: flex; align-items: center; gap: 22px; }
.account__avatar { width: 84px; height: 84px; font-size: 38px; border-width: 2px; box-shadow: 0 0 36px rgba(124, 203, 255, 0.4); }
.account__who h1 { font-size: clamp(34px, 4vw, 52px); margin: 6px 0; }
.account__sub { color: var(--text-2); }
.account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.account__actions form { margin: 0; }
.account__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { display: grid; gap: 10px; padding: 20px 22px; border-radius: 18px; }
.stat strong { font: 700 30px/1 var(--font-title); color: var(--text); font-variant-numeric: tabular-nums; }
.stat strong.small { font-size: 20px; line-height: 1.5; }
.gold { color: var(--gold) !important; }
.panel { display: grid; gap: 20px; margin-top: 20px; }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline-soft); }
.panel__head h2 { font-size: 28px; }
.panel__head p { color: var(--muted); font-size: 15px; }
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hero-card { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; border-radius: 18px; transition: transform 0.3s var(--ease), border-color 0.3s; }
.hero-card:hover { transform: translateY(-2px); border-color: var(--hairline); }
.hero-card.is-favourite { border: 1.5px solid var(--veil); box-shadow: 0 0 24px rgba(124, 203, 255, 0.2); }
.hero-card__crest { width: 64px; height: 64px; border-radius: 16px; background: rgba(9, 7, 20, 0.6); padding: 3px; border: 1px solid var(--hairline-soft); }
.hero-card__body { display: grid; gap: 6px; min-width: 0; }
.hero-card h3 { display: flex; align-items: center; gap: 8px; font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-card h3 + p { font-size: 15px; color: var(--text-2); }
.fav { color: var(--gold); display: inline-flex; }
.fav .icon { width: 18px; height: 18px; fill: currentColor; }
.bar { height: 8px; margin-top: 6px; border-radius: 999px; background: rgba(9, 7, 20, 0.8); border: 1px solid var(--hairline-soft); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, #4aa6e8, var(--veil) 70%, var(--veil-light)); box-shadow: 0 0 12px rgba(124, 203, 255, 0.6); transition: width 1.1s var(--ease); }
.hero-card__foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.hero-card__foot .gold { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.hero-card__foot .icon { width: 15px; height: 15px; }
.empty { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 26px 28px; }
.empty img { border-radius: 50%; box-shadow: 0 0 30px rgba(124, 203, 255, 0.35); }
.empty > div { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.empty h3 { font-size: 22px; }
.empty strong { color: var(--text); }
.settings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.settings .form { padding: 28px; }
.settings h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.settings h3 .icon { color: var(--veil); }
.settings .btn { justify-self: start; margin-top: 4px; }
.alert--float { justify-self: start; }
@media (max-width: 860px) {
    .account__stats { grid-template-columns: repeat(2, 1fr); }
    .settings { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .account__avatar { width: 64px; height: 64px; font-size: 28px; }
    .account__actions, .account__actions form, .account__actions .btn { width: 100%; }
}

/* ---------- Motion ---------- */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
    .mote { display: none; }
}

.auth--lost { grid-template-columns: minmax(0, 480px); justify-content: center; }
.auth--lost .auth__art::after { background: radial-gradient(60% 70% at 50% 50%, rgba(9, 7, 20, 0.35), rgba(9, 7, 20, 0.85)); }