/* ===========================================================================
   THE SPIRE — UI CHROME

   The :root palette is carried over verbatim from cult-empire/styles.css:15-38
   so the two games read as one arcade. Rules of the house style:
     - Cinzel for every heading, label, number and button
     - system sans for body copy, monospace for stat readouts
     - no pure black, no pure white, no saturated primaries
     - tiny radii (3-4px) for stone and metal
     - inset 0 1px 0 rgba(255,255,255,0.04) top bevel to fake carved stone
     - alpha-purple borders rather than solid ones
   =========================================================================== */

:root {
    --bg-darkest:  #0e0e12;
    --bg-dark:     #141418;
    --bg-panel:    #1a1a22;
    --bg-card:     #22212a;
    --bg-hover:    #2a2832;

    --text-primary:   #e0dcd0;   /* warm bone-white, never pure #fff */
    --text-secondary: #b0a898;
    --text-muted:     #706860;

    --accent-purple:       #6a5a8a;
    --accent-purple-light: #8a72b0;
    --accent-purple-dark:  #4a3a6a;
    --accent-red:          #a83030;
    --accent-green:        #3a8a4a;
    --accent-gold:         #c8a038;
    --accent-blue:         #5a6a7a;
    --border-color:        #2e2c38;

    --glow-purple: 0 0 15px rgba(106, 90, 138, 0.3);
    --glow-gold:   0 0 12px rgba(184, 150, 48, 0.4);

    --font-gothic: 'Cinzel', 'Times New Roman', serif;
    --font-decorative: 'Cinzel Decorative', 'Cinzel', serif;
    --font-mono: ui-monospace, 'Consolas', 'Courier New', monospace;

}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #050508;
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

html[data-boot-error='1'] #canvas-host::after {
    content: 'A script failed to load — see the console.';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-gothic); color: var(--accent-red);
    background: rgba(4,4,8,0.9); z-index: 5;
}

#spire-container {
    position: fixed; inset: 0;
    width: 100vw; height: 100dvh;
    overflow: hidden;
}

/* --- the cutaway --------------------------------------------------------- */
#canvas-host {
    position: absolute; inset: 0;
    z-index: 1;
    background: #050508;
}
#spire-canvas {
    display: block;
    width: 100%; height: 100%;
    /* The art is painted and smooth-scaled, not pixel art. */
    image-rendering: auto;
    cursor: grab;
    touch-action: none;
}
#spire-canvas:active { cursor: grabbing; }

/* --- top HUD ------------------------------------------------------------- */
/* pointer-events:none so drags pass through to the canvas; children opt back in */
#top-hud {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 6px 8px 8px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,4,8,0.92) 0%, rgba(4,4,8,0.55) 60%, transparent 100%);
}
#top-hud > * { pointer-events: auto; }

#hud-resources {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
    align-items: center;
}
.hud-resource {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 7px;
    border: 1px solid rgba(74,58,106,0.28);
    border-radius: 3px;
    background: linear-gradient(160deg, rgba(30,28,38,0.92) 0%, rgba(16,15,22,0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 4px rgba(0,0,0,0.45);
    font-family: var(--font-gothic);
    font-size: 12px;
    white-space: nowrap;
}
.hud-resource .r-icon  { font-size: 13px; line-height: 1; }
.hud-resource .r-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); }
.hud-resource .r-rate  { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.hud-resource .r-rate.pos { color: var(--accent-green); }
.hud-resource .r-rate.neg { color: var(--accent-red); }
.hud-resource.starving {
    border-color: rgba(168,48,48,0.7);
    animation: pulse-warn 1.4s ease-in-out infinite;
}
@keyframes pulse-warn {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 rgba(168,48,48,0); }
    50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 10px rgba(168,48,48,0.55); }
}

#hud-info {
    margin-top: 4px;
    font-family: var(--font-gothic);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
#hud-sep { color: var(--text-muted); margin: 0 4px; }
#hud-band { color: var(--accent-gold); }
#hud-warning { color: var(--accent-red); margin-left: 8px; }
#hud-warning[hidden] { display: none; }

/* --- camera controls ----------------------------------------------------- */
#camera-controls {
    position: fixed; right: 8px; top: 50%;
    transform: translateY(-50%);
    z-index: 120;
    display: flex; flex-direction: column; gap: 5px;
}
#camera-controls button {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-family: var(--font-gothic); font-size: 15px;
    color: var(--text-secondary);
    background: linear-gradient(160deg, rgba(34,33,42,0.95) 0%, rgba(20,19,26,0.95) 100%);
    border: 1px solid rgba(74,58,106,0.3);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 3px rgba(0,0,0,0.5);
    cursor: pointer;
}
#camera-controls button:hover { background: var(--bg-hover); color: var(--text-primary); }
#camera-controls button:active { transform: translateY(1px); }

/* --- notifications ------------------------------------------------------- */
#notifications {
    position: fixed; top: 64px; left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex; flex-direction: column; gap: 5px;
    align-items: center;
    pointer-events: none;
    width: min(92vw, 420px);
}
.notification {
    padding: 6px 12px;
    font-family: var(--font-gothic); font-size: 12px;
    color: var(--text-primary);
    background: rgba(12,11,18,0.96);
    border: 1px solid rgba(74,58,106,0.45);
    border-left: 3px solid var(--accent-purple-light);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.6);
    animation: notif-in 0.22s ease-out;
    max-width: 100%;
}
.notification.good  { border-left-color: var(--accent-green); }
.notification.bad   { border-left-color: var(--accent-red); }
.notification.error { border-left-color: var(--accent-red); color: #ffb4b4; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

#save-indicator {
    /* Above the palette, not behind it. */
    position: fixed; bottom: 76px; left: 8px;
    z-index: 90;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

/* --- THE TOOL PALETTE ----------------------------------------------------
   SimTower's Tool Bar: a compact strip of tools you arm and then click with.
   Deliberately THIN. The old tab drawer was 52% of the viewport tall, which is a
   strange thing to do to a game whose entire subject is a tall cutaway — the
   tower now keeps ~85% of the screen. */
#palette {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 250;
    display: flex; align-items: stretch; gap: 0;
    padding: 4px 6px;
    /* The BAR does not scroll. Only the room group inside it does — the speed
       controls and the window buttons must never be pushed off the edge, because
       the window buttons are the primary navigation and the room list grows
       without bound as the Spire unlocks more. */
    overflow: hidden;
    background: linear-gradient(180deg, rgba(10,9,15,0.97) 0%, rgba(4,4,8,0.99) 100%);
    border-top: 1px solid rgba(74,58,106,0.4);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}

.p-group {
    display: flex; align-items: stretch; gap: 3px;
    padding-right: 7px; margin-right: 4px;
    border-right: 1px solid rgba(74,58,106,0.28);
    flex: 0 0 auto;
}
.p-group:last-child { border-right: none; margin-right: 0; padding-right: 0; }

/* The room group is the elastic, scrolling one. min-width:0 is required or the
   flex item refuses to shrink below its content and overflows the bar. */
.p-rooms {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
.p-rooms::-webkit-scrollbar { height: 4px; }
.p-rooms::-webkit-scrollbar-thumb {
    background: rgba(106,90,138,0.5); border-radius: 2px;
}
.p-rooms::-webkit-scrollbar-track { background: transparent; }

/* The window buttons are navigation — pin them so they are always reachable. */
.p-windows { flex: 0 0 auto; }

.p-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    min-width: 52px; padding: 4px 6px 3px;
    font-family: var(--font-gothic); font-size: 8.5px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
    background: linear-gradient(180deg, rgba(34,32,44,0.9), rgba(18,17,24,0.9));
    border: 1px solid rgba(74,58,106,0.26);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    cursor: pointer;
    flex: 0 0 auto;
}
.p-btn:hover { color: var(--text-primary); border-color: rgba(200,160,56,0.35); }
.p-btn .p-icon { font-size: 16px; line-height: 1.05; }
.p-btn .p-label { white-space: nowrap; }
.p-btn .p-cost {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-secondary); white-space: nowrap;
}

/* The armed tool. Unmissable on purpose — the pointer is now modal, and a modal
   cursor the player has forgotten about is the classic way this pattern fails. */
.p-btn.armed {
    color: #12100a;
    background: linear-gradient(180deg, #d9b44a, #a8842a);
    border-color: #f0d68a;
    box-shadow: 0 0 12px rgba(200,160,56,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.p-btn.armed .p-cost { color: #2a2410; }
.p-btn.danger { color: var(--text-muted); border-color: rgba(74,58,106,0.26); }
.p-btn.danger:hover { color: #ffb4b4; border-color: rgba(168,48,48,0.45); }
.p-btn.danger.armed {
    background: linear-gradient(180deg, #c04a4a, #8a2626);
    border-color: #e89a9a; color: #fff0f0;
    box-shadow: 0 0 12px rgba(168,48,48,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.p-btn.on {
    color: var(--accent-gold);
    border-color: rgba(200,160,56,0.5);
    background: linear-gradient(180deg, rgba(70,56,22,0.9), rgba(34,28,14,0.9));
}
.p-btn.poor .p-cost { color: var(--accent-red); }
.p-btn.poor { opacity: 0.65; }

.p-speed .p-btn { min-width: 34px; font-family: var(--font-mono); font-size: 11px; }

.p-badge {
    position: absolute; margin: -22px 0 0 34px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 5px rgba(200,160,56,0.9);
}
.p-win { position: relative; }

/* An armed pointer changes what a click MEANS, so the cursor says so. */
body.is-armed #spire-canvas { cursor: crosshair; }
body.is-razing #spire-canvas { cursor: not-allowed; }

/* --- FLOATING WINDOWS ---------------------------------------------------
   SimTower's Facility / Finance / Map windows: draggable, closable, and never
   part of the layout the tower needs. */
#windows { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
#windows:empty { display: none; }

.win {
    position: absolute;
    top: 56px; right: 12px;
    width: min(92vw, 372px);
    max-height: calc(100dvh - 210px);
    display: flex; flex-direction: column;
    pointer-events: auto;
    background: linear-gradient(160deg, rgba(24,22,32,0.985) 0%, rgba(12,11,18,0.985) 100%);
    border: 1px solid rgba(74,58,106,0.5);
    border-radius: 5px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: win-in 0.16s ease-out;
}
@keyframes win-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* Stagger so several open windows are not perfectly stacked. */
.win:nth-child(2) { top: 84px;  right: 30px; }
.win:nth-child(3) { top: 112px; right: 48px; }
.win:nth-child(4) { top: 140px; right: 66px; }
.win:nth-child(5) { top: 168px; right: 84px; }

.win .w-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px 6px 10px;
    cursor: move;
    background: linear-gradient(90deg, rgba(74,58,106,0.28) 0%, rgba(10,9,15,0.9) 100%);
    border-bottom: 1px solid rgba(74,58,106,0.4);
    border-radius: 4px 4px 0 0;
    user-select: none;
}
.win .w-title {
    font-family: var(--font-gothic); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-gold);
}
.win .w-close {
    padding: 0 5px; font-size: 11px; line-height: 1.4;
    background: none; border: none; box-shadow: none;
    color: var(--text-muted);
}
.win .w-close:hover { color: var(--text-primary); background: none; }
.win .w-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 9px 10px;
}

/* Windows sit above the tower, so on a narrow screen they take the full width
   and dock to the bottom instead of floating. */
@media (max-width: 560px) {
    .win, .win:nth-child(n) {
        top: auto; bottom: 74px; left: 6px; right: 6px;
        width: auto; max-height: 52dvh;
    }
    .p-btn { min-width: 46px; font-size: 8px; }
    .p-btn .p-icon { font-size: 14px; }
    .p-btn .p-cost { display: none; }
}

/* --- section header ------------------------------------------------------ */
.section-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    margin: 6px 0 5px;
    padding: 4px 8px;
    font-family: var(--font-gothic); font-size: 11px;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text-secondary);
    background: linear-gradient(90deg, rgba(74,58,106,0.10) 0%, rgba(4,4,8,0.95) 50%, rgba(74,58,106,0.05) 100%);
    border-left: 2px solid var(--accent-purple);
}
.section-header .sh-note {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); text-transform: none; letter-spacing: 0;
}
.section-blurb {
    margin: 0 2px 8px;
    font-size: 11px; line-height: 1.5;
    color: var(--text-muted);
}

/* --- cards -------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 6px;
}
.card {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    padding: 7px 8px;
    background: linear-gradient(160deg, rgba(30,28,38,0.95) 0%, rgba(20,18,28,0.95) 100%);
    border: 1px solid rgba(160,150,140,0.10);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.4);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.card:hover:not(.locked):not(.disabled) {
    border-color: rgba(200,160,56,0.32);
    background: linear-gradient(160deg, rgba(38,35,48,0.95) 0%, rgba(24,22,32,0.95) 100%);
}
.card.locked, .card.disabled { opacity: 0.45; cursor: not-allowed; }
.card.affordable { border-color: rgba(58,138,74,0.35); }
.card.selected   { border-color: var(--accent-gold); box-shadow: var(--glow-gold); }

.card-icon {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    font-size: 21px;
    background: rgba(8,8,14,0.7);
    border: 1px solid rgba(74,58,106,0.24);
    border-radius: 3px;
    /* Dark painted art needs lifting to read on a dark panel. This is the single
       most transferable art-direction hack from cult-empire (styles.css:4532). */
    filter: none;
}
.card-icon img {
    width: 100%; height: 100%; object-fit: contain;
    filter: grayscale(0.2) brightness(1.8) drop-shadow(0 0 5px rgba(200,195,185,0.4));
}

.card-body { min-width: 0; }
.card-name {
    font-family: var(--font-gothic); font-size: 12px; font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    display: flex; align-items: baseline; gap: 5px;
}
.card-name .c-level { font-family: var(--font-mono); font-size: 10px; color: var(--accent-gold); }
.card-name .c-stat {
    font-family: var(--font-gothic); font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-purple-light);
}
.card-desc {
    margin-top: 2px;
    font-size: 10.5px; line-height: 1.45;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-meta {
    margin-top: 4px;
    display: flex; flex-wrap: wrap; gap: 3px 8px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary);
}
.card-meta .m-cost.short { color: var(--accent-red); }
.card-meta .m-out { color: var(--accent-green); }
.card-meta .m-use { color: #c88a4a; }

/* --- buttons ------------------------------------------------------------ */
button {
    font-family: var(--font-gothic);
    letter-spacing: 0.03em;
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(48,44,60,0.95), rgba(28,26,36,0.95));
    border: 1px solid rgba(74,58,106,0.4);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 3px rgba(0,0,0,0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
    padding: 5px 10px;
    font-size: 11px;
}
button:hover:not(:disabled) { background: linear-gradient(180deg, rgba(60,55,74,0.95), rgba(34,32,44,0.95)); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary {
    border-color: rgba(200,160,56,0.5);
    background: linear-gradient(180deg, rgba(92,72,30,0.95), rgba(50,40,18,0.95));
    color: #f0e4c0;
}
button.danger { border-color: rgba(168,48,48,0.5); color: #ffb4b4; }
.btn-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* --- follower rows ------------------------------------------------------ */
.follower-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 5px 7px;
    background: linear-gradient(160deg, rgba(28,26,36,0.9), rgba(18,17,25,0.9));
    border: 1px solid rgba(160,150,140,0.08);
    border-radius: 3px;
    margin-bottom: 4px;
}
.follower-row.afflicted { border-color: rgba(90,160,106,0.4); }
.follower-row.away      { opacity: 0.55; }
.f-name {
    font-family: var(--font-gothic); font-size: 11.5px;
    color: var(--text-primary);
}
.f-where { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.f-stats { display: flex; gap: 3px; margin-top: 3px; }
.f-stat {
    font-family: var(--font-mono); font-size: 9px;
    padding: 0 3px; border-radius: 2px;
    background: rgba(74,58,106,0.20);
    color: var(--text-secondary);
}
.f-stat.hi { background: rgba(200,160,56,0.24); color: #f0dca8; }
.f-bars { display: flex; flex-direction: column; gap: 2px; min-width: 62px; }
.bar {
    height: 4px; border-radius: 2px;
    background: rgba(8,8,14,0.8);
    overflow: hidden;
    border: 1px solid rgba(74,58,106,0.2);
}
.bar > i { display: block; height: 100%; }
.bar.hp > i     { background: linear-gradient(90deg, #7a2828, #a83030); }
.bar.morale > i { background: linear-gradient(90deg, #2a6a3a, #3a8a4a); }
.bar-label { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-muted); }

/* --- edicts (automation) ------------------------------------------------- */
.edict {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
    align-items: start;
    padding: 7px 8px;
    margin-bottom: 5px;
    background: linear-gradient(160deg, rgba(32,29,42,0.95), rgba(19,18,26,0.95));
    border: 1px solid rgba(160,150,140,0.10);
    border-left: 3px solid var(--accent-purple);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.edict.on  { border-left-color: var(--accent-green); }
.edict.off { border-left-color: var(--text-muted); opacity: 0.72; }
.edict .e-icon { font-size: 19px; text-align: center; line-height: 1.2; }
.edict .e-name {
    font-family: var(--font-gothic); font-size: 12px; font-weight: 700;
    color: var(--text-primary);
    display: flex; align-items: baseline; gap: 6px;
}
.edict .e-state {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
}
.edict.on .e-state { color: var(--accent-green); }
.edict .e-desc {
    margin-top: 2px; font-size: 10.5px; line-height: 1.45; color: var(--text-muted);
}
.edict .e-knob {
    margin-top: 5px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.edict .e-knob b { color: var(--accent-gold); }
.edict .e-knob button { padding: 1px 7px; font-size: 12px; line-height: 1.2; }
.edict .e-act { align-self: center; }

/* transmutation cards use a text arrow, not an image */
.card-icon.t-icon { font-size: 11px; letter-spacing: -0.5px; }

/* training progress, third bar in a follower row */
.bar.train > i { background: linear-gradient(90deg, #4a3a6a, #8a72b0); }

/* --- the just-in-time lesson card --------------------------------------- */
/* Sits ABOVE the drawer and never covers the tab it points at. No scrim: a
   lesson must not stop the game. */
#lesson-host {
    position: fixed;
    left: 50%;
    /* Just above the palette now, not above a half-screen drawer. */
    bottom: 78px;
    transform: translateX(-50%);
    z-index: 330;
    width: min(94vw, 440px);
    pointer-events: none;
}
#lesson-host:empty { display: none; }

.lesson {
    pointer-events: auto;
    padding: 11px 13px 12px;
    background: linear-gradient(160deg, rgba(30,27,40,0.985) 0%, rgba(16,15,23,0.985) 100%);
    border: 1px solid rgba(200,160,56,0.42);
    border-radius: 5px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: lesson-in 0.24s ease-out;
}
@keyframes lesson-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.lesson .l-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.lesson .l-title {
    font-family: var(--font-decorative); font-size: 14.5px; font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 0.01em;
}
.lesson .l-close {
    padding: 0 5px; font-size: 12px; line-height: 1.4;
    background: none; border: none; box-shadow: none;
    color: var(--text-muted);
}
.lesson .l-close:hover { color: var(--text-primary); background: none; }
.lesson .l-body {
    margin-top: 6px;
    font-size: 12px; line-height: 1.62;
    color: var(--text-secondary);
}
.lesson .l-body b { color: var(--text-primary); }
.lesson .l-foot { margin-top: 10px; display: flex; justify-content: flex-end; }

@media (max-width: 480px) {
    .lesson .l-body { font-size: 11.5px; }
}

/* --- modals ------------------------------------------------------------- */
#modal-root:empty { display: none; }
.modal-scrim {
    position: fixed; inset: 0;
    z-index: 500;
    display: grid; place-items: center;
    background: rgba(2,2,5,0.82);
    padding: 12px;
}
.modal {
    width: min(94vw, 460px);
    max-height: 86dvh;
    overflow-y: auto;
    padding: 14px 16px 16px;
    background: linear-gradient(160deg, rgba(26,25,34,0.99) 0%, rgba(14,13,20,0.99) 100%);
    border: 1px solid rgba(74,58,106,0.5);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 40px rgba(0,0,0,0.85);
}
.modal h2 {
    margin: 0 0 3px;
    font-family: var(--font-decorative); font-size: 19px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.modal .m-sub {
    margin: 0 0 12px;
    font-size: 11px; color: var(--text-muted);
    font-style: italic;
}
.modal p { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.modal .m-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
    justify-content: flex-end;
}
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11.5px; }
.kv-list dt { font-family: var(--font-gothic); color: var(--text-muted); }
.kv-list dd { margin: 0; font-family: var(--font-mono); color: var(--text-primary); }

/* --- perf overlay (F3) -------------------------------------------------- */
#perf-overlay {
    position: fixed; top: 4px; right: 4px;
    z-index: 900;
    padding: 5px 8px;
    font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
    color: #9ad8a0;
    background: rgba(2,2,5,0.86);
    border: 1px solid rgba(90,160,106,0.35);
    border-radius: 3px;
    pointer-events: none;
    white-space: pre;
}
#perf-overlay[hidden] { display: none; }

/* --- empty states ------------------------------------------------------- */
.empty-note {
    padding: 18px 12px;
    text-align: center;
    font-family: var(--font-gothic); font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- narrow screens ----------------------------------------------------- */
@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
    #camera-controls { top: auto; bottom: 84px; transform: none; }
}