/* /Components/CharacterQuickView.razor.rz.scp.css */
/* CSS for CharacterQuickView component */
.qv-backdrop[b-0mnaddzo83] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: qvFadeIn-b-0mnaddzo83 0.2s ease;
}

@keyframes qvFadeIn-b-0mnaddzo83 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.qv-card[b-0mnaddzo83] {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.75rem;
    animation: qvPopIn-b-0mnaddzo83 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes qvPopIn-b-0mnaddzo83 {
    from {
        transform: scale(0.92) translateY(10px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.qv-close-btn[b-0mnaddzo83] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    box-shadow: 2px 2px 0px #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

@media (hover: hover) {
    .qv-close-btn:hover[b-0mnaddzo83] {
        background: #ef4444;
        color: #ffffff;
    }
}

.qv-body[b-0mnaddzo83] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 480px) {
    .qv-body[b-0mnaddzo83] {
        flex-direction: row;
    }
}

.qv-portrait[b-0mnaddzo83] {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    margin: 0 auto;
}

@media (min-width: 480px) {
    .qv-portrait[b-0mnaddzo83] {
        margin: 0;
    }
}

.qv-portrait-img[b-0mnaddzo83] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qv-info[b-0mnaddzo83] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.qv-badge[b-0mnaddzo83] {
    margin-bottom: 0.6rem;
}

.qv-name[b-0mnaddzo83] {
    font-size: 1.35rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
    text-shadow: 2px 2px 0px #000000;
}

.qv-title[b-0mnaddzo83] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dfbb6b;
    margin: 0.4rem 0 0;
}

.qv-factions[b-0mnaddzo83] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.qv-faction-tag[b-0mnaddzo83] {
    font-size: 0.62rem !important;
    padding: 3px 7px !important;
}

.qv-bio[b-0mnaddzo83] {
    font-size: 0.85rem;
    color: #d1d5db;
    line-height: 1.65;
    margin: 0.9rem 0 0;
}

.qv-full-link[b-0mnaddzo83] {
    margin-top: 1.1rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-541op8ezq4] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-541op8ezq4] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.navbar-start[b-541op8ezq4],
.navbar-end[b-541op8ezq4] {
    min-width: 0; /* let flex children shrink instead of overflowing */
}

/* .sub-summary: paddings/font-size that apply only inside the nav flyout's
   nested sub-menu rows. Uses literal values (AGENTS.md: no var() in .razor.css). */
.sub-summary[b-541op8ezq4] {
    padding-inline: 0.55rem !important;
    padding-block: 0.15rem !important;
    font-size: 0.85rem !important;
}

.mobile-menu-btn[b-541op8ezq4] {
    --size: 2rem;
    --btn-p: 0.4rem;
}

    .mobile-menu-btn svg[b-541op8ezq4] {
        height: 1.1rem;
        width: 1.1rem;
    }

/* ==========================================================================
   FLOATING INTERACTIVE FACTION POSITIONING ENGINE — Comic Panel Edition
   ========================================================================== */
.faction-widget-container[b-541op8ezq4] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: system-ui, -apple-system, sans-serif;
}
 

@media (hover: hover) {
    .__faction-trigger-btn:hover[b-541op8ezq4] {
        transform: translateY(-2px);
        border-color: var(--aot-red) !important;
        box-shadow: 4px 4px 0px var(--aot-red), 0 10px 28px rgba(239, 68, 68, 0.35) !important;
    }
}

.__faction-trigger-btn i[b-541op8ezq4] {
    color: var(--aot-gold);
}

/* Decorative pulsing "vote now" ring — purely a nudge, no state logic needed */
.faction-ping[b-541op8ezq4] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--aot-red);
    border: 2px solid var(--aot-black);
}

    .faction-ping[b-541op8ezq4]::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: 2px solid var(--aot-red);
        animation: factionPing-b-541op8ezq4 1.6s cubic-bezier(0, 0.4, 0.8, 1) infinite;
    }

@keyframes factionPing-b-541op8ezq4 {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* 2. Premium Content Popup Chassis Window — comic panel treatment */
.faction-popup-card[b-541op8ezq4] {
    position: absolute;
    bottom: 74px;
    right: 0;
    width: 340px;
    background: radial-gradient(ellipse at 60% 0%, rgba(30, 15, 15, 0.97) 0%, rgba(10, 10, 10, 0.99) 100%);
    border: 3px solid var(--aot-black);
    border-radius: 14px;
    box-shadow: 6px 6px 0px var(--aot-black), 0 20px 50px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px) scale(0.95);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .faction-popup-card[b-541op8ezq4]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.06) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.7;
        z-index: 0;
    }

    .faction-popup-card.is-active[b-541op8ezq4] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

/* 3. Popup Head Alignment Row */
.popup-header[b-541op8ezq4] {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--aot-black);
}

.popup-title[b-541op8ezq4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aot-gold);
    text-shadow: 2px 2px 0 var(--aot-black);
}

.popup-close-btn[b-541op8ezq4] {
    background: var(--aot-white);
    border: 2px solid var(--aot-black);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: var(--aot-black);
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--aot-black);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

    .popup-close-btn:hover[b-541op8ezq4] {
        background: var(--aot-red);
        color: var(--aot-white);
        transform: translateY(-2px);
    }

/* 4. Functional Selection Body Grid */
.popup-body[b-541op8ezq4] {
    position: relative;
    z-index: 1;
    padding: 18px;
}

.popup-instruction[b-541op8ezq4] {
    margin: 0 0 16px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--aot-text-secondary);
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.faction-voted-badge[b-541op8ezq4] {
    font-size: 0.65rem;
}

/* "VS" burst between the two faction choices */
.faction-vs-badge[b-541op8ezq4] {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aot-white);
    border: 3px solid var(--aot-black);
    border-radius: 50%;
    color: var(--aot-black);
    font-weight: 900;
    font-size: 0.8rem;
    box-shadow: 3px 3px 0px var(--aot-black);
    transform: rotate(-8deg);
}

.faction-voting-options[b-541op8ezq4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vote-option-btn[b-541op8ezq4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    padding: 12px;
    border: 3px solid var(--aot-black);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 3px 3px 0px var(--aot-black);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .vote-option-btn:hover[b-541op8ezq4] {
        transform: translateY(-2px);
    }
}

.vote-option-btn:active[b-541op8ezq4] {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--aot-black);
}

/* Marley Faction Palette Accent (Crimson Core Variant) */
.marley-btn[b-541op8ezq4] {
    background: var(--aot-red);
    color: var(--aot-white);
}

    .marley-btn:hover[b-541op8ezq4] {
        box-shadow: 3px 3px 0px var(--aot-black), 0 0 16px rgba(239, 68, 68, 0.5);
    }

/* Paradis Faction Palette Accent (Slate Blue Variant) */
.paradis-btn[b-541op8ezq4] {
    background: #2563eb;
    color: var(--aot-white);
}

    .paradis-btn:hover[b-541op8ezq4] {
        box-shadow: 3px 3px 0px var(--aot-black), 0 0 16px rgba(37, 99, 235, 0.5);
    }

/* 5. Poll results — comic-style vote bars, shown after voting */
.faction-results[b-541op8ezq4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faction-result-row[b-541op8ezq4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faction-result-label[b-541op8ezq4] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--aot-text-secondary);
}

.faction-result-track[b-541op8ezq4] {
    height: 14px;
    background: var(--aot-black);
    border: 2px solid var(--aot-black);
    border-radius: 8px;
    overflow: hidden;
}

.faction-result-fill[b-541op8ezq4] {
    height: 100%;
    transition: width 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

    .faction-result-fill.marley[b-541op8ezq4] {
        background: linear-gradient(90deg, var(--aot-red), #f87171);
    }

    .faction-result-fill.paradis[b-541op8ezq4] {
        background: linear-gradient(90deg, #2563eb, #60a5fa);
    }

.popup-divider[b-541op8ezq4] {
    position: relative;
    z-index: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}

.popup-quote[b-541op8ezq4] {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--aot-text-muted);
    text-align: center;
    line-height: 1.4;
}
 
/* Responsive Adaptation Safeguards for Small Mobile Interfaces */
@media (max-width: 480px) {
    .faction-widget-container[b-541op8ezq4] {
        bottom: 16px;
        right: 16px;
    }

    .faction-popup-card[b-541op8ezq4] {
        width: calc(100vw - 32px);
        max-width: 340px;
    }

    .brand-mark[b-541op8ezq4] {
        height: 2rem;
        max-width: 110px;
    }
}

@media (min-width: 1200px) {
    .navbar-start[b-541op8ezq4] {
        margin-left: 10px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9hcgdwzj1r],
.components-reconnect-repeated-attempt-visible[b-9hcgdwzj1r],
.components-reconnect-failed-visible[b-9hcgdwzj1r],
.components-pause-visible[b-9hcgdwzj1r],
.components-resume-failed-visible[b-9hcgdwzj1r],
.components-rejoining-animation[b-9hcgdwzj1r] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-retrying[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-failed[b-9hcgdwzj1r],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9hcgdwzj1r] {
    display: block;
}


#components-reconnect-modal[b-9hcgdwzj1r] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9hcgdwzj1r 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9hcgdwzj1r 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9hcgdwzj1r 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9hcgdwzj1r]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9hcgdwzj1r 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9hcgdwzj1r {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9hcgdwzj1r {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9hcgdwzj1r {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9hcgdwzj1r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9hcgdwzj1r] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9hcgdwzj1r] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-9hcgdwzj1r] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-9hcgdwzj1r] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-9hcgdwzj1r] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9hcgdwzj1r] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9hcgdwzj1r 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9hcgdwzj1r] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9hcgdwzj1r {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AboutAuthor.razor.rz.scp.css */
/* AboutAuthor.razor.css — comic-panel language (comic-card / comic-frame / comic-badge
   are global, defined in app.css), matching the rest of the fanpage instead of the old
   soft corporate-glass look. Explicit values only — no :root vars inside *.razor.css. */

.author-page[b-732py63wxv] {
    max-width: 1000px;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* --- HERO PANEL --- */
.author-hero[b-732py63wxv] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
}

.author-portrait[b-732py63wxv] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.author-portrait-img[b-732py63wxv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.author-hero-details[b-732py63wxv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.author-badge[b-732py63wxv] {
    margin-bottom: 0.85rem;
}

/* Tier 1 — Title */
.author-name[b-732py63wxv] {
    font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    text-shadow: 3px 3px 0px #000000;
}

.author-name-en[b-732py63wxv] {
    font-size: 1rem;
    color: #d1d5db;
    font-weight: 500;
}

/* Tier 2 — Subtitle */
.author-title[b-732py63wxv] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dfbb6b;
    margin: 0.5rem 0 1.5rem;
}

.author-quick-stats[b-732py63wxv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.author-stat-tile[b-732py63wxv] {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000000;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    box-shadow: 3px 3px 0px #000000;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .author-stat-tile:hover[b-732py63wxv] {
        box-shadow: 3px 3px 0px #ef4444;
        transform: translateY(-2px);
    }

.author-stat-label[b-732py63wxv] {
    font-size: 0.65rem;
    color: #dfbb6b;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.author-stat-val[b-732py63wxv] {
    font-size: 0.85rem;
    color: #d1d5db;
    font-weight: 700;
}

/* --- GENERIC PANEL (bio / awards / legacy) --- */
.author-panel[b-732py63wxv] {
    padding: 1.75rem 2rem;
    position: relative;
    overflow: hidden;
}

    .author-panel[b-732py63wxv]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .author-panel .aot-section-title[b-732py63wxv] {
        margin-top: 0;
    }

.author-panel-body[b-732py63wxv] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Tier 3 — Body */
.author-bio-text[b-732py63wxv] {
    font-size: 0.9375rem;
    color: #d1d5db;
    line-height: 1.75;
    margin: 0;
}

    .author-bio-text strong[b-732py63wxv] {
        color: #ffffff;
        font-weight: 700;
    }

.author-pullquote[b-732py63wxv] {
    font-size: 1rem;
    font-style: italic;
    color: #dfbb6b;
    border-left: 4px solid #dfbb6b;
    padding-left: 1.1rem;
    margin: 0.25rem 0 0;
    line-height: 1.6;
}

/* --- AWARDS --- */
.author-awards-grid[b-732py63wxv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.author-award-card[b-732py63wxv] {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000000;
    border-radius: 6px;
    padding: 1.1rem;
    box-shadow: 3px 3px 0px #000000;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .author-award-card:hover[b-732py63wxv] {
        box-shadow: 4px 4px 0px #ef4444;
        transform: translateY(-2px);
    }

.author-award-year[b-732py63wxv] {
    font-size: 0.7rem;
    font-weight: 900;
    color: #dfbb6b;
    letter-spacing: 0.05em;
}

.author-award-title[b-732py63wxv] {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.author-award-desc[b-732py63wxv] {
    font-size: 0.8rem;
    color: #a1a1aa;
    margin: 0;
    line-height: 1.5;
}

/* --- LEGACY --- */
.author-legacy-container[b-732py63wxv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.author-metrics-grid[b-732py63wxv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

.author-metric-card[b-732py63wxv] {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000000;
    border-radius: 6px;
    padding: 1.25rem 0.75rem;
    box-shadow: 3px 3px 0px #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.author-metric-card:hover[b-732py63wxv] {
    box-shadow: 4px 4px 0px #ef4444;
    transform: translateY(-2px);
}

.author-metric-number[b-732py63wxv] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000;
}

.author-metric-label[b-732py63wxv] {
    font-size: 0.7rem;
    color: #dfbb6b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .author-quick-stats[b-732py63wxv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .author-awards-grid[b-732py63wxv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .author-hero[b-732py63wxv] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
        text-align: center;
    }

    .author-hero-details[b-732py63wxv] {
        align-items: center;
    }

    .author-portrait[b-732py63wxv] {
        max-width: 200px;
        margin: 0 auto;
    }

    .author-legacy-container[b-732py63wxv] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 575px) {
    .author-quick-stats[b-732py63wxv] {
        grid-template-columns: 1fr;
    }

    .author-awards-grid[b-732py63wxv] {
        grid-template-columns: 1fr;
    }

    .author-metrics-grid[b-732py63wxv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CharacterCard.razor.rz.scp.css */
/* CSS for CharacterCard component */
/* Scoped exclusively to the Character Card component */
.character-name[b-pwgpmpblvu] {
    font-weight: 900;
    font-size: 1.125rem;
}

.character-title[b-pwgpmpblvu] {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--color-secondary);
}

.character-bio[b-pwgpmpblvu] {
    font-size: 0.75rem;
    line-height: 1.625;
    opacity: 0.7;
}
/* /Components/Pages/CharacterDetail.razor.rz.scp.css */
/* CharacterDetail.razor.css — comic-panel language (comic-card / comic-frame / comic-badge
   / comic-tag are global, defined in app.css). Explicit values only — no :root vars
   inside *.razor.css, isolation breaks the cascade. */

.char-detail-page[b-zutgrenb5d] {
    max-width: 900px;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.char-detail-back[b-zutgrenb5d] {
    align-self: flex-start;
}

/* --- HERO PANEL --- */
.char-detail-hero[b-zutgrenb5d] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem;
}

.char-detail-portrait-col[b-zutgrenb5d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.char-detail-portrait[b-zutgrenb5d] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.char-detail-portrait-img[b-zutgrenb5d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    animation: charDetailFadeIn-b-zutgrenb5d 0.25s ease;
}

@keyframes charDetailFadeIn-b-zutgrenb5d {
    from {
        opacity: 0;
        transform: scale(1.03);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- FILMSTRIP --- */
.char-detail-filmstrip[b-zutgrenb5d] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.char-detail-filmstrip-thumb[b-zutgrenb5d] {
    width: 48px;
    height: 64px;
    padding: 0;
    border: 2px solid #000000;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0a;
    box-shadow: 2px 2px 0px #000000;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

    .char-detail-filmstrip-thumb img[b-zutgrenb5d] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }

    .char-detail-filmstrip-thumb:hover[b-zutgrenb5d] {
        box-shadow: 2px 2px 0px #ef4444;
        transform: translateY(-2px);
    }

        .char-detail-filmstrip-thumb:hover img[b-zutgrenb5d] {
            opacity: 0.85;
        }

    .char-detail-filmstrip-thumb.is-active[b-zutgrenb5d] {
        border-color: #ef4444;
        box-shadow: 2px 2px 0px #ef4444;
    }

        .char-detail-filmstrip-thumb.is-active img[b-zutgrenb5d] {
            opacity: 1;
        }

/* --- INFO COLUMN --- */
.char-detail-info[b-zutgrenb5d] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.char-detail-badge[b-zutgrenb5d] {
    margin-bottom: 0.85rem;
}

/* Tier 1 — Title */
.char-detail-name[b-zutgrenb5d] {
    font-size: clamp(1.6rem, 2.5vw + 1rem, 2.25rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
    text-shadow: 3px 3px 0px #000000;
}

/* Tier 2 — Subtitle */
.char-detail-title[b-zutgrenb5d] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #dfbb6b;
    margin: 0.6rem 0 0;
}

.char-detail-version-tag[b-zutgrenb5d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000000;
    background: #ef4444;
    border: 2px solid #000000;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    margin-top: 0.75rem;
    box-shadow: 2px 2px 0px #000000;
}

.char-detail-factions[b-zutgrenb5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.char-detail-faction-tag[b-zutgrenb5d] {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
}

/* --- BIO PANEL --- */
.char-detail-bio-card[b-zutgrenb5d] {
    padding: 1.75rem 2rem;
    position: relative;
    overflow: hidden;
}

    .char-detail-bio-card[b-zutgrenb5d]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

.char-detail-bio-label[b-zutgrenb5d] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #dfbb6b;
    border-bottom: 2px solid #000000;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    width: 100%;
}

/* Tier 3 — Body */
.char-detail-bio[b-zutgrenb5d] {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    color: #d1d5db;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 640px) {
    .char-detail-hero[b-zutgrenb5d] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
        text-align: center;
    }

    .char-detail-portrait-col[b-zutgrenb5d] {
        align-items: center;
    }

    .char-detail-portrait[b-zutgrenb5d] {
        max-width: 220px;
        margin: 0 auto;
    }

    .char-detail-filmstrip[b-zutgrenb5d] {
        justify-content: center;
    }

    .char-detail-info[b-zutgrenb5d] {
        align-items: center;
    }

    .char-detail-factions[b-zutgrenb5d] {
        justify-content: center;
    }

    .char-detail-bio-label[b-zutgrenb5d] {
        justify-content: center;
        text-align: center;
    }
}
/* /Components/Pages/Community.razor.rz.scp.css */
/* ============================================================
   Community.razor.css
   Rides the global comic-panel system (comic-card / comic-badge /
   aot-btn, all defined in app.css) — same language as
   LoreMaps, StoryTimeline, MilitaryTacticalGear, etc.
   NOTE: No :root variables — Blazor CSS isolation breaks them.
   All font sizes, colours, and spacing are explicit values.
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.comm-hero[b-u3m2tp517o] {
    text-align: center;
    padding: 1.25rem 1.25rem;
    margin-bottom: 0.25rem;
    position: relative;
    overflow: hidden;
}

/* Screentone dot overlay — matches gear/timeline/lore headers */
.comm-hero[b-u3m2tp517o]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
    background-size: 8px 8px;
    opacity: 0.85;
}

.comm-hero > *[b-u3m2tp517o] {
    position: relative;
    z-index: 1;
}

.comm-hero-badge[b-u3m2tp517o] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* comic-badge style — hard border + offset shadow */
    background-color: #facc15;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 2px 2px 0px #000000;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Tier 1 — page title */
.comm-hero-title[b-u3m2tp517o] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
    text-shadow: 3px 3px 0px #000000;
}

/* Tier 3 — subtitle body */
.comm-hero-subtitle[b-u3m2tp517o] {
    font-size: 0.9rem;
    color: #d1d5db;
    margin: 0 auto;
    line-height: 1.6;
}

.comm-polls-grid[b-u3m2tp517o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .comm-polls-grid[b-u3m2tp517o] {
        grid-template-columns: 1fr 1fr;
    }
}

/* comm-poll-card rides the global comic-card class for border/shadow/hover.
   We only add layout — do NOT re-declare background, border, or border-radius
   here because comic-card uses !important. */
.comm-poll-card[b-u3m2tp517o] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Screentone overlay inside each poll card */
.comm-poll-card[b-u3m2tp517o]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 15%, transparent 16%);
    background-size: 8px 8px;
    opacity: 0.85;
    z-index: 0;
}

.comm-poll-card > *[b-u3m2tp517o] {
    position: relative;
    z-index: 1;
}

.comm-poll-header[b-u3m2tp517o] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.comm-poll-icon[b-u3m2tp517o] {
    font-size: 1.00rem;
    font-weight: bold;
    color: #facc15;
    text-shadow: 2px 2px 0 #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Small comic-frame tile */
    background-color: #0a0a0a;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 3px 3px 0px #000000;
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
}

/* Tier 2 — section type label, matches comic-tag language */
.comm-poll-tag[b-u3m2tp517o] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: 2px 2px 0px #000000;
    padding: 2px 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

/* Tier 1 — poll card title */
.comm-poll-title[b-u3m2tp517o] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #dfbb6b;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Tier 3 — poll card description */
.comm-poll-desc[b-u3m2tp517o] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.comm-poll-instruction[b-u3m2tp517o] {
    font-size: 0.875rem;
    color: #dfbb6b;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.comm-poll-results-summary[b-u3m2tp517o] {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comm-poll-total-row[b-u3m2tp517o] {
    display: flex;
    justify-content: flex-end;
}

.comm-poll-total[b-u3m2tp517o] {
    font-size: 0.8rem;
    color: #dfbb6b;
    font-weight: 700;
}

.comm-poll-thanks-centered[b-u3m2tp517o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #d1d5db;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Faction VS Options */
.comm-faction-vs[b-u3m2tp517o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* VS badge — hard red comic accent */
.comm-vs-badge[b-u3m2tp517o] {
    background-color: #ef4444;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: 2px solid #000000;
    box-shadow: 2px 2px 0px #000000;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Vote buttons — aot-btn system foundation */
.comm-vote-btn[b-u3m2tp517o] {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px solid #000000;
    box-shadow: 3px 3px 0px #000000;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    min-height: 48px;
}

.comm-vote-btn:active[b-u3m2tp517o] {
    box-shadow: 1px 1px 0px #ef4444 !important;
    transform: translate(1px, 1px);
}

@media (hover: hover) {
    .comm-vote-btn:hover[b-u3m2tp517o] {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #000000 !important;
        box-shadow: 3px 3px 0px 1px #ef4444 !important;
    }
}

.comm-vote-btn--marley[b-u3m2tp517o] {
    background-color: #2563eb;
    color: #ffffff;
}

.comm-vote-btn--paradis[b-u3m2tp517o] {
    background-color: #16a34a;
    color: #ffffff;
}

/* Option Grid */
.comm-option-grid[b-u3m2tp517o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
 
}

.comm-option-btn[b-u3m2tp517o] {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #0a0a0a;
    border: 2px solid #000000;
    border-radius: 8px;
    box-shadow: 3px 3px 0px #000000;
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    min-height: 44px;
}

@media (hover: hover) {
    .comm-option-btn:hover[b-u3m2tp517o] {
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: 3px 3px 0px 1px #ef4444 !important;
    }
}

.comm-option-btn:active[b-u3m2tp517o] {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #ef4444 !important;
}

/* Titan Option Grid */
.comm-titan-grid[b-u3m2tp517o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .comm-titan-grid[b-u3m2tp517o] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.comm-titan-btn[b-u3m2tp517o] {
    padding: 0.75rem 0.5rem;
    background-color: #0a0a0a;
    border: 2px solid #000000;
    border-radius: 8px;
    box-shadow: 3px 3px 0px #000000;
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    min-height: 44px;
}

@media (hover: hover) {
    .comm-titan-btn:hover[b-u3m2tp517o] {
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: 3px 3px 0px 1px #ef4444 !important;
    }
}

.comm-titan-btn:active[b-u3m2tp517o] {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #ef4444 !important;
}

.comm-titan-name[b-u3m2tp517o] {
    font-weight: 700;
    font-size: 0.8rem;
}

/* Results Display */
.comm-result-bars[b-u3m2tp517o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.comm-result-row[b-u3m2tp517o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Tier 1 highlight for user's own vote */
.comm-result-row.is-my-vote .comm-result-label span:first-child[b-u3m2tp517o] {
    font-weight: 800;
    color: #facc15;
}

/* Tier 3 — result labels */
.comm-result-label[b-u3m2tp517o] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #d1d5db;
}

.comm-result-track[b-u3m2tp517o] {
    width: 100%;
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid #000000;
    border-radius: 2px;
    overflow: hidden;
}

.comm-result-fill[b-u3m2tp517o] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.comm-fill--marley[b-u3m2tp517o]  { background-color: #2563eb; }
.comm-fill--paradis[b-u3m2tp517o] { background-color: #16a34a; }
.comm-fill--gold[b-u3m2tp517o]    { background-color: #dfbb6b; }
.comm-fill--red[b-u3m2tp517o]     { background-color: #ef4444; }

/* ── TRIVIA SECTION ───────────────────────────────────────── */
/* Rides comic-card for border/shadow. Only layout added here. */
.comm-trivia-section[b-u3m2tp517o] {
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Screentone overlay — same as poll cards */
.comm-trivia-section[b-u3m2tp517o]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 15%, transparent 16%);
    background-size: 8px 8px;
    opacity: 0.85;
    z-index: 0;
}

.comm-trivia-section > *[b-u3m2tp517o] {
    position: relative;
    z-index: 1;
}

.comm-trivia-start[b-u3m2tp517o] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.comm-trivia-progress[b-u3m2tp517o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Tier 2 — gold counter label */
.comm-trivia-counter[b-u3m2tp517o] {
    font-size: 0.875rem;
    color: #dfbb6b;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comm-trivia-dots[b-u3m2tp517o] {
    display: flex;
    gap: 0.375rem;
}

.comm-trivia-dot[b-u3m2tp517o] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.comm-trivia-dot.active[b-u3m2tp517o] {
    background-color: #facc15;
    border-color: #000000;
    box-shadow: 1px 1px 0px #000000;
}

.comm-trivia-dot.done[b-u3m2tp517o] {
    background-color: #22c55e;
    border-color: #000000;
    box-shadow: 1px 1px 0px #000000;
}

.comm-trivia-question-box[b-u3m2tp517o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Tier 1 — question text */
.comm-trivia-question[b-u3m2tp517o] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.5;
}

.comm-trivia-options[b-u3m2tp517o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .comm-trivia-options[b-u3m2tp517o] {
        grid-template-columns: 1fr 1fr;
    }
}

.comm-trivia-opt[b-u3m2tp517o] {
    width: 100%;
    padding: 1rem;
    background-color: #0a0a0a;
    border: 2px solid #000000;
    border-radius: 8px;
    box-shadow: 3px 3px 0px #000000;
    color: #f8fafc;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    min-height: 48px;
}

@media (hover: hover) {
    .comm-trivia-opt:hover:not(:disabled)[b-u3m2tp517o] {
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: 3px 3px 0px 1px #ef4444 !important;
    }
}

.comm-trivia-opt:disabled[b-u3m2tp517o] {
    cursor: not-allowed;
    opacity: 0.85;
}

.comm-trivia-opt.is-correct[b-u3m2tp517o] {
    background-color: #14532d;
    border-color: #22c55e;
    box-shadow: 3px 3px 0px #22c55e;
    color: #86efac;
}

.comm-trivia-opt.is-wrong[b-u3m2tp517o] {
    background-color: #450a0a;
    border-color: #ef4444;
    box-shadow: 3px 3px 0px #ef4444;
    color: #fca5a5;
}

.comm-trivia-feedback[b-u3m2tp517o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.comm-trivia-feedback.is-correct[b-u3m2tp517o] { color: #22c55e; }
.comm-trivia-feedback.is-wrong[b-u3m2tp517o]   { color: #ef4444; }

.comm-trivia-result[b-u3m2tp517o] {
    text-align: center;
    padding: 2rem 0;
}

/* Score tile — comic-frame hard-border square */
.comm-trivia-score-badge[b-u3m2tp517o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    background-color: #0a0a0a;
    border: 3px solid #000000;
    border-radius: 4px;
    box-shadow: 6px 6px 0px #000000;
    width: 7rem;
    height: 7rem;
    margin-bottom: 1rem;
}

/* Tier 2 — score label */
.comm-trivia-score-label[b-u3m2tp517o] {
    font-size: 0.875rem;
    font-weight: 900;
    color: #dfbb6b;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.comm-trivia-rank-stars[b-u3m2tp517o] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.comm-star-lit[b-u3m2tp517o] {
    color: #facc15;
    text-shadow: 2px 2px 0px #000000;
    font-size: 1.5rem;
}

.comm-star-dim[b-u3m2tp517o] {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.5rem;
}

/* Tier 1 — rank message */
.comm-trivia-rank-msg[b-u3m2tp517o] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   0. DESIGN SYSTEM CONSTANTS
   Typography sizes are declared directly in class rules below to prevent Blazor CSS 
   isolation compiling bugs from collapsing variable scopes.
   ========================================================================== */

/* ==========================================================================
   1. SHARED REGISTRY GRID (character + titan cards)
   ========================================================================== */
.registry-grid[b-lo36jistyo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    justify-items: center;
}

@media (min-width: 768px) {
    .registry-grid[b-lo36jistyo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .registry-grid[b-lo36jistyo] {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   2. HERO COMPONENT STYLING
   ========================================================================== */
/* ==========================================================================
   2. MANGA SLIDER COMPONENT STYLING (High-Contrast Comic Panel)
   ========================================================================== */
.manga-slider-container[b-lo36jistyo] {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 55vh;
    border: 6px solid var(--aot-black);
    box-shadow: var(--shadow-xl);
    background-color: var(--aot-card-bg);
    border-radius: 4px;
    /* overflow: hidden; Removed to allow arrows on border */
    touch-action: pan-y;
    display: flex;
    align-items: stretch;
    perspective: 1000px;
    transition: box-shadow 0.3s ease;
}

    .manga-slider-container:hover[b-lo36jistyo] {
        box-shadow: 12px 12px 0px var(--aot-red);
    }

/* Screentone layout using CSS grid pattern */
.manga-screentone-overlay[b-lo36jistyo] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
    background-size: 8px 8px;
    opacity: 0.85;
}

/* Slide structure */
.manga-slide[b-lo36jistyo] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    /* ponytail: no longer scaling this element — it was clipped by overflow:hidden on its parent,
       so briefly sitting at 0.98 scale during the 0.6s crossfade shrank the whole slide (image +
       vignette) below full coverage and exposed a light seam at the edges. The .manga-bg-art image
       already does its own slow zoom (scale(1.06) over 8s), so no separate scale is needed here. */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
    z-index: 1;
}

    .manga-slide.active[b-lo36jistyo] {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }

/* Ink artwork layer */
.manga-bg-art[b-lo36jistyo] {
    position: absolute;
    /* ponytail: was inset:0 flush with the clip box — iOS Safari sometimes rounds the clipped
       edge to a sub-pixel off from the container's, showing as a hairline gap (usually left/top).
       A small negative inset bleeds the image past the edge so the rounding error is hidden. */
    inset: -2px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.15) brightness(0.65) grayscale(1);
    transition: transform 8s ease-out, filter 0.3s ease;
}

.manga-slider-container:hover .manga-bg-art[b-lo36jistyo] {
    filter: contrast(1.25) brightness(0.75) grayscale(1);
}

.manga-slide.active .manga-bg-art[b-lo36jistyo] {
    transform: scale(1.06);
}

.manga-vignette[b-lo36jistyo] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 2;
}

/* Manga content layout */
.manga-telemetry-panel[b-lo36jistyo] {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 2.5rem 2rem;
    box-sizing: border-box;
}

.manga-panel-title[b-lo36jistyo] {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--aot-white);
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 4px 4px 0px var(--aot-black);
}

.manga-quote-block[b-lo36jistyo] {
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
    color: var(--aot-text-secondary);
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    max-width: 50rem;
    border-left: 4px solid var(--aot-white);
    padding-left: 1rem;
    text-shadow: 2px 2px 2px var(--aot-black);
}




/* Layout Control Buttons */
.manga-panel-actions[b-lo36jistyo] {
    display: flex;
    gap: 0.75rem;
}

/* Slider Controls */
.manga-nav-arrow[b-lo36jistyo] {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    background-color: var(--aot-white);
    border: 3px solid var(--aot-black);
    color: var(--aot-black);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 4px 4px 0px var(--aot-black);
    border-radius: 50%;
}

    .manga-nav-arrow:hover[b-lo36jistyo] {
        background-color: var(--aot-red);
        color: var(--aot-white);
    }

    .manga-nav-arrow.prev[b-lo36jistyo] {
        left: 0;
        transform: translate(-50%, -50%);
    }

        .manga-nav-arrow.prev:active[b-lo36jistyo] {
            transform: translate(-50%, -50%) scale(0.92);
            box-shadow: 2px 2px 0px var(--aot-black);
        }

    .manga-nav-arrow.next[b-lo36jistyo] {
        right: 0;
        transform: translate(50%, -50%);
    }

        .manga-nav-arrow.next:active[b-lo36jistyo] {
            transform: translate(50%, -50%) scale(0.92);
            box-shadow: 2px 2px 0px var(--aot-black);
        }

/* Slider Dot indicators */
.manga-slider-dots[b-lo36jistyo] {
    position: absolute;
    bottom: 1.25rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}

.manga-dot[b-lo36jistyo] {
    width: 14px;
    height: 14px;
    background-color: var(--aot-white);
    border: 2px solid var(--aot-black);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

    .manga-dot.active[b-lo36jistyo] {
        background-color: var(--aot-red);
        transform: scale(1.2);
    }

@keyframes comicPulse-b-lo36jistyo {
    0% {
        transform: rotate(6deg) scale(0.92);
    }

    100% {
        transform: rotate(9deg) scale(1.05);
    }
}

@media (max-width: 768px) {
    .manga-slider-container[b-lo36jistyo] {
        height: 480px;
        min-height: 480px;
    }

    .manga-telemetry-panel[b-lo36jistyo] {
        padding: 1.5rem 1.25rem 2.5rem 1.25rem;
    }

    .manga-nav-arrow[b-lo36jistyo] {
        display: none; /* Swipe works, buttons hidden on mobile */
    }

    .manga-fx-badge[b-lo36jistyo] {
        right: 1.25rem;
        top: 1.5rem;
        padding: 0.3rem 0.8rem;
    }
}



/* ==========================================================================
   3. SECTION TITLE COMPONENT
   ========================================================================== */


/* ==========================================================================
   4. CHARACTER CARD COMPONENT
   ========================================================================== */
.aot-card[b-lo36jistyo] {
    background: linear-gradient(135deg, rgba(20, 22, 26, 0.85) 0%, rgba(12, 13, 16, 0.95) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

    .aot-card:hover[b-lo36jistyo] {
        transform: translateY(-2px);
        border-color: rgba(255, 215, 0, 0.35) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.05), inset 0 0 15px rgba(255, 255, 255, 0.03) !important;
    }

.aot-card-header[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.aot-char-name[b-lo36jistyo] {
    font-weight: 900;
    font-size: 1.25rem; /* 20px */
    color: var(--aot-white);
    margin: 0;
    letter-spacing: 0.03em;
}

.aot-char-title[b-lo36jistyo] {
    font-size: 0.875rem; /* 14px */
    color: var(--aot-brass);
    font-weight: 600;
    display: block;
    margin-top: 0.125rem;
    letter-spacing: 0.02em;
}

.aot-char-badge[b-lo36jistyo] {
    font-size: 0.75rem; /* 12px */
    font-weight: 800;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 2px 8px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: var(--aot-red) !important;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.aot-char-bio[b-lo36jistyo] {
    font-size: 0.875rem; /* 14px */
    color: var(--aot-text-secondary);
    line-height: 1.5;
    min-height: 54px;
    margin: 0;
    text-align: justify;
    letter-spacing: 0.02em;
}

@media (max-width: 767.98px) {
    .aot-char-name[b-lo36jistyo] {
        font-size: 1.1rem; /* 17.6px */
    }

    .aot-char-title[b-lo36jistyo] {
        font-size: 0.8125rem; /* 13px */
    }

    .aot-char-bio[b-lo36jistyo] {
        font-size: 0.9375rem; /* 15px */
    }
}

.aot-card-divider[b-lo36jistyo] {
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    opacity: 1 !important;
}

.aot-char-stats[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem; /* 13px */
}

.aot-stat-label[b-lo36jistyo] {
    color: var(--aot-text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.aot-stat-val[b-lo36jistyo] {
    font-weight: 700;
}

/* ==========================================================================
   5. HYPE CARD SYSTEM (shared shell + titan premium variant)
   ========================================================================== */
.hype-card-container[b-lo36jistyo] {
    perspective: 1200px;
    display: flex;
    padding: 10px;
    background: transparent;
    box-sizing: border-box;
    justify-content: center;
    flex: 1 1 var(--hype-container-basis, 340px);
    max-width: var(--hype-container-max, 390px);
    overflow: visible; /* Changed from hidden to prevent hover clipping */
}

/* ponytail: character & titan containers share one size so card widths match */
#character-cards-section .hype-card-container[b-lo36jistyo],
#titan-cards-section .hype-card-container[b-lo36jistyo] {
    --hype-container-basis: 420px;
    --hype-container-max: 480px;
}

/* Shared card shell */
.member-hype-card[b-lo36jistyo],
.titan-hype-card[b-lo36jistyo] {
    width: 100%;
    max-width: var(--hype-card-width, 370px);
    min-width: 0;
    position: relative;
    padding: 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: var(--hype-card-radius, 24px);
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    /* resting-state glow (was the 0%/100% goldBreath frame); stays static now, only the ::after pulses */
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 35px 70px rgba(0,0,0,0.85), inset 0 0 14px rgba(255,215,0,0.12);
}

/* ponytail: goldBreath used to animate box-shadow + border-color together on the same element
(main-thread paint every frame, ~14s of Style&Layout in Lighthouse). The multi-layer box-shadow
now lives on this pseudo-element and only its opacity animates (GPU-compositable). border-color
still animates on .titan-hype-card directly below — browsers don't support compositing border-color,
so that part keeps its (smaller) cost. Upgrade path: drop the border pulse entirely if the shadow
pulse alone reads as "enough" glow, or swap the border for an outline (still non-compositable, but
cheaper to repaint than a shadow). */
.titan-hype-card[b-lo36jistyo]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 28px rgba(255,215,0,0.32), 0 0 18px var(--theme-aura);
    opacity: 0;
}


.member-hype-card[b-lo36jistyo] {
    --hype-card-width: 390px;
    height: 560px; 
    background-size: 8px 8px; 
    background-image: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.22) 52%, rgba(120,120,120,0.15) 62%, transparent 75%);
}

.member-hype-card:hover[b-lo36jistyo] {
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.member-hype-card:hover .holo-foil-layer[b-lo36jistyo] {
    opacity: 0.08;
}

/* Character carousel layout */
.character-carousel-shell[b-lo36jistyo] {
    position: relative;
    width: 100%;
    --carousel-card-width: min(340px, 78vw);
    --carousel-card-top: 24px;
    min-height: calc(var(--carousel-card-width) * 88 / 63 + 64px);
    margin-top: 0.25rem;
}

.character-carousel-stage[b-lo36jistyo] {
    position: relative;
    width: 100%;
    min-height: calc(var(--carousel-card-width) * 88 / 63 + 64px);
    overflow: hidden;
    perspective: 1400px;
    touch-action: pan-y;
}

.character-carousel-item[b-lo36jistyo] {
    position: absolute;
    top: var(--carousel-card-top);
    left: 50%;  /* 24px; Shift down by 24px so scaling up does not cut off the top of card */
    width: var(--carousel-card-width);/* Slightly narrower to reduce dead space and balance layout */
    aspect-ratio: 63 / 88; /* Real TCG trading card ratio (63mm x 88mm) */
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible; /* defensive: the flip-affordance badge must never be clipped by this box */
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: center center;
    color: inherit;
    text-align: left;
    transition: transform 640ms cubic-bezier(0.2, 0.85, 0.2, 1), opacity 260ms ease, filter 260ms ease;
    will-change: transform, opacity, filter;
    /* Crucial fix: display flex forces the child (.character-card) height: 100% to resolve correctly */
    display: flex;
    flex-direction: column;
}

/* Mirrors .character-carousel-item's own top/width/aspect-ratio at every breakpoint below
   (kept in sync manually) so the badge lines up with the centered card's actual corner —
   but as a sibling of .character-carousel-stage, so the stage's overflow:hidden never touches it. */
.flip-affordance-anchor[b-lo36jistyo] {
    position: absolute;
    top: var(--carousel-card-top);
    left: 50%;
    width: var(--carousel-card-width);
    aspect-ratio: 63 / 88;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.flip-affordance-anchor.is-visible[b-lo36jistyo] {
    opacity: 1;
    visibility: visible;
}

.character-carousel-item:focus-visible[b-lo36jistyo] {
    outline: 3px solid #facc15;
    outline-offset: 8px;
}

/* Character card flip shell */
.character-card[b-lo36jistyo] {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    transform-origin: center center;
    transition: transform 640ms cubic-bezier(0.2, 0.85, 0.2, 1);
    transform-style: flat; /*preserve-3d*/
    display: flex;
    flex-direction: column;
}

/* Higher specificity keeps the TCG card inside its carousel footprint. */
.character-carousel-item .character-card[b-lo36jistyo] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    /* ponytail: proportional radius (scales with card size) + a stacked shadow to read as
       ~0.3mm-thick cardstock instead of a flat comic panel. Overrides .comic-card's !important. */
    border-radius: 4% / 3% !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 2px 0 rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.55), 0 20px 34px -12px rgba(0, 0, 0, 0.75) !important;
}

.character-carousel-item .character-card:hover[b-lo36jistyo] {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 2px 0 rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.55), 0 15px 30px 0px rgba(239, 68, 68, 0.50) !important;
}

.character-card-face[b-lo36jistyo] {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}


.character-card-front > *:not(.holo-foil-layer):not(.hologram-scanlines)[b-lo36jistyo] {
    position: relative;
    z-index: 1;
}

.character-card-front .holo-foil-layer[b-lo36jistyo],
.character-card-front .hologram-scanlines[b-lo36jistyo] {
    z-index: 0;
}


.character-card-front[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
    flex: 1 1 auto; /* allow front to fill available height */
    transform: translateX(0) scale(1);
    opacity: 1;
}


.character-card-back[b-lo36jistyo] {
    padding: 14px;
    flex: 1 1 auto; /* allow back to fill available height */
    transform: translateX(8%) scale(0.98);
    opacity: 0;
    pointer-events: none;
}

.character-card.is-flipped .character-card-front[b-lo36jistyo] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8%) scale(0.98);
}

.character-card.is-flipped .character-card-back[b-lo36jistyo] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}


.character-card-front[b-lo36jistyo],
.character-card-back[b-lo36jistyo] {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.tcg-topbar[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 42px;
}

.character-art-shell[b-lo36jistyo] {
    /* ponytail: was flex:0 0 auto with a fixed-height image below it — when the title wrapped to
       2 lines the whole column overflowed and clipped the flip-hint (overflow:hidden on the face).
       Now the image is the flexible part and the copy always keeps its space. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.character-front-copy[b-lo36jistyo] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.character-card .artwork-glass-frame[b-lo36jistyo] {
    height: auto; /* overrides the generic 200px fixed height so flex stretch can size it */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%; /* cancel the titan cards' full-bleed width so it aligns with the card padding */
    margin-left: 0;
}

.character-card .member-display-name[b-lo36jistyo] {
    font-size: 1.25rem; /* Tier 1 Title */
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-card .member-display-title[b-lo36jistyo] {
    font-size: 0.875rem; /* Tier 2 Subtitle */
    font-weight: 500;
    color: #dfbb6b; /* Warm Brass Gold */
}

.character-card .member-ability-row[b-lo36jistyo] {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.875rem; /* Tier 3 Body */
    color: #d1d5db; /* Neutral Light Grey */
}

/* Flip affordance — a small "tap here" prompt (ripple rings expanding from a hand-tap icon,
   like a game tutorial cue) instead of "tap / click to flip" text or a generic refresh icon.
   Sits inside .flip-affordance-anchor (a sibling of the clipped carousel stage, positioned to
   match the centered card's own box) so nothing can clip it, and hangs off the corner rather
   than sitting flush inside it.
   ponytail: dropped the old per-card hover-reveal-on-desktop behavior — since this is now one
   shared badge rather than nested per-card, there's no single DOM ancestor left to hang a plain
   CSS :hover off of without wiring hover state through Blazor. Simpler to just always show it. */
.flip-affordance[b-lo36jistyo] {
    position: absolute;
    right: 10px;
    bottom: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.85);
    border: 1.00px solid rgb(241 239 239 / 19%);
    color: #ffffff;
    font-size: 0.82rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* lift, so it reads as pinned on top of the card */
}

.flip-affordance[b-lo36jistyo]::before,
.flip-affordance[b-lo36jistyo]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.15px solid rgba(255,255,255,0.65);
    animation: flipTapRipple-b-lo36jistyo 2.2s ease-out infinite;
}

.flip-affordance[b-lo36jistyo]::after {
    animation-delay: 1.1s; /* offsets the second ring so one is always mid-pulse */
}

.flip-affordance i[b-lo36jistyo] {
    position: relative;
    z-index: 1;
    display: inline-block;
    rotate: 0deg;
    transition: rotate 420ms cubic-bezier(0.22, 1, 0.36, 1);
    /* ponytail: rotate/translate as separate CSS properties (not the transform shorthand) so
        the vibrate jitter below and the 180° flip-on-flip rotation never stomp on each other. */
    animation: flipIconVibrate-b-lo36jistyo 4.5s ease-in-out infinite;
}

.flip-affordance.is-flipped-state i[b-lo36jistyo] {
    rotate: 180deg;
}

@keyframes flipIconVibrate-b-lo36jistyo {
    0%, 87%, 100% {
        translate: 0 0;
    }
    /* short, low-amplitude jitter near the end of the cycle, then a long rest — a nudge, not a shake */
    89% {
        translate: -1px 0;
    }

    91% {
        translate: 1px 0;
    }

    93% {
        translate: -1px 0;
    }

    95% {
        translate: 1px 0;
    }

    97% {
        translate: 0 0;
    }
}

@keyframes flipTapRipple-b-lo36jistyo {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flip-affordance[b-lo36jistyo]::before,
    .flip-affordance[b-lo36jistyo]::after {
        animation: none;
        opacity: 0;
    }

    .flip-affordance i[b-lo36jistyo] {
        animation: none;
    }
}

.back-card-header[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.back-card-title[b-lo36jistyo] {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--aot-gold);
}

.back-card-subtitle[b-lo36jistyo] {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--aot-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-back-content[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.55rem;
}

.character-card-back .lore-summary-area[b-lo36jistyo] {
    min-height: 0;
    max-height: 7.5rem;
    overflow: auto;
}

.character-card-back .lore-text-body[b-lo36jistyo] {
    font-size: 0.8rem;
    line-height: 1.35;
    color: #d1d5db; /* Tier 3 - Body/Details: Neutral Light Grey */
}

.character-card-back .hype-stats-container[b-lo36jistyo] {
    gap: 0.45rem;
}

.character-card-back .hype-stat-label[b-lo36jistyo],
.character-card-back .hype-stat-pct[b-lo36jistyo] {
    font-size: 0.75rem;
}

.character-card-back .progress[b-lo36jistyo] {
    height: 0.45rem;
}

.character-card.is-focused .character-card-front .holo-foil-layer[b-lo36jistyo] {
    opacity: 0.08;
}

.character-carousel-item.is-center[b-lo36jistyo] {
    z-index: 20;
    opacity: 1;
    filter: none;
    transform: translateX(-50%) translateY(0) rotateY(0deg) scale(1);
}

.character-carousel-item.is-near-left[b-lo36jistyo] {
    z-index: 16;
    opacity: 0.9;
    filter: blur(0.5px) saturate(0.9);
    transform: translateX(calc(-50% - 235px)) translateY(14px) rotateY(18deg) scale(0.9);
}

.character-carousel-item.is-left[b-lo36jistyo] {
    z-index: 12;
    opacity: 0.55;
    filter: blur(2px) saturate(0.85);
    transform: translateX(calc(-50% - 430px)) translateY(24px) rotateY(26deg) scale(0.8);
}

.character-carousel-item.is-far-left[b-lo36jistyo] {
    z-index: 8;
    opacity: 0;
    transform: translateX(calc(-50% - 620px)) translateY(32px) rotateY(32deg) scale(0.72);
    pointer-events: none;
}

.character-carousel-item.is-near-right[b-lo36jistyo] {
    z-index: 16;
    opacity: 0.9;
    filter: blur(0.5px) saturate(0.9);
    transform: translateX(calc(-50% + 235px)) translateY(14px) rotateY(-18deg) scale(0.9);
}

.character-carousel-item.is-right[b-lo36jistyo] {
    z-index: 12;
    opacity: 0.55;
    filter: blur(2px) saturate(0.85);
    transform: translateX(calc(-50% + 430px)) translateY(24px) rotateY(-26deg) scale(0.8);
}

.character-carousel-item.is-far-right[b-lo36jistyo] {
    z-index: 8;
    opacity: 0;
    transform: translateX(calc(-50% + 620px)) translateY(32px) rotateY(-32deg) scale(0.72);
    pointer-events: none;
}

.character-carousel-item.is-pinned[b-lo36jistyo] {
    z-index: 30;
    opacity: 1;
    filter: none;
    transform: translateX(-50%) translateY(0) rotateY(0deg) scale(1.02);
}

.character-card.is-focused .chassis-art[b-lo36jistyo] {
    transform: scale(1.03);
}

@media (max-width: 1280px) {
    .character-carousel-shell[b-lo36jistyo]  {
        /* min-height: calc(min(300px, 78vw) * 88 / 63 + 60px); */
        --carousel-card-width: min(300px, 78vw);
        --carousel-card-top: 20px;
    }
}

@media (max-width: 900px) {
    .character-carousel-shell[b-lo36jistyo] {
        /* min-height: calc(min(270px, 84vw) * 88 / 63 + 55px); */
        --carousel-card-width: min(270px, 84vw);
        --carousel-card-top: 15px;
    }
}

@media (max-width: 640px) {
    .character-carousel-shell[b-lo36jistyo]  {
        /* min-height: calc(min(240px, 88vw) * 88 / 63 + 52px);*/
        --carousel-card-width: min(240px, 88vw);
        --carousel-card-top: 12px;
    }
 
    .character-card .member-display-name[b-lo36jistyo] {
        font-size: 1.15rem;
    }

    .character-card-front[b-lo36jistyo],
    .character-card-back[b-lo36jistyo] {
        padding: 12px;
        gap: 6px;
    }

    .character-front-copy[b-lo36jistyo] {
        gap: 4px;
    }

    .character-card-back .lore-summary-area[b-lo36jistyo] {
        max-height: 4.5rem;
    }

    .character-back-content[b-lo36jistyo] {
        gap: 4px;
    }
 
    .character-carousel-item.is-pinned[b-lo36jistyo] {
        transform: translateX(-50%) translateY(2px) rotateY(0deg) scale(1.02);
    }

    .wall-feed-tabs[b-lo36jistyo] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.4rem;
        margin-bottom: -3px; /* seams into the card's top border, same trick as desktop */
        scrollbar-width: none;
    }

        .wall-feed-tabs[b-lo36jistyo]::-webkit-scrollbar {
            display: none;
        }

    .wall-feed-tab[b-lo36jistyo] {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
        clip-path: none;
        margin: 0;
        border-radius: var(--aot-btn-radius) var(--aot-btn-radius) 0 0;
        box-shadow: 2px -2px 0px #000000;
    }

        /* active tab fuses into the card: same bg gradient as .comic-card.black,
       gold top accent instead of relying on color alone (colorblind-safe cue) */
        .wall-feed-tab.is-active[b-lo36jistyo] {
            background: radial-gradient(ellipse at 20% 20%, rgba(10, 11, 14, 0.95) 10%, rgba(30, 34, 42, 0.98) 80%);
            color: #ffffff;
            border-bottom: none;
            box-shadow: 2px -2px 0px #000000, inset 0 3px 0 var(--aot-gold);
            padding-bottom: calc(0.7rem + 3px);
        }

    .wall-feed-header[b-lo36jistyo] {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    .hype-card-container[b-lo36jistyo] {
        padding: 0 0 8px;
        max-width: 100%;
        flex: 0 1 100%;
    }

    .member-hype-card[b-lo36jistyo],
    .titan-hype-card[b-lo36jistyo] {
        padding: 16px;
        margin: 0;
        border-radius: 14px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        transform: none !important;
    }

    .artwork-glass-frame[b-lo36jistyo] {
        width: 100%;
        margin-left: 0;
        height: 170px;
    }

    .meta-registry-row[b-lo36jistyo] {
        gap: 6px;
        align-items: flex-start;
    }

    .member-display-name[b-lo36jistyo],
    .member-display-title[b-lo36jistyo],
    .member-ability-tag[b-lo36jistyo],
    .titan-display-title[b-lo36jistyo],
    .lore-text-body[b-lo36jistyo],
    .member-rank-badge[b-lo36jistyo],
    .titan-shifter-badge[b-lo36jistyo] {
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    .member-display-name[b-lo36jistyo] {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .member-display-title[b-lo36jistyo] {
        font-size: 0.8rem;
    }

    .member-ability-tag[b-lo36jistyo] {
        display: inline-flex;
        align-items: center;
    }

    .titan-display-title[b-lo36jistyo] {
        font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
        line-height: 1.05;
        max-width: 100%;
    }
}

/* Hologram Scanning/Foil Styling */
.holo-foil-layer[b-lo36jistyo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 223, 128, 0) 25%, rgba(255, 235, 160, 0.35) 45%, var(--theme-aura) 52%, rgba(139, 101, 8, 0.2) 62%, transparent 75%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    transition: opacity 0.4s ease, background-position 0.15s ease-out;
}

.hologram-scanlines[b-lo36jistyo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.15;
    border-radius: inherit;
    background: linear-gradient(rgba(124, 118, 118, 0.5) 10%, transparent 50%);
    background-size: 100% 4px;
}

/* Shared inner layout */
.meta-registry-row[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10; /* Keep above foil/scanlines */
    margin-left: auto;
}

    .meta-registry-row > :last-child:not(.registry-serial)[b-lo36jistyo] {
        margin-left: auto;
    }

.registry-serial[b-lo36jistyo] {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    color: #878170;
    letter-spacing: 2px;
}

.class-node[b-lo36jistyo] {
    background: linear-gradient(135deg, #aa7c11, #dfbb6b);
    color: #0c0a09;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.chassis-header[b-lo36jistyo] {
    margin-bottom: 12px;
    width: 100%;
    position: relative;
    z-index: 10; /* Keep above foil/scanlines */
}

.title-container[b-lo36jistyo] {
    width: 100%;
    container-type: inline-size;
}

.titan-display-title[b-lo36jistyo] {
    color: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.12);
    /* allow wrapping on small screens to avoid ugly breaks */
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    font-size: min(2rem, 10cqw);
}

.artwork-glass-frame[b-lo36jistyo] {
    width: calc(100% + 8px);
    margin-left: -4px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--theme-glow-intense);
    background: #050505;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
}

.chassis-art[b-lo36jistyo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.chassis-art--portrait[b-lo36jistyo] {
    object-position: center top;
}

.glass-reflection[b-lo36jistyo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 55%);
    z-index: 2;
    pointer-events: none;
}

.laser-gold-trim[b-lo36jistyo] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #ffd700 50%, transparent 100%) !important;
    z-index: 3;
}

/* Character cards: normal white/silver reflection (gold stays titan-only) */
.laser-rank-trim[b-lo36jistyo] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
    z-index: 3;
    transform-origin: center;
}

/* Survey Corps "target lock" sweep — mobile tap only, GPU transform */
.member-tap-sweep[b-lo36jistyo] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.95) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.specs-dashboard-grid[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.spec-node[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow text to wrap instead of shrinking container */
}

    .spec-node.align-right[b-lo36jistyo] {
        text-align: right;
    }

.node-hdr[b-lo36jistyo] {
    font-size: 0.7rem; /* Increased size for mobile/desktop readability */
    color: rgba(255,255,255,0.95); /* Brighter, readable color instead of dark grey */
    letter-spacing: 1px;
    margin-bottom: 2px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.chassis-divider[b-lo36jistyo] {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 10px 0;
}

.lore-summary-area[b-lo36jistyo] {
    flex-grow: 1;
    position: relative;
    z-index: 10; /* Keep above foil/scanlines */
}

.lore-text-body[b-lo36jistyo] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25;
    color: #F0F0F0;
    text-align: justify;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Shared stat rows (character + titan cards) */
.hype-stats-container[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    position: relative;
    z-index: 10; /* Keep above foil/scanlines */
}

.hype-stat-row[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hype-stat-header[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.hype-stat-label[b-lo36jistyo] {
    font-size: 0.65rem;
    font-weight: 500;
    color: #d1d5db;
    line-height: 1.2;
    min-width: 0;
}

.hype-stat-pct[b-lo36jistyo] {
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Hover & Themes */
.hype-card-container:hover .titan-hype-card[b-lo36jistyo] {
    border-color: rgba(255, 215, 0, 0.95);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.45), 0 50px 95px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(255, 215, 0, 0.1), 0 0 35px var(--theme-aura);
}

.hype-card-container:hover .chassis-art[b-lo36jistyo] {
    transform: scale(1.04);
}

.hype-card-container:hover .holo-foil-layer[b-lo36jistyo] {
    opacity: 0.8;
}

.hype-card-container:hover .member-hype-card .holo-foil-layer[b-lo36jistyo] {
    opacity: 0.08;
}

/* Themes declarations */
.theme-founding[b-lo36jistyo] {
    --theme-aura: rgba(168, 85, 247, 0.5);
    background: radial-gradient(circle at 50% 25%, #2a0f3d 0%, #11091c 45%, #050505 100%) !important;
}

.theme-female[b-lo36jistyo] {
    --theme-aura: rgba(236, 72, 153, 0.5);
    background: radial-gradient(circle at 50% 25%, #3c0d25 0%, #1a0813 45%, #050505 100%) !important;
}

.theme-beast[b-lo36jistyo] {
    --theme-aura: rgba(217, 119, 6, 0.5);
    background: radial-gradient(circle at 50% 25%, #361c07 0%, #1c1006 45%, #050505 100%) !important;
}

.theme-colossal[b-lo36jistyo] {
    --theme-aura: rgba(239, 68, 68, 0.6);
    background: radial-gradient(circle at 50% 25%, #3d0a0a 0%, #1c0707 45%, #050505 100%) !important;
}

.theme-armored[b-lo36jistyo] {
    --theme-aura: rgba(168, 162, 158, 0.45);
    background: radial-gradient(circle at 50% 25%, #292624 0%, #141312 45%, #050505 100%) !important;
}

.theme-jaw[b-lo36jistyo] {
    --theme-aura: rgba(245, 158, 11, 0.55);
    background: radial-gradient(circle at 50% 25%, #3d2305 0%, #1a1004 45%, #050505 100%) !important;
}

.theme-cart[b-lo36jistyo] {
    --theme-aura: rgba(132, 204, 22, 0.45);
    background: radial-gradient(circle at 50% 25%, #1e2e07 0%, #0f1704 45%, #050505 100%) !important;
}

.theme-warhammer[b-lo36jistyo] {
    --theme-aura: rgba(244, 180, 195, 0.45);
    background: radial-gradient(circle at 50% 25%, #3f3537 0%, #1f1c1d 45%, #050505 100%) !important;
}

.theme-attack[b-lo36jistyo] {
    --theme-aura: rgba(34, 197, 94, 0.5);
    background: radial-gradient(circle at 50% 25%, #0a3317 0%, #051a0b 45%, #050505 100%) !important;
}
/* ==========================================================================
   MOBILE INTERACTION ANIMATIONS
   ========================================================================== */
@keyframes goldBreath-b-lo36jistyo {
    0%, 100% {
        border-color: rgba(255, 215, 0, 0.35);
    }

    50% {
        border-color: rgba(255, 215, 0, 0.75);
    }
}

@keyframes goldBreathGlow-b-lo36jistyo {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes tapShimmer-b-lo36jistyo {
    0% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg) scale(1) translateZ(0);
    }

    20% {
        transform: translateY(-12px) rotateX(10deg) rotateY(-8deg) scale(1.04) translateZ(0);
    }

    45% {
        transform: translateY(-16px) rotateX(-6deg) rotateY(6deg) scale(1.05) translateZ(0);
    }

    70% {
        transform: translateY(-8px) rotateX(4deg) rotateY(-3deg) scale(1.02) translateZ(0);
    }

    100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg) scale(1) translateZ(0);
    }
}

@keyframes foilSweep-b-lo36jistyo {
    0% {
        background-position: -150% -150%;
        opacity: 0;
    }

    15% {
        opacity: 0.85;
    }

    75% {
        opacity: 0.65;
    }

    100% {
        background-position: 250% 250%;
        opacity: 0;
    }
}

@keyframes memberTapSnap-b-lo36jistyo {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
    }

    40% {
        transform: translateY(-6px) scale(1.012) translateZ(0);
    }

    100% {
        transform: translateY(0) scale(1) translateZ(0);
    }
}

@keyframes memberSensorSweep-b-lo36jistyo {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    12% {
        opacity: 0.85;
    }

    100% {
        transform: translateY(220px);
        opacity: 0;
    }
}

@keyframes memberTrimFlash-b-lo36jistyo {
    0%, 100% {
        opacity: 0.7;
        transform: scaleX(0.6);
    }

    45% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes memberGlowBreath-b-lo36jistyo {
    0%, 100% {
        opacity: 0.22;
    }

    50% {
        opacity: 0.78;
    }
}

@keyframes memberScanPulse-b-lo36jistyo {
    0%, 100% {
        opacity: 0.08;
    }

    50% {
        opacity: 0.24;
    }
}

@keyframes memberTrimIdle-b-lo36jistyo {
    0%, 100% {
        opacity: 0.45;
        transform: scaleX(0.75);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@media (hover: none) {
    @media (prefers-reduced-motion: reduce) {
        .titan-hype-card[b-lo36jistyo],
        .titan-hype-card[b-lo36jistyo]::after {
            animation: none;
        }

        .member-hype-card[b-lo36jistyo]::before,
        .member-hype-card[b-lo36jistyo]::after {
            animation: none;
        }

        .member-hype-card .hologram-scanlines[b-lo36jistyo] {
            animation: none;
        }

        .member-hype-card .laser-rank-trim[b-lo36jistyo] {
            animation: none;
        }
    }

    .titan-hype-card[b-lo36jistyo] {
        animation: goldBreath-b-lo36jistyo 3.5s ease-in-out infinite;
    }

        .titan-hype-card[b-lo36jistyo]::after {
            animation: goldBreathGlow-b-lo36jistyo 3.5s ease-in-out infinite;
        }

    .member-hype-card > *:not(.holo-foil-layer):not(.hologram-scanlines)[b-lo36jistyo] {
        z-index: 1;
    }

    .member-hype-card[b-lo36jistyo]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.16) 0%, transparent 55%);
        opacity: 0.35;
        animation: memberGlowBreath-b-lo36jistyo 3.5s ease-in-out infinite;
    }

    .member-hype-card[b-lo36jistyo]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 0;
        box-shadow: 0 0 20px rgba(255,255,255,0.18);
        border: 1px solid rgba(255, 255, 255, 0.45);
        opacity: 0.28;
        animation: memberGlowBreath-b-lo36jistyo 3.5s ease-in-out infinite;
    }

    .member-hype-card .hologram-scanlines[b-lo36jistyo] {
        animation: memberScanPulse-b-lo36jistyo 4s ease-in-out infinite;
    }

    .member-hype-card .laser-rank-trim[b-lo36jistyo] {
        animation: memberTrimIdle-b-lo36jistyo 3.5s ease-in-out infinite;
    }

    .member-hype-card.is-tapped[b-lo36jistyo]::before,
    .member-hype-card.is-tapped[b-lo36jistyo]::after,
    .member-hype-card.is-tapped .hologram-scanlines[b-lo36jistyo],
    .member-hype-card.is-tapped .laser-rank-trim[b-lo36jistyo] {
        animation-play-state: paused;
    }

    .hype-card-container[b-lo36jistyo] {
        touch-action: manipulation;
    }

    /* mix-blend-mode: color-dodge is costly on mobile — hide foil on touch devices */
    .member-hype-card .holo-foil-layer[b-lo36jistyo] {
        display: none;
    }
}

.titan-hype-card.is-tapped[b-lo36jistyo] {
    animation: tapShimmer-b-lo36jistyo 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    border-color: rgba(255, 215, 0, 0.95) !important;
    box-shadow: 0 25px 40px rgba(0,0,0,0.45), 0 50px 95px rgba(0,0,0,0.9), inset 0 0 30px rgba(255,215,0,0.2), 0 0 40px var(--theme-aura) !important;
}

    .titan-hype-card.is-tapped .holo-foil-layer[b-lo36jistyo] {
        animation: foilSweep-b-lo36jistyo 0.75s ease-out forwards;
    }
/* ==========================================================================
   6. GEAR CARD COMPONENT
   ========================================================================== */
.aot-gear-card[b-lo36jistyo] {
    background: linear-gradient(135deg, rgba(20, 24, 28, 0.85) 0%, rgba(10, 12, 14, 0.95) 100%) !important;
    border: 1px solid var(--aot-border-subtle) !important;
    border-radius: 14px !important;
    padding: 1.5rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

    .aot-gear-card:hover[b-lo36jistyo] {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.03) !important;
    }
    /* Division-specific borders and theme highlights (all-around borders, no corner curve mismatch) */
    .aot-gear-card.gear-theme-mobility[b-lo36jistyo] {
        border-color: rgba(56, 189, 248, 0.15) !important;
    }

        .aot-gear-card.gear-theme-mobility:hover[b-lo36jistyo] {
            border-color: rgba(56, 189, 248, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.08) !important;
        }

        .aot-gear-card.gear-theme-mobility .aot-gear-badge[b-lo36jistyo] {
            background: rgba(56, 189, 248, 0.1) !important;
            border-color: rgba(56, 189, 248, 0.3) !important;
            color: #38bdf8 !important;
        }

    .aot-gear-card.gear-theme-weapon[b-lo36jistyo] {
        border-color: rgba(167, 139, 250, 0.15) !important;
    }

        .aot-gear-card.gear-theme-weapon:hover[b-lo36jistyo] {
            border-color: rgba(167, 139, 250, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(167, 139, 250, 0.08) !important;
        }

        .aot-gear-card.gear-theme-weapon .aot-gear-badge[b-lo36jistyo] {
            background: rgba(167, 139, 250, 0.1) !important;
            border-color: rgba(167, 139, 250, 0.3) !important;
            color: #a78bfa !important;
        }

    .aot-gear-card.gear-theme-heavy-weapon[b-lo36jistyo] {
        border-color: rgba(244, 63, 94, 0.15) !important;
    }

        .aot-gear-card.gear-theme-heavy-weapon:hover[b-lo36jistyo] {
            border-color: rgba(244, 63, 94, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(244, 63, 94, 0.08) !important;
        }

        .aot-gear-card.gear-theme-heavy-weapon .aot-gear-badge[b-lo36jistyo] {
            background: rgba(244, 63, 94, 0.1) !important;
            border-color: rgba(244, 63, 94, 0.3) !important;
            color: #f43f5e !important;
        }

    .aot-gear-card.gear-theme-firearm[b-lo36jistyo] {
        border-color: rgba(251, 146, 60, 0.15) !important;
    }

        .aot-gear-card.gear-theme-firearm:hover[b-lo36jistyo] {
            border-color: rgba(251, 146, 60, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 146, 60, 0.08) !important;
        }

        .aot-gear-card.gear-theme-firearm .aot-gear-badge[b-lo36jistyo] {
            background: rgba(251, 146, 60, 0.1) !important;
            border-color: rgba(251, 146, 60, 0.3) !important;
            color: #fb923c !important;
        }

    .aot-gear-card.gear-theme-artillery[b-lo36jistyo] {
        border-color: rgba(234, 179, 8, 0.15) !important;
    }

        .aot-gear-card.gear-theme-artillery:hover[b-lo36jistyo] {
            border-color: rgba(234, 179, 8, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(234, 179, 8, 0.08) !important;
        }

        .aot-gear-card.gear-theme-artillery .aot-gear-badge[b-lo36jistyo] {
            background: rgba(234, 179, 8, 0.1) !important;
            border-color: rgba(234, 179, 8, 0.3) !important;
            color: #eab308 !important;
        }

    .aot-gear-card.gear-theme-tactical[b-lo36jistyo] {
        border-color: rgba(74, 222, 128, 0.15) !important;
    }

        .aot-gear-card.gear-theme-tactical:hover[b-lo36jistyo] {
            border-color: rgba(74, 222, 128, 0.4) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(74, 222, 128, 0.08) !important;
        }

        .aot-gear-card.gear-theme-tactical .aot-gear-badge[b-lo36jistyo] {
            background: rgba(74, 222, 128, 0.1) !important;
            border-color: rgba(74, 222, 128, 0.3) !important;
            color: #4ade80 !important;
        }

.aot-gear-header[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.aot-gear-title[b-lo36jistyo] {
    font-weight: 900;
    font-size: 1.25rem; /* 20px */
    color: var(--aot-white);
    margin: 0;
    letter-spacing: 0.03em;
}

.aot-gear-badge[b-lo36jistyo] {
    font-size: 0.75rem; /* 12px */
    font-weight: 800;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 2px 8px !important;
    letter-spacing: 0.05em;
}

.aot-gear-tech[b-lo36jistyo] {
    font-size: 0.875rem; /* 14px */
    color: var(--aot-brass); /* Muted gold for tech specifications */
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.875rem;
}

.aot-gear-desc[b-lo36jistyo] {
    font-size: 0.875rem; /* 14px */
    color: var(--aot-text-secondary);
    line-height: 1.5;
    min-height: 50px;
    margin: 0 0 1.25rem 0;
    text-align: justify;
}

@media (max-width: 767.98px) {
    .aot-gear-title[b-lo36jistyo] {
        font-size: 1.1rem; /* 17.6px */
    }

    .aot-gear-tech[b-lo36jistyo] {
        font-size: 0.8125rem; /* 13px */
    }
}

.aot-gear-specs[b-lo36jistyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.8125rem; /* 13px */
    gap: 0.5rem;
}

    .aot-gear-specs div[b-lo36jistyo] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .aot-gear-specs span:first-child[b-lo36jistyo] {
        color: var(--aot-text-muted);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.05em;
        display: block;
    }

    .aot-gear-specs span:last-child[b-lo36jistyo] {
        font-weight: 700;
        display: block;
    }
/* On very small screens stack the two spec blocks vertically so they don't compress */
@media (max-width: 520px) {
    .aot-gear-specs[b-lo36jistyo] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   GEAR + QUOTE — two columns on desktop, stacked on mobile
   ========================================================================== */
.gear-quote-row[b-lo36jistyo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.gear-quote-cell[b-lo36jistyo] {
    width: 100%;
    max-width: none;
    margin: 0;
    flex-direction: column;
    /*display: flex;*/ 
    justify-content: center;
}

@media (max-width: 768px) {
    .gear-quote-row[b-lo36jistyo] {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   7. TIMELINE COMPONENT
   ========================================================================== */
.aot-timeline-box[b-lo36jistyo] {
    background: linear-gradient(135deg, rgba(20, 22, 26, 0.7) 0%, rgba(12, 13, 16, 0.9) 100%) !important;
    padding: 1.25rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--aot-border-subtle) !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.aot-timeline-time[b-lo36jistyo] {
    font-family: inherit; /* standard system sans-serif */
    font-weight: 900;
    color: var(--aot-brass); /* Brass gold */
    font-size: 0.875rem; /* 14px */
    display: block;
    letter-spacing: 0.05em;
}

.aot-timeline-title[b-lo36jistyo] {
    font-weight: 700;
    color: var(--aot-white);
    margin-top: 0.25rem;
    font-size: 0.875rem; /* 14px */
}

.aot-timeline-desc[b-lo36jistyo] {
    opacity: 0.7;
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-size: 0.875rem; /* 14px */
}

/* Timeline connector line between events */
.timeline-connector[b-lo36jistyo] {
    background-color: rgba(255, 215, 0, 0.18) !important;
}

/* Base icon node — replaces raw emoji */
.timeline-icon[b-lo36jistyo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* Catastrophe — Wall breach, red */
.timeline-icon--catastrophe[b-lo36jistyo] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}

/* Battle — First offensive win, amber */
.timeline-icon--battle[b-lo36jistyo] {
    background: rgba(251, 146, 60, 0.18);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.35);
}

/* Recon — Intelligence / scouting, teal */
.timeline-icon--recon[b-lo36jistyo] {
    background: rgba(45, 212, 191, 0.18);
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.35);
}

/* Betrayal — Shock reveal, yellow-orange */
.timeline-icon--betrayal[b-lo36jistyo] {
    background: rgba(234, 179, 8, 0.18);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.35);
}

/* War declaration — Offensive strike, bright red */
.timeline-icon--war[b-lo36jistyo] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.4);
}

/* Rumbling — Apocalyptic, deep orange-red */
.timeline-icon--rumbling[b-lo36jistyo] {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

/* Final battle — Gold crown */
.timeline-icon--final[b-lo36jistyo] {
    background: rgba(212, 175, 55, 0.2);
    color: #dfbb6b;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

/* ==========================================================================
   8. ROUNDED PROGRESS-BLOCKS (used by character stat bars)
   Usage HTML:
   <div class="progress-list">
     <div class="progress-row">
       <div class="progress-meta">
         <div class="progress-label">破壊力 / 規模</div>
         <div class="progress-percent">100%</div>
       </div>
       <div class="progress-bar-track">
         <div class="progress-fill" style="width:100%"></div>
       </div>
     </div>
   </div>
   ========================================================================== */

.progress-list[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.progress-row[b-lo36jistyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.progress-label[b-lo36jistyo] {
    color: #cfc7c0; /* warm light grey */
    font-weight: 700;
    font-size: 0.95rem;
    text-align: left;
    flex: 0 0 28%; /* left label column width */
}

/* percent will be positioned inside the bar, aligned to the right */
.progress-percent[b-lo36jistyo] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #59e0ff; /* cyan default for percent */
    font-weight: 800;
    font-size: 0.95rem;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    pointer-events: none;
}

/* the bar now sits to the right and flexes to fill remaining space */
.progress-bar-track[b-lo36jistyo] {
    position: relative;
    flex: 1 1 auto;
    height: 12px; /* pill height */
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius: 9999px;
    padding: 3px; /* inner breathing room for subtle inset */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 6px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
}

/* ==========================================================================
   WALL GARRISON TACTICAL FEED
   ========================================================================== */
.wall-feed-header[b-lo36jistyo] {
    margin-top: 0.5rem;
    position: relative;
    z-index: 2;
    margin-bottom: -3px; /* pulls the tab strip down to overlap the card's top border */
}

.wall-feed[b-lo36jistyo] {
    position: relative;
    z-index: 1;
}

.wall-feed-container[b-lo36jistyo] {
    padding: 28px;
}

/* ==== Shingled comic-tab strip ==== */
.wall-feed-tabs[b-lo36jistyo] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.wall-feed-tab[b-lo36jistyo] {
    position: relative;
    background: linear-gradient(160deg, rgba(40, 18, 18, 0.92) 0%, rgba(14, 8, 8, 0.97) 100%);
    color: var(--aot-text-secondary);
    border: 3px solid #000000;
    border-bottom: none;
    padding: 0.7rem 2rem 0.7rem 1.15rem;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    box-shadow: 3px -3px 0px #000000;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, color 0.15s ease;
    margin-left: -18px; /* creates the shingle overlap; matches the slant width above */
    z-index: 1;
}
    .wall-feed-tab:first-child[b-lo36jistyo] {
        margin-left: 0;
    }

    /* earlier tabs sit in front by default, like the reference image */
    .wall-feed-tabs .wall-feed-tab:nth-child(1)[b-lo36jistyo] {
        z-index: 5;
    }

    .wall-feed-tabs .wall-feed-tab:nth-child(2)[b-lo36jistyo] {
        z-index: 4;
    }

    .wall-feed-tabs .wall-feed-tab:nth-child(3)[b-lo36jistyo] {
        z-index: 3;
    }

@media (hover: hover) {
    .wall-feed-tab:not(.is-active):hover[b-lo36jistyo] {
        color: #ffffff;
        filter: brightness(1.25);
        transform: translateY(-3px);
    }
}

.wall-feed-tab.is-active[b-lo36jistyo] {
    /* same gradient as .comic-card so the tab visually fuses into the panel below */
    background: radial-gradient(ellipse at 50% 10%, rgba(30, 34, 42, 0.95) 0%, rgba(10, 11, 14, 0.98) 80%);
    color: #ffffff;
    z-index: 10 !important; /* always frontmost, regardless of position */
    box-shadow: 3px -3px 0px #000000, inset 0 3px 0 var(--aot-gold);
    padding-bottom: calc(0.7rem + 3px); /* absorbs the overlap into the card seam */
    margin-bottom: -3px;
}

/* ==== Wall status grid ==== */
.wall-feed-grid[b-lo36jistyo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .wall-feed-grid[b-lo36jistyo] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Comic-card language — same hard border/shadow/halftone recipe as gear-item-card
   and lore-wall-card, so this section reads as part of the same system. */
.wall-feed-node[b-lo36jistyo] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(20, 22, 26, 0.9) 0%, rgba(8, 9, 11, 0.98) 100%);
    border: 3px solid #000000;
    border-radius: 4px;
    box-shadow: 6px 6px 0px #000000;
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .wall-feed-node[b-lo36jistyo]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .wall-feed-node > *[b-lo36jistyo] {
        position: relative;
        z-index: 1;
    }

    .wall-feed-node:hover[b-lo36jistyo] {
        transform: translateY(-2px);
        box-shadow: 6px 6px 0px var(--aot-red);
    }

.wall-feed-node-label[b-lo36jistyo] {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--aot-brass);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: 2px solid #000000;
    border-radius: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.4);
}

.wall-feed-node-name[b-lo36jistyo] {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0.25rem 0 0;
    text-shadow: 2px 2px 0px #000000;
}


.wall-feed-node-desc[b-lo36jistyo] {
    font-size: 0.82rem;
    color: var(--aot-text-secondary);
    line-height: 1.65;
    margin: 0.25rem 0 0;
}

/* ==========================================================================
   ENLISTMENT SECTION
   ========================================================================== */
 
.wall-enlist-desc[b-lo36jistyo] {
    font-size: 0.875rem;
    color: #d1d5db;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

.wall-enlist-grid[b-lo36jistyo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .wall-enlist-grid[b-lo36jistyo] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wall-enlist-card[b-lo36jistyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    text-decoration: none;
}


.wall-enlist-name[b-lo36jistyo] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.35rem;
}

.wall-enlist-tagline[b-lo36jistyo] {
    font-size: 0.6rem !important;
}

.wall-enlist-body[b-lo36jistyo] {
    font-size: 0.8rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 1rem 0 0;
}

.wall-enlist-cta[b-lo36jistyo] {
    margin-top: 1.25rem;
}

/* ==========================================================================
   HISTORY CTA BANNER
   ========================================================================== */
.wall-cta[b-lo36jistyo] {
    width: 100%;
    margin: 1rem auto;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.wall-cta-tag[b-lo36jistyo] {
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: var(--aot-red);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.wall-cta-title[b-lo36jistyo] {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.75rem;
    text-shadow: 2px 2px 0px var(--aot-black);
}

.wall-cta-desc[b-lo36jistyo] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

/* ==========================================================================
   QUOTE WIDGET
   ========================================================================== */
.wall-quote[b-lo36jistyo] {
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .wall-quote[b-lo36jistyo]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
    }

.wall-quote-syslog[b-lo36jistyo] {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--aot-text-muted);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.wall-quote-text[b-lo36jistyo] {
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    font-weight: 700;
    font-style: italic;
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto 0.75rem;
    line-height: 1.5;
    transition: opacity 0.2s ease;
}

.wall-quote-author[b-lo36jistyo] {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.7rem;    
    letter-spacing: 0.1em;
    color: var(--aot-red);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s ease;
}
 
/* small screens: shift to stacked if necessary but keep compact */
@media (max-width: 520px) {
    .progress-meta[b-lo36jistyo] {
        width: 40%;
    }

    .progress-bar-track[b-lo36jistyo] {
        height: 14px;
        padding: 4px;
    }

    .progress-label[b-lo36jistyo], .progress-percent[b-lo36jistyo] {
        font-size: 0.9rem;
    }
}

@media (max-width: 380px) {
    .progress-row[b-lo36jistyo] {
        flex-direction: column;
        align-items: stretch;
    }

    .progress-meta[b-lo36jistyo] {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .progress-bar-track[b-lo36jistyo] {
        width: 100%;
    }
}

/* the fill grows to the width percentage (use inline style width:XX%) */
.progress-fill[b-lo36jistyo] {
    height: 100%;
    border-radius: 9999px;
    width: 60%; /* default, override with inline style width:XX% */
    transition: width 700ms cubic-bezier(0.2,0.9,0.2,1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 -6px 18px rgba(255,255,255,0.03);
}
 
/* color variants */
.progress-fill.blue[b-lo36jistyo] {
    background: linear-gradient(90deg, #29c3ff 0%, #54bfff 40%, #2aa9ff 100%);
}

.progress-fill.pink[b-lo36jistyo] {
    background: linear-gradient(90deg, #ff8ac1 0%, #ff76b9 50%, #ff4fa3 100%);
}

.progress-fill.green[b-lo36jistyo] {
    background: linear-gradient(90deg, #7ef3b2 0%, #3be89a 50%, #17c66f 100%);
}

/* small screens: slightly taller bar for touch */
@media (max-width: 420px) {
    .progress-bar-track[b-lo36jistyo] {
        height: 14px;
        padding: 4px;
    }

    .progress-label[b-lo36jistyo], .progress-percent[b-lo36jistyo] {
        font-size: 0.9rem;
    }
}

/* optional subtle bloom for the percent when full */
.progress-percent.full[b-lo36jistyo] {
    color: #34d399;
}


/* ==========================================================================
   9. MEMBER DOSSIER — character-only accents (shell shared in §5)
   ========================================================================== */



/* Character cards stay neutral white/gray chrome — rank color lives only on the small
   rank badge (.member-rank-badge.rank-*), not the card border/glow/foil. Gold is titan-only. */


.member-hype-card.is-tapped[b-lo36jistyo] {
    animation: memberTapSnap-b-lo36jistyo 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.member-hype-card.is-tapped .member-tap-sweep[b-lo36jistyo] {
    animation: memberSensorSweep-b-lo36jistyo 0.42s ease-out forwards;
}

.member-hype-card.is-tapped .laser-rank-trim[b-lo36jistyo] {
    animation: memberTrimFlash-b-lo36jistyo 0.42s ease-out forwards;
}

.member-hype-card.is-tapped .member-rank-badge[b-lo36jistyo] {
    animation: memberBadgePing-b-lo36jistyo 0.42s ease-out forwards;
}

@keyframes memberBadgePing-b-lo36jistyo {
    0%, 100% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }
}

/* Styles handled by comic-badge now */

.member-rank-badge.rank-s[b-lo36jistyo] {
    border-color: #000000;
}

.member-rank-badge.rank-a-plus[b-lo36jistyo] {
    border-color: #000000;
}

.member-rank-badge.rank-a[b-lo36jistyo] {
    border-color: #000000;
}

/* Some styles handled by comic-badge, but retain pulse animation */
.titan-shifter-badge[b-lo36jistyo] {
    animation: titanPulse-b-lo36jistyo 2.4s ease-in-out infinite;
}

@keyframes titanPulse-b-lo36jistyo {
    0%, 100% {
        box-shadow: 0 0 4px rgba(251,191,36,0.3);
    }

    50% {
        box-shadow: 0 0 12px rgba(251,191,36,0.7);
    }
}

.member-display-name[b-lo36jistyo] {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--aot-white);
    margin: 0 0 2px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.member-display-title[b-lo36jistyo] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--aot-brass);
    letter-spacing: 0.02em;
}

.member-ability-row[b-lo36jistyo] {
    margin-top: 8px;
    margin-bottom: 8px;
    position: relative;
    z-index: 10;
}

/* Styles moved to .comic-tag in app.css */

@media (max-width: 767.98px) {
    .member-display-name[b-lo36jistyo] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/LoreMaps.razor.rz.scp.css */
/* ==========================================
   LORE & MAPS PAGE — Scoped Styles
   Rides on the global comic-panel system (comic-card / comic-frame /
   comic-badge / aot-btn, all defined in app.css) so this page matches
   Story & Timeline, Characters, and Manga 1:1 instead of its own
   soft-glass look. NO :root variables per AGENTS.md rules.
   ========================================== */

.aot-page-container[b-a4dylazd94] {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* ── Header — mirrors StoryTimeline's .aot-story-header exactly (borderless
   halftone panel) so the two hub pages read as one system ── */
.lore-header[b-a4dylazd94] {
    text-align: center;
    padding: 1.25rem 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

    .lore-header[b-a4dylazd94]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
    }

    .lore-header > *[b-a4dylazd94] {
        position: relative;
        z-index: 1;
    }

.lore-page-title[b-a4dylazd94] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
    text-shadow: 3px 3px 0px var(--aot-black);
}

.lore-page-subtitle[b-a4dylazd94] {
    font-size: 0.9rem;
    color: #d1d5db;
    /*max-width: 640px;*/
    margin: 0 auto 1.5rem auto;
    line-height: 1.6;
}

/* ── Tab Switcher — identical structure/behavior to StoryTimeline's
   .aot-tab-switcher / .aot-tab-btn, riding on the global .aot-btn
   hard-shadow button system instead of a bespoke soft pill ── */
.lore-tab-switcher[b-a4dylazd94] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.lore-tab-btn[b-a4dylazd94] {
    background-color: var(--aot-white);
    color: var(--aot-black);
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--aot-btn-radius);
    display: flex;
    align-items: center;
    gap: 8px;
    /* border / box-shadow / hover / active all come from the global .aot-btn
       class this element also carries in markup — don't redeclare them here */
}

    .lore-tab-btn i[b-a4dylazd94] {
        font-size: 1rem;
    }

    .lore-tab-btn:not(.active)[b-a4dylazd94] {
        background-color: transparent;
        color: var(--aot-text-secondary);
    }

    .lore-tab-btn.active[b-a4dylazd94] {
        background-color: var(--aot-gold) !important;
        color: var(--aot-black) !important;
    }

/* ── Section Intro ── */

.lore-section-intro[b-a4dylazd94] {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.7;
    /*max-width: 720px;*/
    margin: 0 auto 2rem auto;
    text-align: center;
}

/* ── Shared Detail Row ── */

.lore-detail-row[b-a4dylazd94] {
    margin-bottom: 0.75rem;
}

.lore-detail-label[b-a4dylazd94] {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--aot-brass);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.lore-detail-value[b-a4dylazd94] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.5;
    margin: 0;
}


/* ============================================
   TAB 0 — NINE TITANS
   ============================================ */

.lore-titans-grid[b-a4dylazd94] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .lore-titans-grid[b-a4dylazd94] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lore-titans-grid[b-a4dylazd94] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Titan Card — carries global "comic-card" in markup for border/shadow/hover;
   this file only adds the halftone overlay + layout, same pattern used by
   manga-chapter-card and author-panel. */
.lore-titan-card[b-a4dylazd94] {
    position: relative;
    cursor: pointer;
}

    .lore-titan-card[b-a4dylazd94]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .lore-titan-card > *[b-a4dylazd94] {
        position: relative;
        z-index: 1;
    }

    /* Expanded state overrides comic-card's default border/shadow to stay
       permanently "hot" (red) instead of only on hover */
    .lore-titan-card.is-expanded[b-a4dylazd94] {
        border-color: var(--aot-red) !important;
        box-shadow: 6px 6px 0px var(--aot-red), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    }

/* Badge overlay — same hard-border black-circle language as the
   Characters page's multiform indicator, not a blurred glass chip */
.lore-titan-badge-wrap[b-a4dylazd94] {
    /*position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--aot-black);
    border: 2px solid var(--aot-black);
    box-shadow: 2px 2px 0px var(--aot-red);
    display: flex;
    align-items: center;
    justify-content: center;
*/
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aot-red);
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

.lore-titan-badge-img[b-a4dylazd94] {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Art frame */
.lore-titan-art-frame[b-a4dylazd94] {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom: 3px solid var(--aot-black);
}

.lore-titan-art[b-a4dylazd94] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.4s ease;
}

.lore-titan-card:hover .lore-titan-art[b-a4dylazd94] {
    transform: scale(1.05);
}

.lore-titan-art-overlay[b-a4dylazd94] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, transparent 60%);
}

/* Info strip */
.lore-titan-info[b-a4dylazd94] {
    padding: 1rem 1.25rem 0.75rem;
}

.lore-titan-name[b-a4dylazd94] {
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 0.15rem 0;
    line-height: 1.3;
    text-shadow: 2px 2px 0px var(--aot-black);
}

.lore-titan-height[b-a4dylazd94] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--aot-brass);
}

/* Expandable details — hard divider instead of a soft gold hairline */
.lore-titan-details[b-a4dylazd94] {
    padding: 0 1.25rem 1.25rem;
    border-top: 2px solid var(--aot-black);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    animation: detailsSlideIn-b-a4dylazd94 0.25s ease;
}

@keyframes detailsSlideIn-b-a4dylazd94 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lore-titan-desc[b-a4dylazd94] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0.5rem 0 0 0;
}

@media (max-width: 640px) {
    .lore-titan-desc[b-a4dylazd94],
    .lore-detail-value[b-a4dylazd94] {
        font-size: 0.9rem;
    }
}


/* ============================================
   TAB 1 — THREE WALLS
   ============================================ */

.wall-diagram-container[b-a4dylazd94] {
    display: flex;
    justify-content: center;
    padding: 2rem 0 2.5rem;
}

.wall-ring[b-a4dylazd94] {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.3s ease;
}

.wall-maria-ring[b-a4dylazd94] {
    width: 320px;
    height: 320px;
    border: 3px solid var(--aot-red);
    background: rgba(239, 68, 68, 0.06);
}

.wall-rose-ring[b-a4dylazd94] {
    width: 220px;
    height: 220px;
    border: 3px solid #fb923c;
    background: rgba(251, 146, 60, 0.06);
}

.wall-sina-ring[b-a4dylazd94] {
    width: 130px;
    height: 130px;
    border: 3px solid var(--aot-gold);
    background: rgba(250, 204, 21, 0.08);
}

.wall-ring-label[b-a4dylazd94] {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 1px 1px 0px var(--aot-black);
}

.wall-maria-ring > .wall-ring-label[b-a4dylazd94] {
    color: #fca5a5;
}

.wall-rose-ring > .wall-ring-label[b-a4dylazd94] {
    color: #fdba74;
}

.wall-sina-ring > .wall-ring-label[b-a4dylazd94] {
    color: var(--aot-gold);
}

.wall-center[b-a4dylazd94] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--aot-black);
    border: 2px solid var(--aot-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wall-center-label[b-a4dylazd94] {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--aot-gold);
    letter-spacing: 0.05em;
}

@media (max-width: 400px) {
    .wall-maria-ring[b-a4dylazd94] {
        width: 260px;
        height: 260px;
    }

    .wall-rose-ring[b-a4dylazd94] {
        width: 180px;
        height: 180px;
    }

    .wall-sina-ring[b-a4dylazd94] {
        width: 110px;
        height: 110px;
    }

    .wall-center[b-a4dylazd94] {
        width: 40px;
        height: 40px;
    }

    .wall-ring-label[b-a4dylazd94] {
        font-size: 0.6rem;
    }
}

/* Wall Info Cards — carry global "comic-card" in markup */
.lore-walls-stack[b-a4dylazd94] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lore-wall-card[b-a4dylazd94] {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

    .lore-wall-card[b-a4dylazd94]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .lore-wall-card > *[b-a4dylazd94] {
        position: relative;
        z-index: 1;
    }

.lore-wall-header[b-a4dylazd94] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.lore-wall-name[b-a4dylazd94] {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 0px var(--aot-black);
}

.lore-wall-diameter[b-a4dylazd94] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--aot-brass);
}

.lore-wall-desc[b-a4dylazd94] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.lore-wall-districts[b-a4dylazd94] {
    border-top: 2px solid var(--aot-black);
    padding-top: 0.75rem;
}

@media (max-width: 640px) {
    .lore-wall-desc[b-a4dylazd94] {
        font-size: 0.9rem;
    }
}


/* ============================================
   TAB 2 — FACTIONS
   ============================================ */

.lore-factions-grid[b-a4dylazd94] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .lore-factions-grid[b-a4dylazd94] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lore-factions-grid[b-a4dylazd94] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lore-faction-card[b-a4dylazd94] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

    .lore-faction-card[b-a4dylazd94]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .lore-faction-card > *[b-a4dylazd94] {
        position: relative;
        z-index: 1;
    }

/* Icon chip — hard border/shadow gold tile, matches comic-badge language */
.lore-faction-icon-wrap[b-a4dylazd94] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--aot-gold);
    border: 2px solid var(--aot-black);
    box-shadow: 2px 2px 0px var(--aot-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.lore-faction-icon[b-a4dylazd94] {
    font-size: 1.35rem;
    color: var(--aot-black);
}

.lore-faction-name[b-a4dylazd94] {
    font-size: 1.125rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    text-shadow: 2px 2px 0px var(--aot-black);
}

.lore-faction-desc[b-a4dylazd94] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.lore-faction-members[b-a4dylazd94] {
    border-top: 2px solid var(--aot-black);
    padding-top: 0.75rem;
}
.lore-faction-members-list[b-a4dylazd94] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.lore-member-tag[b-a4dylazd94] {
    
    border: 2px solid var(--aot-black);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    a.lore-member-tag:hover[b-a4dylazd94] {
        background: var(--aot-red);
        color: var(--aot-white);
        border-color: var(--aot-black);
        transform: translateY(-2px);
        box-shadow: 3px 3px 0px var(--aot-black);
    }

    button.lore-member-tag:hover[b-a4dylazd94] {
        background: var(--aot-red);
        color: var(--aot-white);
        border-color: var(--aot-black);
        transform: translateY(-2px);
        box-shadow: 3px 3px 0px var(--aot-black);
    }
}

.lore-member-tag.is-plain[b-a4dylazd94] {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 640px) {
    .lore-faction-desc[b-a4dylazd94] {
        font-size: 0.9rem;
    }
}


/* ============================================
   TAB 3 — THE PATHS
   ============================================ */

/* Carries global "comic-card" in markup — this file adds the halftone
   overlay + the decorative tree, same nesting pattern as author-panel */
.lore-paths-section[b-a4dylazd94] {
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

    .lore-paths-section[b-a4dylazd94]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

 
 

@keyframes pathsPulse-b-a4dylazd94 {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1.06);
    }
}

.paths-content[b-a4dylazd94] {
    position: relative;
    z-index: 1;
    /*max-width: 680px;*/
    margin: 0 auto;
    text-align: center;
}

.paths-title[b-a4dylazd94] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.12em;
    margin: 0 0 0.5rem 0;
    text-shadow: 3px 3px 0px var(--aot-black);
}

.paths-subtitle[b-a4dylazd94] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--aot-brass);
    margin: 0 0 1.5rem 0;
}

.paths-body[b-a4dylazd94] {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.paths-details-grid[b-a4dylazd94] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .paths-details-grid[b-a4dylazd94] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Nested sub-panels — hard-border comic-frame look, not comic-card
   themselves (same nesting rule .aot-timeline-box uses inside
   .aot-timeline-card: sub-panels get a flatter inset treatment) */
.paths-detail-card[b-a4dylazd94] {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--aot-black);
    border-radius: 6px;
    padding: 1.25rem;
    text-align: left;
    box-shadow: 3px 3px 0px var(--aot-black);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .paths-detail-card:hover[b-a4dylazd94] {
        box-shadow: 3px 3px 0px var(--aot-red);
        transform: translateY(-2px);
    }

.paths-detail-icon[b-a4dylazd94] {
    font-size: 1.5rem;
    color: var(--aot-gold);
    margin-bottom: 0.75rem;
    display: block;
}

.paths-detail-title[b-a4dylazd94] {
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.paths-detail-desc[b-a4dylazd94] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .lore-paths-section[b-a4dylazd94] {
        padding: 1rem 1.25rem;
    }

    .paths-body[b-a4dylazd94],
    .paths-detail-desc[b-a4dylazd94] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/MilitaryTacticalGear.razor.rz.scp.css */
.aot-page-container[b-9zkh8ss7aw] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* ==== HEADER — comic panel treatment, matches Lore/Story hub headers ==== */
.gear-page-header[b-9zkh8ss7aw] {
    /* background: linear-gradient(135deg, rgba(20, 22, 26, 0.9), rgba(10, 10, 10, 0.98));
    border: 3px solid #000000;
    border-radius: 3px;
    box-shadow: 6px 6px 0px #000000, 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 2rem;*/
    text-align: center;
    margin-bottom: 1.2rem;
    position: relative;
    overflow: hidden;
}

    .gear-page-header[b-9zkh8ss7aw]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
    }

    .gear-page-header > *[b-9zkh8ss7aw] {
        position: relative;
        z-index: 1;
    }

.gear-page-title[b-9zkh8ss7aw] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.14em;
    margin: 0 0 0.6rem 0;
    text-shadow: 3px 3px 0px #000000;
}

.gear-page-subtitle[b-9zkh8ss7aw] {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0;
     
}

/* ==== GRID ==== */
.gear-grid-container[b-9zkh8ss7aw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* ==== CARD — comic-card hard-shadow language ==== */
.gear-item-card[b-9zkh8ss7aw] {
    --card-accent: #dfbb6b;
    border: 3px solid #000000;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(20, 22, 26, 0.9) 0%, rgba(8, 9, 11, 0.98) 100%);
    box-shadow: 6px 6px 0px #000000;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .gear-item-card[b-9zkh8ss7aw]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .gear-item-card > *[b-9zkh8ss7aw] {
        position: relative;
        z-index: 1;
    }

    .gear-item-card:hover[b-9zkh8ss7aw] {
        transform: translateY(-2px);
        box-shadow: 6px 6px 0px var(--card-accent);
    }

    /* Division theming — uniform accent colour drives badge + hover shadow only,
       matches Home.razor.css's theme-* naming (razor emits "theme-mobility" etc,
       not "gear-theme-mobility") */
    .gear-item-card.theme-mobility[b-9zkh8ss7aw] {
        --card-accent: #38bdf8;
    }

    .gear-item-card.theme-weapon[b-9zkh8ss7aw] {
        --card-accent: #a78bfa;
    }

    .gear-item-card.theme-heavy-weapon[b-9zkh8ss7aw] {
        --card-accent: #f43f5e;
    }

    .gear-item-card.theme-firearm[b-9zkh8ss7aw] {
        --card-accent: #fb923c;
    }

    .gear-item-card.theme-artillery[b-9zkh8ss7aw] {
        --card-accent: #eab308;
    }

    .gear-item-card.theme-tactical[b-9zkh8ss7aw] {
        --card-accent: #4ade80;
    }

/* ==== HEADER ROW — badge pinned to its own line, title full line below ==== */
.gear-card-header[b-9zkh8ss7aw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gear-badge-accent[b-9zkh8ss7aw] {
    order: -1;
    align-self: flex-end;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 900;
    color: #000000;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--card-accent);
    border: 2px solid #000000;
    border-radius: 4px;
    padding: 3px 8px;
    box-shadow: 2px 2px 0px #000000;
}

/* Tier 1 — Title */
.gear-item-title[b-9zkh8ss7aw] {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    width: 100%;
}

/* Tier 2 — Subtitle / Tech */
.gear-item-tech[b-9zkh8ss7aw] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #dfbb6b;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

/* ==== Blueprint placeholder ==== */
.gear-image-container[b-9zkh8ss7aw] {
    width: 100%;
    height: 160px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

    .gear-image-container[b-9zkh8ss7aw]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        background-size: 100% 4px, 6px 100%;
        opacity: 0.4;
        pointer-events: none;
    }

.gear-placeholder-icon[b-9zkh8ss7aw] {
    font-size: 2rem;
    color: #dfbb6b;
    opacity: 0.55;
    margin-bottom: 0.5rem;
    animation: gearPulse-b-9zkh8ss7aw 2s infinite ease-in-out;
}

.gear-placeholder-text[b-9zkh8ss7aw] {
    font-size: 0.72rem;
    color: #9ca3af;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@keyframes gearPulse-b-9zkh8ss7aw {
    0%, 100% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.8;
    }
}

/* Tier 3 — Body */
.gear-item-desc[b-9zkh8ss7aw] {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.gear-divider[b-9zkh8ss7aw] {
    height: 2px;
    background-color: #000000;
    opacity: 0.5;
    margin: 1rem 0;
}

/* ==== Specs — label on its own line, value on the next ==== */
.gear-specs-row[b-9zkh8ss7aw] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

    .gear-specs-row > div[b-9zkh8ss7aw] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

.spec-label[b-9zkh8ss7aw] {
    display: block;
    font-size: 0.68rem;
    color: #dfbb6b;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.spec-value[b-9zkh8ss7aw] {
    display: block;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 700;
}

.spec-value-risk[b-9zkh8ss7aw] {
    display: block;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.risk-critical[b-9zkh8ss7aw] {
    color: #ef4444;
}

.risk-high[b-9zkh8ss7aw] {
    color: #f97316;
}

@media (max-width: 520px) {
    .gear-specs-row[b-9zkh8ss7aw] {
        flex-direction: column;
        gap: 0.6rem;
    }
}
/* /Components/Pages/StoryTimeline.razor.rz.scp.css */
.aot-page-container[b-8aaq7ysf1q] {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Header style */
.aot-story-header[b-8aaq7ysf1q] {
    text-align: center;
    padding: 1.25rem 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

    .aot-story-header[b-8aaq7ysf1q]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
    }

    .aot-story-header > *[b-8aaq7ysf1q] {
        position: relative;
        z-index: 1;
    }

.aot-page-title[b-8aaq7ysf1q] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
    text-shadow: 3px 3px 0px var(--aot-black);
}

.aot-page-subtitle[b-8aaq7ysf1q] {
    font-size: 0.9rem;
    color: #d1d5db;
    /* max-width: 600px; */
    margin: 0 auto 1.5rem auto;
    line-height: 1.6;
}

/* Tab switcher — was a soft pill; now plain black-bordered comic buttons,
   riding on the existing .aot-btn hard-shadow system already in app.css */
.aot-tab-switcher[b-8aaq7ysf1q] {
    display: inline-flex;
    gap: 0.5rem;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
}

.aot-tab-btn[b-8aaq7ysf1q] {
    background-color: var(--aot-white);
    color: var(--aot-black);
    padding: 0.6rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--aot-btn-radius);
    display: flex;
    align-items: center;
    gap: 8px;
    /* border/box-shadow/hover already come from .aot-btn — don't fight it here */
}

    .aot-tab-btn i[b-8aaq7ysf1q] {
        font-size: 1rem;
    }

    .aot-tab-btn:not(.active)[b-8aaq7ysf1q] {
        background-color: transparent;
        color: var(--aot-text-secondary);
    }

    .aot-tab-btn.active[b-8aaq7ysf1q] {
        background-color: var(--aot-gold) !important;
        color: var(--aot-black) !important;
    }

/* Story Grid */
.aot-story-grid[b-8aaq7ysf1q] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .aot-story-grid[b-8aaq7ysf1q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .aot-story-grid[b-8aaq7ysf1q] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Premium Story Card */
.aot-arc-card[b-8aaq7ysf1q] {
    padding: 0.15rem;
    position: relative;
}

/* Card Visual Hierarchy (3-Tier) */
.aot-arc-vol[b-8aaq7ysf1q] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #dfbb6b; /* Subtitle - Warm gold */
    margin-bottom: 0.25rem;
}

.aot-arc-title[b-8aaq7ysf1q] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff; /* Title - Bright white */
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.aot-arc-desc[b-8aaq7ysf1q] {
    font-size: 0.875rem;
    color: #d1d5db; /* Body - Neutral light grey */
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

@media (max-width: 640px) {
    .aot-arc-desc[b-8aaq7ysf1q] {
        font-size: 0.9rem; /* CJK Readability on mobile */
    }
}

/* Timeline specific styles (mirrored from Home.razor.css details) */
.aot-timeline-container[b-8aaq7ysf1q] {
    /*padding: 0.25rem 0.25rem;*/
    position: relative;
}

/* Per-event boxes — flatter inset sub-panel, not a second thick comic-card
   (nesting two hard-bordered cards looks heavy) */
.aot-timeline-box[b-8aaq7ysf1q] {
    background: rgba(0, 0, 0, 0.35) !important;
    padding: 1.20rem !important;
    border-radius: 8px !important;
    border: 2px solid var(--aot-black) !important;
    box-shadow: 3px 3px 0px var(--aot-black) !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

    .aot-timeline-box:hover[b-8aaq7ysf1q] {
        box-shadow: 3px 3px 0px var(--aot-red) !important;
        transform: translateY(-2px);
    }

.timeline-icon[b-8aaq7ysf1q] {
    border: 2px solid var(--aot-black) !important;
    box-shadow: 2px 2px 0px var(--aot-black);
}



.aot-timeline-title[b-8aaq7ysf1q] {
    font-weight: 700;
    color: #ffffff;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.aot-timeline-desc[b-8aaq7ysf1q] {
    opacity: 0.7;
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.timeline-connector[b-8aaq7ysf1q] {
    background-color: rgba(123, 123, 123, 0.28) !important;
}

/* Base icon node — now shows the event's Year as text, so it's a pill (auto width)
   rather than a fixed circle, and pinned to the top of the row so it lines up with
   the box's first line instead of floating at the box's vertical center. */
.timeline-icon[b-8aaq7ysf1q] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-width: 5.0rem;
    width: auto;
    height: 2.00rem;
    padding: 0 0.6rem;
    border-radius: 5px;
    font-size: 0.60rem;
    font-weight: 800;
    color:#000;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}


.timeline-icon--catastrophe[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.35);
}

.timeline-icon--battle[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(251, 146, 60, 0.35);
}

.timeline-icon--recon[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(45, 212, 191, 0.35);
}

.timeline-icon--betrayal[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(234, 179, 8, 0.35);
}

.timeline-icon--war[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.4);
}

.timeline-icon--rumbling[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.5);
}

.timeline-icon--final[b-8aaq7ysf1q] {
    background: #ffffff;
    border-color: rgba(212, 175, 55, 0.5);
}

/* Fan-out only on devices that actually hover — avoids a stuck effect on tap */
@media (hover: hover) {
    .aot-arc-card:hover[b-8aaq7ysf1q] {
        z-index: 1; /* sit above neighboring grid cards while fanned out */
    }

        .aot-arc-card:hover[b-8aaq7ysf1q]::before {
            opacity: 1;
            transform: translate(-14px, 10px) rotate(-6deg);
        }

        .aot-arc-card:hover[b-8aaq7ysf1q]::after {
            opacity: 1;
            transform: translate(14px, 12px) rotate(7deg);
        }
}

/* The actual visible card — comic-card gives it border/shadow/hover-red */
.aot-arc-card-face[b-8aaq7ysf1q] {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clips the halftone texture below to the rounded corners */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .aot-arc-card-face[b-8aaq7ysf1q]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 16%);
        background-size: 8px 8px;
        opacity: 0.85;
        z-index: 0;
    }

    .aot-arc-card-face > *[b-8aaq7ysf1q] {
        position: relative;
        z-index: 1;
    }

@media (hover: hover) {
    .aot-arc-card:hover .aot-arc-card-face[b-8aaq7ysf1q] {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aot-arc-card[b-8aaq7ysf1q]::before,
    .aot-arc-card[b-8aaq7ysf1q]::after {
        transition: none;
    }
}

/* ==========================================================================
   TIMELINE CARD ENRICHMENT — significance badge, type tag, manga ref link
   ========================================================================== */
.aot-timeline-box-top[b-8aaq7ysf1q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.aot-timeline-sig[b-8aaq7ysf1q] {
    font-size: 0.65rem !important;
    gap: 3px;
    flex-shrink: 0;
}

    .aot-timeline-sig i[b-8aaq7ysf1q] {
        font-size: 0.6rem;
    }

.aot-timeline-type[b-8aaq7ysf1q] {
    display: inline-block;
    margin: 0.4rem 0 0.65rem;
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
}

.aot-timeline-mangaref[b-8aaq7ysf1q] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-top: 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #878170;
    letter-spacing: 0.04em;
}

.aot-timeline-mangalink[b-8aaq7ysf1q] {
    margin-top: 0.65rem;
}

/* Era section headers reuse the global .manga-arc-title class (defined in app.css) —
   no new CSS needed, keeps this in visual lockstep with Manga.razor's arc shelves. */
.aot-timeline-era-list[b-8aaq7ysf1q] {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   CURSE OF YMIR — deep-dive lore panel
   ========================================================================== */
.curse-panel-inner[b-8aaq7ysf1q] {
    padding: 1.75rem 2rem;
    position: relative;
}

.curse-panel-title[b-8aaq7ysf1q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 0px var(--aot-black);
}

    .curse-panel-title i[b-8aaq7ysf1q] {
        color: var(--aot-gold);
    }

.curse-intro[b-8aaq7ysf1q] {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.7;
    margin: 0.75rem 0 1.5rem;
}

.curse-facts-grid[b-8aaq7ysf1q] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .curse-facts-grid[b-8aaq7ysf1q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.curse-fact-row[b-8aaq7ysf1q] {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    box-shadow: 3px 3px 0px #000000;
}

.curse-fact-label[b-8aaq7ysf1q] {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    color: #dfbb6b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.curse-fact-value[b-8aaq7ysf1q] {
    font-size: 0.85rem;
    color: #d1d5db;
    line-height: 1.55;
    margin: 0;
}

.curse-table-title[b-8aaq7ysf1q] {
    font-size: 0.95rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.curse-table-wrap[b-8aaq7ysf1q] {
    overflow-x: auto;
}

.curse-table[b-8aaq7ysf1q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

    .curse-table th[b-8aaq7ysf1q],
    .curse-table td[b-8aaq7ysf1q] {
        padding: 0.55rem 0.75rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        white-space: nowrap;
    }

    .curse-table th[b-8aaq7ysf1q] {
        color: #dfbb6b;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.7rem;
    }

    .curse-table td[b-8aaq7ysf1q] {
        color: #d1d5db;
    }

@media (max-width: 640px) {
    .curse-panel-inner[b-8aaq7ysf1q] {
        padding: 1.5rem 1.25rem;
    }

    .curse-table[b-8aaq7ysf1q] {
        font-size: 0.78rem;
    }
}