/* ════════════════════════════════════════════════════
   DEMONFALL: DEFENSE — LIVING CODEX
   Cute Medieval Fantasy RPG Game UI Stylesheet
   ════════════════════════════════════════════════════ */

/* ──── DESIGN TOKENS ──── */
:root {
    /* Wood Colors */
    --wood-darkest:  #2C1A0E;
    --wood-dark:     #3E2515;
    --wood-main:     #5A3A1E;
    --wood-mid:      #7B5230;
    --wood-light:    #9C7044;
    --wood-lighter:  #B8894F;
    --wood-edge:     #4A2E16;
    --wood-highlight:#C9A06C;

    /* Parchment */
    --parchment-base:     #F2E0C4;
    --parchment-light:    #FAF0E0;
    --parchment-dark:     #E0C9A0;
    --parchment-shadow:   #D4BA8A;

    /* Accent Colors */
    --ribbon-green:       #3D8B37;
    --ribbon-green-light: #5DAA55;
    --ribbon-green-dark:  #2D6B2A;
    --ribbon-red:         #C0392B;
    --ribbon-red-dark:    #962D23;

    --gold:               #F0C040;
    --gold-light:         #FFD95A;
    --gold-dark:          #C89B20;
    --gold-glow:          rgba(240, 192, 64, 0.3);

    --blue-accent:        #4A7FB5;
    --blue-light:         #6AAFE5;

    /* Text */
    --ink:                #2C1A0E;
    --ink-light:          #5A3A1E;
    --text-cream:         #FFF8E7;
    --text-gold:          #FFD95A;

    /* Rarity Colors */
    --rarity-common:      #888;
    --rarity-uncommon:    #4CAF50;
    --rarity-rare:        #2196F3;
    --rarity-epic:        #9C27B0;
    --rarity-legendary:   #FF9800;

    /* Tier Colors */
    --tier-weakling:      #9E9E9E;
    --tier-normal:        #4CAF50;
    --tier-elite:         #FF9800;
    --tier-boss:          #F44336;

    /* Sizing */
    --frame-radius:       16px;
    --card-radius:        10px;
    --pill-radius:        20px;

    /* Shadows */
    --shadow-wood:        0 6px 0 var(--wood-darkest), 0 8px 20px rgba(0,0,0,0.5);
    --shadow-card:        3px 4px 0 var(--wood-dark), 0 6px 12px rgba(0,0,0,0.3);
    --shadow-card-hover:  4px 6px 0 var(--wood-dark), 0 12px 24px rgba(0,0,0,0.4);
    --shadow-inset:       inset 0 2px 6px rgba(0,0,0,0.15);
    --shadow-button:      0 4px 0 var(--wood-darkest), 0 6px 12px rgba(0,0,0,0.3);

    /* Transitions */
    --bounce:             0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth:             0.25s ease;
}

/* ──── RESET & BASE ──── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1000;
    padding: 0.6rem 0.9rem;
    border: 3px solid var(--gold-dark);
    border-radius: 6px;
    background: var(--parchment-light);
    color: var(--ink);
    font-weight: 800;
    transform: translateY(-150%);
    transition: transform var(--smooth);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ──── FANTASY WORLD BACKGROUND ──── */
.world-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('assets/fantasy_background.webp') center/cover no-repeat;
    filter: blur(6px) brightness(0.7) saturate(1.2);
}
.world-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at center top, rgba(44,26,14,0.3) 0%, rgba(44,26,14,0.7) 70%),
        linear-gradient(to bottom, rgba(44,26,14,0.2) 0%, rgba(44,26,14,0.5) 100%);
}

/* ──── TYPOGRAPHY ──── */
h1, h2, h3, h4 {
    font-family: 'MedievalSharp', 'Cinzel', serif;
    line-height: 1.3;
}

h2 {
    font-size: 2rem;
    color: var(--wood-dark);
    text-shadow: 1px 1px 0 var(--parchment-light);
}

/* ════════════════════════════════════════════════════
   HEADER — Wooden Sign Bar
   ════════════════════════════════════════════════════ */
#main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
}

.header-wood-frame {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 300px;
    border-bottom: 5px solid var(--wood-darkest);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 -1px 0 var(--wood-light);
    position: relative;
}

/* Top wood lip highlight */
.header-wood-frame::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(to right, var(--wood-light), var(--wood-highlight), var(--wood-light));
    opacity: 0.6;
}

.header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Logo */
.logo-area {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.logo-icon {
    font-size: 2rem;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}
.logo-text {
    display: flex;
    flex-direction: column;
}
.logo-main {
    font-size: 1.6rem;
    color: var(--text-cream);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6), 0 0 10px rgba(240,192,64,0.2);
    letter-spacing: 1px;
}
.logo-sub {
    font-size: 0.85rem;
    color: var(--gold);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: -4px;
}

/* Rope hanging decoration */
.rope-left, .rope-right {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #8B6914, #A07820, #8B6914);
    border-radius: 0 0 2px 2px;
}
.rope-left { left: 12%; }
.rope-right { right: 12%; }

/* ──── NAVIGATION TABS — Wooden Buttons ──── */
#main-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.wood-tab {
    background: var(--wood-mid);
    background-image: url('assets/wood_texture.webp');
    background-size: 200px;
    border: 3px solid var(--wood-dark);
    border-bottom-width: 4px;
    color: var(--text-cream);
    font-family: 'MedievalSharp', serif;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 8px 8px 4px 4px;
    box-shadow: var(--shadow-button);
    position: relative;
    transition: transform var(--bounce), box-shadow var(--smooth), background-color var(--smooth);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.wood-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--wood-darkest), 0 10px 20px rgba(0,0,0,0.5);
    background-color: var(--wood-light);
}

.wood-tab:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--wood-darkest), 0 2px 4px rgba(0,0,0,0.3);
}

.wood-tab.active {
    background-color: var(--ribbon-green);
    background-image: none;
    border-color: var(--ribbon-green-dark);
    box-shadow: 0 4px 0 var(--ribbon-green-dark), 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 var(--ribbon-green-light);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.tab-icon {
    font-size: 1.1rem;
}

/* ════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ════════════════════════════════════════════════════ */
#main-content {
    flex: 1;
    padding: 2rem 1rem;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* Page sections */
.page-section {
    display: none;
    animation: codexReveal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.page-section.active {
    display: block;
}

@keyframes codexReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ──── CODEX FRAME — Main wooden border ──── */
.codex-frame {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 300px;
    border-radius: var(--frame-radius);
    border: 5px solid var(--wood-dark);
    box-shadow: var(--shadow-wood), inset 0 0 30px rgba(0,0,0,0.4);
    padding: 12px;
    position: relative;
}

/* Corner nails/rivets */
.frame-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 40% 40%, #888, #555);
    border-radius: 50%;
    border: 2px solid #444;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.5), 1px 1px 3px rgba(0,0,0,0.5);
    z-index: 2;
}
.frame-corner.tl { top: 6px; left: 6px; }
.frame-corner.tr { top: 6px; right: 6px; }
.frame-corner.bl { bottom: 6px; left: 6px; }
.frame-corner.br { bottom: 6px; right: 6px; }

/* ──── PARCHMENT SURFACE ──── */
.parchment-surface {
    background: var(--parchment-base);
    background-image: url('assets/parchment_texture.webp');
    background-size: 500px;
    border-radius: calc(var(--frame-radius) - 6px);
    border: 2px solid var(--parchment-dark);
    padding: 2rem;
    min-height: 300px;
    box-shadow: var(--shadow-inset);
    position: relative;
}

/* ════════════════════════════════════════════════════
   HOME PAGE STYLES
   ════════════════════════════════════════════════════ */

/* Welcome Banner */
.welcome-banner {
    text-align: center;
    margin-bottom: 2.5rem;
}

.banner-ribbon {
    display: inline-block;
    background: var(--ribbon-green);
    padding: 0.6rem 3rem;
    position: relative;
    margin-bottom: 1rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.banner-ribbon h2 {
    color: #fff;
    font-size: 1.8rem;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    margin: 0;
}
/* Ribbon end folds */
.banner-ribbon::before,
.banner-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    background: var(--ribbon-green-dark);
}
.banner-ribbon::before {
    left: -20px;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.banner-ribbon::after {
    right: -20px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.welcome-text {
    font-size: 1.1rem;
    color: var(--ink-light);
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
}

/* ──── Section Headers with Ribbon Labels ──── */
.section-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.ribbon-label {
    display: inline-block;
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 200px;
    color: var(--text-cream);
    font-family: 'MedievalSharp', serif;
    font-size: 1.2rem;
    padding: 0.5rem 2rem;
    border-radius: 6px;
    border: 3px solid var(--wood-dark);
    box-shadow: 0 3px 0 var(--wood-darkest), 0 4px 10px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ──── Featured Units Grid ──── */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.featured-card {
    background: var(--parchment-light);
    border: 5px solid var(--wood-main);
    border-radius: var(--card-radius);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform var(--bounce), box-shadow var(--smooth);
    position: relative;
    overflow: hidden;
}

.featured-card:hover {
    transform: translateY(-5px) rotate(-1deg);
    box-shadow: var(--shadow-card-hover);
}

.featured-card .portrait-frame {
    width: 70px;
    height: 70px;
    margin: 0 auto 0.6rem;
    background: var(--wood-dark);
    border-radius: 50%;
    border: 3px solid var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
}

.featured-card .unit-name {
    font-family: 'MedievalSharp', serif;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.featured-card .unit-tier {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.15rem 0.6rem;
    border-radius: var(--pill-radius);
    display: inline-block;
}

.featured-card .unit-stats-mini {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.featured-card .mini-stat {
    background: rgba(0,0,0,0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
}

/* ──── Nav Board Grid ──── */
.nav-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.nav-board-card {
    background: var(--parchment-light);
    border: 4px solid var(--wood-main);
    border-radius: var(--card-radius);
    padding: 1.2rem 1rem;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform var(--bounce), box-shadow var(--smooth), border-color var(--smooth);
    font-family: inherit;
    color: var(--ink);
}

.nav-board-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--ribbon-green);
}

.board-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.2));
}

.board-title {
    font-family: 'MedievalSharp', serif;
    font-size: 1.2rem;
    color: var(--wood-dark);
    margin-bottom: 0.2rem;
}

.board-desc {
    font-size: 0.8rem;
    color: var(--ink-light);
    margin-bottom: 0.5rem;
}

.board-count {
    display: inline-block;
    background: var(--ribbon-green);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.2rem 0.8rem;
    border-radius: var(--pill-radius);
    box-shadow: 0 2px 0 var(--ribbon-green-dark);
}

/* ──── Stats Board ──── */
.stats-board {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-plaque {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 150px;
    border: 3px solid var(--wood-dark);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: 0 3px 0 var(--wood-darkest), 0 4px 10px rgba(0,0,0,0.3);
    min-width: 100px;
}

.plaque-value {
    font-family: 'MedievalSharp', serif;
    font-size: 2rem;
    color: var(--gold);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.plaque-label {
    font-size: 0.8rem;
    color: var(--text-cream);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Home section spacing */
.home-section {
    margin-bottom: 2.5rem;
}
.home-section:last-child {
    margin-bottom: 0;
}

/* ════════════════════════════════════════════════════
   PAGE TITLE BAR
   ════════════════════════════════════════════════════ */
.page-title-bar {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--parchment-dark);
    position: relative;
}

.page-title-bar h2 {
    font-size: 2.2rem;
}

/* Decorative dots on the border */
.page-title-bar::after {
    content: '✦ ✦ ✦';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--parchment-base);
    padding: 0 1rem;
    color: var(--gold-dark);
    font-size: 0.8rem;
    letter-spacing: 8px;
}

/* ════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════ */
.filter-bar {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.filter-result-count {
    min-height: 1.5rem;
    margin: -0.8rem 0 1rem;
    color: var(--ink-light);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
}

/* Wooden search field */
.search-wood {
    display: flex;
    align-items: center;
    background: var(--parchment-light);
    border: 3px solid var(--wood-light);
    border-radius: 10px;
    padding: 0.1rem 0.1rem 0.1rem 1rem;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-inset), 0 2px 0 var(--wood-edge);
    transition: border-color var(--smooth), box-shadow var(--smooth);
}

.search-wood:focus-within {
    border-color: var(--ribbon-green);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--gold-glow);
}

.search-icon {
    font-size: 1.1rem;
    margin-right: 0.5rem;
    opacity: 0.6;
}

.search-wood input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.7rem 0.5rem;
    outline: none;
}

.search-wood input::placeholder {
    color: var(--wood-light);
    font-style: italic;
}

/* Filter pill buttons */
.filter-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pill {
    background: var(--parchment-light);
    border: 2px solid var(--parchment-dark);
    color: var(--ink-light);
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: var(--pill-radius);
    cursor: pointer;
    transition: all var(--smooth);
    box-shadow: 0 1px 0 var(--parchment-shadow);
}

.pill:hover {
    background: var(--parchment-dark);
    transform: translateY(-1px);
}

.pill.active {
    background: var(--ribbon-green);
    color: #fff;
    border-color: var(--ribbon-green-dark);
    box-shadow: 0 2px 0 var(--ribbon-green-dark), inset 0 1px 0 var(--ribbon-green-light);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ════════════════════════════════════════════════════
   CODEX GRID — Card Layout
   ════════════════════════════════════════════════════ */
.codex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}

.codex-grid.classes-layout {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ──── CODEX ENTRY CARD ──── */
.codex-card {
    background: var(--parchment-light);
    border: 4px solid var(--wood-main);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--bounce), box-shadow var(--smooth);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.codex-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: var(--shadow-card-hover);
}

/* Inner parchment border line */
.codex-card::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--parchment-dark);
    border-radius: calc(var(--card-radius) - 4px);
    pointer-events: none;
    opacity: 0.5;
}

/* Card top bar (colored header strip) */
.card-topbar {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 200px;
    padding: 0.6rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 3px solid var(--wood-dark);
}

.card-topbar-title {
    font-family: 'MedievalSharp', serif;
    font-size: 1.05rem;
    color: var(--text-cream);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-topbar-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    border-radius: var(--pill-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card body */
.card-content {
    padding: 0.8rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Tags row */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.card-tag {
    background: var(--wood-light);
    color: var(--text-cream);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: var(--pill-radius);
    border: 1px solid var(--wood-dark);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.card-tag.green {
    background: var(--ribbon-green);
    border-color: var(--ribbon-green-dark);
}

.card-tag.gold {
    background: var(--gold-dark);
    border-color: #a07015;
}

.card-tag.red {
    background: var(--ribbon-red);
    border-color: var(--ribbon-red-dark);
}

.card-tag.blue {
    background: var(--blue-accent);
    border-color: #3A6FA5;
}

/* Stat grid inside cards */
.card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.card-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    font-size: 0.85rem;
}

.card-stat:nth-child(odd) {
    background: rgba(0,0,0,0.07);
}

.card-stat-label {
    color: var(--ink-light);
    font-weight: 600;
    font-size: 0.78rem;
}

.card-stat-value {
    font-weight: 800;
    color: var(--ribbon-green-dark);
    font-size: 0.85rem;
}

/* Stat bars — bestiary cards */
.card-stat-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.3rem;
}

.card-stat-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
}

.card-stat-bar-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

.card-stat-bar-label {
    width: 26px;
    font-weight: 800;
    color: var(--ink-light);
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.card-stat-bar-track {
    flex: 1;
    height: 7px;
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}

.card-stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bar-dps { background: linear-gradient(to right, #C0392B, #E74C3C); }
.bar-def { background: linear-gradient(to right, #2471A3, #2E86C1); }
.bar-utl { background: linear-gradient(to right, #7D3C98, #9B59B6); }

.card-stat-bar-val {
    width: 16px;
    text-align: right;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ribbon-green-dark);
    flex-shrink: 0;
}

/* Card description */
.card-description {
    font-size: 0.82rem;
    color: var(--ink-light);
    font-style: italic;
    padding: 0.5rem;
    background: rgba(255,255,255,0.4);
    border-left: 3px solid var(--gold);
    border-radius: 0 4px 4px 0;
    margin-top: auto;
    line-height: 1.4;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* full-width stat rows (for items) */
.card-stats.single-col {
    grid-template-columns: 1fr;
}

/* ════════════════════════════════════════════════════
   CLASS CARDS — Special layout
   ════════════════════════════════════════════════════ */
.class-card {
    background: var(--parchment-light);
    border: 4px solid var(--wood-main);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--bounce), box-shadow var(--smooth);
    position: relative;
}

.class-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.class-header {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 200px;
    padding: 0.8rem;
    text-align: center;
    border-bottom: 3px solid var(--wood-dark);
}

.class-icon {
    font-size: 1.8rem;
    margin-bottom: 0.2rem;
}

.class-name {
    font-family: 'MedievalSharp', serif;
    font-size: 1.15rem;
    color: var(--text-cream);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.class-body {
    padding: 0.8rem;
}

.class-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--parchment-dark);
}

.class-info-row:last-child {
    border-bottom: none;
}

.class-info-label {
    font-weight: 600;
    color: var(--ink-light);
}

.class-info-value {
    font-weight: 800;
    color: var(--ribbon-green-dark);
}

/* ════════════════════════════════════════════════════
   DETAIL MODAL
   ════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.modal-overlay.open {
    display: flex;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-frame {
    background: var(--wood-main);
    background-image: url('assets/wood_texture.webp');
    background-size: 300px;
    border: 5px solid var(--wood-dark);
    border-radius: var(--frame-radius);
    box-shadow: var(--shadow-wood);
    padding: 10px;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    position: relative;
    animation: modalBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalBounce {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    background: var(--ribbon-red);
    border: 3px solid var(--ribbon-red-dark);
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 var(--ribbon-red-dark), 0 4px 8px rgba(0,0,0,0.4);
    z-index: 10;
    transition: transform var(--bounce);
}

.modal-close:hover {
    transform: scale(1.1) rotate(90deg);
}

.modal-parchment {
    background:
        radial-gradient(ellipse 140% 50% at 10% 15%, rgba(255,252,240,0.70) 0%, transparent 65%),
        radial-gradient(ellipse 100% 70% at 90% 85%, rgba(195,165,110,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 55% 50%, rgba(245,230,195,0.25) 0%, transparent 80%),
        linear-gradient(165deg, #F9EDD0 0%, #EED9A2 35%, #F3E2BB 65%, #EAD9A0 100%);
    border-radius: calc(var(--frame-radius) - 6px);
    border: 2px solid var(--parchment-dark);
    padding: 1.5rem;
    max-height: calc(85vh - 40px);
    overflow-y: auto;
    box-shadow: var(--shadow-inset), inset 0 0 60px rgba(180,140,80,0.08);
}

/* Modal content styling */
.modal-title {
    font-family: 'MedievalSharp', serif;
    font-size: 1.8rem;
    color: var(--wood-dark);
    text-shadow: 1px 1px 0 var(--parchment-light);
    margin-bottom: 0.3rem;
}

.modal-subtitle {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.modal-stat {
    background: var(--parchment-light);
    border: 2px solid var(--parchment-dark);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-stat .m-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-light);
}

.modal-stat .m-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ribbon-green-dark);
}

.modal-section-title {
    font-family: 'MedievalSharp', serif;
    font-size: 1.2rem;
    color: var(--wood-dark);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--parchment-dark);
}

.modal-ability-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.modal-ability-item {
    background: var(--parchment-light);
    border: 2px solid var(--parchment-dark);
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-ability-icon {
    font-size: 1.2rem;
}

.modal-ability-name {
    font-weight: 700;
    color: var(--ink);
}

.modal-desc {
    font-style: italic;
    color: var(--ink-light);
    padding: 0.8rem;
    background: rgba(255,255,255,0.3);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════
   LOADING & EMPTY STATES
   ════════════════════════════════════════════════════ */
.loading-scroll {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'MedievalSharp', serif;
    font-size: 1.3rem;
    color: var(--wood-main);
    padding: 3rem;
    animation: scrollFloat 1.5s ease-in-out infinite alternate;
}

@keyframes scrollFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.1rem;
    color: var(--wood-light);
    padding: 2rem;
    font-style: italic;
}

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
#main-footer {
    margin-top: auto;
}

.footer-wood {
    background: var(--wood-dark);
    background-image: url('assets/wood_texture.webp');
    background-size: 300px;
    border-top: 4px solid var(--wood-darkest);
    padding: 1.2rem;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.footer-wood p {
    font-family: 'MedievalSharp', serif;
    color: var(--text-cream);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 1rem;
}

.footer-sub {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.8rem !important;
    opacity: 0.6;
    margin-top: 0.3rem;
}

/* ════════════════════════════════════════════════════
   TIER & RARITY BADGE COLORS
   ════════════════════════════════════════════════════ */
.tier-weakling { background: var(--tier-weakling); color: #fff; }
.tier-normal   { background: var(--tier-normal); color: #fff; }
.tier-elite    { background: var(--tier-elite); color: #fff; }
.tier-boss     { background: var(--tier-boss); color: #fff; }

.rarity-common     { background: var(--rarity-common); color: #fff; }
.rarity-uncommon   { background: var(--rarity-uncommon); color: #fff; }
.rarity-rare       { background: var(--rarity-rare); color: #fff; }
.rarity-epic       { background: var(--rarity-epic); color: #fff; }
.rarity-legendary  { background: var(--rarity-legendary); color: #fff; }

/* Category icon helpers */
.cat-icon { font-size: 1.1rem; margin-right: 0.3rem; }

/* ════════════════════════════════════════════════════
   CUSTOM SCROLLBAR
   ════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--wood-dark);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: var(--wood-light);
    border-radius: 5px;
    border: 2px solid var(--wood-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--wood-highlight);
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .header-inner {
        flex-direction: column;
        text-align: center;
    }
    .logo-area {
        justify-content: center;
    }
    #main-nav {
        justify-content: center;
    }
    .tab-label {
        display: none;
    }
    .wood-tab {
        padding: 0.5rem 0.7rem;
    }
    .codex-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .featured-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .parchment-surface {
        padding: 1.2rem;
    }
    .codex-frame {
        padding: 8px;
    }
    .banner-ribbon {
        padding: 0.5rem 1.5rem;
    }
    .banner-ribbon::before,
    .banner-ribbon::after {
        width: 18px;
    }
    .banner-ribbon::before { left: -12px; }
    .banner-ribbon::after { right: -12px; }
    .banner-ribbon h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 600px) {
    .header-inner {
        gap: 0.45rem;
        padding: 0.45rem 0.5rem 0.55rem;
    }
    .logo-area {
        gap: 0.45rem;
    }
    .logo-icon {
        font-size: 1.45rem;
    }
    .logo-main {
        font-size: 1.3rem;
    }
    .logo-sub {
        font-size: 0.68rem;
        letter-spacing: 2px;
    }
    #main-nav {
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }
    .wood-tab {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: 0.42rem 0.2rem;
    }
    .tab-icon {
        font-size: 1rem;
    }
    #main-content {
        padding: 1rem 0.5rem;
    }
    .codex-grid {
        grid-template-columns: 1fr;
    }
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nav-board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-board {
        gap: 0.8rem;
    }
    .stat-plaque {
        padding: 0.6rem 1rem;
        min-width: 80px;
    }
    .plaque-value {
        font-size: 1.5rem;
    }
    .modal-frame {
        max-height: 90vh;
    }
    .modal-parchment {
        padding: 1rem;
    }
}

/* ════════════════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles */
*:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ════════════════════════════════════════════════════
   HOME PAGE — REDESIGNED
   ════════════════════════════════════════════════════ */

/* ── Hero Banner ── */
.home-hero {
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    position: relative;
}

.home-hero-emblem {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.home-hero-title {
    font-family: 'MedievalSharp', serif;
    font-size: 2.6rem;
    color: var(--wood-darkest);
    text-shadow: 2px 2px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 0.6rem;
    letter-spacing: 1px;
}

.home-hero-subtitle {
    font-size: 1.05rem;
    color: var(--ink-light);
    max-width: 680px;
    margin: 0 auto 1.2rem;
    line-height: 1.65;
}

.lore-quote {
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink);
    max-width: 680px;
    margin: 0 auto 1.4rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255,255,255,0.45);
    border-left: 4px solid var(--gold-dark);
    border-right: 4px solid var(--gold-dark);
    border-radius: 6px;
    line-height: 1.7;
    position: relative;
}

.lore-quote::before {
    content: '"';
    position: absolute;
    top: -0.3rem;
    left: 0.6rem;
    font-size: 3rem;
    color: var(--gold-dark);
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.5;
}

.home-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hero-stat-pill {
    background: var(--wood-main);
    color: var(--text-cream);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: var(--pill-radius);
    border: 2px solid var(--wood-dark);
    box-shadow: 0 2px 0 var(--wood-darkest);
    letter-spacing: 0.3px;
}

/* ── Section Header (home page, bigger than modal band) ── */
.home-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'MedievalSharp', serif;
    font-size: 1.15rem;
    color: var(--text-cream);
    background: linear-gradient(to right, var(--wood-darkest), var(--wood-main) 10%, var(--wood-main) 90%, var(--wood-darkest));
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-top: 1px solid var(--wood-light);
    border-bottom: 2px solid var(--wood-darkest);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.home-section-icon {
    font-size: 1.2rem;
}

/* ── Campaign Phase Timeline ── */
.phase-timeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.phase-card {
    flex: 1;
    min-width: 160px;
    background: var(--parchment-light);
    border: 2px solid var(--parchment-dark);
    border-radius: 8px;
    padding: 1rem 0.9rem;
    position: relative;
    transition: transform var(--bounce), box-shadow var(--smooth);
}

.phase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.phase-num {
    font-family: 'MedievalSharp', serif;
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: var(--gold-dark);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.phase-name {
    font-family: 'MedievalSharp', serif;
    font-size: 0.88rem;
    color: var(--wood-dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.phase-desc {
    font-size: 0.78rem;
    color: var(--ink-light);
    line-height: 1.5;
}

/* Phase accent colors */
.phase-i    { border-top: 3px solid #5DAA55; }
.phase-ii   { border-top: 3px solid #F0A030; }
.phase-iii  { border-top: 3px solid #C0392B; }
.phase-iv   { border-top: 3px solid #7D3C98; }

.phase-arrow {
    display: flex;
    align-items: center;
    color: var(--wood-light);
    font-size: 1.2rem;
    padding: 0 0.4rem;
    flex-shrink: 0;
    align-self: center;
}

/* ── Battle Loop Steps ── */
.loop-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.loop-step {
    flex: 1;
    text-align: center;
    padding: 1rem 0.8rem;
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--parchment-dark);
    border-radius: 8px;
    transition: background var(--smooth), transform var(--bounce);
}

.loop-step:hover {
    background: rgba(255,255,255,0.6);
    transform: translateY(-2px);
}

.loop-step-icon {
    font-size: 2rem;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.loop-step-label {
    font-family: 'MedievalSharp', serif;
    font-size: 0.92rem;
    color: var(--wood-dark);
    margin-bottom: 0.4rem;
}

.loop-step-desc {
    font-size: 0.76rem;
    color: var(--ink-light);
    line-height: 1.5;
}

.loop-connector {
    display: flex;
    align-items: center;
    color: var(--gold-dark);
    font-size: 1.4rem;
    padding: 0 0.3rem;
    flex-shrink: 0;
    font-weight: 700;
}

/* ── Two-column layout for home ── */
.home-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
}

.home-col-block .home-section-header {
    font-size: 0.95rem;
    padding: 0.4rem 0.9rem;
}

/* ── Mechanic List (compact vertical) ── */
.mechanic-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mechanic-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0.7rem;
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--parchment-dark);
    border-radius: 7px;
}

.mechanic-item-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mechanic-item-title {
    font-family: 'MedievalSharp', serif;
    font-size: 0.85rem;
    color: var(--wood-dark);
    margin-bottom: 0.2rem;
}

.mechanic-item-desc {
    font-size: 0.76rem;
    color: var(--ink-light);
    line-height: 1.5;
}

/* ── Challenge Mode List ── */
.challenge-mode-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.challenge-mode-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 7px;
    border-left: 4px solid transparent;
}

.challenge-badge {
    font-family: 'MedievalSharp', serif;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.15rem 0.6rem;
    border-radius: var(--pill-radius);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 82px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.challenge-rule {
    font-size: 0.76rem;
    color: var(--ink-light);
    line-height: 1.5;
}

.challenge-normal    { background: rgba(77,175,74,0.08);  border-left-color: #4CAF50; }
.challenge-challenger{ background: rgba(240,152,48,0.08);  border-left-color: #F09030; }
.challenge-vanguard  { background: rgba(33,150,243,0.08); border-left-color: #2196F3; }
.challenge-tactician { background: rgba(156,39,176,0.08); border-left-color: #9C27B0; }

.challenge-normal     .challenge-badge { background: #4CAF50; }
.challenge-challenger .challenge-badge { background: #F09030; }
.challenge-vanguard   .challenge-badge { background: #2196F3; }
.challenge-tactician  .challenge-badge { background: #9C27B0; }

/* ── Mechanic Cards (Combat / Commander Progression) ── */
.mechanic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}

.mechanic-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mechanic-card {
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--parchment-dark);
    border-radius: 8px;
    padding: 0.9rem 0.8rem;
    transition: background var(--smooth), transform var(--bounce), box-shadow var(--smooth);
}

.mechanic-card:hover {
    background: rgba(255,255,255,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.mechanic-card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

.mechanic-card-title {
    font-family: 'MedievalSharp', serif;
    font-size: 0.85rem;
    color: var(--wood-dark);
    margin-bottom: 0.35rem;
}

.mechanic-card-desc {
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1.55;
}

/* ── Factions ── */
.faction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}

.faction-card {
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--parchment-dark);
    border-radius: 8px;
    padding: 0.9rem 0.8rem;
    text-align: center;
    transition: background var(--smooth), transform var(--bounce);
}

.faction-card:hover {
    background: rgba(255,255,255,0.58);
    transform: translateY(-2px);
}

.faction-card.faction-dark {
    background: rgba(60,20,10,0.06);
    border-color: #c07060;
}

.faction-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

.faction-name {
    font-family: 'MedievalSharp', serif;
    font-size: 0.83rem;
    color: var(--wood-dark);
    margin-bottom: 0.3rem;
}

.faction-desc {
    font-size: 0.74rem;
    color: var(--ink-light);
    line-height: 1.5;
}

/* ── Responsive home ── */
@media (max-width: 1000px) {
    .mechanic-grid     { grid-template-columns: repeat(2, 1fr); }
    .mechanic-grid-4   { grid-template-columns: repeat(2, 1fr); }
    .faction-grid      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .home-two-col      { grid-template-columns: 1fr; }
    .phase-timeline    { flex-direction: column; }
    .phase-arrow       { transform: rotate(90deg); align-self: center; padding: 0.2rem 0; }
    .loop-steps        { flex-direction: column; }
    .loop-connector    { transform: rotate(90deg); align-self: center; }
    .mechanic-grid     { grid-template-columns: 1fr; }
    .mechanic-grid-4   { grid-template-columns: repeat(2, 1fr); }
    .faction-grid      { grid-template-columns: repeat(2, 1fr); }
    .home-hero-title   { font-size: 1.9rem; }
}

/* ════════════════════════════════════════════════════
   PITCH DECK PAGE
   ════════════════════════════════════════════════════ */
.pitch-shell {
    background:
        linear-gradient(135deg, rgba(20, 9, 4, 0.9), rgba(65, 32, 15, 0.82)),
        url('assets/fantasy_background.webp') center/cover no-repeat;
    border: 12px solid transparent;
    border-radius: var(--frame-radius);
    background-clip: padding-box;
    box-shadow: var(--shadow-wood), inset 0 0 0 2px rgba(255, 217, 90, 0.16);
    min-height: 760px;
    overflow: hidden;
    padding: 1.4rem;
    position: relative;
}

.pitch-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 217, 90, 0.18), transparent 28%),
        radial-gradient(circle at 82% 68%, rgba(192, 57, 43, 0.24), transparent 32%),
        linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.52));
    pointer-events: none;
}

.pitch-stage {
    min-height: 640px;
    perspective: 1800px;
    position: relative;
    z-index: 1;
}

.pitch-slide {
    background:
        linear-gradient(180deg, rgba(255, 249, 235, 0.95), rgba(235, 210, 162, 0.97)),
        url('assets/parchment_texture.webp') center/420px repeat;
    border: 4px solid var(--wood-dark);
    border-radius: 18px;
    box-shadow:
        0 18px 0 rgba(44, 26, 14, 0.82),
        0 28px 44px rgba(0,0,0,0.45),
        inset 0 0 0 2px rgba(255,255,255,0.42);
    display: grid;
    inset: 0;
    min-height: 640px;
    opacity: 0;
    overflow: auto;
    padding: clamp(1.35rem, 3.5vw, 2.8rem);
    pointer-events: none;
    position: absolute;
    transform: rotateY(18deg) translateX(4%) scale(0.98);
    transform-origin: left center;
    transition: opacity 260ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
    visibility: hidden;
}

.pitch-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(86, 46, 18, 0.18), transparent 16%, transparent 84%, rgba(86, 46, 18, 0.13));
    pointer-events: none;
}

.pitch-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: rotateY(0) translateX(0) scale(1);
    visibility: visible;
    z-index: 2;
}

.pitch-slide.leaving-next {
    animation: pitchPageOutNext 520ms ease both;
}

.pitch-slide.leaving-prev {
    animation: pitchPageOutPrev 520ms ease both;
}

@keyframes pitchPageOutNext {
    from { opacity: 0.8; transform: rotateY(0) translateX(0) scale(1); }
    to { opacity: 0; transform: rotateY(-42deg) translateX(-9%) scale(0.96); }
}

@keyframes pitchPageOutPrev {
    from { opacity: 0.8; transform: rotateY(0) translateX(0) scale(1); }
    to { opacity: 0; transform: rotateY(34deg) translateX(8%) scale(0.96); }
}

.pitch-cover,
.pitch-two-col {
    align-items: center;
    display: grid;
    gap: clamp(1.2rem, 4vw, 2.8rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    position: relative;
    z-index: 1;
}

.pitch-slide-cover {
    align-items: center;
}

.pitch-overline {
    color: var(--ribbon-red-dark);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.pitch-slide h2 {
    color: var(--wood-darkest);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(2.1rem, 5.2vw, 4.65rem);
    line-height: 1;
    margin-bottom: 1rem;
    max-width: 920px;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.45), 0 8px 20px rgba(74, 46, 22, 0.16);
}

.pitch-tagline {
    color: var(--ribbon-red-dark);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.25;
    margin-bottom: 1rem;
}

.pitch-lead {
    color: var(--ink-light);
    font-size: clamp(1rem, 1.65vw, 1.18rem);
    line-height: 1.62;
    max-width: 760px;
}

.pitch-centered {
    margin: 1.2rem auto 0;
    text-align: center;
}

.pitch-quote {
    background: rgba(255,255,255,0.42);
    border-left: 5px solid var(--gold-dark);
    border-radius: 8px;
    color: var(--wood-dark);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.55;
    margin-top: 1.3rem;
    padding: 1rem 1.2rem;
}

.pitch-cover-art {
    background:
        radial-gradient(circle at 24% 34%, rgba(255, 217, 90, 0.18), transparent 24%),
        radial-gradient(circle at 76% 30%, rgba(192, 57, 43, 0.24), transparent 28%),
        linear-gradient(145deg, #2b170c, #0f0804 76%);
    border: 4px solid var(--wood-dark);
    border-radius: 18px;
    box-shadow:
        0 10px 0 rgba(44, 26, 14, 0.72),
        0 20px 26px rgba(44, 26, 14, 0.28),
        inset 0 0 0 2px rgba(255, 217, 90, 0.12);
    min-height: 395px;
    overflow: hidden;
    position: relative;
}

.pitch-hero-portrait,
.pitch-threat-portrait {
    filter: drop-shadow(0 18px 22px rgba(0,0,0,0.34));
    object-fit: contain;
    position: absolute;
}

.pitch-hero-portrait {
    bottom: 0;
    height: 88%;
    left: 4%;
    z-index: 2;
}

.pitch-threat-portrait {
    bottom: 2%;
    height: 78%;
    opacity: 0.92;
    right: 0;
}

.pitch-companion-portrait {
    bottom: 2%;
    height: 46%;
    left: 46%;
    opacity: 0.98;
    z-index: 3;
}

.pitch-warband-art::before {
    background:
        linear-gradient(90deg, rgba(15, 8, 4, 0.74), transparent 42%),
        radial-gradient(circle at 50% 82%, rgba(255, 217, 90, 0.18), transparent 36%);
    content: '';
    inset: 0;
    position: absolute;
}

.pitch-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.4rem;
}

.pitch-meta-row span {
    background: rgba(90, 58, 30, 0.14);
    border: 1px solid rgba(90, 58, 30, 0.28);
    border-radius: 999px;
    color: var(--wood-dark);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 0.34rem 0.72rem;
}

.pitch-portrait-row,
.pitch-portrait-mosaic,
.pitch-card-fan,
.pitch-feature-grid,
.pitch-proof-grid,
.pitch-proof-notes,
.pitch-plaque-grid,
.pitch-pillar-stack,
.pitch-loop,
.pitch-timeline,
.pitch-ruins-stack,
.pitch-positioning,
.pitch-positioning-grid,
.pitch-action-layout,
.pitch-action-grid,
.pitch-ask-stack,
.pitch-codex-links {
    position: relative;
    z-index: 1;
}

.pitch-portrait-row {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pitch-portrait-row-large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pitch-portrait-row img {
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(94, 58, 28, 0.18));
    border: 2px solid rgba(90, 58, 30, 0.32);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(74, 46, 22, 0.18);
    height: 220px;
    object-fit: contain;
    padding: 0.5rem;
    width: 100%;
}

.pitch-portrait-mosaic {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pitch-portrait-mosaic img {
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 248, 231, 0.7), rgba(120, 77, 39, 0.16)),
        linear-gradient(180deg, rgba(255,255,255,0.2), rgba(90,58,30,0.08));
    border: 2px solid rgba(90, 58, 30, 0.26);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(74, 46, 22, 0.18);
    height: 170px;
    object-fit: contain;
    padding: 0.45rem;
    width: 100%;
}

.pitch-loop,
.pitch-timeline {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.4rem;
}

.pitch-loop-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pitch-loop div,
.pitch-timeline div,
.pitch-plaque-grid div,
.pitch-ruins-stack div,
.pitch-proof-grid div,
.pitch-proof-notes div,
.pitch-positioning-grid div,
.pitch-pillar-stack div,
.pitch-action-grid div,
.pitch-ask-stack div,
.pitch-feature-grid div {
    background: rgba(255,255,255,0.44);
    border: 2px solid rgba(90, 58, 30, 0.22);
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(90, 58, 30, 0.14);
    padding: 1rem;
}

.pitch-loop span,
.pitch-timeline strong,
.pitch-plaque-grid strong,
.pitch-proof-grid strong,
.pitch-proof-notes strong,
.pitch-positioning-grid strong,
.pitch-pillar-stack strong,
.pitch-action-grid strong,
.pitch-ask-stack strong,
.pitch-feature-grid strong {
    color: var(--wood-dark);
    display: block;
    font-family: 'MedievalSharp', serif;
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.pitch-loop small,
.pitch-timeline span,
.pitch-plaque-grid span,
.pitch-feature-grid span,
.pitch-proof-grid span,
.pitch-proof-notes span,
.pitch-positioning-grid span,
.pitch-pillar-stack span,
.pitch-action-grid span,
.pitch-ask-stack span {
    color: var(--ink-light);
    display: block;
    font-size: 0.86rem;
    line-height: 1.5;
}

.pitch-plaque-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pitch-pillar-stack,
.pitch-ask-stack {
    display: grid;
    gap: 0.8rem;
}

.pitch-pillar-stack div {
    border-left: 5px solid var(--gold-dark);
    padding: 1.1rem 1.2rem;
}

.pitch-card-fan {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1.2rem auto 0;
    max-width: 760px;
}

.pitch-card-fan-wide {
    max-width: 980px;
}

.pitch-unit-card {
    background: linear-gradient(180deg, #fff5dc, #d8b979);
    border: 4px solid var(--wood-dark);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    color: var(--wood-darkest);
    display: grid;
    min-height: 262px;
    padding: 0.8rem;
    text-align: center;
    width: 178px;
}

.pitch-unit-card:nth-child(1) { transform: rotate(-7deg) translateY(16px); }
.pitch-unit-card:nth-child(2) { transform: translateY(-8px); }
.pitch-unit-card:nth-child(3) { transform: rotate(7deg) translateY(16px); }
.pitch-unit-card:nth-child(4) { transform: rotate(3deg) translateY(18px); }

.pitch-unit-card img {
    height: 150px;
    object-fit: contain;
    width: 100%;
}

.pitch-unit-card strong {
    font-family: 'MedievalSharp', serif;
    font-size: 1rem;
}

.pitch-unit-card span {
    background: var(--ribbon-red-dark);
    border-radius: var(--pill-radius);
    color: var(--text-cream);
    font-weight: 900;
    justify-self: center;
    padding: 0.2rem 0.7rem;
}

.pitch-feature-grid,
.pitch-action-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.3rem;
}

.pitch-action-layout {
    display: grid;
    gap: 1.4rem;
}

.pitch-feature-grid img,
.pitch-action-grid img {
    background: rgba(44, 26, 14, 0.12);
    border-radius: 10px;
    height: 58px;
    margin-bottom: 0.7rem;
    object-fit: contain;
    padding: 0.25rem;
    width: 58px;
}

.pitch-action-grid div {
    min-height: 178px;
}

.pitch-timeline b {
    color: var(--gold-dark);
    display: block;
    font-family: 'MedievalSharp', serif;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.45rem;
}

.pitch-ruins-stack {
    display: grid;
    gap: 0.8rem;
}

.pitch-ruins-stack div {
    border-left: 5px solid var(--ribbon-red-dark);
    color: var(--wood-dark);
    font-family: 'MedievalSharp', serif;
    font-size: 1.05rem;
}

.pitch-proof-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.35rem 0;
}

.pitch-proof-grid strong {
    color: var(--ribbon-red-dark);
    font-size: clamp(2rem, 5vw, 3.3rem);
    margin-bottom: 0.1rem;
}

.pitch-proof-notes,
.pitch-positioning-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pitch-positioning {
    align-self: center;
}

.pitch-positioning h2 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pitch-positioning-grid {
    margin-top: 1.3rem;
}

.pitch-ask-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
}

.pitch-ask-card,
.pitch-ask-main {
    text-align: center;
}

.pitch-ask-stack .pitch-ask-main {
    background:
        linear-gradient(180deg, rgba(255, 217, 90, 0.28), rgba(255,255,255,0.5)),
        rgba(255,255,255,0.46);
    border-color: rgba(200, 155, 32, 0.45);
}

.pitch-ask-stack .pitch-ask-main strong {
    color: var(--ribbon-red-dark);
    font-size: clamp(2.4rem, 5vw, 4rem);
}

.pitch-cta-links {
    justify-content: flex-start;
}

.pitch-codex-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 1rem;
}

.pitch-codex-link,
.pitch-nav-btn {
    background: var(--wood-mid);
    background-image: url('assets/wood_texture.webp');
    border: 3px solid var(--wood-dark);
    border-bottom-width: 5px;
    border-radius: 9px;
    box-shadow: var(--shadow-button);
    color: var(--text-cream);
    cursor: pointer;
    font-family: 'MedievalSharp', serif;
    font-size: 0.96rem;
    padding: 0.55rem 1rem;
    transition: transform var(--smooth), box-shadow var(--smooth), opacity var(--smooth);
}

.pitch-codex-link:hover:not(:disabled),
.pitch-nav-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.pitch-codex-link:disabled,
.pitch-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.pitch-controls {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: 1.3rem;
    position: relative;
    z-index: 2;
}

.pitch-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.pitch-dot {
    background: rgba(255, 248, 231, 0.62);
    border: 2px solid rgba(255, 217, 90, 0.42);
    border-radius: 999px;
    cursor: pointer;
    height: 12px;
    padding: 0;
    transition: transform var(--smooth), background var(--smooth), width var(--smooth);
    width: 12px;
}

.pitch-dot.active {
    background: var(--gold);
    transform: translateY(-1px);
    width: 32px;
}

.pitch-progress {
    color: var(--text-cream);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-top: 0.8rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
}

@media (max-width: 900px) {
    .pitch-shell {
        min-height: auto;
        padding: 0.8rem;
    }
    .pitch-stage,
    .pitch-slide {
        min-height: 760px;
    }
    .pitch-cover,
    .pitch-two-col,
    .pitch-loop,
    .pitch-timeline,
    .pitch-action-grid,
    .pitch-feature-grid,
    .pitch-proof-grid,
    .pitch-proof-notes,
    .pitch-positioning-grid,
    .pitch-ask-layout {
        grid-template-columns: 1fr;
    }
    .pitch-slide {
        padding: 1.3rem;
    }
    .pitch-cover-art {
        min-height: 230px;
    }
    .pitch-hero-portrait {
        height: 92%;
    }
    .pitch-threat-portrait {
        height: 76%;
    }
    .pitch-card-fan {
        align-items: stretch;
        flex-direction: column;
    }
    .pitch-unit-card,
    .pitch-unit-card:nth-child(n) {
        min-height: auto;
        transform: none;
        width: 100%;
    }
    .pitch-unit-card img {
        height: 120px;
    }
    .pitch-cta-links {
        justify-content: center;
    }
    .pitch-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pitch-stage,
    .pitch-slide {
        min-height: 820px;
    }
    .pitch-slide h2 {
        font-size: 2rem;
    }
    .pitch-plaque-grid,
    .pitch-portrait-row,
    .pitch-portrait-row-large,
    .pitch-portrait-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pitch-portrait-row img {
        height: 145px;
    }
    .pitch-portrait-mosaic img {
        height: 130px;
    }
    .pitch-cover-art {
        min-height: 250px;
    }
    .pitch-slide {
        border-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce), (max-width: 700px) {
    .pitch-slide,
    .pitch-slide.leaving-next,
    .pitch-slide.leaving-prev {
        animation: none;
        transform: none;
        transition: opacity 180ms ease;
    }
}

/* ════════════════════════════════════════════════════
   UNIT PORTRAIT IN BESTIARY CARDS
   ════════════════════════════════════════════════════ */

/* Tighter card grid for portrait cards */
#units-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card-portrait-wrapper {
    width: 100%;
    height: 185px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #2a1608 0%, #0e0804 100%);
    position: relative;
    border-bottom: 2px solid var(--wood-dark);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    transition: transform 0.45s ease;
}

.codex-card:hover .card-portrait {
    transform: scale(1.05);
}

/* Level badge — bottom-left corner of portrait */
.card-level-badge {
    position: absolute;
    bottom: 6px;
    left: 7px;
    background: rgba(20, 10, 4, 0.82);
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: var(--pill-radius);
    border: 1px solid var(--gold-dark);
    letter-spacing: 0.5px;
    backdrop-filter: blur(2px);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}

/* CP badge — top-right corner of portrait */
.card-cp-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    background: rgba(20, 10, 4, 0.82);
    color: var(--text-cream);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
    border-radius: var(--pill-radius);
    border: 1px solid var(--wood-light);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.card-cp-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

.card-portrait-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    background: linear-gradient(135deg, var(--wood-darkest) 0%, var(--wood-dark) 100%);
}

/* Stat icons inside card stat rows */
.card-stat-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
    flex-shrink: 0;
}

/* Featured card portrait (circular frame on home page) */
.featured-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}

.featured-card .portrait-frame .card-portrait-fallback {
    font-size: 2rem;
    background: transparent;
    border-radius: 50%;
}

/* ════════════════════════════════════════════════════
   MODAL — GAME-STYLE STAT PANEL
   ════════════════════════════════════════════════════ */

/* Wider modal to fit the full stat panel */
.modal-frame {
    max-width: 860px;
}

/* Portrait + info header */
.modal-header {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.modal-portrait-frame {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a0f06, var(--wood-darkest));
    border: 4px solid var(--gold-dark);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.3);
}

.modal-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.modal-portrait-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.modal-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.2rem;
}

/* Info chips row (Level · Size · Class · Faction) */
.modal-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.modal-info-chip {
    background: rgba(0,0,0,0.07);
    color: var(--ink-light);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--pill-radius);
    border: 1px solid var(--parchment-dark);
}

.item-card-clickable {
    cursor: pointer;
}

.item-card-icon-frame {
    width: 74px;
    height: 74px;
    margin: 0.65rem auto 0;
    border: 3px solid var(--wood-light);
    border-radius: 10px;
    background:
        radial-gradient(circle at 45% 30%, rgba(255,255,255,0.45), transparent 35%),
        linear-gradient(145deg, var(--parchment-light), var(--parchment-dark));
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 5px 10px rgba(44,26,14,0.24);
}

.item-card-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(44,26,14,0.45));
}

.item-preview-modal {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.item-preview-card {
    --item-rarity: #fff;
    position: relative;
    isolation: isolate;
    width: min(100%, 576px);
    min-height: 832px;
    overflow: hidden;
    border: 8px solid #27323d;
    border-radius: 32px 32px 10px 10px;
    background:
        linear-gradient(90deg, rgba(41, 35, 27, 0.22) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 248, 218, 0.14), transparent 18%),
        radial-gradient(circle at 50% 20%, rgba(255, 241, 178, 0.22), transparent 34%),
        linear-gradient(180deg, #95896b 0%, #877a61 52%, #7c725b 100%);
    box-shadow:
        inset 0 0 0 2px rgba(247, 228, 174, 0.24),
        inset 0 0 36px rgba(53, 39, 24, 0.28),
        0 22px 46px rgba(50, 33, 18, 0.18);
    color: #fff;
}

.item-preview-card::before {
    position: absolute;
    inset: 9px;
    z-index: -1;
    border: 2px solid rgba(37, 45, 52, 0.5);
    border-radius: 23px 23px 8px 8px;
    box-shadow: inset 0 0 0 1px rgba(251, 230, 174, 0.18);
    content: "";
}

.item-preview-art-stage {
    position: relative;
    min-height: 528px;
}

.item-preview-oval {
    position: absolute;
    top: 16px;
    right: 13%;
    bottom: 9px;
    left: 13%;
    border: 7px solid rgba(203, 178, 99, 0.86);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 245, 201, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(181, 169, 133, 0.8), rgba(138, 128, 101, 0.78));
    box-shadow:
        inset 0 0 0 2px rgba(87, 67, 32, 0.35),
        0 0 0 2px rgba(255, 247, 198, 0.2),
        0 0 26px rgba(245, 220, 134, 0.32);
}

.item-preview-image-wrap {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(66%, 352px);
    aspect-ratio: 0.62 / 1;
    transform: translateX(-50%) rotate(13deg);
    filter: drop-shadow(0 14px 10px rgba(35, 24, 18, 0.42));
}

.item-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-preview-image-fallback {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 12rem;
    transform: translate(-50%, -50%);
    color: rgba(255, 245, 210, 0.86);
    font-family: 'MedievalSharp', serif;
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
}

.item-preview-stat {
    position: absolute;
    z-index: 2;
    min-width: 8rem;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 0 #1d1d1d, 0 0 5px rgba(0,0,0,0.8);
}

.item-preview-stat-top-left {
    top: 18px;
    left: 6px;
}

.item-preview-stat-top-right {
    top: 18px;
    right: 6px;
}

.item-preview-stat-bottom-left {
    bottom: 38px;
    left: 2px;
}

.item-preview-stat-bottom-right {
    right: 2px;
    bottom: 38px;
}

.item-preview-stat-bottom-center {
    bottom: 11px;
    left: 2px;
}

.item-preview-stat-values {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.item-preview-stat-orb {
    position: relative;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 4px solid rgba(57, 45, 27, 0.85);
    border-radius: 999px;
    background:
        radial-gradient(circle at 42% 28%, rgba(255, 247, 192, 0.32), transparent 28%),
        linear-gradient(145deg, #6f5e38, #b6a05d 45%, #5f512f);
    box-shadow: inset 0 0 0 2px rgba(255, 240, 170, 0.28), 0 4px 8px rgba(20,17,12,0.34);
    font-family: 'MedievalSharp', serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.item-preview-stat-top-left .item-preview-stat-orb {
    background:
        radial-gradient(circle at 42% 28%, rgba(255, 205, 164, 0.34), transparent 28%),
        linear-gradient(145deg, #5a1d14, #a84425 48%, #612215);
}

.item-preview-stat-top-right .item-preview-stat-orb {
    background:
        radial-gradient(circle at 42% 28%, rgba(211, 244, 255, 0.34), transparent 28%),
        linear-gradient(145deg, #304d5b, #6ca5b9 48%, #31414d);
}

.item-preview-stat-icon {
    position: absolute;
    top: -14px;
    right: -12px;
    width: auto;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.55));
}

.item-preview-stat-label {
    margin-top: -1px;
    font-family: 'MedievalSharp', serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 0.92;
    text-transform: uppercase;
}

.item-preview-level-gem {
    position: absolute;
    right: 50%;
    bottom: 4px;
    z-index: 3;
    display: grid;
    width: 96px;
    min-height: 90px;
    place-items: center;
    transform: translateX(50%);
    clip-path: polygon(50% 0, 92% 24%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 8% 24%);
    background:
        radial-gradient(circle at 50% 25%, rgba(218, 255, 85, 0.86), transparent 32%),
        linear-gradient(145deg, #a7dc21, #4b960f 60%, #2e5b0b);
    text-align: center;
    text-shadow: 0 2px 0 rgba(0,0,0,0.75);
    text-transform: uppercase;
}

.item-preview-level-gem span,
.item-preview-level-gem strong,
.item-preview-level-gem small {
    font-family: 'MedievalSharp', serif;
    font-weight: 700;
}

.item-preview-level-gem span {
    align-self: end;
    font-size: 1.05rem;
}

.item-preview-level-gem strong {
    margin-top: -6px;
    font-size: 2.75rem;
    line-height: 0.8;
}

.item-preview-level-gem small {
    margin-top: -4px;
    font-size: 0.82rem;
}

.item-preview-copy {
    position: relative;
    z-index: 1;
    padding: 6px 14px 110px;
    text-shadow: 0 2px 0 #1d1d1d, 0 0 4px rgba(0,0,0,0.65);
}

.item-preview-copy h2 {
    color: var(--item-rarity);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(2.15rem, 8vw, 3.3rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
}

.item-preview-rarity {
    color: var(--item-rarity);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(1.45rem, 5vw, 2.05rem);
    font-weight: 700;
    line-height: 0.98;
    text-align: center;
    text-transform: uppercase;
}

.description-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #fff;
    font-weight: 900;
}

.item-preview-description {
    margin-top: 1.25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
}

.item-preview-description strong {
    font-weight: 900;
}

.item-preview-weight {
    position: absolute;
    right: 14px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 74px;
    min-height: 52px;
    border: 4px solid #203040;
    border-radius: 5px;
    background: linear-gradient(180deg, #b8d7e2, #668594 62%, #314454);
    color: #fff;
    font-family: 'MedievalSharp', serif;
    font-size: 1.7rem;
    font-weight: 700;
    text-shadow: 0 2px 0 rgba(0,0,0,0.72);
    padding: 4px 6px;
}

.item-preview-weight-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) brightness(1.2);
    flex-shrink: 0;
}

/* Unit flavour description in modal */
.modal-unit-description {
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-light);
    line-height: 1.6;
    padding: 0.6rem 0.9rem;
    background: rgba(255,255,255,0.35);
    border-left: 3px solid var(--gold-dark);
    border-radius: 0 6px 6px 0;
    margin-top: 0.5rem;
}

/* Section divider */
.modal-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--parchment-dark) 20%, var(--parchment-dark) 80%, transparent);
    margin: 0.8rem 0;
}

/* Stat section wrapper */
.modal-stat-section {
    margin-bottom: 0.6rem;
}

/* Section title — full-width dark wood band, centered */
.modal-stat-section-title {
    font-family: 'MedievalSharp', serif;
    font-size: 0.72rem;
    color: var(--text-cream);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    padding: 0.3rem 1rem;
    background: linear-gradient(to right, var(--wood-darkest), var(--wood-dark) 15%, var(--wood-dark) 85%, var(--wood-darkest));
    border-top: 1px solid var(--wood-light);
    border-bottom: 1px solid var(--wood-darkest);
    border-radius: 4px;
    display: block;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Stat panel base grid */
.modal-stat-panel {
    display: grid;
    gap: 0.3rem;
}

/* Named grid sizes matching the game UI layout */
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }  /* CORE */
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }  /* Resistances / SAVES */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }  /* UTILITY */

/* Resistances + SAVES side by side */
.modal-stat-sections-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.modal-stat-section.flex-half {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Individual stat cell — vertical: label on top, icon+value below */
.modal-stat-cell {
    background: rgba(0,0,0,0.05);
    border: 1px solid var(--parchment-dark);
    border-radius: 5px;
    padding: 0.35rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    transition: background var(--smooth);
}

.modal-stat-cell:hover {
    background: rgba(0,0,0,0.1);
}

/* Stat label (top row) */
.modal-stat-name {
    font-size: 0.58rem;
    color: var(--ink-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon + value row (bottom row) */
.modal-stat-value-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.modal-stat-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.modal-stat-val {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ribbon-green-dark);
    line-height: 1.2;
}

/* ── Abilities in modal ── */
.modal-ability-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Override old flex-row default — ability items are now column */
.modal-ability-item {
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--parchment-dark);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Row inside each ability: icon + name + tags */
.modal-ability-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Ability icon image (from assets/abilities/) */
.modal-ability-icon-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 5px;
    background: var(--wood-darkest);
    padding: 3px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Emoji shown when ability image is missing */
.modal-ability-type-emoji {
    font-size: 1.4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.modal-ability-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Compact variant (equipment rows) */
.modal-ability-item.compact {
    flex-direction: row;
    align-items: center;
    padding: 0.4rem 0.8rem;
    gap: 0.5rem;
}

/* Responsive: collapse grids on small screens */
@media (max-width: 640px) {
    .stat-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .modal-stat-sections-row { flex-direction: column; gap: 0.6rem; }
    .modal-overlay {
        padding: 0.65rem;
    }
    .modal-parchment {
        padding: 0.7rem;
    }
    .item-preview-card {
        min-height: 781px;
        border-width: 6px;
    }
    .item-preview-art-stage {
        min-height: 480px;
    }
    .item-preview-stat {
        min-width: 6.4rem;
    }
    .item-preview-stat-orb {
        width: 58px;
        height: 58px;
        font-size: 1.35rem;
    }
    .item-preview-stat-label {
        font-size: 1.1rem;
    }
    .item-preview-level-gem {
        width: 82px;
        min-height: 78px;
    }
    .item-preview-level-gem strong {
        font-size: 2.25rem;
    }
    .item-preview-description {
        font-size: 0.92rem;
    }
    .modal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .modal-header-info {
        align-items: center;
    }
    .modal-info-chips {
        justify-content: center;
    }
    .modal-stat-section-title {
        justify-content: center;
    }
    .modal-stat-section-title::after {
        display: none;
    }
}

/* ════════════════════════════════════════════════════
   PUBLIC SITE POLISH — TACTICSMITH GAMES
   Keeps the data-rich codex intact while giving the public entry point
   a studio-led landing-page hierarchy.
   ════════════════════════════════════════════════════ */
.header-inner {
    flex-wrap: nowrap;
    max-width: 1440px;
    padding: 0.65rem 1.25rem 0.55rem;
}

.logo-area {
    flex: 0 0 auto;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(145deg, var(--gold-light), var(--gold-dark));
    border: 2px solid rgba(255, 248, 231, 0.72);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--wood-darkest), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    display: inline-flex;
    height: 42px;
    object-fit: contain;
    padding: 2px;
    text-shadow: none;
    width: 42px;
}

.logo-main {
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}

.logo-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    margin-top: 0;
}

#main-nav {
    flex-wrap: nowrap;
    gap: 0.35rem;
    scrollbar-width: none;
}

#main-nav::-webkit-scrollbar {
    display: none;
}

.wood-tab {
    min-height: 44px;
    padding: 0.48rem 0.7rem;
}

#main-content {
    max-width: 1440px;
    padding-top: 1.35rem;
}

.landing-hero {
    background:
        linear-gradient(90deg, rgba(28, 14, 7, 0.98) 0%, rgba(44, 26, 14, 0.93) 46%, rgba(44, 26, 14, 0.42) 74%, rgba(20, 9, 4, 0.74) 100%),
        url('assets/fantasy_background.webp') center/cover no-repeat;
    border: 2px solid rgba(240, 192, 64, 0.42);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(44, 26, 14, 0.32), inset 0 0 0 1px rgba(255, 248, 231, 0.08);
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.6rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 3.6rem);
    position: relative;
    text-align: left;
}

.landing-hero::after {
    background: linear-gradient(90deg, transparent, rgba(255, 217, 90, 0.16), transparent);
    content: '';
    height: 1px;
    left: 7%;
    position: absolute;
    right: 7%;
    top: 0;
}

.landing-hero-copy {
    align-self: center;
    max-width: 720px;
    position: relative;
    z-index: 2;
}

.studio-kicker {
    color: var(--gold-light);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.working-title-badge {
    border: 1px solid rgba(255, 217, 90, 0.5);
    border-radius: 999px;
    color: rgba(255, 248, 231, 0.8);
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin: -0.2rem 0 1rem;
    padding: 0.35rem 0.65rem;
    text-transform: uppercase;
}

.footer-working-title {
    color: rgba(255, 248, 231, 0.58);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    margin-left: 0.35rem;
    text-transform: uppercase;
}

.landing-hero .home-hero-title {
    color: var(--text-cream);
    font-size: clamp(2.65rem, 5.8vw, 5.3rem);
    letter-spacing: -0.025em;
    line-height: 0.95;
    margin-bottom: 1rem;
    max-width: 760px;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.home-hero-hook {
    color: var(--gold-light);
    font-family: 'MedievalSharp', serif;
    font-size: clamp(1.2rem, 2.3vw, 1.8rem);
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.landing-hero .home-hero-subtitle {
    color: rgba(255, 248, 231, 0.9);
    font-size: clamp(0.98rem, 1.45vw, 1.12rem);
    line-height: 1.65;
    margin: 0;
    max-width: 650px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.hero-cta {
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    min-height: 46px;
    padding: 0.7rem 1.05rem;
    transition: transform var(--smooth), box-shadow var(--smooth), background-color var(--smooth);
}

.hero-cta:hover {
    transform: translateY(-2px);
}

.hero-cta-primary {
    background: var(--gold-light);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 4px 0 #8f6812, 0 10px 20px rgba(0, 0, 0, 0.24);
    color: var(--wood-darkest);
}

.hero-cta-secondary {
    background: rgba(255, 248, 231, 0.07);
    border: 2px solid rgba(255, 248, 231, 0.62);
    color: var(--text-cream);
}

.hero-proof {
    color: rgba(255, 248, 231, 0.78);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 0.55rem 1.2rem;
    list-style: none;
    margin-top: 1.2rem;
}

.hero-proof li::before {
    color: var(--gold);
    content: '✦';
    margin-right: 0.4rem;
}

.landing-hero-art {
    align-self: stretch;
    background:
        radial-gradient(circle at 52% 25%, rgba(255, 217, 90, 0.24), transparent 35%),
        linear-gradient(180deg, rgba(255, 248, 231, 0.08), rgba(12, 6, 3, 0.38));
    border: 1px solid rgba(255, 217, 90, 0.24);
    border-radius: 13px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.32);
    min-height: 400px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.landing-hero-art img {
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.48));
    object-fit: contain;
    pointer-events: none;
    position: absolute;
}

.hero-art-drake {
    height: 92%;
    opacity: 0.92;
    right: -7%;
    top: -4%;
}

.hero-art-commander {
    bottom: -2%;
    height: 72%;
    left: 19%;
    z-index: 3;
}

.hero-art-wolf {
    bottom: -8%;
    height: 60%;
    left: -7%;
    z-index: 2;
}

.hero-art-label {
    background: rgba(20, 9, 4, 0.78);
    border: 1px solid rgba(255, 217, 90, 0.28);
    border-radius: 999px;
    bottom: 0.8rem;
    color: var(--text-cream);
    font-family: 'MedievalSharp', serif;
    font-size: 0.78rem;
    left: 50%;
    letter-spacing: 0.08em;
    padding: 0.38rem 0.78rem;
    position: absolute;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 5;
}

.landing-hero .home-hero-stats {
    grid-column: 1 / -1;
    margin: 0;
    position: relative;
    z-index: 4;
}

.landing-hero-art .hero-key-art {
    filter: none;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: 82% center;
    position: absolute;
    width: 100%;
}

.landing-hero .hero-stat-pill {
    background: rgba(20, 9, 4, 0.76);
    border-color: rgba(255, 217, 90, 0.22);
    color: var(--text-cream);
}

.footer-wood {
    padding: 1.1rem 1rem 1.25rem;
}

.footer-wood strong {
    color: var(--gold-light);
}

@media (max-width: 1120px) {
    .header-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }
    .logo-area {
        justify-content: center;
    }
    #main-nav {
        justify-content: center;
        overflow-x: auto;
        padding: 0 0.2rem 0.25rem;
    }
    .tab-label {
        display: inline;
    }
}

@media (max-width: 900px) {
    .landing-hero {
        grid-template-columns: 1fr;
    }
    .landing-hero-copy {
        max-width: 760px;
    }
    .landing-hero-art {
        min-height: 310px;
    }
    .pitch-stage {
        min-height: 0;
    }
    .pitch-slide {
        display: none;
        inset: auto;
        min-height: 0;
        overflow: visible;
        position: relative;
    }
    .pitch-slide.active {
        display: grid;
    }
}

@media (max-width: 600px) {
    .header-inner {
        padding: 0.45rem 0.55rem 0.4rem;
        text-align: left;
    }
    .logo-area {
        justify-content: flex-start;
    }
    .brand-mark {
        border-radius: 9px;
        height: 36px;
        width: 36px;
    }
    .logo-main {
        font-size: 1.04rem;
    }
    .logo-sub {
        font-size: 0.53rem;
    }
    #main-nav {
        justify-content: flex-start;
        scroll-snap-type: x proximity;
    }
    .wood-tab {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 0.48rem 0.65rem;
        scroll-snap-align: start;
    }
    .tab-label {
        display: inline;
        font-family: 'Nunito', sans-serif;
        font-size: 0.76rem;
        font-weight: 800;
    }
    #main-content {
        padding: 0.75rem 0.45rem;
    }
    .parchment-surface {
        padding: 0.65rem;
    }
    .landing-hero {
        gap: 1.15rem;
        padding: 1.25rem 1rem 1.1rem;
    }
    .landing-hero .home-hero-title {
        font-size: clamp(2.3rem, 14vw, 3.35rem);
    }
    .landing-hero .home-hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.55;
    }
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .hero-cta {
        width: 100%;
    }
    .hero-proof {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.38rem;
    }
    .landing-hero-art {
        min-height: 205px;
    }
    .hero-art-label {
        font-size: 0.66rem;
    }
    .landing-hero .home-hero-stats {
        justify-content: flex-start;
    }
    .landing-hero .hero-stat-pill {
        font-size: 0.7rem;
        padding: 0.35rem 0.62rem;
    }
}

/* ════════════════════════════════════════════════════
   EDITORIAL UI PASS — OVERVIEW + PUBLISHER DECK
   Removes legacy icon-led presentation in favor of typography, rhythm,
   strong hierarchy, and reusable game artwork.
   ════════════════════════════════════════════════════ */
.tab-icon,
.home-section-icon,
.loop-step-icon,
.mechanic-item-icon,
.mechanic-card-icon,
.faction-icon,
.board-icon,
.pitch-action-grid img,
.pitch-feature-grid img,
.pitch-unit-card img {
    display: none;
}

.wood-tab {
    border: 1px solid rgba(255, 248, 231, 0.18);
    border-bottom-width: 3px;
    border-radius: 7px;
    box-shadow: 0 3px 0 var(--wood-darkest);
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    padding-inline: 0.85rem;
}

.wood-tab:hover {
    box-shadow: 0 4px 0 var(--wood-darkest), 0 8px 16px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}

.wood-tab.active {
    background: var(--gold-light);
    border-color: var(--gold-dark);
    box-shadow: 0 3px 0 #8f6812;
    color: var(--wood-darkest);
    text-shadow: none;
}

#page-home .codex-frame {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

#page-home .frame-corner {
    display: none;
}

#page-home .parchment-surface {
    background:
        linear-gradient(180deg, rgba(250, 244, 233, 0.98), rgba(239, 225, 203, 0.98)),
        url('assets/parchment_texture.webp') center/520px repeat;
    border: 1px solid rgba(77, 47, 25, 0.24);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(20, 9, 4, 0.3);
    counter-reset: overview-section;
    padding: clamp(0.8rem, 2vw, 1.4rem);
}

.landing-hero .home-hero-stats {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.landing-hero .hero-stat-pill {
    align-items: flex-start;
    background: rgba(20, 9, 4, 0.68);
    border: 1px solid rgba(255, 217, 90, 0.2);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    font-family: 'Nunito', sans-serif;
    line-height: 1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
}

.landing-hero .hero-stat-pill span {
    color: var(--text-cream);
    font-family: 'MedievalSharp', serif;
    font-size: 1.35rem;
}

.landing-hero .hero-stat-pill small {
    color: rgba(255, 248, 231, 0.65);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-top: 0.38rem;
    text-transform: uppercase;
}

.home-section {
    counter-increment: overview-section;
    margin: clamp(2.2rem, 5vw, 4rem) auto 0;
}

.home-section-header {
    align-items: baseline;
    background: transparent;
    border-bottom: 1px solid rgba(74, 46, 22, 0.22);
    border-radius: 0;
    box-shadow: none;
    color: var(--wood-darkest);
    display: flex;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    font-weight: 900;
    justify-content: flex-start;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    padding: 0 0 0.75rem;
    text-transform: none;
}

.home-section-header::before {
    color: var(--ribbon-red-dark);
    content: '0' counter(overview-section);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-right: 0.8rem;
}

.phase-timeline,
.loop-steps {
    align-items: stretch;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phase-arrow,
.loop-connector {
    display: none;
}

.phase-card,
.loop-step,
.mechanic-card,
.faction-card,
.home-col-block {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(74, 46, 22, 0.16);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(74, 46, 22, 0.07);
}

.phase-card,
.loop-step {
    padding: 1.05rem;
    text-align: left;
}

.phase-card:hover,
.loop-step:hover,
.mechanic-card:hover,
.faction-card:hover {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 24px rgba(74, 46, 22, 0.1);
    transform: translateY(-2px);
}

.phase-num {
    color: var(--ribbon-red-dark);
    font-family: 'Nunito', sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.phase-name,
.loop-step-label,
.mechanic-card-title,
.faction-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.94rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.loop-steps {
    counter-reset: loop-step;
}

.loop-step {
    counter-increment: loop-step;
}

.loop-step::before {
    color: var(--gold-dark);
    content: '0' counter(loop-step);
    display: block;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin-bottom: 0.55rem;
}

.mechanic-list {
    gap: 0;
}

.mechanic-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(74, 46, 22, 0.13);
    border-radius: 0;
    padding: 0.95rem 0;
}

.mechanic-item:last-child {
    border-bottom: 0;
}

.mechanic-grid,
.faction-grid {
    gap: 0.8rem;
}

.mechanic-card,
.faction-card {
    padding: 1rem;
    text-align: left;
}

.mechanic-card::before,
.faction-card::before {
    background: linear-gradient(90deg, var(--gold-dark), transparent);
    content: '';
    display: block;
    height: 2px;
    margin-bottom: 0.85rem;
    width: 42px;
}

.nav-board-grid {
    gap: 0.7rem;
}

.nav-board-card {
    align-items: flex-start;
    background: var(--wood-darkest);
    border: 1px solid rgba(255, 217, 90, 0.2);
    border-radius: 12px;
    box-shadow: none;
    color: var(--text-cream);
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 1rem;
    text-align: left;
}

.nav-board-card:hover {
    background: #3b2313;
    box-shadow: 0 12px 24px rgba(44, 26, 14, 0.22);
    transform: translateY(-2px);
}

.board-title {
    color: var(--text-cream);
    font-family: 'Nunito', sans-serif;
    font-size: 0.96rem;
    font-weight: 900;
}

.board-desc {
    color: rgba(255, 248, 231, 0.64);
    font-size: 0.75rem;
}

.board-count {
    color: var(--gold-light);
    font-family: 'MedievalSharp', serif;
    font-size: 2rem;
    margin-top: auto;
}

/* Publisher deck v2 */
.pitch-shell {
    background:
        radial-gradient(circle at 8% 4%, rgba(255, 205, 82, 0.12), transparent 28%),
        radial-gradient(circle at 92% 86%, rgba(151, 54, 42, 0.18), transparent 32%),
        #15110e;
    border: 1px solid rgba(255, 217, 90, 0.2);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
    min-height: 0;
    padding: clamp(0.8rem, 2.2vw, 1.5rem);
}

.pitch-shell::before {
    background: none;
}

.pitch-stage {
    min-height: 680px;
    perspective: none;
}

.pitch-slide {
    background: linear-gradient(145deg, #fbf7f0, #efe4d4);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    min-height: 680px;
    padding: clamp(1.5rem, 4.5vw, 4rem);
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 300ms ease;
}

.pitch-slide::after {
    display: none;
}

.pitch-slide.active {
    transform: translateY(0);
}

.pitch-slide.leaving-next,
.pitch-slide.leaving-prev {
    animation: none;
}

.pitch-overline {
    color: #9b382b;
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.9rem;
}

.pitch-slide h2 {
    color: #241710;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(2.2rem, 5.4vw, 4.7rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-shadow: none;
}

.pitch-tagline {
    color: #9b382b;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.pitch-lead {
    color: #574438;
    font-size: clamp(0.98rem, 1.5vw, 1.12rem);
    line-height: 1.7;
}

.pitch-quote {
    background: #241710;
    border: 0;
    border-radius: 12px;
    color: #fff5dc;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    font-weight: 800;
    padding: 1.2rem 1.35rem;
}

.pitch-cover,
.pitch-two-col {
    gap: clamp(1.5rem, 4vw, 3.4rem);
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
}

.pitch-cover-art,
.pitch-portrait-mosaic {
    background: #211710;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(44, 26, 14, 0.25);
    min-height: 390px;
    overflow: hidden;
}

.pitch-key-art {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pitch-portrait-mosaic {
    background: url('assets/og.png') 62% center/cover no-repeat;
}

.pitch-portrait-mosaic img {
    display: none;
}

.pitch-meta-row span {
    background: transparent;
    border: 1px solid rgba(74, 46, 22, 0.22);
    color: #574438;
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.pitch-loop,
.pitch-timeline,
.pitch-action-grid,
.pitch-feature-grid,
.pitch-proof-grid,
.pitch-proof-notes,
.pitch-positioning-grid,
.pitch-plaque-grid {
    gap: 0.7rem;
}

.pitch-loop {
    counter-reset: pitch-loop;
}

.pitch-loop div {
    counter-increment: pitch-loop;
}

.pitch-loop div::before {
    color: #c28b22;
    content: '0' counter(pitch-loop);
    display: block;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin-bottom: 0.7rem;
}

.pitch-loop div,
.pitch-timeline div,
.pitch-plaque-grid div,
.pitch-proof-grid div,
.pitch-proof-notes div,
.pitch-positioning-grid div,
.pitch-pillar-stack div,
.pitch-action-grid div,
.pitch-ask-stack div,
.pitch-feature-grid div {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(74, 46, 22, 0.14);
    border-radius: 10px;
    box-shadow: none;
    padding: 1rem;
}

.pitch-loop span,
.pitch-timeline strong,
.pitch-plaque-grid strong,
.pitch-proof-grid strong,
.pitch-proof-notes strong,
.pitch-positioning-grid strong,
.pitch-pillar-stack strong,
.pitch-action-grid strong,
.pitch-ask-stack strong,
.pitch-feature-grid strong {
    color: #2f2018;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
}

.pitch-action-grid div,
.pitch-feature-grid div {
    min-height: 0;
}

.pitch-unit-card,
.pitch-unit-card:nth-child(n) {
    align-content: center;
    background: #241710;
    border: 1px solid rgba(255, 217, 90, 0.22);
    border-radius: 12px;
    box-shadow: none;
    color: #fff5dc;
    counter-increment: pitch-unit;
    min-height: 190px;
    padding: 1.1rem;
    transform: none;
    width: 180px;
}

.pitch-card-fan {
    counter-reset: pitch-unit;
    gap: 0.8rem;
    margin-top: 2.25rem;
}

.pitch-unit-card::before {
    align-self: start;
    color: rgba(255, 217, 90, 0.5);
    content: '0' counter(pitch-unit);
    font-size: 0.65rem;
    font-weight: 900;
    justify-self: start;
    letter-spacing: 0.16em;
}

.pitch-unit-card strong {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
}

.pitch-unit-card span {
    background: transparent;
    color: #e8c46e;
    font-size: 0.72rem;
    padding: 0.2rem 0;
}

.pitch-proof-grid div {
    background: #241710;
}

.pitch-proof-grid strong {
    color: #ffd95a;
}

.pitch-proof-grid span {
    color: rgba(255, 248, 231, 0.66);
}

.pitch-codex-link,
.pitch-nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 248, 231, 0.28);
    border-radius: 8px;
    box-shadow: none;
    color: #fff8e7;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
}

.pitch-slide .pitch-codex-link {
    background: #241710;
    border-color: #241710;
}

.pitch-codex-link:hover:not(:disabled),
.pitch-nav-btn:hover:not(:disabled) {
    background: #3a281e;
    transform: translateY(-1px);
}

.pitch-controls {
    gap: 0.8rem;
    margin: 1rem auto 0;
    max-width: 760px;
}

.pitch-dot {
    background: rgba(255, 248, 231, 0.24);
    border: 0;
    height: 6px;
    width: 6px;
}

.pitch-dot.active {
    background: #ffd95a;
    width: 28px;
}

.pitch-progress {
    color: rgba(255, 248, 231, 0.58);
    font-family: 'Nunito', sans-serif;
    font-size: 0.65rem;
}

@media (max-width: 1000px) {
    .phase-timeline,
    .loop-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .landing-hero .home-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .pitch-stage {
        min-height: 0;
    }
    .pitch-slide {
        display: none;
        inset: auto;
        min-height: 0;
        overflow: visible;
        position: relative;
    }
    .pitch-slide.active {
        display: grid;
    }
    .pitch-cover,
    .pitch-two-col {
        grid-template-columns: 1fr;
    }
    .pitch-cover-art,
    .pitch-portrait-mosaic {
        min-height: 310px;
    }
}

@media (max-width: 620px) {
    #page-home .parchment-surface {
        border-radius: 14px;
        padding: 0.5rem;
    }
    .landing-hero .home-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .phase-timeline,
    .loop-steps,
    .mechanic-grid,
    .mechanic-grid-4,
    .faction-grid {
        grid-template-columns: 1fr;
    }
    .home-section {
        margin-top: 2.4rem;
    }
    .home-section-header {
        font-size: 1.15rem;
    }
    .pitch-shell {
        border-radius: 14px;
        padding: 0.45rem;
    }
    .pitch-slide {
        border-radius: 12px;
        padding: 1.25rem;
    }
    .pitch-slide h2 {
        font-size: 2.2rem;
    }
    .pitch-cover-art,
    .pitch-portrait-mosaic {
        min-height: 220px;
    }
    .pitch-loop,
    .pitch-timeline,
    .pitch-action-grid,
    .pitch-feature-grid,
    .pitch-proof-grid,
    .pitch-proof-notes,
    .pitch-positioning-grid,
    .pitch-plaque-grid {
        grid-template-columns: 1fr;
    }
    .pitch-card-fan {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pitch-unit-card,
    .pitch-unit-card:nth-child(n) {
        min-height: 120px;
        width: 100%;
    }
}