/* ═══════════════════════════════════════════════════════════════════════════
   Leonoria — Shared stylesheet for Races section
   Matches the visual identity of index.html / about.html
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
    --bg-deep        : #111a0a;
    --border-gold    : #c9a84c;
    --border-green   : #4e6e32;
    --text-parchment : #ede0c4;
    --text-muted     : #a89878;
    --accent-gold    : #c9a84c;
    --btn-bg-from    : #2e4a1c;
    --btn-bg-to      : #1e3210;
    --btn-hover-from : #3e6428;
    --btn-hover-to   : #2a4818;
    --btn-border     : #5a7a3a;
    --btn-border-h   : #8aaa5a;
}

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

body {
    background-color  : var(--bg-deep);
    background-image  : radial-gradient(ellipse 80% 40% at 50% 0%,
                          rgba(74,110,42,0.18) 0%, transparent 70%),
                        radial-gradient(ellipse 60% 30% at 50% 100%,
                          rgba(30,50,16,0.4) 0%, transparent 60%);
    color             : var(--text-parchment);
    font-family       : 'IM Fell English', Georgia, 'Times New Roman', serif;
    min-height        : 100vh;
    overflow-x        : hidden;
    line-height       : 1.75;
}

/* ── Skip link ── */
.skip-link {
    position   : absolute;
    top        : -100%;
    left       : 1rem;
    background : var(--accent-gold);
    color      : #111;
    padding    : 0.5em 1em;
    font-size  : 0.9rem;
    z-index    : 9999;
    transition : top 0.2s;
}
.skip-link:focus { top: 0.5rem; }

/* ── Page wrapper ── */
.page-wrapper {
    max-width       : 740px;
    margin          : 0 auto;
    padding         : 2.5rem 1.5rem 5rem;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    align-self  : flex-start;
    display     : flex;
    align-items : center;
    gap         : 0.45em;
    font-size   : 0.88rem;
    font-style  : italic;
    color       : var(--text-muted);
    margin-bottom : 2.2rem;
    flex-wrap   : wrap;
    letter-spacing: 0.04em;
}
.breadcrumbs a          { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover    { color: var(--text-parchment); }
.breadcrumbs a:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.breadcrumbs .sep       { opacity: 0.45; }

/* ── Page heading ── */
.page-title {
    font-size   : clamp(2rem, 5.5vw, 3.2rem);
    color       : var(--accent-gold);
    letter-spacing : 0.15em;
    text-shadow : 0 2px 12px rgba(201,168,76,0.3);
    margin-bottom : 0.35rem;
    font-weight : normal;
    text-align  : center;
}

.page-subtitle {
    font-size      : clamp(0.85rem, 2vw, 0.95rem);
    font-style     : italic;
    color          : var(--text-muted);
    letter-spacing : 0.08em;
    margin-bottom  : 2rem;
    text-align     : center;
}

/* ── Ornamental divider ── */
.divider {
    display     : flex;
    align-items : center;
    gap         : 1rem;
    width       : 100%;
    max-width   : 500px;
    margin-bottom : 2.5rem;
}
.divider::before, .divider::after {
    content    : '';
    flex       : 1;
    height     : 1px;
    background : linear-gradient(90deg, transparent, var(--border-green), transparent);
}
.divider-glyph {
    color          : var(--accent-gold);
    opacity        : 0.55;
    font-size      : 0.9rem;
    letter-spacing : 0.2em;
    white-space    : nowrap;
}

/* ── Content card ── */
.content-card {
    width       : 100%;
    border      : 1px solid rgba(78,110,50,0.30);
    padding     : 2.5rem 2rem 2rem;
    margin-bottom : 2.5rem;
    position    : relative;
}
.content-card::before,
.content-card::after {
    content    : '';
    display    : block;
    height     : 1px;
    background : linear-gradient(90deg, transparent, var(--border-gold), transparent);
    opacity    : 0.35;
    margin     : 0 1rem;
}
.content-card::before { margin-bottom: 2rem; }
.content-card::after  { margin-top:    2rem; }

/* ── Sections ── */
.race-section             { margin-bottom: 1.8rem; }
.race-section:last-child  { margin-bottom: 0; }

.section-heading {
    font-size      : clamp(1rem, 2.5vw, 1.2rem);
    font-weight    : normal;
    color          : var(--accent-gold);
    letter-spacing : 0.12em;
    margin-bottom  : 0.75rem;
    opacity        : 0.92;
}

.race-text {
    font-size     : clamp(1rem, 2.1vw, 1.08rem);
    line-height   : 1.88;
    color         : var(--text-parchment);
    margin-bottom : 1em;
    text-align    : justify;
    hyphens       : auto;
    -webkit-hyphens: auto;
}
.race-text:last-child { margin-bottom: 0; }

.race-text.emphasis {
    font-style  : italic;
    color       : var(--text-muted);
    text-align  : left;
}

.section-rule {
    display    : block;
    height     : 1px;
    background : linear-gradient(90deg, transparent, rgba(78,110,50,0.35), transparent);
    margin     : 1.8rem 0;
}

/* ── Race index grid ── */
.races-grid {
    width       : 100%;
    list-style  : none;
    display     : grid;
    grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
    gap         : 0.55rem;
    margin-top  : 0.25rem;
}
.races-grid li {
    border     : 1px solid rgba(78,110,50,0.22);
    transition : border-color 0.2s, background 0.2s;
}
.races-grid li:hover {
    border-color : rgba(201,168,76,0.42);
    background   : rgba(78,110,50,0.07);
}
.races-grid a {
    display         : flex;
    align-items     : center;
    gap             : 0.7rem;
    padding         : 0.82em 1.1em;
    color           : var(--text-parchment);
    text-decoration : none;
    font-size       : clamp(0.93rem, 2vw, 1.02rem);
    letter-spacing  : 0.04em;
    transition      : color 0.2s;
    line-height     : 1.4;
}
.races-grid a:hover      { color: var(--accent-gold); }
.races-grid a:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
.races-grid .bullet {
    color       : var(--accent-gold);
    opacity     : 0.65;
    font-size   : 0.7em;
    flex-shrink : 0;
}

/* ── Traits list (Playing a X section) ── */
.trait-list {
    list-style  : none;
    margin-top  : 0.4rem;
}
.trait-list li {
    display        : flex;
    align-items    : baseline;
    gap            : 0.75rem;
    font-size      : clamp(0.98rem, 2.1vw, 1.06rem);
    color          : var(--text-parchment);
    line-height    : 1.88;
    padding        : 0.5rem 0;
    border-bottom  : 1px solid rgba(78,110,50,0.15);
}
.trait-list li:last-child { border-bottom: none; }
.trait-list .bullet {
    color       : var(--accent-gold);
    opacity     : 0.8;
    flex-shrink : 0;
    font-size   : 0.75em;
    margin-top  : 0.35em;
}
.trait-list strong {
    color       : var(--accent-gold);
    font-style  : normal;
    font-weight : normal;
    opacity     : 0.9;
    white-space : nowrap;
}

/* ── Navigation button ── */
.nav-btn {
    font-family  : 'IM Fell English', Georgia, serif;
    font-size    : 1rem;
    letter-spacing : 0.1em;
    color        : var(--text-parchment);
    background   : linear-gradient(170deg, var(--btn-bg-from) 0%, var(--btn-bg-to) 100%);
    border       : 1px solid var(--btn-border);
    padding      : 0.78em 2.4em;
    cursor       : pointer;
    text-decoration : none;
    display      : inline-flex;
    align-items  : center;
    gap          : 0.45em;
    transition   : background 0.22s ease, border-color 0.22s ease,
                   box-shadow 0.22s ease, transform 0.15s ease;
    box-shadow   : 0 3px 10px rgba(0,0,0,0.5),
                   inset 0 1px 0 rgba(201,168,76,0.12);
    clip-path    : polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%,
                   calc(100% - 12px) 100%, 12px 100%, 0% 50%);
    white-space  : nowrap;
}
.nav-btn:hover,
.nav-btn:focus-visible {
    background   : linear-gradient(170deg, var(--btn-hover-from) 0%, var(--btn-hover-to) 100%);
    border-color : var(--btn-border-h);
    box-shadow   : 0 5px 18px rgba(0,0,0,0.55),
                   0 0 14px rgba(90,140,58,0.25),
                   inset 0 1px 0 rgba(201,168,76,0.2);
    transform    : translateY(-2px);
    outline      : none;
    color        : #f5edda;
}
.nav-btn:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }
.nav-btn:active        { transform: translateY(0); box-shadow: 0 1px 5px rgba(0,0,0,0.4); }

.nav-buttons {
    display         : flex;
    gap             : 1rem;
    flex-wrap       : wrap;
    justify-content : center;
    margin-top      : 0.5rem;
}

/* ── Footer ── */
.site-footer {
    margin-top    : 3rem;
    padding-top   : 1.5rem;
    border-top    : 1px solid rgba(78,110,50,0.25);
    text-align    : center;
    color         : var(--text-muted);
    font-size     : 0.82rem;
    font-style    : italic;
    width         : 100%;
    letter-spacing: 0.06em;
}
.site-footer a {
    color           : inherit;
    text-decoration : none;
}
.site-footer a:hover { color: var(--text-parchment); }

/* ── Class pills (Playing a X section) ── */
.class-affinity-item { align-items: flex-start !important; }

.class-pills {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 0.38rem;
    margin-top  : 0.28rem;
}

.class-pill {
    position       : relative;
    display        : inline-block;
    padding        : 0.18em 0.6em;
    font-size      : 0.82em;
    font-style     : normal;
    font-weight    : normal;
    letter-spacing : 0.07em;
    border         : 1px solid;
    line-height    : 1.55;
    white-space    : nowrap;
    cursor         : help;
}

.class-pill[data-group="Warrior"]     { background: rgba(140,55,25,0.15);  border-color: rgba(190,100,60,0.5);  color: #d4936e; }
.class-pill[data-group="Ranger"]      { background: rgba(55,95,30,0.15);   border-color: rgba(90,145,55,0.5);   color: #90cc72; }
.class-pill[data-group="Rogue"]       { background: rgba(80,55,105,0.15);  border-color: rgba(120,85,155,0.5);  color: #b090d0; }
.class-pill[data-group="Cleric"]      { background: rgba(140,110,20,0.15); border-color: rgba(190,155,40,0.5);  color: #dcc050; }
.class-pill[data-group="Mage"]        { background: rgba(35,55,140,0.15);  border-color: rgba(60,90,190,0.5);   color: #708ae0; }
.class-pill[data-group="Sorcerer"]    { background: rgba(150,80,15,0.15);  border-color: rgba(200,110,30,0.5);  color: #e09050; }
.class-pill[data-group="Druid"]       { background: rgba(45,80,38,0.15);   border-color: rgba(70,125,58,0.5);   color: #82be70; }
.class-pill[data-group="Warlock"]     { background: rgba(100,25,95,0.15);  border-color: rgba(145,40,140,0.5);  color: #d060cc; }
.class-pill[data-group="Witch"]       { background: rgba(75,52,28,0.15);   border-color: rgba(115,78,40,0.5);   color: #a88860; }
.class-pill[data-group="Necromancer"] { background: rgba(48,38,62,0.15);   border-color: rgba(85,62,108,0.5);   color: #9878c0; }

/* tooltip */
.class-pill::before,
.class-pill::after {
    pointer-events : none;
    opacity        : 0;
    visibility     : hidden;
    transition     : opacity 0.18s ease, visibility 0.18s ease;
}

.class-pill::after {
    content       : attr(data-tooltip);
    position      : absolute;
    bottom        : calc(100% + 9px);
    left          : 50%;
    transform     : translateX(-50%);
    background    : #141d0e;
    border        : 1px solid rgba(201,168,76,0.38);
    color         : var(--text-parchment);
    font-family   : 'IM Fell English', Georgia, serif;
    font-size     : 1.0em;
    font-style    : normal;
    line-height   : 1.55;
    letter-spacing: 0.02em;
    padding       : 0.5em 0.75em;
    width         : 244px;
    white-space   : normal;
    text-align    : left;
    z-index       : 200;
    box-shadow    : 0 4px 16px rgba(0,0,0,0.72);
}

.class-pill::before {
    content      : '';
    position     : absolute;
    bottom       : calc(100% + 3px);
    left         : 50%;
    transform    : translateX(-50%);
    border-width : 6px 5px 0 5px;
    border-style : solid;
    border-color : rgba(201,168,76,0.38) transparent transparent transparent;
    z-index      : 201;
}

.class-pill:hover::after,
.class-pill:hover::before { opacity: 1; visibility: visible; }

/* ── Lineage tag (individual race pages — small note below subtitle) ── */
.lineage-tag {
    font-size      : 0.8rem;
    font-style     : italic;
    color          : var(--text-muted);
    text-align     : center;
    letter-spacing : 0.1em;
    margin-bottom  : 2rem;
    opacity        : 0.7;
}
.lineage-tag em {
    font-style : normal;
    color      : var(--accent-gold);
    opacity    : 0.85;
}

/* ── Lineage group sections (races index page) ── */
.lineage-group {
    width         : 100%;
    margin-bottom : 0.5rem;
}
.lineage-heading {
    font-size      : 0.8rem;
    font-weight    : normal;
    color          : var(--accent-gold);
    letter-spacing : 0.22em;
    text-transform : uppercase;
    opacity        : 0.75;
    margin-bottom  : 0.5rem;
    text-align     : center;
}
.lineage-desc {
    font-size     : clamp(0.9rem, 2vw, 0.97rem);
    font-style    : italic;
    color         : var(--text-muted);
    text-align    : center;
    margin-bottom : 0.9rem;
    line-height   : 1.72;
    padding       : 0 0.5rem;
}

/* ── Race reference table (individual race pages) ── */
.race-ref-wrap {
    width         : 100%;
    margin-bottom : 2.5rem;
}
.race-ref-label {
    font-size      : 0.72rem;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--accent-gold);
    opacity        : 0.65;
    text-align     : center;
    margin-bottom  : 0.75rem;
}
.race-ref-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : clamp(0.82rem, 1.9vw, 0.91rem);
    color           : var(--text-parchment);
    border          : 1px solid rgba(78,110,50,0.22);
}
.race-ref-table th {
    font-weight    : normal;
    font-style     : italic;
    color          : var(--text-muted);
    letter-spacing : 0.07em;
    padding        : 0.5em 0.9em;
    border-bottom  : 1px solid rgba(78,110,50,0.35);
    text-align     : left;
    background     : rgba(0,0,0,0.18);
}
.race-ref-table td {
    padding       : 0.55em 0.9em;
    border-bottom : 1px solid rgba(78,110,50,0.10);
    line-height   : 1.55;
    vertical-align: top;
}
.race-ref-table tr:last-child td { border-bottom: none; }
.race-ref-table tr.this-race td  {
    background : rgba(201,168,76,0.06);
    color      : var(--accent-gold);
    opacity    : 0.92;
}
.race-ref-table a {
    color           : inherit;
    text-decoration : none;
    transition      : color 0.18s;
}
.race-ref-table a:hover          { color: var(--accent-gold); }
.race-ref-table .col-ownname     { font-style: italic; color: var(--text-muted); white-space: nowrap; }
.race-ref-table tr.this-race .col-ownname { color: inherit; }

/* ── Mobile ── */
@media (max-width: 480px) {
    .nav-btn        { clip-path: none; }
    .page-wrapper   { padding: 1.8rem 1rem 3rem; }
    .races-grid     { grid-template-columns: 1fr; }
    .content-card   { padding: 1.8rem 1.2rem 1.4rem; }
    .race-text      { text-align: left; }
    .lineage-desc   { text-align: left; }
    .race-ref-table th, .race-ref-table td { padding: 0.45em 0.6em; }
}