/*
 * Adventure Engine internal-page card system.
 * The Home is the visual source of truth. This stylesheet is intentionally loaded
 * after page-specific CSS so application screens reuse one surface geometry instead
 * of maintaining competing card designs.
 */

:root{
    --er-home-card-border:rgba(218,172,78,.18);
    --er-home-card-border-hover:rgba(218,172,78,.34);
    --er-home-card-bg:
        radial-gradient(circle at 10% 0,rgba(214,166,70,.045),transparent 36%),
        linear-gradient(145deg,rgba(13,16,21,.64),rgba(5,8,11,.56));
    --er-home-card-bg-strong:
        radial-gradient(circle at 12% 0,rgba(214,166,70,.06),transparent 34%),
        linear-gradient(145deg,rgba(12,16,22,.72),rgba(5,8,11,.64));
    --er-home-card-shadow:0 18px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.014);
    --er-home-card-shadow-hover:0 24px 62px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.018);
    --er-home-card-radius:18px;
    --er-home-card-blur:blur(7px) saturate(108%);
}

/* One shell rhythm for non-game application pages. */
body:not(.er-home-page) :where(
    .er-library,
    .er-character-library,
    .er-character-editor,
    .er-pricing-shell,
    .er-account-shell,
    .er-auth-shell,
    .er-ai-config,
    .er-audio-lib
){
    width:min(1380px,calc(100% - 40px))!important;
    margin:24px auto 64px!important;
    padding-top:0!important;
}

/* Home card surface, reused by explicit application-page components. */
body:not(.er-home-page) :where(
    .er-setup .er-card,
    .er-library__head,
    .er-library__imagination,
    .er-storyline,
    .er-tree-card,
    .er-game-card,
    .er-graph-stat,
    .er-graph-loading,
    .er-empty,
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-character-library__empty,
    .er-character-card,
    .er-character-editor__section,
    .er-character-editor__footer,
    .er-pricing-head,
    .er-pricing-card,
    .er-account-head,
    .er-account-card,
    .er-auth-intro,
    .er-auth-card,
    .er-billing-hero,
    .er-ai-config__hero,
    .er-ai-config__card,
    .er-ai-config__footer,
    .er-audio-add,
    .er-audio-card
){
    border:1px solid var(--er-home-card-border)!important;
    border-radius:var(--er-home-card-radius)!important;
    background:var(--er-home-card-bg)!important;
    box-shadow:var(--er-home-card-shadow)!important;
    -webkit-backdrop-filter:var(--er-home-card-blur)!important;
    backdrop-filter:var(--er-home-card-blur)!important;
}

body:not(.er-home-page) :where(
    .er-library__head,
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-pricing-head,
    .er-account-head,
    .er-billing-hero,
    .er-ai-config__hero
){
    background:var(--er-home-card-bg-strong)!important;
}

/* Internal page headers are cards, not billboard-sized heroes. */
body:not(.er-home-page) :where(
    .er-library__head,
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-pricing-head,
    .er-account-head,
    .er-ai-config__hero
){
    min-height:0!important;
    margin:0 0 18px!important;
    padding:26px 28px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:26px!important;
    overflow:hidden;
}

/* Remove page-specific decorative machinery that made the archive look like a second hero. */
body:not(.er-home-page) .er-library__head::before,
body:not(.er-home-page) .er-library__head::after{
    content:none!important;
    display:none!important;
    animation:none!important;
}

body:not(.er-home-page) :where(
    .er-library__head,
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-pricing-head,
    .er-account-head,
    .er-ai-config__hero
) h1{
    margin:.28rem 0 .55rem!important;
    max-width:900px!important;
    font-size:clamp(2.15rem,4.25vw,4rem)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
}

body:not(.er-home-page) :where(
    .er-library__head,
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-pricing-head,
    .er-account-head,
    .er-ai-config__hero
) p{
    max-width:880px!important;
    margin:0!important;
    font-size:clamp(.92rem,1.08vw,1rem)!important;
    line-height:1.58!important;
}

/* Audio uses the same shell/card scale without inventing a second hero. */
.er-audio-lib>small{
    display:block;
    margin-bottom:5px;
    color:#dfc481!important;
    font-size:.72rem!important;
    font-weight:900!important;
    letter-spacing:.17em!important;
    text-transform:uppercase;
}
.er-audio-lib>h1{
    margin:.2rem 0 .5rem!important;
    font-size:clamp(2.15rem,4.25vw,4rem)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
}
.er-audio-lib__intro{
    max-width:880px!important;
    margin:0 0 18px!important;
    color:#b5bec8!important;
    font-size:clamp(.92rem,1.08vw,1rem)!important;
    line-height:1.58!important;
}
.er-audio-add{padding:22px!important;margin:18px 0!important}
.er-audio-card{
    position:relative;
    overflow:hidden;
    padding:18px!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.er-audio-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:38%;
    height:1px;
    background:linear-gradient(90deg,#c9a45f,transparent);
    opacity:.58;
    pointer-events:none;
}
.er-audio-card:hover{
    transform:translateY(-3px)!important;
    border-color:var(--er-home-card-border-hover)!important;
    box-shadow:var(--er-home-card-shadow-hover)!important;
}

/* Archive toolbar and summary use the Home compact-card proportions. */
.er-library__toolbar{
    gap:14px!important;
    margin:0 0 14px!important;
}

.er-library__tabs{
    padding:5px!important;
    border:1px solid var(--er-home-card-border)!important;
    border-radius:14px!important;
    background:rgba(5,8,11,.46)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
}

.er-graph-summary{
    gap:12px!important;
    margin:0 0 18px!important;
}

.er-graph-stat{
    min-height:96px!important;
    padding:16px 18px!important;
}

.er-graph-stat::before,
.er-character-card::before,
.er-pricing-card::before,
.er-ai-config__card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:38%;
    height:1px;
    background:linear-gradient(90deg,#c9a45f,transparent);
    opacity:.58;
    pointer-events:none;
}

.er-graph-stat::after{opacity:.48!important}
.er-graph-stat small{font-size:.7rem!important;color:#9ba5af!important}
.er-graph-stat strong{margin-top:7px!important;font-size:1.55rem!important;color:#f0d69a!important}
.er-graph-stat span{margin-top:7px!important;font-size:.76rem!important;color:#8f99a4!important}

/* The story graph stays special functionally, but its containers are Home cards. */
.er-storyline{
    overflow:hidden;
    box-shadow:var(--er-home-card-shadow)!important;
}
.er-storyline::before{opacity:.28!important}
.er-storyline__head{
    padding:16px 20px!important;
    border-bottom:1px solid rgba(255,255,255,.065)!important;
    background:rgba(5,8,11,.34)!important;
}
.er-tree-card,
.er-game-card,
.er-character-card,
.er-pricing-card,
.er-ai-config__card{
    position:relative;
    overflow:hidden;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.er-tree-card:hover,
.er-game-card:hover,
.er-character-card:hover,
.er-pricing-card:hover,
.er-ai-config__card:hover{
    transform:translateY(-3px)!important;
    border-color:var(--er-home-card-border-hover)!important;
    box-shadow:var(--er-home-card-shadow-hover)!important;
}
.er-tree-card.is-context{opacity:.72!important}
.er-tree-card.is-union{border-color:rgba(180,123,209,.28)!important}

/* Nested facts should be quiet, not separate translucent panels competing with the card. */
body:not(.er-home-page) :where(
    .er-tree-card__fact,
    .er-game-card__fact,
    .er-character-stat-grid>span,
    .er-account-fact,
    .er-provider-row,
    .er-ai-level-control
){
    border:1px solid rgba(255,255,255,.07)!important;
    border-radius:10px!important;
    background:rgba(4,7,10,.32)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
}

/* Empty states keep the same surface instead of dashed placeholder styling. */
body:not(.er-home-page) :where(.er-empty,.er-character-library__empty){
    padding:32px!important;
    border-style:solid!important;
}

/* Games archive uses exactly the same material as the Home cards.
 * Do not add a second, stronger glass pass here: it frosts the background image
 * and creates the milky/satin patches visible inside the archive panels. */
body:not(.er-home-page) .er-library[data-page="games"] :where(
    .er-library__head,
    .er-storyline,
    .er-tree-card,
    .er-game-card,
    .er-graph-stat,
    .er-graph-loading,
    .er-empty
){
    background:var(--er-home-card-bg)!important;
    -webkit-backdrop-filter:var(--er-home-card-blur)!important;
    backdrop-filter:var(--er-home-card-blur)!important;
}

body:not(.er-home-page) .er-library[data-page="games"] .er-library__head{
    background:var(--er-home-card-bg-strong)!important;
}

body:not(.er-home-page) .er-library[data-page="games"] .er-graph-stat::after{
    content:none!important;
    display:none!important;
}

body:not(.er-home-page) .er-library[data-page="games"] :where(
    .er-storyline__head,
    .er-tree-card__fact,
    .er-game-card__fact
){
    background:rgba(4,7,10,.32)!important;
}

body:not(.er-home-page) .er-library[data-page="games"] .er-storyline__head{
    -webkit-backdrop-filter:blur(7px) saturate(108%)!important;
    backdrop-filter:blur(7px) saturate(108%)!important;
}

@media(max-width:900px){
    body:not(.er-home-page) :where(
        .er-library,
        .er-character-library,
        .er-character-editor,
        .er-pricing-shell,
        .er-account-shell,
        .er-auth-shell,
        .er-ai-config,
        .er-audio-lib
    ){
        width:min(100% - 24px,760px)!important;
        margin-top:16px!important;
    }

    body:not(.er-home-page) :where(
        .er-library__head,
        .er-character-library__hero,
        .er-character-editor__hero,
        .er-pricing-head,
        .er-account-head,
        .er-ai-config__hero
    ){
        grid-template-columns:1fr!important;
        align-items:start!important;
        padding:24px!important;
    }

    .er-graph-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:560px){
    body:not(.er-home-page) :where(
        .er-library,
        .er-character-library,
        .er-character-editor,
        .er-pricing-shell,
        .er-account-shell,
        .er-auth-shell,
        .er-ai-config,
        .er-audio-lib
    ){
        width:calc(100% - 18px)!important;
    }

    body:not(.er-home-page) :where(
        .er-library__head,
        .er-character-library__hero,
        .er-character-editor__hero,
        .er-pricing-head,
        .er-account-head,
        .er-ai-config__hero
    ){
        padding:20px!important;
        border-radius:16px!important;
    }

    body:not(.er-home-page) :where(
        .er-library__head,
        .er-character-library__hero,
        .er-character-editor__hero,
        .er-pricing-head,
        .er-account-head,
        .er-ai-config__hero
    ) h1,
    .er-audio-lib>h1{
        font-size:clamp(2rem,12vw,3.15rem)!important;
    }

    .er-library__toolbar{align-items:stretch!important;flex-direction:column!important}
    .er-library__tabs{width:100%!important;display:flex!important}
    .er-library__tabs a{flex:1;text-align:center}
    .er-library__legend{justify-content:flex-start!important;flex-wrap:wrap!important}
    .er-graph-summary{grid-template-columns:1fr 1fr!important}
}

@media(prefers-reduced-transparency:reduce){
    body:not(.er-home-page) :where(
        .er-library__head,.er-storyline,.er-tree-card,.er-game-card,.er-graph-stat,
        .er-character-library__hero,.er-character-editor__hero,.er-character-card,
        .er-character-editor__section,.er-pricing-head,.er-pricing-card,
        .er-account-head,.er-account-card,.er-ai-config__hero,.er-ai-config__card,
        .er-audio-add,.er-audio-card
    ){
        -webkit-backdrop-filter:none!important;
        backdrop-filter:none!important;
        background:linear-gradient(145deg,#11161d,#080b10)!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .er-tree-card,.er-game-card,.er-character-card,.er-pricing-card,.er-ai-config__card,.er-audio-card{
        transition:none!important;
    }
}