/* ==========================================================================
   LANDING / INTERIOR PAGE SHARED STYLES (lp- prefix)
   Shared visual system for the redesigned public pages: homepage, class
   pages (/classes/{slug}), and guide pages (/guide/*). Values come from
   design_handoff_homepage + design_handoff_interior_pages.
   The lp- prefix is load-bearing: it prevents collisions with the legacy
   global page stylesheets (landing-sections.css, splash-animations.css, ...).
   Used by Components/Landing/* and the page markup that composes them.
   ========================================================================== */

/* ---------- Page root ---------- */

.lp-home-root {
    background: #070b16;
    color: #c9d1e0;
    font-family: 'EB Garamond', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Zero-specificity default so per-class colors (.lp-btn-gold, .lp-nav-link, ...) always win. */
:where(.lp-home-root) :where(a) {
    color: #e8c352;
    text-decoration: none;
}

.lp-home-root ::selection {
    background: rgba(218, 165, 32, .35);
}

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

.lp-btn-gold {
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .12em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    transition: box-shadow .25s ease;
}

.lp-btn-lg {
    font-size: 15px;
    padding: 15px 34px;
    box-shadow: 0 0 26px rgba(218, 165, 32, .45);
}

.lp-btn-lg:hover {
    box-shadow: 0 0 40px rgba(255, 215, 0, .7);
}

.lp-btn-nav {
    font-size: 13px;
    padding: 10px 20px;
    box-shadow: 0 0 18px rgba(218, 165, 32, .35);
}

.lp-btn-nav:hover {
    box-shadow: 0 0 28px rgba(255, 215, 0, .6);
}

.lp-btn-outline-hero {
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .55);
    border-radius: 3px;
    background: rgba(11, 17, 32, .5);
    display: inline-block;
    transition: border-color .25s ease, color .25s ease;
}

.lp-btn-outline-hero.lp-btn-lg {
    box-shadow: none;
}

.lp-btn-outline-hero:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lp-btn-outline {
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .5);
    border-radius: 3px;
    padding: 14px 32px;
    display: inline-block;
    transition: border-color .25s ease, color .25s ease;
}

.lp-btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- Fixed nav ---------- */

.lp-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    /* No space-between: .lp-nav-panel takes flex:1 and does the spacing, so the bar
       still works below 960px where the panel leaves the flow to become the drawer. */
    gap: 14px;
    padding: 14px 40px;
    border-bottom: 1px solid rgba(218, 165, 32, .22);
}

/* The translucent blur lives on a pseudo-element rather than on .lp-top-nav
   itself. backdrop-filter on the bar would make it the containing block for the
   position:fixed nav panel nested inside it, collapsing the drawer to the height
   of the bar. Keeping the filter one level down leaves the drawer viewport-fixed. */
.lp-top-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 11, 22, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
}

.lp-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-nav-logo {
    height: 42px;
    width: auto;
    display: block;
}

.lp-nav-logo-mark {
    display: none;
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    /* Splits the panel's free space evenly, centring the links between the brand
       and the ALPHA/LOGIN cluster exactly as space-between used to. */
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .14em;
    font-weight: 600;
}

.lp-nav-link {
    color: #c9d1e0;
    transition: color .2s ease;
}

.lp-nav-link:hover,
.lp-nav-link.lp-nav-link-active {
    color: var(--color-primary);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp-alpha-badge {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--color-primary);
    border: 1px solid rgba(218, 165, 32, .5);
    padding: 5px 10px;
    border-radius: 3px;
}

.lp-nav-login {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #c9d1e0;
    padding: 9px 16px;
    transition: color .2s ease;
}

.lp-nav-login:hover {
    color: var(--color-primary);
}

/* ---------- Nav panel (drawer at narrow widths) ----------
   One element, two jobs. Here it is an inert flex row inside the bar; the
   max-width: 960px block below turns the SAME element into the slide-in drawer
   at the width the centre links collapse. Authoring it once keeps every nav
   label to a single DOM node. Open/closed is a class from LpNav.razor —
   visibility (not display) so the slide transition runs while still dropping
   the panel out of the tab order when closed. */

.lp-nav-panel {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 14px;
    min-width: 0;
}

.lp-nav-panel-head {
    display: none;
}

.lp-nav-toggle {
    display: none;
}

.lp-nav-backdrop {
    display: none;
}

/* ---------- Section scaffolding + ornament ---------- */

.lp-section {
    padding: clamp(52px, 9vw, 100px) 24px;
    background: #070b16;
}

.lp-section-alt {
    background: var(--color-bg-base);
    border-top: 1px solid rgba(218, 165, 32, .14);
}

.lp-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.lp-section-inner-wide {
    max-width: 1280px;
}

.lp-section-inner-narrow {
    max-width: 1000px;
}

.lp-section-header {
    text-align: center;
    margin-bottom: clamp(32px, 6vw, 56px);
}

.lp-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.lp-orn-line {
    width: 56px;
    height: 1px;
}

.lp-orn-left {
    background: linear-gradient(90deg, transparent, var(--color-primary-dark));
}

.lp-orn-right {
    background: linear-gradient(90deg, var(--color-primary-dark), transparent);
}

.lp-orn-diamond {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
}

.lp-section-kicker {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    color: #e8c352;
}

.lp-section-title {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-section-sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: #aeb7c9;
}

/* Prose links across the lp- surface. .lp-guide-lead is listed explicitly: the guide
   hero and the /classes intro both put links in that paragraph, and until the MudBlazor
   bundle was dropped from these pages they were being coloured by its global reset
   rather than by anything here - they fell back to default browser blue without it. */
.lp-section-sub a,
.lp-guide-lead a,
.lp-prose a {
    color: #e8c352;
}

.lp-section-sub a:hover,
.lp-guide-lead a:hover,
.lp-prose a:hover {
    color: var(--color-primary);
}

.lp-section-cta {
    text-align: center;
    margin-top: 44px;
}

.lp-card-link {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #e8c352;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lp-link-arrow {
    font-size: 14px;
}

/* ---------- Plain (left-aligned) headings + prose ---------- */

.lp-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-prose {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-prose p {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.65;
    color: #aeb7c9;
}

.lp-prose strong {
    color: #f4ecd8;
}

.lp-prose code {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13.5px;
    color: var(--color-primary);
}

/* Two-column content split (overview + stats, hp + equipment, ...) */
.lp-cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 48px;
    align-items: start;
}

.lp-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Gold in-card labels ("STAT PRIORITY", "MANA REGENERATION", ...) */
.lp-gold-label {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #e8c352;
    text-transform: uppercase;
}

.lp-gold-label--lg {
    font-size: 16px;
    letter-spacing: .04em;
}

/* Standalone sub-section label above a grid (ZONE PASSIVES / ACTIVE ABILITIES) */
.lp-gold-label--block {
    margin: 0 0 18px;
}

/* Spacer between stacked grids inside one section */
.lp-mb-lg {
    margin-bottom: 44px;
}

/* Card tone variants (strengths vs weaknesses panels) */
.lp-card--strong {
    border-color: rgba(218, 165, 32, .35);
}

.lp-card--muted {
    background: rgba(13, 19, 34, .6);
    border-color: rgba(139, 147, 167, .25);
}

.lp-gold-label--bright {
    color: var(--color-primary);
}

.lp-gold-label--muted {
    color: #8b93a7;
}

/* Short prose intro inside a card, above a list */
.lp-card > .lp-prose {
    margin-bottom: 14px;
}

/* ---------- Breadcrumb ---------- */

.lp-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 600;
    text-transform: uppercase;
}

.lp-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-breadcrumb li + li::before {
    content: "/";
    color: #4a5268;
}

.lp-breadcrumb a {
    color: #8b93a7;
    transition: color .2s ease;
}

.lp-breadcrumb a:hover {
    color: var(--color-primary);
}

.lp-breadcrumb [aria-current] {
    color: #e8c352;
}

.lp-breadcrumb--center ol {
    justify-content: center;
}

/* ---------- Class page hero ---------- */

.lp-class-hero {
    position: relative;
    padding: clamp(110px, 14vw, 150px) 24px clamp(52px, 9vw, 90px);
    background: radial-gradient(ellipse 60% 55% at 70% 20%, rgba(30, 41, 59, .6), transparent), #070b16;
}

.lp-class-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 48px;
    align-items: center;
}

.lp-portrait {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.lp-portrait-outline {
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(218, 165, 32, .4);
    border-radius: 8px;
    pointer-events: none;
}

.lp-portrait img {
    display: block;
    width: 100%;
    /* height:auto beats the intrinsic height attribute so aspect-ratio still drives the box */
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: left top;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, .35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.lp-portrait-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 5px 12px;
    border-radius: 3px;
}

.lp-class-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-class-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    color: #f4ecd8;
}

.lp-class-role {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .18em;
    color: #e8c352;
    text-transform: uppercase;
}

.lp-class-lead {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-class-lead a {
    color: #e8c352;
}

.lp-hero-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Quick-stat chips (class hero + guide hero) */
.lp-quickstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.lp-quickstat {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    padding: 14px 16px;
    text-align: center;
}

.lp-quickstat-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #8b93a7;
    text-transform: uppercase;
}

.lp-quickstat-value {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 6px;
}

/* ---------- Guide page hero ---------- */

.lp-guide-hero {
    position: relative;
    padding: clamp(120px, 15vw, 170px) 24px clamp(52px, 9vw, 90px);
    background: radial-gradient(ellipse 55% 60% at 50% 15%, rgba(30, 41, 59, .65), transparent), #070b16;
    text-align: center;
}

.lp-guide-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.lp-guide-hero .lp-ornament {
    margin-bottom: 0;
}

.lp-guide-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    color: #f4ecd8;
}

.lp-guide-lead {
    margin: 0;
    max-width: 680px;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-guide-quickstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 760px;
    margin-top: 10px;
}

.lp-guide-quickstats .lp-quickstat {
    text-align: left;
    padding: 14px 12px;
}

.lp-guide-quickstats .lp-quickstat-value {
    font-size: 15px;
}

/* ---------- Framed panel (key/value tables, formula lists) ---------- */

.lp-panel {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    overflow: hidden;
}

.lp-panel-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #e8c352;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    text-transform: uppercase;
}

.lp-panel-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel-row:last-child {
    border-bottom: none;
}

.lp-panel-key {
    font-size: 16px;
    color: #8b93a7;
}

.lp-panel-val {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
    text-align: right;
}

/* Key/value <table> inside a panel (preserves existing table semantics) */
.lp-panel .lp-kv-table {
    width: 100%;
    border-collapse: collapse;
}

.lp-panel .lp-kv-table th,
.lp-panel .lp-kv-table td {
    padding: 13px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel .lp-kv-table tr:last-child th,
.lp-panel .lp-kv-table tr:last-child td {
    border-bottom: none;
}

.lp-panel .lp-kv-table th {
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    color: #8b93a7;
}

.lp-panel .lp-kv-table td {
    text-align: right;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
}

/* Formula rows inside a panel */
.lp-panel-formula {
    padding: 14px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel-formula:last-child {
    border-bottom: none;
}

.lp-panel-formula-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-panel-formula code,
.lp-panel-formula-code {
    display: block;
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13.5px;
    color: var(--color-primary);
    margin-top: 5px;
}

/* ---------- Generic data table (multi-column guide tables) ---------- */

.lp-table-wrap {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    overflow-x: auto;
}

.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    color: #98a1b5;
}

.lp-table thead th {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e8c352;
    text-align: left;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    white-space: nowrap;
}

.lp-table tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
    line-height: 1.5;
    vertical-align: top;
}

.lp-table tbody tr:last-child td {
    border-bottom: none;
}

.lp-table td strong {
    color: #f4ecd8;
}

/* ---------- Badges + chips ---------- */

.lp-badge {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.lp-badge--tag {
    font-size: 13px;
    padding: 6px 12px;
    letter-spacing: 0;
    text-transform: none;
}

.lp-chip {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .4);
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.lp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Cards ---------- */

/* Basic dark card */
.lp-card {
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 26px 24px;
    background: #0d1322;
}

/* Diamond-marker card (homepage "more features", class strengths, kv strips) */
.lp-more-card {
    display: flex;
    gap: 16px;
    border: 1px solid rgba(139, 147, 167, .18);
    border-radius: 6px;
    padding: 24px;
    background: rgba(13, 19, 34, .5);
    transition: border-color .25s ease;
}

.lp-more-card:hover {
    border-color: rgba(218, 165, 32, .45);
}

.lp-more-card--gold {
    border-color: rgba(218, 165, 32, .2);
    background: #0d1322;
}

.lp-more-card--gold:hover {
    border-color: rgba(255, 215, 0, .55);
}

.lp-more-diamond {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 6px;
}

.lp-more-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-more-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #e8c352;
}

.lp-more-body {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-more-body strong {
    color: #f4ecd8;
}

/* Gold-top-border feature card (fighting styles, spell types, class features) */
.lp-goldtop-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(218, 165, 32, .25);
    border-top: 2px solid rgba(218, 165, 32, .55);
    border-radius: 6px;
    padding: 26px 24px;
    background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(218, 165, 32, .1), transparent), #0d1322;
    transition: transform .25s ease, box-shadow .25s ease;
}

.lp-goldtop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(218, 165, 32, .18);
}

.lp-goldtop-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-card-examples {
    font-size: 14px;
    line-height: 1.5;
    color: #7b8499;
    margin-top: auto;
}

.lp-card-examples-label {
    color: #e8c352;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* Ability card (active abilities grid) */
.lp-ability-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 24px;
    background: #0d1322;
    transition: border-color .25s ease;
}

.lp-ability-card:hover {
    border-color: rgba(255, 215, 0, .55);
}

.lp-ability-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
}

.lp-ability-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-ability-unlock {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8b93a7;
    white-space: nowrap;
    text-transform: uppercase;
}

.lp-effect {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
}

.lp-ability-body {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-ability-body strong {
    color: #f4ecd8;
}

/* Wide gradient passive card */
.lp-passive-card {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
}

.lp-passive-card .lp-effect {
    margin-top: 10px;
}

.lp-passive-card .lp-ability-body {
    margin-top: 8px;
}

/* Equipment row: gold tag badge + name/description */
.lp-equip-row {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 18px 20px;
    background: #0d1322;
}

.lp-equip-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-equip-desc {
    font-size: 15px;
    color: #98a1b5;
    margin-top: 2px;
}

/* Linked entity card (image-topped: caster classes, pets, related classes) */
.lp-entity-card {
    display: flex;
    flex-direction: column;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.lp-entity-card:hover {
    border-color: rgba(255, 215, 0, .65);
    transform: translateY(-3px);
}

.lp-entity-art {
    position: relative;
}

.lp-entity-art img {
    display: block;
    width: 100%;
    /* height:auto beats the intrinsic height attribute so aspect-ratio still drives the box */
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center top;
    background: #0b1120;
}

.lp-entity-art .lp-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    letter-spacing: .16em;
    padding: 4px 9px;
}

.lp-entity-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
}

.lp-entity-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.lp-entity-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #f4ecd8;
    text-transform: uppercase;
}

.lp-entity-stat {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary);
    white-space: nowrap;
}

.lp-entity-desc {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-entity-meta {
    font-size: 14px;
    color: #7b8499;
}

.lp-entity-meta .lp-entity-meta-key {
    color: #e8c352;
}

/* Related class card (16:15 portrait) */
.lp-related-card .lp-entity-art img {
    aspect-ratio: 16 / 15;
}

/* ---------- Diamond bullet lists ---------- */

.lp-dlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-dlist > li,
.lp-dlist-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-dlist--lg > li,
.lp-dlist--lg .lp-dlist-item {
    font-size: 16px;
    color: #aeb7c9;
}

.lp-dlist strong {
    color: #f4ecd8;
}

.lp-dlist-diamond {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 7px;
}

.lp-dlist-diamond--hollow {
    background: none;
    border: 1px solid #8b93a7;
}

/* Numbered gold circle rows (stat priority, process steps) */
.lp-num-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-num-row strong {
    color: #f4ecd8;
}

.lp-num-circle {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Gold LVL label rows (ability priority by level) */
.lp-lvl-row {
    display: flex;
    gap: 14px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-lvl-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
    width: 74px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---------- Progress / percentage bars ---------- */

.lp-bar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lp-bar-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8b93a7;
    width: 64px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.lp-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(13, 19, 34, .8);
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 3px;
    overflow: hidden;
}

.lp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-darker), var(--color-primary));
}

.lp-bar-value {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary);
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}

.lp-bar-row--slim .lp-bar-track {
    height: 18px;
}

.lp-bar-row--slim .lp-bar-label {
    width: 104px;
    font-size: 15px;
    font-weight: 800;
    color: #f4ecd8;
    letter-spacing: 0;
}

.lp-bar-row--slim .lp-bar-value {
    font-size: 14px;
    width: 48px;
}

/* ---------- Formula box + monospace ---------- */

.lp-formula-box {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13px;
    color: var(--color-primary);
    background: rgba(11, 17, 32, .8);
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 4px;
    padding: 10px 14px;
}

.lp-formula-box code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---------- Key/value cooldown-style rows ---------- */

.lp-cd-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(11, 17, 32, .7);
    border: 1px solid rgba(139, 147, 167, .12);
    border-radius: 4px;
}

.lp-cd-name {
    font-size: 15.5px;
    color: #aeb7c9;
}

.lp-cd-value {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* ---------- Callout panel (PRIORITY RULE style) ---------- */

.lp-callout {
    border: 1px solid rgba(218, 165, 32, .4);
    border-radius: 6px;
    padding: 24px 26px;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(218, 165, 32, .12), transparent), #0d1322;
}

.lp-callout-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--color-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.lp-callout-label .material-icons {
    font-size: 15px;
}

.lp-callout-body {
    font-size: 17px;
    line-height: 1.6;
    color: #c9d1e0;
}

.lp-callout-body strong {
    color: #f4ecd8;
}

/* ---------- Spell list panels (class spell lists with avatar headers) ---------- */

.lp-avatar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
}

.lp-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: #0b1120;
    border: 1px solid rgba(218, 165, 32, .5);
    display: block;
}

.lp-avatar-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-avatar-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-avatar-tagline {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #e8c352;
    margin-top: 3px;
    text-transform: uppercase;
}

.lp-spell-row {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(139, 147, 167, .1);
}

.lp-spell-row:last-child {
    border-bottom: none;
}

.lp-spell-name {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: #e8c352;
}

.lp-spell-desc {
    font-size: 14.5px;
    line-height: 1.45;
    color: #98a1b5;
    margin-top: 3px;
}

/* ---------- Screen-reader-only utility ---------- */

.lp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    border: 0;
}

/* ---------- Larger ornament variant (index hero) ---------- */

.lp-ornament--lg .lp-orn-line {
    width: 72px;
}

.lp-ornament--lg .lp-orn-diamond {
    width: 9px;
    height: 9px;
}

/* ---------- Filter tab buttons (/classes) ---------- */

.lp-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 6vw, 52px);
}

.lp-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 11px 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
    background: transparent;
    color: #c9d1e0;
    border: 1px solid rgba(218, 165, 32, .35);
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lp-filter-btn .material-icons {
    font-size: 14px;
}

.lp-filter-btn--active,
.lp-filter-btn--active:hover {
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: 1px solid transparent;
    box-shadow: 0 0 18px rgba(218, 165, 32, .4);
}

/* ---------- Classes index cards ---------- */

.lp-index-hero {
    background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(30, 41, 59, .7), transparent), #070b16;
    padding-bottom: clamp(48px, 8vw, 80px);
}

.lp-index-grid-section {
    padding: 0 24px clamp(56px, 9vw, 100px);
    background: #070b16;
}

.lp-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 22px;
}

.lp-index-card-slot {
    display: flex;
}

.lp-index-card-slot .lp-index-card {
    flex: 1;
}

.lp-index-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .22);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.lp-index-card:hover {
    border-color: rgba(255, 215, 0, .6);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(218, 165, 32, .15);
}

.lp-index-card .lp-entity-art img {
    object-position: left top;
    background: var(--color-bg-base);
}

.lp-index-card .lp-badge--art {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    letter-spacing: .18em;
    padding: 5px 11px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.lp-index-card .lp-badge--art .material-icons {
    font-size: 12px;
}

.lp-index-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 24px;
    flex: 1;
}

.lp-index-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.lp-index-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #f4ecd8;
}

.lp-role-chip {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .4);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.lp-index-desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-ministats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    border-top: 1px solid rgba(139, 147, 167, .14);
    border-bottom: 1px solid rgba(139, 147, 167, .14);
    padding: 12px 0;
}

.lp-ministat-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #8b93a7;
    text-transform: uppercase;
}

.lp-ministat-value {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: #f4ecd8;
    margin-top: 4px;
}

.lp-ministat-value--gold {
    color: var(--color-primary);
}

.lp-index-card .lp-card-link {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
}

/* ---------- Guide link cards (homepage guides section + related-guides blocks) ---------- */

.lp-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.lp-guide-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 24px 22px;
    background: #0d1322;
    transition: border-color .25s ease, background .25s ease;
}

.lp-guide-card:hover {
    border-color: rgba(255, 215, 0, .6);
    background: #101830;
}

.lp-guide-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-guide-body {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

/* ---------- Shared grids ---------- */

.lp-grid {
    display: grid;
    gap: 18px;
}

.lp-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.lp-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.lp-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.lp-grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.lp-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-stack--sm {
    gap: 8px;
}

.lp-stack--lg {
    gap: 14px;
}

/* ---------- Final CTA ---------- */

.lp-final-cta {
    position: relative;
    padding: clamp(64px, 12vw, 140px) 24px;
    background: url('/images/splash/hero-bg-1080p.webp') center / cover no-repeat;
    border-top: 1px solid rgba(218, 165, 32, .14);
    text-align: center;
}

.lp-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7, 11, 22, .85), rgba(7, 11, 22, .62) 50%, rgba(7, 11, 22, .9));
}

.lp-final-cta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lp-final-cta-logo {
    height: 64px;
    width: auto;
}

.lp-final-cta-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-final-cta-sub {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-final-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.lp-final-cta .lp-btn-outline-hero {
    background: transparent;
}

/* ---------- Footer ---------- */

.lp-home-footer {
    border-top: 1px solid rgba(218, 165, 32, .18);
    background: var(--color-bg-base);
    padding: 40px 24px;
}

.lp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.lp-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp-footer-logo {
    height: 34px;
    width: auto;
}

.lp-footer-copyright {
    font-size: 14.5px;
    color: #7b8499;
}

.lp-footer-links {
    display: flex;
    gap: 26px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
}

.lp-footer-links a {
    color: #98a1b5;
    transition: color .2s ease;
}

.lp-footer-links a:hover {
    color: var(--color-primary);
}

/* ---------- Responsive (canonical breakpoints only) ---------- */

@media (max-width: 960px) {
    .lp-top-nav {
        padding: 12px 16px;
    }

    /* The panel leaves the flow to become the drawer, so the CTA and toggle are
       the only items left after the brand; margin-left:auto keeps them right. The
       gold CTA stays in the bar so the primary action survives without opening
       the menu, which is why it is authored outside the panel. */
    .lp-nav-cta {
        margin-left: auto;
    }

    .lp-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(218, 165, 32, .35);
        border-radius: 3px;
        color: var(--color-primary);
        cursor: pointer;
        transition: border-color .2s ease, background .2s ease;
    }

    .lp-nav-toggle:hover {
        border-color: var(--color-primary);
        background: rgba(218, 165, 32, .1);
    }

    .lp-nav-toggle .material-icons {
        font-size: 24px;
    }

    /* Backdrop and panel are both children of .lp-top-nav, so they share its
       stacking context - these values order them against each other and against
       the bar's own contents, not against the rest of the page. */
    .lp-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(3, 6, 14, .72);
        opacity: 0;
        visibility: hidden;
        touch-action: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .lp-nav-backdrop-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s;
    }

    /* Same element as the desktop nav row, restyled into the drawer. */
    .lp-nav-panel {
        display: flex;
        flex-direction: column;
        flex: none;
        gap: 0;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: min(320px, 86vw);
        padding: 12px 22px 28px;
        background: linear-gradient(180deg, #0b1120 0%, #070b16 100%);
        border-left: 1px solid rgba(218, 165, 32, .28);
        box-shadow: -18px 0 46px rgba(0, 0, 0, .55);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility 0s linear .28s;
    }

    .lp-nav-panel-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s ease, visibility 0s;
    }

    .lp-nav-panel-head {
        display: flex;
        justify-content: flex-end;
    }

    .lp-nav-panel-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        color: #c9d1e0;
        cursor: pointer;
        transition: color .2s ease;
    }

    .lp-nav-panel-close:hover {
        color: var(--color-primary);
    }

    .lp-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 8px 0 0;
    }

    .lp-nav-link {
        font-size: 15px;
        padding: 16px 2px;
        border-bottom: 1px solid rgba(218, 165, 32, .14);
    }

    .lp-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: auto;
        padding-top: 28px;
    }

    .lp-alpha-badge {
        align-self: flex-start;
    }

    .lp-nav-login {
        text-align: center;
        padding: 13px 16px;
        border: 1px solid rgba(218, 165, 32, .5);
        border-radius: 3px;
        transition: color .2s ease, border-color .2s ease;
    }

    .lp-nav-login:hover {
        border-color: var(--color-primary);
    }

}

@media (prefers-reduced-motion: reduce) {
    .lp-nav-panel,
    .lp-nav-panel-open,
    .lp-nav-backdrop,
    .lp-nav-backdrop-open {
        transition: none;
    }
}

@media (max-width: 768px) {
    /* Class hero: text column first, portrait below at reduced size */
    .lp-portrait {
        order: 2;
        max-width: 320px;
    }

    .lp-class-intro {
        order: 1;
    }
}

@media (max-width: 480px) {
    /* Square mark instead of the wordmark lockup: the bar has to hold the CTA
       and the menu toggle at 360px without wrapping. */
    .lp-nav-logo {
        display: none;
    }

    .lp-nav-logo-mark {
        display: block;
        width: 34px;
        height: 34px;
    }

    .lp-top-nav {
        gap: 12px;
    }

    .lp-btn-nav {
        font-size: 11px;
        padding: 8px 12px;
    }

    .lp-nav-panel {
        width: min(300px, 88vw);
    }
}