/* ===================================================================
   HEARTH DASHBOARD — The Hearth Landing Page
   Chamber Map, Flame Status, Navigation
   =================================================================== */

/* === Dashboard Layout === */
.hearth-dashboard {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "nav    footer footer";
    grid-template-columns: 240px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    background: var(--color-bg);
}

/* === Ornate Header === */
.hearth-header {
    grid-area: header;
    background: linear-gradient(135deg, #1A0E08, #2C1810, #3E2723, #2C1810, #1A0E08);
    color: var(--color-text-inverse);
    text-align: center;
    padding: 1.25rem 2rem;
    border-bottom: 4px solid;
    border-image: linear-gradient(90deg, #8B6914, #D4A853, #F0D78C, #D4A853, #8B6914) 1;
    position: relative;
    overflow: hidden;
}

.hearth-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(215, 168, 110, 0.15) 0%, transparent 60%),
        var(--warm-vignette);
    pointer-events: none;
}

.hearth-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    color: #F0D78C;
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(215, 168, 110, 0.3);
}

.hearth-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: #D4A853;
    margin: 0.25rem 0 0;
    font-style: italic;
    letter-spacing: 0.12em;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Decorative lines around header */
.hearth-header-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
    position: relative;
}

.hearth-header-ornament::before,
.hearth-header-ornament::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-secondary), transparent);
}

/* === Left Navigation Sidebar — Wood-Plank with Placard Items === */
.hearth-nav-sidebar {
    grid-area: nav;
    /* Rich wood plank texture via layered gradients — fallback if no bg image */
    background:
        /* Horizontal grain lines — tight spacing for realism */
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 10px,
            rgba(0, 0, 0, 0.06) 10px,
            rgba(0, 0, 0, 0.06) 11px,
            transparent 11px,
            transparent 22px,
            rgba(139, 90, 43, 0.08) 22px,
            rgba(139, 90, 43, 0.08) 23px
        ),
        /* Vertical plank joints */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 119px,
            rgba(0, 0, 0, 0.2) 119px,
            rgba(0, 0, 0, 0.2) 120px
        ),
        /* Deep wood tone with warm highlights */
        linear-gradient(
            180deg,
            #2C1810 0%,
            #3A2318 10%,
            #2C1810 20%,
            #35201A 35%,
            #2C1810 50%,
            #3A2318 65%,
            #2C1810 80%,
            #35201A 90%,
            #2C1810 100%
        );
    /* Use generated wood texture if available */
    background-color: #2C1810;
    border-right: 4px solid;
    border-image: linear-gradient(180deg, #8B6914, #D4A853, #8B6914) 1;
    padding: 1.5rem 0.75rem;
    overflow-y: auto;
    position: relative;
    box-shadow:
        inset -6px 0 16px rgba(0, 0, 0, 0.5),
        inset 6px 0 16px rgba(0, 0, 0, 0.3);
}

/* If a generated texture image exists, use it */
.hearth-nav-sidebar.has-bg-image {
    background-image: url('../images/right-sidebar-bg.png');
    background-size: cover;
    background-repeat: repeat-y;
}

/* Warm firelight glow from bottom */
.hearth-nav-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 85%,
            rgba(255, 152, 50, 0.12) 0%,
            rgba(215, 168, 110, 0.06) 30%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.1) 0%,
            transparent 20%,
            transparent 70%,
            rgba(255, 120, 20, 0.06) 100%
        );
    pointer-events: none;
}

.hearth-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.hearth-nav-item {
    margin: 0;
}

/* Nav link — open layout, label plaque on top, large icon below */
.hearth-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.5rem 0.75rem;
    color: #E8C9A0;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-smooth);
    min-height: 48px;
    position: relative;
    border: none;
    background: none;
    border-radius: 0;
}

.hearth-nav-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.hearth-nav-link:hover {
    transform: translateY(-2px);
}

/* Wooden plaque label — sits on top like a carved nameplate */
.hearth-nav-label {
    order: -1;
    display: block;
    padding: 0.35rem 0.9rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F0D78C;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    background:
        linear-gradient(180deg,
            #6D4C41 0%, #4E342E 15%, #3A2318 50%, #4E342E 85%, #6D4C41 100%
        );
    border: 2px solid #B8894A;
    border-radius: 4px;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(240, 215, 140, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Inner bevel on plaque */
.hearth-nav-label::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(184, 137, 74, 0.25);
    border-radius: 2px;
    pointer-events: none;
}

.hearth-nav-link:hover .hearth-nav-label {
    border-color: #D4A853;
    color: #FFF5E0;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(215, 168, 110, 0.2),
        inset 0 1px 0 rgba(240, 215, 140, 0.2);
}

.hearth-nav-link.active .hearth-nav-label {
    border-color: #F0D78C;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(240, 215, 140, 0.25),
        inset 0 1px 0 rgba(240, 215, 140, 0.25);
}

/* Nav icon — large, prominent, below the label plaque */
.hearth-nav-icon {
    width: 86px;
    height: 86px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: contain;
    transition: transform var(--transition-smooth), filter var(--transition-smooth);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

svg.hearth-nav-icon {
    color: #D4A853;
}

img.hearth-nav-icon {
    border: none;
    background: none;
}

.hearth-nav-link:hover .hearth-nav-icon {
    transform: scale(1.08);
    filter:
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 15px rgba(215, 168, 110, 0.3));
}

.hearth-nav-link.active .hearth-nav-icon {
    filter:
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 20px rgba(240, 215, 140, 0.35));
}

svg.hearth-nav-icon { color: #D4A853; }
.hearth-nav-link:hover svg.hearth-nav-icon,
.hearth-nav-link.active svg.hearth-nav-icon { color: #F0D78C; }

/* Warm firelight glow between nav items */
.hearth-nav-item {
    position: relative;
}

.hearth-nav-item::after {
    content: '';
    display: block;
    height: 8px;
    margin: 0.15rem 1rem 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 130, 20, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* === Main Content Area — Warm wood floor feel === */
.hearth-main {
    grid-area: main;
    padding: 2rem;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(62, 39, 35, 0.06) 0%, transparent 20%),
        linear-gradient(160deg, #F5E6D3, #E8D0B0, #F0DCC4);
}

/* === Chamber Map — Fireplace background with cards around center === */
.chamber-map {
    position: relative;
    background:
        /* Heavy dark wash — fireplace is ambient, not dominant */
        linear-gradient(180deg, rgba(5, 2, 1, 0.72) 0%, rgba(10, 5, 2, 0.55) 35%, rgba(10, 5, 2, 0.55) 65%, rgba(5, 2, 1, 0.72) 100%),
        /* Strong vignette edges */
        radial-gradient(ellipse at 50% 55%, transparent 10%, rgba(5, 2, 1, 0.55) 50%, rgba(2, 1, 0, 0.85) 100%),
        /* Fireplace scene as full background */
        url('../images/chamber-card-hearth-bg.png');
    background-size: auto, auto, cover;
    background-position: center, center, center 40%;
    background-color: #1A0E08;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.chamber-map-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #F0D78C;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

/* Grid: 3 cols top row, gap, 2 cols bottom row — fluid card sizing */
.chamber-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto minmax(60px, 1fr) auto;
    grid-template-areas:
        "c1 c2 c3"
        ". . ."
        "c4 . c5";
    gap: 1rem;
    justify-items: center;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* Card positions on the grid */
.chamber-card--pos1 { grid-area: c1; }
.chamber-card--pos2 { grid-area: c2; }
.chamber-card--pos3 { grid-area: c3; }
.chamber-card--pos4 { grid-area: c4; align-self: end; }
.chamber-card--pos5 { grid-area: c5; align-self: end; }

/* ─── Chamber Card — Fluid dark-framed module tile ─── */
.chamber-card {
    position: relative;
    width: 100%;
    max-width: 200px;
    min-width: 100px;
    background: linear-gradient(180deg, #4E342E 0%, #3A2318 100%);
    border: 3px solid #6D4C41;
    border-radius: 8px;
    overflow: visible;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    text-align: center;
}

.chamber-card:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(215, 168, 110, 0.15);
}

/* Number badge — gold circle, overlapping top-left */
.chamber-card-number {
    position: absolute;
    top: -10px;
    left: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D4A853, #B8894A);
    color: #2C1810;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.9rem;
    border: 2px solid #F0D78C;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Zone accent on number badge */
.chamber-card[data-zone="1"] .chamber-card-number { background: linear-gradient(135deg, var(--zone-1-color), #4E342E); color: #F0D78C; }
.chamber-card[data-zone="2"] .chamber-card-number { background: linear-gradient(135deg, var(--zone-2-color), #6D4C41); color: #F0D78C; }
.chamber-card[data-zone="3"] .chamber-card-number { background: linear-gradient(135deg, var(--zone-3-color), #795548); color: #F0D78C; }
.chamber-card[data-zone="4"] .chamber-card-number { background: linear-gradient(135deg, var(--zone-4-color), #B8894A); color: #2C1810; }
.chamber-card[data-zone="5"] .chamber-card-number { background: linear-gradient(135deg, var(--zone-5-color), #D4A853); color: #2C1810; }

/* Thumbnail — square illustration inside card */
.chamber-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    background: #5D4037;
}

.chamber-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title banner — warm dark strip */
.chamber-card-title {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    color: #F0D78C;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0.35rem 0.4rem;
    line-height: 1.3;
    background: linear-gradient(180deg, #5D4037, #3E2723);
    border-top: 1px solid rgba(184, 137, 74, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Zone subtitle — visually hidden, kept for JS compatibility */
.chamber-card-zone {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Status ribbon at card bottom */
.chamber-status {
    display: block;
    padding: 0.3rem 0.4rem;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0 0 5px 5px;
    text-align: center;
    line-height: 1;
}

.chamber-status-icon {
    font-size: 0.65rem;
    vertical-align: middle;
}

.chamber-status--completed {
    background: linear-gradient(180deg, #2E7D32, #1B5E20);
    color: #C8E6C9;
}

.chamber-status--in-progress {
    background: linear-gradient(180deg, #E65100, #BF360C);
    color: #FFE0B2;
}

.chamber-status--locked {
    background: linear-gradient(180deg, #555, #3A3A3A);
    color: #AAA;
}

/* Locked cards dimmed */
.chamber-card[data-status="locked"] {
    opacity: 0.6;
}

/* Card link overlay (for clickable cards in generated pages) */
.chamber-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.chamber-card-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
    border-radius: 8px;
}

/* =================================================================
   RIGHT SIDEBAR — Leather-bound journal aesthetic
   ================================================================= */

.hearth-right-sidebar {
    grid-area: aside;
    background:
        /* Warm vignette overlay for depth */
        radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(20, 10, 5, 0.3) 100%),
        /* Gradient overlay on leather texture */
        linear-gradient(180deg,
            rgba(44, 24, 16, 0.7) 0%,
            rgba(55, 35, 25, 0.5) 10%,
            rgba(70, 45, 35, 0.4) 50%,
            rgba(55, 35, 25, 0.5) 90%,
            rgba(44, 24, 16, 0.7) 100%
        ),
        url('../images/right-sidebar-bg.png');
    background-size: auto, auto, cover;
    background-color: #4A3228;
    border-left: 4px solid;
    border-image: linear-gradient(180deg, #6B4E14, #B8894A, #D4A853, #B8894A, #6B4E14) 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    color: #F5E6D3;
    box-shadow:
        inset 5px 0 20px rgba(0, 0, 0, 0.5),
        inset 0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 -5px 15px rgba(0, 0, 0, 0.3);
}

.hearth-right-sidebar h3 {
    color: #F0D78C;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ─────────────────────────────────────────
   FLAME STATUS — Semicircular Gauge
   ───────────────────────────────────────── */

.flame-status {
    margin-bottom: 1.5rem;
    text-align: center;
}

.flame-status > h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: #F0D78C;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Gauge + fire glow layout */
.flame-gauge-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    padding-bottom: 6px;
}

/* Warm fire glow behind the gauge */
.flame-gauge-container::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -40px;
    right: -40px;
    bottom: -15px;
    background:
        radial-gradient(ellipse at 50% 55%,
            rgba(255, 100, 10, 0.22) 0%,
            rgba(255, 140, 30, 0.14) 20%,
            rgba(215, 168, 110, 0.08) 40%,
            transparent 65%
        );
    pointer-events: none;
    z-index: 0;
}

/*
 * Gauge wrapper — all children use bottom: 0 as the shared baseline.
 * Container height = half the frame diameter + a small buffer.
 * Frame diameter = 180px → semicircle visible = 90px + 6px buffer = 96px
 */
.flame-gauge {
    position: relative;
    width: 184px;
    height: 104px;
    flex-shrink: 0;
    overflow: hidden;
}

/*
 * Ornate frame — generated image positioned so only the TOP semicircle
 * is visible. Container overflow:hidden clips the bottom half.
 * The dark image background blends with the dark sidebar.
 */
.flame-gauge-frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 184px;
    height: 184px;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    filter: brightness(1.15) saturate(1.2);
    border-radius: 50%;
}

/*
 * Dark dial face — semicircle inset inside the frame.
 * Slightly smaller diameter (148px) so the frame border shows around it.
 * Height = half of 148 = 74px. Sits flush at bottom.
 */
.flame-gauge-dial {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 148px;
    height: 74px;
    overflow: hidden;
    z-index: 2;
    border-radius: 74px 74px 0 0;
    background:
        /* Charcoal → fire sweep: cold left, hot right */
        conic-gradient(from 270deg at 50% 100%,
            /* Left: dark charcoal embers */
            rgba(20, 15, 12, 0.95) 0deg,
            rgba(35, 25, 18, 0.9) 15deg,
            rgba(50, 30, 15, 0.85) 35deg,
            /* Center-left: warm coals */
            rgba(80, 45, 15, 0.75) 60deg,
            rgba(120, 65, 15, 0.65) 80deg,
            /* Center: amber glow */
            rgba(170, 90, 15, 0.55) 100deg,
            rgba(210, 120, 20, 0.50) 115deg,
            /* Center-right: bright flame */
            rgba(240, 140, 15, 0.50) 130deg,
            rgba(255, 120, 10, 0.55) 150deg,
            /* Right: intense fire */
            rgba(255, 85, 0, 0.60) 165deg,
            rgba(255, 60, 0, 0.55) 180deg
        ),
        /* Base dark depth underneath */
        radial-gradient(ellipse at 50% 100%,
            rgba(50, 35, 22, 0.9) 0%,
            rgba(30, 18, 10, 0.95) 40%,
            rgba(15, 8, 4, 0.98) 80%
        );
    box-shadow:
        /* Thin dark gap between dial and frame */
        0 0 0 2px #1A0E08,
        /* Subtle gold inner ring */
        0 0 0 3.5px rgba(184, 137, 74, 0.5),
        /* Dark dial depth */
        inset 0 3px 12px rgba(0, 0, 0, 0.8),
        inset 0 0 25px rgba(0, 0, 0, 0.4);
}

/* SVG scale marks inside the dial */
.flame-gauge-scale {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Needle pivot — sits at bottom center, flush with dial bottom */
.flame-gauge-needle-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 4;
    transform: rotate(-90deg);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tapered needle — brass with bright tip */
.flame-gauge-needle {
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 10px;
    height: 62px;
    transform-origin: bottom center;
    clip-path: polygon(50% 0%, calc(50% + 3.5px) 100%, calc(50% - 3.5px) 100%);
    background: linear-gradient(to top,
        #8B6914 0%,
        #B8894A 25%,
        #D4A853 50%,
        #F0D78C 80%,
        #FFF5E0 100%
    );
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

/* Brass center cap at pivot */
.flame-gauge-center-cap {
                                                 bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            #F0D78C 0%,
            #D4A853 25%,
            #B8894A 50%,
            #8B6914 80%,
            #6B4E14 100%
        );
    border: 1.5px solid #6B4E14;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
    z-index: 5;
}

/* Gauge reading text */
.flame-gauge-label {
    text-align: center;
    font-family: var(--font-heading);
    margin-top: 0.5rem;
}

.flame-gauge-reading {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #E8C9A0;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.flame-gauge-reading strong {
    font-size: 1rem;
    color: #F0D78C;
}

/* ─────────────────────────────────────────
   LEATHER PANEL CARDS
   ───────────────────────────────────────── */

.hearth-leather-card {
    position: relative;
    background:
        linear-gradient(145deg,
            rgba(70, 45, 30, 0.95) 0%,
            rgba(85, 55, 38, 0.9) 20%,
            rgba(75, 48, 32, 0.92) 50%,
            rgba(60, 38, 25, 0.95) 80%,
            rgba(50, 30, 18, 0.98) 100%
        );
    border: 2px solid rgba(139, 105, 20, 0.5);
    border-left: 5px solid #B8894A;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(200, 160, 100, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Stitching line */
.hearth-leather-card::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 8px;
    border: 1px dashed rgba(184, 137, 74, 0.18);
    border-radius: 6px;
    pointer-events: none;
}

/* Card heading */
.hearth-leather-card h3 {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    color: #D4A853;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

/* Current Chamber */
.current-chamber-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: #F5E6D3;
    margin: 0 0 0.5rem;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.current-chamber-desc {
    font-size: 0.82rem;
    color: #D7CCC8;
    line-height: 1.55;
    margin: 0;
}

/* Next Gathering */
.next-gathering-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: #F5E6D3;
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

.next-gathering-meta {
    font-size: 0.8rem;
    color: #D7CCC8;
    line-height: 1.4;
    margin: 0;
}

/* === Footer === */
.hearth-footer {
    grid-area: footer;
    background: linear-gradient(135deg, #1A0E08, #2C1810, #1A0E08);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #8B6914, #D4A853, #F0D78C, #D4A853, #8B6914) 1;
    padding: 0;
}

.hearth-footer:empty {
    display: none;
}

.testimonial-section h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: #D4A853;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.testimonial-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.testimonial-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid rgba(215, 168, 110, 0.2);
}

.testimonial-text {
    font-style: italic;
    color: var(--color-secondary-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 0.85rem;
}

/* === Mobile Navigation Toggle === */
.hearth-mobile-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1001;
    width: 48px;
    height: 48px;
    background: var(--color-primary-dark);
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    color: var(--color-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* === Responsive: Tablet (sidebar layout fallback) === */
@media (max-width: 1279px) {
    .hearth-dashboard:not(.hearth-dashboard--full) {
        grid-template-areas:
            "header header"
            "main   aside"
            "footer footer";
        grid-template-columns: 1fr 280px;
    }

    .hearth-dashboard:not(.hearth-dashboard--full) .hearth-nav-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        width: 240px;
        z-index: 1000;
        transition: left var(--transition-smooth);
        padding: 1.25rem 0.6rem;
    }

    .hearth-nav-sidebar.open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }

    .hearth-dashboard:not(.hearth-dashboard--full) .hearth-mobile-toggle {
        display: flex;
    }
}

/* Sidebar overlay */
.hearth-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.hearth-sidebar-overlay.active {
    display: block;
}

/* === Responsive: Mobile === */
@media (max-width: 767px) {
    .hearth-dashboard:not(.hearth-dashboard--full) {
        grid-template-areas:
            "header"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }

    .hearth-dashboard:not(.hearth-dashboard--full) .hearth-right-sidebar {
        display: none;
    }

    .hearth-mobile-status {
        display: block;
    }

    .hearth-dashboard:not(.hearth-dashboard--full) .hearth-main {
        padding: 1rem;
    }
}

/* === Responsive: Chamber grid at narrow widths === */
@media (max-width: 600px) {
    .chamber-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "c1 c2 c3"
            "c4 . c5";
        gap: 0.5rem;
    }

    .chamber-card {
        min-width: 80px;
    }

    .chamber-card-number {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
        top: -6px;
        left: -5px;
    }

    .chamber-card-title {
        font-size: 0.5rem;
        padding: 0.25rem 0.3rem;
    }

    .chamber-status {
        font-size: 0.48rem;
        padding: 0.2rem 0.3rem;
    }

    .chamber-status-icon {
        font-size: 0.52rem;
    }
}

/* Hide mobile status by default (shown only on mobile) */
.hearth-mobile-status {
    display: none;
}

/* =================================================================
   FULL-WIDTH LAYOUT — No sidebars, full-viewport immersive layout
   ================================================================= */

.hearth-dashboard--full {
    grid-template-areas:
        "header"
        "statusbar"
        "main";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    min-height: 100vh;
    background: #1A0E08;
}

/* Hide sidebars in full layout */
.hearth-dashboard--full .hearth-nav-sidebar,
.hearth-dashboard--full .hearth-right-sidebar,
.hearth-dashboard--full .hearth-mobile-toggle,
.hearth-dashboard--full .hearth-sidebar-overlay {
    display: none;
}

/* Full-width main — dark, no parchment, edge to edge */
.hearth-dashboard--full .hearth-main {
    padding: 0;
    background: #1A0E08;
    overflow: hidden;
}

/* Chamber map fills the entire main area — no margin, no border-radius */
.hearth-dashboard--full .chamber-map {
    border-radius: 0;
    margin: 0;
    min-height: calc(100vh - 160px);
    padding: 2rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────
   STATUS BAR — Compact inline progress strip
   ───────────────────────────────────────── */

.hearth-status-bar {
    grid-area: statusbar;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 2rem;
    background:
        linear-gradient(180deg,
            rgba(26, 14, 8, 0.95) 0%,
            rgba(44, 24, 16, 0.92) 50%,
            rgba(62, 39, 35, 0.95) 100%
        );
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, transparent, #B8894A, #D4A853, #B8894A, transparent) 1;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(215, 168, 110, 0.08);
}

/* Gauge in status bar */
.status-bar-gauge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.flame-gauge-mini {
    position: relative;
    width: 120px;
    height: 68px;
    flex-shrink: 0;
    overflow: hidden;
}

.flame-gauge-mini .flame-gauge-frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    filter: brightness(1.15) saturate(1.2);
    border-radius: 50%;
}

.flame-gauge-mini .flame-gauge-dial {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 48px;
    overflow: hidden;
    z-index: 2;
    border-radius: 48px 48px 0 0;
    background:
        conic-gradient(from 270deg at 50% 100%,
            rgba(20, 15, 12, 0.95) 0deg,
            rgba(35, 25, 18, 0.9) 15deg,
            rgba(50, 30, 15, 0.85) 35deg,
            rgba(80, 45, 15, 0.75) 60deg,
            rgba(120, 65, 15, 0.65) 80deg,
            rgba(170, 90, 15, 0.55) 100deg,
            rgba(210, 120, 20, 0.50) 115deg,
            rgba(240, 140, 15, 0.50) 130deg,
            rgba(255, 120, 10, 0.55) 150deg,
            rgba(255, 85, 0, 0.60) 165deg,
            rgba(255, 60, 0, 0.55) 180deg
        ),
        radial-gradient(ellipse at 50% 100%,
            rgba(50, 35, 22, 0.9) 0%,
            rgba(30, 18, 10, 0.95) 40%,
            rgba(15, 8, 4, 0.98) 80%
        );
    box-shadow:
        0 0 0 2px #1A0E08,
        0 0 0 3.5px rgba(184, 137, 74, 0.5),
        inset 0 3px 12px rgba(0, 0, 0, 0.8),
        inset 0 0 25px rgba(0, 0, 0, 0.4);
}

.flame-gauge-mini .flame-gauge-scale {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.flame-gauge-mini .flame-gauge-needle-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 4;
    transform: rotate(-90deg);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.flame-gauge-mini .flame-gauge-needle {
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 8px;
    height: 40px;
    transform-origin: bottom center;
    clip-path: polygon(50% 0%, calc(50% + 3px) 100%, calc(50% - 3px) 100%);
    background: linear-gradient(to top,
        #8B6914 0%,
        #B8894A 25%,
        #D4A853 50%,
        #F0D78C 80%,
        #FFF5E0 100%
    );
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

.flame-gauge-mini .flame-gauge-center-cap {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            #F0D78C 0%,
            #D4A853 25%,
            #B8894A 50%,
            #8B6914 80%,
            #6B4E14 100%
        );
    border: 1.5px solid #6B4E14;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
    z-index: 5;
}

.status-bar-gauge .flame-gauge-reading {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: #E8C9A0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.status-bar-gauge .flame-gauge-reading strong {
    font-size: 0.9rem;
    color: #F0D78C;
}

/* ─── Status bar responsive ─── */
@media (max-width: 599px) {
    .hearth-status-bar {
        padding: 0.4rem 1rem;
    }

    .flame-gauge-mini {
        width: 90px;
        height: 52px;
    }

    .flame-gauge-mini .flame-gauge-frame {
        width: 90px;
        height: 90px;
    }

    .flame-gauge-mini .flame-gauge-dial {
        width: 72px;
        height: 36px;
        border-radius: 36px 36px 0 0;
    }

    .flame-gauge-mini .flame-gauge-needle {
        height: 30px;
        left: -3px;
        width: 6px;
    }

    .flame-gauge-mini .flame-gauge-center-cap {
        width: 10px;
        height: 10px;
        bottom: -5px;
    }

    .status-bar-gauge .flame-gauge-reading {
        font-size: 0.68rem;
    }

    .hearth-dashboard--full .chamber-map {
        padding: 1rem 1rem 1.5rem;
        min-height: calc(100vh - 160px);
    }
}

/* ─── Full-width chamber grid fills available space ─── */
.hearth-dashboard--full .chamber-grid {
    flex: 1;
    grid-template-rows: auto minmax(160px, 1fr) auto;
    align-content: start;
}

/* =================================================================
   THE LODGE — Room-as-Interface Dashboard (Hotspot Approach)
   Image-relative positioning — hotspots scale with the room image
   ================================================================= */

.lodge {
    background: #0D0704;
    height: 100vh;
    overflow: hidden;
}

/* ─── Room container — all hotspots positioned relative to this ─── */
.lodge-room {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* The room image drives the size — full width, overflow clipped by .lodge */
.lodge-room-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── Title plaque ─── */
.lodge-plaque {
    position: absolute;
    z-index: 3;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0.4rem 1.5rem;
    white-space: nowrap;
    background:
        linear-gradient(180deg,
            #4E342E 0%, #3A2318 15%, #2C1810 50%, #3A2318 85%, #4E342E 100%
        );
    border: 3px solid #B8894A;
    border-radius: 6px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(240, 215, 140, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.lodge-plaque::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(184, 137, 74, 0.2);
    border-radius: 3px;
    pointer-events: none;
}

.lodge-title {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    font-weight: 900;
    color: #F0D78C;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(215, 168, 110, 0.2);
}

.lodge-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(0.55rem, 0.9vw, 0.7rem);
    color: #E8C170;
    margin: 0.2rem 0 0;
    font-style: italic;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ─── Flame gauge — covers the fire pit with transparency ─── */
.lodge-gauge {
    position: absolute;
    z-index: 2;
    top: 57%;
    left: 49%;
    transform: translateX(-50%);
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    opacity: 0.85;
    transition: opacity 0.5s ease;
}

.lodge-gauge:hover {
    opacity: 0.3;
}

/* Override mini gauge to fill the lodge-gauge container */
.lodge-gauge .flame-gauge-mini {
    background: transparent;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
}

.lodge-gauge .flame-gauge-mini .flame-gauge-frame {
    display: none;
}

.lodge-gauge .flame-gauge-mini .flame-gauge-dial {
    width: 80%;
    height: 50%;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.lodge-gauge .flame-gauge-mini .flame-gauge-needle-wrap {
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
}

.lodge-gauge .flame-gauge-mini .flame-gauge-needle {
    background: #111;
    height: 90px;
    width: 14px;
    left: -7px;
    bottom: 0;
    clip-path: polygon(50% 0%, calc(50% + 6px) 100%, calc(50% - 6px) 100%);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.lodge-gauge .flame-gauge-mini .flame-gauge-center-cap {
    width: 16px;
    height: 16px;
    background: #111;
    border: 2px solid #D4A853;
    bottom: -8px;
}

.lodge-gauge .flame-gauge-reading {
    font-size: clamp(0.65rem, 1vw, 0.85rem);
}

/* ─── Fireplace ember animation ─── */
.lodge-flames {
    position: absolute;
    z-index: 1;
    top: 55%;
    left: 40%;
    width: 17%;
    height: 30%;
    pointer-events: none;
    overflow: visible;
}

.lodge-ember {
    position: absolute;
    bottom: 20%;
    border-radius: 50%;
    opacity: 0;
    animation: ember-rise linear infinite;
}

.lodge-glow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40%;
    background: radial-gradient(ellipse at center bottom,
        rgba(255, 120, 0, 0.12) 0%,
        rgba(255, 69, 0, 0.06) 40%,
        transparent 70%
    );
    border-radius: 50%;
    animation: glow-pulse 3s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes ember-rise {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    10% {
        opacity: 1;
    }
    60% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(var(--drift) * 1px)) translateY(calc(var(--travel) * 1px)) scale(0.3);
    }
}

@keyframes glow-pulse {
    0%   { opacity: 0.4; transform: translateX(-50%) scale(1); }
    100% { opacity: 0.7; transform: translateX(-50%) scale(1.08); }
}

/* ─── Hotspot nav layer — covers the image ─── */
.lodge-hotspots {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ─── Individual hotspot — transparent clickable area over frame ─── */
.lodge-hot {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.lodge-hot:hover {
    box-shadow:
        inset 0 0 20px rgba(240, 215, 140, 0.2),
        0 0 15px rgba(215, 168, 110, 0.3);
    background: rgba(240, 215, 140, 0.06);
    z-index: 10;
}

.lodge-hot:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ── TUNING KNOBS — user-adjusted positions for lodge-final-1 ── */
.lodge-hot--1 { top: 19%;  left: 7.5%;  width: 13%;  height: 38%; }
.lodge-hot--2 { top: 19%;  left: 22.5%; width: 13%;  height: 38%; }
.lodge-hot--3 { top: 11.5%; left: 42%;  width: 15%;  height: 35%; }
.lodge-hot--4 { top: 19%;  right: 24%;  width: 13%;  height: 38%; }
.lodge-hot--5 { top: 19%;  right: 8%;   width: 13%;  height: 38%; }

/* ─── Default label — ALWAYS visible at bottom of each frame ─── */
.lodge-hot-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 20% 0.2rem 0.35rem;
    background:
        linear-gradient(180deg, transparent 0%, rgba(15, 8, 4, 0.7) 40%, rgba(15, 8, 4, 0.92) 100%);
    transition: background 0.3s ease, padding 0.3s ease;
}

/* Hover: deepen the overlay */
.lodge-hot:hover .lodge-hot-label {
    background:
        linear-gradient(180deg, transparent 0%, rgba(15, 8, 4, 0.85) 35%, rgba(15, 8, 4, 0.98) 100%);
    padding-top: 25%;
}

.lodge-hot-title {
    font-family: var(--font-heading);
    font-size: clamp(0.5rem, 0.85vw, 0.7rem);
    font-weight: 700;
    color: #F0D78C;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.lodge-hot-progress {
    font-family: var(--font-body);
    font-size: clamp(0.45rem, 0.7vw, 0.6rem);
    color: #D7CCC8;
    letter-spacing: 0.04em;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.lodge-hot:hover .lodge-hot-progress {
    opacity: 1;
}

/* ─── Status badge — always visible ─── */
.lodge-hot-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    z-index: 3;
    border: 2px solid;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.lodge-hot-badge--completed {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    color: #C8E6C9;
    border-color: #4CAF50;
}

.lodge-hot-badge--in-progress {
    background: linear-gradient(135deg, #E65100, #BF360C);
    color: #FFE0B2;
    border-color: #FF9800;
}

.lodge-hot-badge--locked {
    background: linear-gradient(135deg, #555, #333);
    color: #999;
    border-color: #666;
}

/* ─── Status-specific frame treatments ─── */

/* Completed: subtle green glow border */
.lodge-hot[data-status="completed"] {
    box-shadow: inset 0 0 12px rgba(76, 175, 80, 0.15);
}
.lodge-hot[data-status="completed"]:hover {
    box-shadow:
        inset 0 0 20px rgba(76, 175, 80, 0.25),
        0 0 15px rgba(76, 175, 80, 0.2);
}

/* In-progress: warm amber pulse glow */
.lodge-hot[data-status="in-progress"] {
    box-shadow: inset 0 0 12px rgba(255, 152, 0, 0.15);
    animation: frame-pulse 3s ease-in-out infinite;
}
.lodge-hot[data-status="in-progress"]:hover {
    box-shadow:
        inset 0 0 25px rgba(255, 152, 0, 0.3),
        0 0 20px rgba(215, 168, 110, 0.35);
    animation: none;
}

@keyframes frame-pulse {
    0%, 100% { box-shadow: inset 0 0 12px rgba(255, 152, 0, 0.1); }
    50% { box-shadow: inset 0 0 18px rgba(255, 152, 0, 0.25); }
}

/* Locked: dimmed, no pointer */
.lodge-hot[data-status="locked"] {
    opacity: 0.45;
    cursor: default;
}

.lodge-hot[data-status="locked"]:hover {
    box-shadow: none;
    background: transparent;
}

.lodge-hot[data-status="locked"] .lodge-hot-title {
    color: #A0937D;
}

.lodge-hot[data-status="locked"] .lodge-hot-progress {
    color: #7A7060;
}

/* ─── Continue CTA — positioned below center frame ─── */
.lodge-continue {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 49%;
    transform: translateX(-50%);
}

.lodge-continue-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    background:
        linear-gradient(160deg,
            #FFF5E8 0%, #F0DCC4 30%, #E8D0B0 60%, #F0DCC4 100%
        );
    border: 2px solid #B8894A;
    border-radius: 6px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(139, 105, 20, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lodge-continue-link:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(215, 168, 110, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.lodge-continue-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.lodge-continue-icon {
    font-size: 1.2rem;
    color: #5D4037;
    flex-shrink: 0;
}

.lodge-continue-heading {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(0.8rem, 1.3vw, 1rem);
    font-weight: 900;
    color: #3E2723;
    line-height: 1.3;
}

.lodge-continue-lesson {
    display: block;
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    color: #6D4C41;
    margin-top: 0.1rem;
}

/* ─── Video Library Link ─── */
.lodge-video-library {
    position: absolute;
    z-index: 3;
    bottom: 8%;
    right: 3%;
}

.lodge-video-library-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-width: 160px;
    text-decoration: none;
    background: rgba(30, 18, 10, 0.7);
    border: 1.5px solid rgba(184, 137, 74, 0.4);
    border-radius: 6px;
    color: #D4A853;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.lodge-video-library-link:visited {
    color: #D4A853;
}

.lodge-video-library-link:hover {
    background: rgba(50, 30, 15, 0.85);
    border-color: #D4A853;
    color: #F0D78C;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lodge-video-library-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.lodge-video-library-link svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ─── Podcast Library Link ─── */
.lodge-podcast-library {
    position: absolute;
    z-index: 3;
    bottom: 14%;
    right: 3%;
}

.lodge-podcast-library-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-width: 160px;
    text-decoration: none;
    background: rgba(30, 18, 10, 0.7);
    border: 1.5px solid rgba(184, 137, 74, 0.4);
    border-radius: 6px;
    color: #D4A853;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.lodge-podcast-library-link:visited {
    color: #D4A853;
}

.lodge-podcast-library-link:hover {
    background: rgba(50, 30, 15, 0.85);
    border-color: #D4A853;
    color: #F0D78C;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lodge-podcast-library-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.lodge-podcast-library-link svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ─── Sound toggle button ─── */
.lodge-sound-toggle {
    position: absolute;
    z-index: 3;
    bottom: 8%;
    left: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(30, 18, 10, 0.7);
    border: 1.5px solid rgba(184, 137, 74, 0.4);
    border-radius: 50%;
    color: #D4A853;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.lodge-sound-toggle:hover {
    background: rgba(50, 30, 15, 0.85);
    border-color: #D4A853;
    color: #F0D78C;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lodge-sound-toggle:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* Show/hide speaker icons based on state */
.lodge-sound-toggle .lodge-sound-icon--off { display: none; }
.lodge-sound-toggle.is-muted .lodge-sound-icon--on { display: none; }
.lodge-sound-toggle.is-muted .lodge-sound-icon--off { display: block; }

/* ─── Mobile: stack layout ─── */
@media (max-width: 767px) {
    .lodge {
        height: auto;
        overflow: visible;
    }

    .lodge-room-img {
        display: none;
    }

    .lodge-flames {
        display: none;
    }

    .lodge-room {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        padding: 1.25rem 1rem 2rem;
        gap: 0.75rem;
        background:
            /* Dark overlay for readability */
            linear-gradient(180deg,
                rgba(10, 5, 2, 0.88) 0%,
                rgba(15, 8, 4, 0.78) 30%,
                rgba(20, 10, 5, 0.72) 60%,
                rgba(10, 5, 2, 0.85) 100%
            ),
            /* Warm vignette */
            radial-gradient(ellipse at 50% 70%,
                rgba(180, 100, 30, 0.15) 0%,
                transparent 60%
            ),
            /* Fireplace background image */
            url('../images/chamber-card-hearth-bg.png');
        background-size: auto, auto, cover;
        background-position: center, center, center 40%;
        background-color: #1A0E08;
    }

    /* Plaque — compact */
    .lodge-plaque {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 0.3rem 1.2rem;
    }

    /* Gauge — smaller on mobile */
    .lodge-gauge {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 140px;
        opacity: 1;
    }

    .lodge-gauge .flame-gauge-mini .flame-gauge-needle {
        height: 45px;
        width: 8px;
        left: -4px;
        clip-path: polygon(50% 0%, calc(50% + 3px) 100%, calc(50% - 3px) 100%);
        background: #FFFFFF;
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .lodge-gauge .flame-gauge-mini .flame-gauge-center-cap {
        width: 10px;
        height: 10px;
        bottom: -5px;
    }

    .lodge-gauge .flame-gauge-reading {
        font-size: 0.7rem;
    }

    /* Hotspots — card list */
    .lodge-hotspots {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        max-width: 360px;
    }

    .lodge-hot,
    .lodge-hot--1,
    .lodge-hot--2,
    .lodge-hot--3,
    .lodge-hot--4,
    .lodge-hot--5 {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        background: linear-gradient(135deg, #FFF5E8 0%, #F0DCC4 60%, #E8D0B0 100%);
        border: 1.5px solid rgba(184, 137, 74, 0.4);
        border-radius: 8px;
        padding: 0.6rem 0.9rem;
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .lodge-hot[data-status="completed"] {
        border-left: 3px solid #4CAF50;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .lodge-hot[data-status="in-progress"] {
        border-left: 3px solid #FF9800;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        animation: none;
    }

    .lodge-hot[data-status="locked"] {
        opacity: 0.7;
    }

    .lodge-hot:hover,
    .lodge-hot[data-status="completed"]:hover,
    .lodge-hot[data-status="in-progress"]:hover,
    .lodge-hot[data-status="locked"]:hover {
        background: linear-gradient(135deg, #FFF8EE 0%, #F5E4D0 60%, #EDD8BE 100%);
        box-shadow: 0 2px 12px rgba(215, 168, 110, 0.3);
    }

    .lodge-hot:hover .lodge-hot-label {
        background: none;
        padding-top: 0;
    }

    .lodge-hot-label {
        position: relative;
        bottom: auto;
        padding: 0;
        background: none;
        align-items: flex-start;
        justify-content: center;
        flex: 1;
        opacity: 1;
    }

    .lodge-hot-title {
        font-size: 0.75rem;
        color: #3D2B1F;
    }

    .lodge-hot-progress {
        font-size: 0.6rem;
        color: #7A5C3E;
        opacity: 1;
    }

    .lodge-hot-badge {
        position: relative;
        top: auto;
        right: auto;
        flex-shrink: 0;
    }

    /* Continue CTA — compact inline */
    .lodge-continue {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 360px;
        padding: 0;
    }

    .lodge-continue-link {
        width: 100%;
        padding: 0.6rem 1rem;
        gap: 0.75rem;
        border-radius: 8px;
    }

    .lodge-continue-icon {
        font-size: 0.9rem;
    }

    .lodge-continue-heading {
        font-size: 0.8rem;
    }

    .lodge-continue-lesson {
        font-size: 0.65rem;
    }

    /* Video Library — compact inline */
    .lodge-video-library {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        max-width: 360px;
    }

    .lodge-video-library-link,
    .lodge-video-library-link:visited {
        width: 100%;
        justify-content: center;
        padding: 0.45rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 8px;
        background: linear-gradient(135deg, #FFF5E8 0%, #F0DCC4 60%, #E8D0B0 100%);
        border-color: rgba(184, 137, 74, 0.4);
        color: #3D2B1F;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .lodge-video-library-link:hover {
        background: linear-gradient(135deg, #FFF8EE 0%, #F5E4D0 60%, #EDD8BE 100%);
        color: #3D2B1F;
        box-shadow: 0 2px 12px rgba(215, 168, 110, 0.3);
        transform: none;
    }

    /* Podcast Library — compact inline */
    .lodge-podcast-library {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        max-width: 360px;
        margin-top: 0.15rem;
    }

    .lodge-podcast-library-link,
    .lodge-podcast-library-link:visited {
        width: 100%;
        justify-content: center;
        padding: 0.45rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 8px;
        background: linear-gradient(135deg, #FFF5E8 0%, #F0DCC4 60%, #E8D0B0 100%);
        border-color: rgba(184, 137, 74, 0.4);
        color: #3D2B1F;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .lodge-podcast-library-link:hover {
        background: linear-gradient(135deg, #FFF8EE 0%, #F5E4D0 60%, #EDD8BE 100%);
        color: #3D2B1F;
        box-shadow: 0 2px 12px rgba(215, 168, 110, 0.3);
        transform: none;
    }

    /* Sound toggle — inline, smaller */
    .lodge-sound-toggle {
        position: relative;
        bottom: auto;
        left: auto;
        width: 36px;
        height: 36px;
    }
}