/* ========================================
   Dinosaur Day Theme
   Prehistoric volcanic landscape — DAYTIME
   Warm amber sky, volcano silhouettes,
   tropical vegetation, lava glow, smoke
   ======================================== */

[data-theme="dinosaur"] {
    --sidebar-bg: #2a1608;
    --sidebar-header-bg: #321c0a;
    --topbar-bg: #321c0a;
    --content-bg: transparent;
    --page-bg: transparent;

    --card-bg: rgba(90, 78, 65, 0.92);
    --card-header-bg: rgba(75, 65, 52, 0.95);
    --card-border: #6e6050;

    --table-bg: rgba(90, 78, 65, 0.92);
    --table-header-bg: rgba(75, 65, 52, 0.95);
    --table-border: #6e6050;
    --table-hover-bg: rgba(110, 95, 78, 0.85);
    --table-stripe-bg: rgba(80, 70, 58, 0.9);

    --text-primary: #f5e8d0;
    --text-secondary: #d4b080;
    --text-muted: #9a7a50;
    --text-inverse: #1a0e04;

    --border-color: #5a3c20;
    --border-light: #6a4a2a;
    --sidebar-header-border: rgba(90, 60, 32, 0.4);
    --topbar-border: rgba(90, 60, 32, 0.4);

    --scrollbar-thumb: #6a4a2a;
    --scrollbar-thumb-hover: #7a5a34;

    --sidebar-text: #d4b080;
    --sidebar-text-hover: #f0a030;
    --sidebar-active-bg: rgba(240, 160, 48, 0.15);
    --sidebar-active-text: #f0a030;
    --sidebar-active-border: #f0a030;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(240, 160, 48, 0.08);

    --topbar-text: #d4b080;
    --topbar-text-active: #f0a030;

    --btn-primary-bg: #c86818;
    --btn-primary-bg-hover: #e07820;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #5a5040;
    --btn-secondary-bg-hover: #6e6050;
    --btn-secondary-text: #f0e0c8;
    --btn-secondary-border: #6e6050;
    --btn-outline-border: #7a6c58;
    --btn-outline-text: #e8d8b8;

    --input-bg: rgba(70, 60, 48, 0.9);
    --input-border: #6e6050;
    --input-text: #f5e8d0;
    --input-placeholder: #9a7a50;
    --input-focus-border: #f0a030;
    --input-disabled-bg: #241408;

    --dropdown-bg: rgba(80, 70, 55, 0.95);
    --dropdown-border: #6e6050;
    --dropdown-text: #e8d8b8;
    --dropdown-hover-bg: rgba(100, 88, 70, 0.9);
    --dropdown-hover-text: #f0a030;

    --modal-bg: rgba(80, 70, 55, 0.95);
    --modal-header-bg: rgba(70, 60, 48, 0.95);
    --modal-border: #6e6050;
    --modal-backdrop: rgba(10, 6, 2, 0.9);

    --alert-info-bg: rgba(180, 140, 40, 0.15);
    --alert-info-border: #b48c28;
    --alert-info-text: #d4a830;
    --alert-success-bg: rgba(80, 160, 40, 0.12);
    --alert-success-border: #50a028;
    --alert-success-text: #68b838;
    --alert-warning-bg: rgba(224, 136, 48, 0.15);
    --alert-warning-border: #e08830;
    --alert-warning-text: #f0a040;
    --alert-danger-bg: rgba(200, 50, 30, 0.15);
    --alert-danger-border: #c8321e;
    --alert-danger-text: #e04830;

    --success-color: #50a028;
    --success-hover: #408820;
    --warning-color: #e08830;
    --warning-hover: #c07028;
    --danger-color: #c8321e;
    --danger-hover: #a02818;

    --progress-bg: rgba(70, 60, 48, 0.7);

    --avatar-bg: #c86818;
    --logo-filter: invert(80%) sepia(40%) saturate(600%) hue-rotate(350deg) brightness(95%);
    --shadow: 0 4px 24px rgba(180, 80, 20, 0.15);
    --link-color: #f0a030;
    --link-hover-color: #f8b850;
}

/* Personality */
[data-theme="dinosaur"] {
    --focus-ring-color: rgba(240, 160, 48, 0.3);
    --border-radius-card: 6px;
    --border-radius-btn: 5px;
    --scrollbar-track: #1a0e04;
}

/* ========================================
   Canonical --tl-* contract bridge
   Maps the theme's own vars onto the shared
   --tl-* tokens read by themelab-base.css and
   the composed /preview page.
   CONTRAST FIX: the original card (#f5e8d0 on
   rgba(90,78,65,.92) ≈ 3.2:1) FAILED WCAG AA.
   The bridge surfaces use a SOLID dark stone
   brown (#3c3226) so body text on cards reaches
   10.34:1 (secondary #d4b080 reaches 6.73:1).
   ======================================== */
[data-theme="dinosaur"] {
    /* backgrounds / surfaces — solid darks (body bg / volcano base) */
    --tl-bg-base:        #1a0e04;                /* solid dark from body gradient base + --scrollbar-track */
    --tl-bg-elevated:    #3c3226;                /* darkened solid card surface (AA fix) */
    --tl-bg-elevated-2:  #332a20;
    --tl-bg-elevated-3:  #453a2c;                /* secondary button / scrollbar thumb tier */
    --tl-bg-hover:       #4a3e2e;
    --tl-bg-input:       #2e2619;

    /* text */
    --tl-text-primary:   var(--text-primary);    /* #f5e8d0 → 10.34:1 on --tl-card-bg */
    --tl-text-secondary: var(--text-secondary);  /* #d4b080 → 6.73:1 on --tl-card-bg */
    --tl-text-muted:     var(--text-muted);
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #1a0e04);

    /* accent — amber/lava signature */
    --tl-accent-primary:        var(--link-color);             /* #f0a030 amber */
    --tl-accent-primary-light:  var(--link-hover-color, var(--sidebar-text-hover));
    --tl-accent-primary-dark:   var(--btn-primary-bg, var(--link-color));

    /* borders */
    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color));

    /* cards — solid AA-safe surface */
    --tl-card-bg:        #3c3226;
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: #332a20;

    /* buttons */
    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #ffffff);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, #453a2c);
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    /* status */
    --tl-success: var(--success-color, #50a028);
    --tl-error:   var(--danger-color, #c8321e);
    --tl-warning: var(--warning-color, #e08830);
    --tl-info:    var(--alert-info-text, var(--link-color));
    --tl-error-bg:     var(--alert-danger-bg, rgba(200, 50, 30, 0.15));
    --tl-error-border: var(--alert-danger-border, var(--danger-color));

    /* shadows */
    --tl-shadow-sm: 0 1px 2px rgba(20, 12, 4, 0.4);
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(20, 12, 4, 0.4));
    --tl-shadow-lg: 0 10px 30px rgba(20, 12, 4, 0.55);
}

[data-theme="dinosaur"] ::selection {
    background-color: rgba(240, 160, 48, 0.3);
    color: #f5e8d0;
}

/* ========================================
   Stone Tablet Cards — rough rock texture
   Layered gradients for grain, chiseled edges
   ======================================== */

[data-theme="dinosaur"] .card,
[data-theme="dinosaur"] .content-card,
[data-theme="dinosaur"] .content-section,
[data-theme="dinosaur"] .stat-card,
[data-theme="dinosaur"] .collapsible-section {
    background:
        /* Stone grain — fine noise-like speckle */
        radial-gradient(circle 1px at 15% 20%, rgba(120, 105, 85, 0.4), transparent 2px),
        radial-gradient(circle 1px at 45% 35%, rgba(100, 88, 70, 0.3), transparent 2px),
        radial-gradient(circle 1px at 72% 15%, rgba(130, 112, 90, 0.35), transparent 2px),
        radial-gradient(circle 1px at 88% 60%, rgba(110, 95, 75, 0.3), transparent 2px),
        radial-gradient(circle 1px at 30% 75%, rgba(120, 105, 85, 0.4), transparent 2px),
        radial-gradient(circle 1px at 60% 85%, rgba(105, 90, 72, 0.3), transparent 2px),
        /* Subtle surface variation — lighter/darker patches */
        radial-gradient(ellipse 60% 40% at 30% 40%, rgba(140, 125, 100, 0.12), transparent),
        radial-gradient(ellipse 50% 50% at 70% 60%, rgba(70, 60, 48, 0.1), transparent),
        /* Base stone color — solid AA-safe surface */
        var(--tl-card-bg);
    border: 1px solid var(--card-border);
    /* Chiseled stone edges — light top-left, dark bottom-right */
    box-shadow:
        inset 1px 1px 0 rgba(180, 165, 140, 0.2),
        inset -1px -1px 0 rgba(30, 22, 14, 0.3),
        0 3px 12px rgba(20, 12, 4, 0.4);
}

[data-theme="dinosaur"] .card-header,
[data-theme="dinosaur"] .card .card-header,
[data-theme="dinosaur"] .section-header {
    background:
        /* Rougher grain on header — like the top of a carved tablet */
        radial-gradient(circle 1.5px at 10% 30%, rgba(100, 88, 68, 0.35), transparent 3px),
        radial-gradient(circle 1px at 35% 60%, rgba(110, 95, 75, 0.3), transparent 2px),
        radial-gradient(circle 1.5px at 65% 40%, rgba(95, 82, 65, 0.35), transparent 3px),
        radial-gradient(circle 1px at 85% 55%, rgba(105, 90, 72, 0.3), transparent 2px),
        var(--tl-card-header-bg);
    border-bottom: 1px solid rgba(60, 50, 38, 0.5);
    box-shadow: inset 0 -1px 0 rgba(180, 165, 140, 0.08);
}

/* Stone texture on tables too */
[data-theme="dinosaur"] .table {
    box-shadow:
        inset 1px 1px 0 rgba(180, 165, 140, 0.15),
        inset -1px -1px 0 rgba(30, 22, 14, 0.2);
}

/* Sidebar gets a rough cave wall feel */
[data-theme="dinosaur"] .sidebar {
    background:
        radial-gradient(circle 2px at 20% 15%, rgba(50, 35, 20, 0.3), transparent 4px),
        radial-gradient(circle 1.5px at 55% 30%, rgba(60, 42, 25, 0.25), transparent 3px),
        radial-gradient(circle 2px at 80% 50%, rgba(45, 32, 18, 0.3), transparent 4px),
        radial-gradient(circle 1.5px at 35% 70%, rgba(55, 40, 22, 0.25), transparent 3px),
        radial-gradient(circle 2px at 70% 85%, rgba(50, 35, 20, 0.3), transparent 4px),
        linear-gradient(180deg, var(--sidebar-bg), rgba(36, 20, 8, 0.98)) !important;
}

/* ========================================
   Prehistoric Sky — warm hazy daytime
   Golden amber sky fading down to sandy ground
   ======================================== */

[data-theme="dinosaur"] body {
    background: linear-gradient(
        180deg,
        #c89040 0%,
        #d4a050 8%,
        #c89848 18%,
        #b08040 30%,
        #907030 45%,
        #6a5020 58%,
        #5a4418 68%,
        /* Transition to sandy/dirt ground */
        #6a5530 76%,
        #7a6840 82%,
        #8a7850 88%,
        #9a8860 94%,
        #a09068 100%
    ) fixed !important;
}

/* ========================================
   Topbar — bright amber sky with sun
   ======================================== */

[data-theme="dinosaur"] .top-row {
    position: relative;
    z-index: 10;
    background:
        /* Sun — hot white/yellow disc */
        radial-gradient(circle 12px at 82% 45%, rgba(255, 250, 220, 0.95) 0%, rgba(255, 220, 140, 0.6) 50%, transparent 70%),
        /* Sun halo */
        radial-gradient(circle 28px at 82% 45%, rgba(255, 200, 80, 0.25) 0%, transparent 100%),
        /* Hazy warm clouds */
        radial-gradient(ellipse 80px 6px at 25% 50%, rgba(255, 240, 200, 0.25), transparent),
        radial-gradient(ellipse 55px 5px at 50% 35%, rgba(255, 240, 200, 0.18), transparent),
        radial-gradient(ellipse 65px 4px at 68% 65%, rgba(255, 240, 200, 0.15), transparent),
        /* Warm sky gradient */
        linear-gradient(180deg, #d0a048 0%, #c89040 50%, #b08038 100%) !important;
}

/* ========================================
   Tropical Fern Canopy — hanging from nav
   SVG mask of palm/fern fronds
   Scrolls away with content
   ======================================== */

[data-theme="dinosaur"] article.content {
    position: relative;
    padding-top: 0 !important;
    overflow-x: clip;
}

[data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-ferns-off]) article.content::before {
    content: '';
    display: block;
    width: calc(200% + 6rem);
    margin-left: -1.5rem;
    height: 55px;
    margin-top: -2px;
    pointer-events: none;
    flex-shrink: 0;
    /* Deep green tropical foliage */
    background: linear-gradient(180deg,
        #2a4a18 0%,
        #1e3a10 20%,
        rgba(30, 58, 16, 0.8) 40%,
        rgba(20, 40, 10, 0.5) 65%,
        transparent 100%
    );
    /* Fern/palm frond silhouettes — wide drooping leaves with pointed tips */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 55'%3E%3Crect x='0' y='0' width='800' height='10' fill='white'/%3E%3Cpath d='M10,10 Q18,28 8,50 Q4,30 10,10Z' fill='white'/%3E%3Cpath d='M25,10 Q35,24 30,42 Q22,26 25,10Z' fill='white'/%3E%3Cpath d='M50,10 Q62,30 48,52 Q38,32 50,10Z' fill='white'/%3E%3Cpath d='M72,10 Q78,20 74,34 Q68,22 72,10Z' fill='white'/%3E%3Cpath d='M95,10 Q110,34 92,55 Q78,36 95,10Z' fill='white'/%3E%3Cpath d='M120,10 Q128,22 124,38 Q116,24 120,10Z' fill='white'/%3E%3Cpath d='M140,10 Q148,26 142,44 Q134,28 140,10Z' fill='white'/%3E%3Cpath d='M165,10 Q180,36 160,54 Q148,34 165,10Z' fill='white'/%3E%3Cpath d='M192,10 Q198,20 194,30 Q188,22 192,10Z' fill='white'/%3E%3Cpath d='M210,10 Q224,32 206,50 Q194,30 210,10Z' fill='white'/%3E%3Cpath d='M238,10 Q244,24 240,40 Q232,26 238,10Z' fill='white'/%3E%3Cpath d='M260,10 Q272,30 256,48 Q246,28 260,10Z' fill='white'/%3E%3Cpath d='M285,10 Q290,18 286,28 Q280,20 285,10Z' fill='white'/%3E%3Cpath d='M305,10 Q318,34 300,54 Q288,32 305,10Z' fill='white'/%3E%3Cpath d='M330,10 Q338,24 334,40 Q326,26 330,10Z' fill='white'/%3E%3Cpath d='M350,10 Q360,28 352,46 Q342,30 350,10Z' fill='white'/%3E%3Cpath d='M378,10 Q392,36 374,55 Q362,34 378,10Z' fill='white'/%3E%3Cpath d='M400,10 Q406,20 402,32 Q396,22 400,10Z' fill='white'/%3E%3Cpath d='M420,10 Q432,28 416,48 Q406,26 420,10Z' fill='white'/%3E%3Cpath d='M448,10 Q454,22 450,36 Q442,24 448,10Z' fill='white'/%3E%3Cpath d='M470,10 Q484,34 466,52 Q454,32 470,10Z' fill='white'/%3E%3Cpath d='M498,10 Q504,18 500,28 Q494,20 498,10Z' fill='white'/%3E%3Cpath d='M515,10 Q528,32 510,52 Q498,30 515,10Z' fill='white'/%3E%3Cpath d='M540,10 Q548,26 544,44 Q534,28 540,10Z' fill='white'/%3E%3Cpath d='M565,10 Q576,28 560,48 Q550,26 565,10Z' fill='white'/%3E%3Cpath d='M590,10 Q604,36 586,55 Q574,34 590,10Z' fill='white'/%3E%3Cpath d='M615,10 Q620,20 616,30 Q610,22 615,10Z' fill='white'/%3E%3Cpath d='M635,10 Q648,30 632,50 Q620,28 635,10Z' fill='white'/%3E%3Cpath d='M660,10 Q668,24 664,40 Q656,26 660,10Z' fill='white'/%3E%3Cpath d='M682,10 Q694,32 678,52 Q668,30 682,10Z' fill='white'/%3E%3Cpath d='M710,10 Q724,36 706,55 Q694,34 710,10Z' fill='white'/%3E%3Cpath d='M735,10 Q740,18 736,28 Q730,20 735,10Z' fill='white'/%3E%3Cpath d='M755,10 Q766,28 750,48 Q740,26 755,10Z' fill='white'/%3E%3Cpath d='M780,10 Q788,24 784,40 Q776,26 780,10Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 55'%3E%3Crect x='0' y='0' width='800' height='10' fill='white'/%3E%3Cpath d='M10,10 Q18,28 8,50 Q4,30 10,10Z' fill='white'/%3E%3Cpath d='M25,10 Q35,24 30,42 Q22,26 25,10Z' fill='white'/%3E%3Cpath d='M50,10 Q62,30 48,52 Q38,32 50,10Z' fill='white'/%3E%3Cpath d='M72,10 Q78,20 74,34 Q68,22 72,10Z' fill='white'/%3E%3Cpath d='M95,10 Q110,34 92,55 Q78,36 95,10Z' fill='white'/%3E%3Cpath d='M120,10 Q128,22 124,38 Q116,24 120,10Z' fill='white'/%3E%3Cpath d='M140,10 Q148,26 142,44 Q134,28 140,10Z' fill='white'/%3E%3Cpath d='M165,10 Q180,36 160,54 Q148,34 165,10Z' fill='white'/%3E%3Cpath d='M192,10 Q198,20 194,30 Q188,22 192,10Z' fill='white'/%3E%3Cpath d='M210,10 Q224,32 206,50 Q194,30 210,10Z' fill='white'/%3E%3Cpath d='M238,10 Q244,24 240,40 Q232,26 238,10Z' fill='white'/%3E%3Cpath d='M260,10 Q272,30 256,48 Q246,28 260,10Z' fill='white'/%3E%3Cpath d='M285,10 Q290,18 286,28 Q280,20 285,10Z' fill='white'/%3E%3Cpath d='M305,10 Q318,34 300,54 Q288,32 305,10Z' fill='white'/%3E%3Cpath d='M330,10 Q338,24 334,40 Q326,26 330,10Z' fill='white'/%3E%3Cpath d='M350,10 Q360,28 352,46 Q342,30 350,10Z' fill='white'/%3E%3Cpath d='M378,10 Q392,36 374,55 Q362,34 378,10Z' fill='white'/%3E%3Cpath d='M400,10 Q406,20 402,32 Q396,22 400,10Z' fill='white'/%3E%3Cpath d='M420,10 Q432,28 416,48 Q406,26 420,10Z' fill='white'/%3E%3Cpath d='M448,10 Q454,22 450,36 Q442,24 448,10Z' fill='white'/%3E%3Cpath d='M470,10 Q484,34 466,52 Q454,32 470,10Z' fill='white'/%3E%3Cpath d='M498,10 Q504,18 500,28 Q494,20 498,10Z' fill='white'/%3E%3Cpath d='M515,10 Q528,32 510,52 Q498,30 515,10Z' fill='white'/%3E%3Cpath d='M540,10 Q548,26 544,44 Q534,28 540,10Z' fill='white'/%3E%3Cpath d='M565,10 Q576,28 560,48 Q550,26 565,10Z' fill='white'/%3E%3Cpath d='M590,10 Q604,36 586,55 Q574,34 590,10Z' fill='white'/%3E%3Cpath d='M615,10 Q620,20 616,30 Q610,22 615,10Z' fill='white'/%3E%3Cpath d='M635,10 Q648,30 632,50 Q620,28 635,10Z' fill='white'/%3E%3Cpath d='M660,10 Q668,24 664,40 Q656,26 660,10Z' fill='white'/%3E%3Cpath d='M682,10 Q694,32 678,52 Q668,30 682,10Z' fill='white'/%3E%3Cpath d='M710,10 Q724,36 706,55 Q694,34 710,10Z' fill='white'/%3E%3Cpath d='M735,10 Q740,18 736,28 Q730,20 735,10Z' fill='white'/%3E%3Cpath d='M755,10 Q766,28 750,48 Q740,26 755,10Z' fill='white'/%3E%3Cpath d='M780,10 Q788,24 784,40 Q776,26 780,10Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 400px 100%;
    -webkit-mask-size: 400px 100%;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    will-change: transform;
    animation: fern-sway 20s ease-in-out infinite alternate;
}

@keyframes fern-sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
}

/* ========================================
   Volcano Silhouettes — mountain range
   Fixed behind content (z-index 0)
   ~50vh tall, peaks fade softly into sky
   ======================================== */

[data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-volcanoes-off]) #page-root::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    pointer-events: none;
    z-index: 0;
    /* Dark volcanic rock — fades to transparent at peaks so no hard line */
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(40, 28, 16, 0.15) 8%,
        rgba(40, 28, 16, 0.4) 18%,
        rgba(35, 22, 12, 0.7) 30%,
        rgba(30, 18, 8, 0.9) 45%,
        rgba(25, 15, 6, 0.95) 60%,
        #1a0e04 80%,
        #140c04 100%
    );
    /* Volcano mountain range — 3 peaks with jagged crater rims, foothills */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0,300 L0,240 L30,230 L60,218 L90,200 L120,175 L140,155 L160,130 L175,108 L185,90 L195,75 L200,65 L208,70 L215,60 L220,55 L225,62 L232,56 L238,65 L245,75 L255,90 L270,110 L290,135 L310,155 L340,175 L370,190 L400,200 L420,195 L440,188 L460,178 L475,165 L490,148 L505,128 L515,112 L525,95 L532,80 L538,68 L542,58 L546,50 L550,55 L554,45 L558,40 L562,48 L566,55 L570,50 L574,58 L580,70 L588,85 L598,100 L610,118 L625,138 L645,158 L665,175 L690,190 L720,200 L750,208 L780,200 L800,190 L820,175 L840,158 L858,138 L872,118 L885,95 L895,78 L902,65 L908,55 L912,48 L916,42 L920,48 L924,40 L928,46 L932,55 L938,68 L948,85 L960,105 L978,130 L1000,155 L1025,175 L1055,192 L1090,205 L1120,215 L1150,225 L1180,235 L1200,245 L1200,300 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0,300 L0,240 L30,230 L60,218 L90,200 L120,175 L140,155 L160,130 L175,108 L185,90 L195,75 L200,65 L208,70 L215,60 L220,55 L225,62 L232,56 L238,65 L245,75 L255,90 L270,110 L290,135 L310,155 L340,175 L370,190 L400,200 L420,195 L440,188 L460,178 L475,165 L490,148 L505,128 L515,112 L525,95 L532,80 L538,68 L542,58 L546,50 L550,55 L554,45 L558,40 L562,48 L566,55 L570,50 L574,58 L580,70 L588,85 L598,100 L610,118 L625,138 L645,158 L665,175 L690,190 L720,200 L750,208 L780,200 L800,190 L820,175 L840,158 L858,138 L872,118 L885,95 L895,78 L902,65 L908,55 L912,48 L916,42 L920,48 L924,40 L928,46 L932,55 L938,68 L948,85 L960,105 L978,130 L1000,155 L1025,175 L1055,192 L1090,205 L1120,215 L1150,225 L1180,235 L1200,245 L1200,300 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* ========================================
   Lava Glow — pulsing warm light behind
   volcano peaks, visible through the gaps
   ======================================== */

/* Lava element always renders (not gated by reduced-motion).
   Only the pulse animation is conditional on motion preference. */
[data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-lava-off]) #page-root::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55vh;
    pointer-events: none;
    z-index: 0;
    background:
        /* Glow behind left volcano peak — positioned at crater */
        radial-gradient(ellipse 160px 120px at 18% 12%, rgba(255, 80, 20, 0.5), transparent),
        /* Glow behind center volcano peak */
        radial-gradient(ellipse 140px 110px at 47% 8%, rgba(255, 60, 10, 0.55), transparent),
        /* Glow behind right volcano peak */
        radial-gradient(ellipse 150px 115px at 77% 10%, rgba(255, 70, 15, 0.5), transparent),
        /* Diffuse warm glow along volcano line */
        radial-gradient(ellipse 100% 40% at 50% 20%, rgba(200, 50, 10, 0.18), transparent);
    opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
    [data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-lava-off]) #page-root::before {
        animation: lava-pulse 5s ease-in-out infinite alternate;
    }

    @keyframes lava-pulse {
        0%   { opacity: 0.7; }
        40%  { opacity: 1; }
        60%  { opacity: 0.85; }
        100% { opacity: 1; }
    }
}

/* ========================================
   Volcanic Smoke — rising from peaks
   Warm ash/smoke particles drifting up
   ======================================== */

/* Smoke — background-position animation (not transform).
   Element stays fixed; background tiles scroll up inside it.
   A mask fades smoke to invisible in the lower portion so
   new tiles entering from below are hidden behind the volcanos.
   Smoke blobs at 74–97% Y in the 600px tile = volcano peak altitude. */
[data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-smoke-off]) body::before {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem);
    pointer-events: none;
    z-index: 2;
    background-image:
        /* Left volcano smoke plume (~18% x) — densest at bottom (volcano crater) */
        radial-gradient(circle 18px at 14% 97%, rgba(180, 170, 150, 0.2), transparent),
        radial-gradient(circle 14px at 16% 93%, rgba(170, 160, 140, 0.22), transparent),
        radial-gradient(circle 10px at 19% 88%, rgba(160, 150, 135, 0.18), transparent),
        radial-gradient(circle 12px at 20% 82%, rgba(150, 142, 128, 0.15), transparent),
        radial-gradient(circle 8px at 17% 76%, rgba(145, 138, 125, 0.12), transparent),
        /* Center volcano smoke plume (~47% x) — tallest volcano */
        radial-gradient(circle 20px at 44% 96%, rgba(180, 170, 150, 0.22), transparent),
        radial-gradient(circle 16px at 46% 92%, rgba(170, 160, 140, 0.24), transparent),
        radial-gradient(circle 12px at 49% 86%, rgba(160, 150, 135, 0.18), transparent),
        radial-gradient(circle 14px at 50% 80%, rgba(150, 142, 128, 0.15), transparent),
        radial-gradient(circle 9px at 47% 74%, rgba(145, 138, 125, 0.12), transparent),
        /* Right volcano smoke plume (~77% x) */
        radial-gradient(circle 18px at 74% 97%, rgba(180, 170, 150, 0.2), transparent),
        radial-gradient(circle 15px at 76% 93%, rgba(170, 160, 140, 0.22), transparent),
        radial-gradient(circle 11px at 79% 88%, rgba(160, 150, 135, 0.18), transparent),
        radial-gradient(circle 13px at 80% 82%, rgba(150, 142, 128, 0.15), transparent),
        radial-gradient(circle 8px at 77% 76%, rgba(145, 138, 125, 0.12), transparent);
    background-size: 100% 600px;
    /* Fade smoke to invisible in the volcano/ground region at bottom */
    mask-image: linear-gradient(to bottom, black 0%, black 52%, transparent 68%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 52%, transparent 68%);
    animation: smoke-rise 20s linear infinite;
}

@keyframes smoke-rise {
    from { background-position: 0 0; }
    to { background-position: 0 -600px; }
}

/* ========================================
   Heat Shimmer — hot air distortion
   Very subtle ripple overlay
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    [data-theme="dinosaur"]:not([data-effects-off]):not([data-effect-heat-off]) body::after {
        content: '';
        position: fixed;
        top: 3.5rem;
        left: 0;
        width: 100%;
        height: calc(100vh - 3.5rem);
        pointer-events: none;
        z-index: 9997;
        background: repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 4px,
            rgba(200, 140, 60, 0.02) 4px,
            rgba(200, 140, 60, 0.02) 5px
        );
        background-size: 100% 200%;
        will-change: transform;
        animation: heat-shimmer 8s ease-in-out infinite alternate;
    }

    @keyframes heat-shimmer {
        from { transform: translateY(0); }
        to { transform: translateY(-12px); }
    }
}