/* ============================================
   MUSHIES — Cozy storybook theme
   Warm butter background, chunky ink outlines,
   hard toy-shadows, rounded display type,
   thematic colored bands. Pixel art stays crisp.
   ============================================ */

:root {
    /* Surfaces — warm & cozy, not corporate white */
    --bg: #F5E9CF;              /* warm butter cream */
    --bg-band: #ECD7A6;         /* deeper honey band */
    --bg-sky: #CFE6EC;          /* soft game sky band */
    --card: #FFFCF3;            /* warm paper white */

    /* Ink — warm dark brown, used for text, outlines, shadows */
    --ink: #3A2A18;
    --border: #3A2A18;
    --border-strong: #3A2A18;
    --text: #33261A;
    --text-dim: #6E5A40;
    --text-faint: #9B8768;

    /* Brand */
    --accent: #F54E00;          /* mushroom-cap red-orange */
    --accent-hover: #DB4500;
    --accent-border: #3A2A18;   /* chunky cards use ink outlines */
    --accent-soft: #FDE0CC;
    --blue: #2C6EEF;
    --gold: #F1A82C;
    --gold-soft: #FBEBC6;
    --green: #3E8E1E;
    --purple: #8A57E0;
    --purple-soft: #EADFFA;
    --tan: #F5E2B2;

    /* Worker card accents */
    --w-red: #E03C3C;
    --w-blue: #3366E6;
    --w-orange: #E67300;
    --w-yellow: #E0AE14;
    --w-green: #4A9E4A;
    --w-cyan: #14A0AE;
    --w-purple: #8E4DC9;

    /* Fonts */
    --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;   /* cozy rounded */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-pixel: 'Press Start 2P', cursive;

    --radius: 14px;
    --radius-lg: 20px;
    /* Hard toy-shadows — no blur, warm ink */
    --shadow-card: 3px 3px 0 var(--ink);
    --shadow-pop: 5px 6px 0 var(--ink);
    --border-w: 2.5px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    overflow-x: clip;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Pixel-perfect images (all site art is pixel art) */
img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--accent-soft);
}

/* ============================================
   Background — cozy paper grain, barely there
   ============================================ */

.grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.32;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.16  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* ============================================
   Navigation
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 233, 207, 0.88);
    z-index: 1000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2.5px solid var(--ink);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 32px;
    height: 32px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.logo-text {
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: var(--ink);
}

.nav-links {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--text);
}

.discord-link:hover {
    color: var(--blue);
}

/* Nav CTAs */
.wishlist-link,
.demo-link,
.nav-btn {
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}

.wishlist-link:hover,
.demo-link:hover,
.nav-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

.wishlist-link:active,
.demo-link:active,
.nav-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
}

.wishlist-link,
.demo-link,
.nav-links a.demo-link,
.nav-links a.wishlist-link {
    /* The extra selectors out-rank the generic `.nav-links a` (text-dim) —
       without them the header's Play Demo rendered washed-out while the
       hero's identical button wore full ink. */
    color: var(--ink);
    background: var(--card);
}

.demo-link {
    white-space: nowrap;
}

.nav-btn {
    background: var(--accent);
    color: #fff !important;
    white-space: nowrap;
}

.nav-btn:hover {
    background: var(--accent-hover);
}

.cta-short { display: none; }

/* ============================================
   Hero — centered copy, framed game scene below
   ============================================ */

.hero {
    position: relative;
    padding: 8.5rem 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.hero-text {
    text-align: center;
    max-width: 760px;
    margin-bottom: 3rem;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transform: rotate(-2deg);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--ink);
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    padding: 0.55rem 1rem;
    background: var(--gold);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--ink);
}

.hero-eyebrow img {
    width: 18px;
    height: 18px;
}

.hero-text h1 {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.tagline {
    font-size: 1.3rem;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.subtitle {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-bottom: 2rem;
    letter-spacing: 4px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Framed game scene — the "product screenshot" */
.hero-scene-frame {
    position: relative;
    width: min(1040px, 100%);
    /* 2x the 192px-tall game parallax strips — integer pixel scale */
    height: 384px;
    border: 3px solid var(--ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 7px 8px 0 var(--ink);
    background: #7EC8E3;
}

.game-scene {
    position: absolute;
    inset: 0;
}

/* The game's real parallax stack, front-to-back: bushes, trunks, then
   everything behind them pre-composited into far.png. Each layer is a
   960x192 strip shown at exactly 2x (1920x384) and drifts at its own
   speed for depth. Layers are raised by different amounts so trunk and
   bush feet tuck behind the grass line of .scene-ground (120px tall). */
.forest-layer {
    position: absolute;
    left: 0;
    right: 0;
    height: 384px;
    background-repeat: repeat-x;
    background-size: 1920px 384px;
    image-rendering: pixelated;
    pointer-events: none;
}

.forest-far {
    bottom: 72px;
    z-index: 1;
    background-image: url('assets/forest/far.png');
    animation: forestDrift 360s linear infinite;
}

.forest-trees {
    bottom: 84px;
    z-index: 2;
    background-image: url('assets/forest/trees.png');
    animation: forestDrift 240s linear infinite;
}

.forest-bushes {
    bottom: 96px;
    z-index: 3;
    background-image: url('assets/forest/bushes.png');
    animation: forestDrift 160s linear infinite;
}

@keyframes forestDrift {
    from { background-position-x: 0; }
    to { background-position-x: -1920px; }
}

/* Tiered houses from the game, 2x scale. Each sheet is 5 vertical frames
   (door closed -> open); --fh is one frame's display height. step-end
   keyframes walk the door open, hold, and close once per loop. */
.hero-house {
    position: absolute;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    pointer-events: none;
    animation: doorCycle 11s step-end infinite;
}

.hero-house.house-small {
    --fh: 96px;
    width: 128px;
    height: 96px;
    bottom: 108px;
    left: 24%;
    background-image: url('assets/buildings/house_small.png');
    background-size: 128px 480px;
    animation-delay: 3.5s;
}

.hero-house.house-medium {
    --fh: 128px;
    width: 128px;
    height: 128px;
    bottom: 108px;
    right: 6%;
    background-image: url('assets/buildings/house_medium.png');
    background-size: 128px 640px;
    animation-delay: 7s;
}

.hero-house.house-large {
    --fh: 192px;
    width: 192px;
    height: 192px;
    bottom: 108px;
    left: 3%;
    background-image: url('assets/buildings/house_large.png');
    background-size: 192px 960px;
}

@keyframes doorCycle {
    0%, 70% { background-position-y: 0; }
    71% { background-position-y: calc(-1 * var(--fh)); }
    72% { background-position-y: calc(-2 * var(--fh)); }
    73% { background-position-y: calc(-3 * var(--fh)); }
    74%, 82% { background-position-y: calc(-4 * var(--fh)); }
    83% { background-position-y: calc(-3 * var(--fh)); }
    84% { background-position-y: calc(-2 * var(--fh)); }
    85% { background-position-y: calc(-1 * var(--fh)); }
    86%, 100% { background-position-y: 0; }
}

/* Worker shrooms wandering the grass, 2x scale. Sheets are horizontal
   strips of 32x32 frames (feet flush with the frame bottom, facing
   right). script.js spawns 1-3 of these, swaps idle/walk sheets, and
   drives movement; --frames/--dur set per sheet. */
.hero-shroom {
    position: absolute;
    width: 64px;
    height: 64px;
    bottom: 118px; /* feet resting on the ground strip's opaque top edge */
    z-index: 11; /* in front of the grass so the ground doesn't crop their feet */
    background-repeat: no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    animation: shroomFrames var(--dur, 0.8s) steps(var(--frames, 4)) infinite;
}

.hero-shroom.facing-left {
    transform: scaleX(-1);
}

@keyframes shroomFrames {
    from { background-position-x: 0; }
    to { background-position-x: calc(-64px * var(--frames, 4)); }
}

/* Standalone game bushes framing the scene's bottom corners, 2x scale,
   in front of the grass. */
.corner-bush {
    position: absolute;
    width: 352px;
    bottom: -28px;
    z-index: 12;
    image-rendering: pixelated;
    pointer-events: none;
}

.corner-bush-left { left: -90px; }
.corner-bush-right { right: -90px; }

/* "Play the demo" popup — appears in the scene once the mushroom is
   clicked, top-right so it never blocks continued clicking. */
/* Inline button icons (Steam mark / play triangle): inherit the caption's
   color, sit on the text baseline, and scale with the button's font. */
.btn-ico {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    vertical-align: -0.16em;
    margin-right: 0.15em;
}

.nav-btn .btn-ico {
    width: 0.95em;
    height: 0.95em;
}

.demo-popup {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    width: 216px;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: var(--border-w) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-align: center;
    animation: demoPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.demo-popup[hidden] {
    display: none;
}

.demo-popup-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.7rem;
}

.demo-popup-btn {
    font-size: 0.95rem;
    padding: 0.5rem 1.1rem;
}

.demo-popup-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px;
}

.demo-popup-close:hover {
    color: var(--ink);
}

@keyframes demoPopIn {
    from {
        opacity: 0;
        transform: scale(0.6) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mobile toast entrance — slides up from the bottom edge (see the
   max-width: 600px .demo-popup block). */
@keyframes demoToastUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scene-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: url('assets/ground_tiles.png') repeat-x top;
    image-rendering: pixelated;
    z-index: 10;
    pointer-events: none;
}

.deco-shroom {
    position: absolute;
    /* The ground tile is opaque from its very top row, so the visible
       ground level is exactly the strip's top edge (120px). Sprites are
       16px with no transparent bottom rows: at 2x (32px, integer scale)
       a shared bottom rests every base 2px into that edge. */
    bottom: 118px;
    width: 32px;
    image-rendering: pixelated;
    z-index: 11; /* in front of the grass (scene-ground is z-index 10) */
    animation: shroomBob 5s ease-in-out infinite;
}

.deco-1 { left: 18%;  animation-delay: 0s; }
.deco-2 { left: 40%;  animation-delay: 0.5s; }
.deco-3 { right: 21%; animation-delay: 1s; }
.deco-4 { right: 2%;  animation-delay: 1.5s; }
.deco-5 { right: 33%; animation-delay: 0.8s; }

@keyframes shroomBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.hero-mushroom {
    position: absolute;
    left: 50%;
    bottom: 55px;
    transform: translateX(-50%);
    transform-origin: bottom center; /* the click-impact spring leans from the base */
    cursor: pointer;
    touch-action: manipulation; /* no double-tap zoom while click-spamming */
    z-index: 5;
}

.hero-mushroom::after {
    content: '👆 CLICK ME!';
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    color: #fff;
    background: rgba(21, 21, 21, 0.75);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}

.hero-mushroom:hover::after {
    opacity: 1;
    animation: clickMeBounce 0.6s ease-in-out infinite;
}

@keyframes clickMeBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

.big-mushroom {
    /* 80x128 source at exactly 2x — same pixel grid as the parallax
       layers and houses, and leaves headroom in the 384px frame for
       the CLICK ME label above the cap */
    width: 160px;
    height: auto;
    display: block;
    transition: transform 0.2s;
    animation: mushroomBreathe 3s ease-in-out infinite;
}

.big-mushroom:hover {
    transform: scale(1.08);
}

.big-mushroom.clicked {
    animation: mushroomClick 0.2s ease-out;
}

@keyframes mushroomBreathe {
    0%, 100% { transform: scale(1) translateX(0) rotate(0deg); }
    25% { transform: scale(1.01) translateX(-3px) rotate(-1deg); }
    75% { transform: scale(1.01) translateX(3px) rotate(1deg); }
}

@keyframes mushroomClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Spore collection FX (game-fx.js): the particle canvas streaming click
   spores into the collector orb, the orb itself, and the floaters */
.spore-layer {
    position: absolute;
    inset: 0;
    z-index: 27;
    pointer-events: none;
}

.spore-collector-ui {
    position: absolute;
    top: 8px;
    left: 12px;
    display: flex;
    align-items: center;
    z-index: 28;
    pointer-events: none;
}

.spore-count {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: #fff;
    text-shadow: 2px 2px 0 var(--ink);
    margin-left: -6px; /* tuck against the orb's transparent padding */
}

.hero-floater {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    z-index: 26;
    cursor: pointer;
}

/* ============================================
   Click feedback — mirrors the game's clickable_mushroom.gd
   ============================================ */

/* Modulate flash on click / golden flash on combo payout. Applied to the
   #hero-mushroom wrapper (the sprite img runs mushroomBreathe, and an
   animation there would stomp it). */
.cap-flash { animation: capFlash 0.15s ease-out; }
.cap-flash-gold { animation: capFlashGold 0.25s ease-out; }

@keyframes capFlash {
    0%, 100% { filter: none; }
    33% { filter: brightness(1.32) saturate(1.05); }
}

@keyframes capFlashGold {
    0%, 100% { filter: none; }
    28% { filter: brightness(1.5) sepia(0.35) saturate(1.6); }
}

/* Screen shake: --shake set from the game's 0-1 intensity by script.js */
.frame-shake { animation: frameShake 0.2s linear; }

@keyframes frameShake {
    0%, 100% { translate: 0 0; }
    25% { translate: var(--shake, 1px) calc(var(--shake, 1px) * -0.6); }
    50% { translate: calc(var(--shake, 1px) * -0.8) calc(var(--shake, 1px) * 0.5); }
    75% { translate: calc(var(--shake, 1px) * 0.6) calc(var(--shake, 1px) * 0.4); }
}

/* "+1" popups above the cursor, tinted gold -> ember by combo heat */
.click-popup {
    position: absolute;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    text-shadow: 2px 2px 0 var(--ink);
    pointer-events: none;
    z-index: 30;
    animation: popupRise 0.8s ease-out forwards;
}

.combo-popup { font-size: 0.95rem; }

@keyframes popupRise {
    0% { opacity: 0; translate: 0 6px; }
    12% { opacity: 1; }
    100% { opacity: 0; translate: 0 -34px; }
}

/* Combo shockwave — DOM port of combo_shockwave.gd: impact flash disc,
   gold ring, trailing ice ring, decelerating sparks; ~0.42s, hard edges */
.combo-shockwave {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 29;
    pointer-events: none;
}

.shock-flash {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(244, 180, 27);
    transform: scale(0.27);
    animation: shockFlash 0.08s ease-out forwards;
}

@keyframes shockFlash {
    0% { transform: scale(0.27); opacity: 0.9; }
    100% { transform: scale(1); opacity: 0; }
}

.shock-ring {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
}

.shock-gold {
    border: 7px solid rgb(244, 180, 27);
    animation: shockGold 0.36s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes shockGold {
    0% { width: 24px; height: 24px; border-width: 7px; opacity: 1; }
    100% { width: 240px; height: 240px; border-width: 2px; opacity: 0; }
}

.shock-ice {
    border: 4px solid rgb(223, 246, 245);
    animation: shockIce 0.33s cubic-bezier(0.33, 1, 0.68, 1) 0.07s forwards;
}

@keyframes shockIce {
    0% { width: 16px; height: 16px; border-width: 4px; opacity: 0.85; }
    100% { width: 164px; height: 164px; border-width: 1.5px; opacity: 0; }
}

.shock-spark {
    position: absolute;
    left: -1.5px;
    top: -1.5px;
    width: 3px;
    height: 3px;
    background: rgb(244, 180, 27);
    animation: shockSpark 0.42s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes shockSpark {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(var(--sx), var(--sy)); opacity: 0; }
}

/* ============================================
   Ticker strip — full-bleed, slightly askew
   ============================================ */

.ticker {
    background: var(--ink);
    transform: rotate(-0.8deg);
    width: 100%;
    margin: 4rem 0 0 0;
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Cover the small triangular gaps the tilt leaves at the corners */
.ticker::before,
.ticker::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: var(--ink);
}
.ticker::before { top: -6px; }
.ticker::after { bottom: -6px; }

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 84s linear infinite;
}

/* Two identical groups tile end to end. Each group carries a trailing gap
   (padding-right) so translateX(-50%) lands group 2 exactly where group 1
   started, looping forever with no snap. */
.ticker-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    flex-shrink: 0;
}

.tick-word {
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: #EEEFE9;
    white-space: nowrap;
}

.tick-star {
    color: var(--gold);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.tick-shroom {
    height: 18px;
    width: auto;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Inline mushroom used in place of the 🍄 emoji; sizes to the local text */
.emoji-shroom {
    height: 1em;
    width: auto;
    vertical-align: -0.15em;
    image-rendering: pixelated;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    border: var(--border-w) solid var(--ink);
    box-shadow: var(--shadow-card);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}

.btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.btn:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
}

.btn-icon {
    font-size: 0.85em;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--card);
    color: var(--ink);
}

.btn-large {
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
}

.discord-btn:hover {
    background: var(--blue);
    color: #fff;
}

/* ============================================
   Sections & headers
   ============================================ */

section {
    position: relative;
    z-index: 1;
}

/* Full-bleed sections; inner content is width-capped so bands span edge-to-edge */
.features,
.workers,
.village,
.resources,
.cta {
    padding: 5rem 2rem;
}

.section-header,
.features-grid,
.workers-grid,
.resources-showcase {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Thematic bands — a cozy world, not one flat sheet */
/* No border-top on .features: the rotated ticker directly above already
   separates it from the hero */
.features  { background: var(--bg-band); border-bottom: 3px solid var(--ink); }
.village   { background: var(--bg-sky); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.resources { background: var(--bg-band); border-bottom: 3px solid var(--ink); }

.section-header {
    text-align: center;
    max-width: 760px;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--text-dim);
}

/* Hand-drawn squiggle under headings */
.pixel-divider {
    width: 120px;
    height: 10px;
    margin: 1rem auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 5 Q 9.5 1, 17 5 T 32 5 T 47 5 T 62 5 T 77 5 T 92 5 T 107 5 T 118 5' fill='none' stroke='%23F54E00' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================
   Features
   ============================================ */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.feature-card {
    background: var(--card);
    border: var(--border-w) solid var(--ink);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s, box-shadow 0.15s;
}

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

.feature-icon {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transform: rotate(-4deg);
    transition: transform 0.2s;
}

/* Real game art as icons — pixel-perfect, drop-shadowed like stickers */
.feature-icon img {
    max-height: 84px;
    max-width: 96px;
    width: auto;
    image-rendering: pixelated;
    filter: drop-shadow(2px 3px 0 rgba(58, 42, 24, 0.18));
}

/* Worker sprite sheets — show frame 1 of the 128x32 idle sheet at 2x.
   Fixed-width block, so it needs auto side margins to center in the card. */
.feature-icon.sprite {
    width: 64px;
    height: 88px;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 256px 64px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 3px 0 rgba(58, 42, 24, 0.18));
}

/* Tiered house sheet — frame 1 (door closed) of the 64x320 medium-house
   sheet at native 1x, so the 64x64 frame slots into the 88px icon area. */
.feature-icon.house {
    width: 64px;
    height: 64px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('assets/buildings/house_medium.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 64px 320px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 3px 0 rgba(58, 42, 24, 0.18));
}

.feature-card:nth-child(even) .feature-icon {
    transform: rotate(5deg);
}

.feature-card:hover .feature-icon {
    animation: iconWiggle 0.5s ease-in-out;
}

@keyframes iconWiggle {
    0%, 100% { transform: rotate(-4deg); }
    25% { transform: rotate(7deg) scale(1.12); }
    60% { transform: rotate(-8deg) scale(1.05); }
}

/* Every other feature card leans the opposite way slightly */
.feature-card:nth-child(3n+2) { transform: rotate(0.6deg); }
.feature-card:nth-child(3n)   { transform: rotate(-0.5deg); }

.feature-card:hover {
    transform: rotate(0deg) translateY(-4px) !important;
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--ink);
}

.feature-card p {
    color: var(--text-dim);
    font-size: 0.98rem;
}

/* ============================================
   Workers
   ============================================ */

.workers-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.workers-row {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.worker-card {
    --worker-color: var(--accent);
    background: var(--card);
    border: var(--border-w) solid var(--ink);
    border-top: 7px solid var(--worker-color);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    width: 250px;
    text-align: center;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

/* Sticker tilt — trading-card vibe, straighten on hover */
.workers-row .worker-card:nth-child(odd)  { transform: rotate(-1.4deg); }
.workers-row .worker-card:nth-child(even) { transform: rotate(1.1deg); }
.workers-row:nth-child(even) .worker-card:nth-child(odd)  { transform: rotate(1.2deg); }
.workers-row:nth-child(even) .worker-card:nth-child(even) { transform: rotate(-1.1deg); }

.worker-card:hover:not(.worker-card-locked) {
    transform: rotate(0deg) translateY(-5px) scale(1.02) !important;
    box-shadow: var(--shadow-pop);
    z-index: 2;
}

.worker-card[data-color="red"]    { --worker-color: var(--w-red); }
.worker-card[data-color="blue"]   { --worker-color: var(--w-blue); }
.worker-card[data-color="orange"] { --worker-color: var(--w-orange); }
.worker-card[data-color="yellow"] { --worker-color: var(--w-yellow); }
.worker-card[data-color="green"]  { --worker-color: var(--w-green); }
.worker-card[data-color="cyan"]   { --worker-color: var(--w-cyan); }
.worker-card[data-color="purple"] { --worker-color: var(--w-purple); }

.worker-card.bounce {
    animation: cardBounce 0.4s ease;
}

@keyframes cardBounce {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(0.96); }
    70% { transform: scale(1.02); }
}

.worker-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--ink);
}

.worker-desc {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    min-height: 3.2em;
}

.worker-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.stat-label {
    color: var(--text-dim);
}

.stat-value {
    font-weight: 700;
    color: var(--worker-color, var(--text));
}

/* Sprite sheet animation for worker idle animations */
/* Sprites are 128x32 (4 frames of 32x32 each), shown at 3x integer scale */
/* Timing matches in-game: idle 5 FPS, walk 0.8s full cycle */
.worker-sprite {
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    background-size: 384px 96px; /* 128*3 x 32*3 for crisp scaling */
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    animation: spriteIdle 0.8s steps(4) infinite;
    position: relative;
}

@keyframes spriteIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Shaker's idle sheet has 8 frames (256x32) instead of 4 */
.worker-sprite.frames-8 {
    background-size: 768px 96px; /* 256*3 x 32*3 */
    animation: spriteIdle8 1.6s steps(8) infinite;
}

@keyframes spriteIdle8 {
    0% { background-position: 0 0; }
    100% { background-position: -768px 0; }
}

/* Walk animation - 4 frames at 128x32, scaled 3x to 384x96 */
@keyframes spriteWalk {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.worker-card:hover .worker-sprite {
    background-size: 384px 96px; /* all walk sheets are 4 frames of 32x32 */
    animation: spriteWalk 0.8s steps(4) infinite;
}

/* Demo-teaser workers (Collector, Scientist): ghosted sprite, name
   glitched by the shared .scramble-text effect from the wisdom card */
.worker-card-teaser .worker-sprite {
    opacity: 0.1;
}

/* Locked / mystery workers */
.worker-card-locked {
    cursor: default;
    border: 2.5px dashed var(--text-faint);
    background: rgba(255, 252, 243, 0.5);
    box-shadow: none;
}

.worker-card-locked:hover {
    transform: none;
    box-shadow: none;
}

.worker-card-locked h3,
.worker-card-locked .worker-desc {
    color: var(--text-faint);
}

.worker-sprite-locked {
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    animation: lockPulse 3s ease-in-out infinite;
}

.worker-sprite-locked::before {
    content: '?';
    font-family: var(--font-pixel);
    font-size: 1.5rem;
}

@keyframes lockPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

.locked-overlay {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.lock-icon {
    font-size: 1rem;
    opacity: 0.5;
}

.workers-hint {
    text-align: center;
    margin-top: 2rem;
    color: var(--text-dim);
    font-style: italic;
}

/* ============================================
   Village — screenshot carousel
   ============================================ */

.screenshot-carousel {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.carousel-descriptions {
    text-align: center;
    margin-bottom: 1.5rem;
    min-height: 5rem;
}

.carousel-description {
    display: none;
}

.carousel-description.active {
    display: block;
    animation: descFade 0.4s ease;
}

@keyframes descFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.carousel-description h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.carousel-description p {
    color: var(--text-dim);
    max-width: 620px;
    margin: 0 auto;
}

.carousel-container {
    overflow: hidden;
    border: var(--border-w) solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    background: var(--card);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    min-width: 100%;
}

/* Direct children only: this used to be `.carousel-slide img` for the
   old full-bleed screenshots, which silently blew up every sprite <img>
   nested inside the live scenes to 996px wide */
.carousel-slide > img {
    width: 100%;
    display: block;
}

/* ============================================
   Live gameplay scenes in the carousel
   Built from the hero kit (forest-layer, hero-house, scene-ground,
   shroomFrames) plus per-scene choreography below.
   ============================================ */
.live-scene {
    position: relative;
    height: 360px;
    overflow: hidden;
    background: #7EC8E3;
}

/* --- Scene: buying tons of houses --- */
/* Same 9s pop cycle, offset per house so purchases land back to back */
.scene-houses .hero-house {
    right: auto;
    transform-origin: bottom center;
    animation: doorCycle 11s step-end infinite, housePop 9s ease infinite;
}

.scene-houses .buy-1 { left: 8%;  animation-delay: 0s, 0s; }
.scene-houses .buy-2 { left: 26%; animation-delay: 2s, -7.5s; }
.scene-houses .buy-3 { left: 44%; animation-delay: 5s, -6s; }
.scene-houses .buy-4 { left: 68%; animation-delay: 3.5s, -4.5s; }
.scene-houses .buy-5 { left: 84%; animation-delay: 7s, -3s; }

@keyframes housePop {
    0% { transform: scale(0); }
    5% { transform: scale(1.12); }
    8% { transform: scale(1); }
    96% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* --- Scene: busy workers (script.js spawns the wanderers) --- */
.scene-workers .workers-house-a { left: 6%; right: auto; }
.scene-workers .workers-house-b { right: 8%; }

/* --- Scene: click spam --- */
.spam-stage {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    z-index: 5;
}

.spam-mushroom {
    width: 160px; /* 80x128 source at 2x, like the hero */
    display: block;
    image-rendering: pixelated;
    transform-origin: bottom center;
    animation: spamSquash 0.45s ease-in-out infinite;
}

@keyframes spamSquash {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06, 0.92); }
}

/* The game's hand cursor (assets/cursor/Hand3*.png, 48x45 at 1x) tapping
   the cap: CursorManager's click squash (1.3, 0.7) -> stretch (0.8, 1.25),
   with the pressed art swapped in while squashed */
.spam-cursor {
    position: absolute;
    top: 2px;
    right: -38px;
    width: 48px;
    height: 45px;
    /* squash pivots near the fingertip hotspot, (14, 8) in the art */
    transform-origin: 29% 18%;
    animation: spamTap 0.45s ease-in-out infinite;
}

.spam-cursor img {
    position: absolute;
    inset: 0;
    image-rendering: pixelated;
}

.spam-cursor .cursor-down {
    opacity: 0;
    animation: cursorPress 0.45s linear infinite;
}

@keyframes spamTap {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(7px) scale(1.3, 0.7); }
    70% { transform: translateY(3px) scale(0.8, 1.25); }
}

@keyframes cursorPress {
    0%, 42% { opacity: 0; }
    45%, 70% { opacity: 1; }
    73%, 100% { opacity: 0; }
}

.spam-particle {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFE9A8;
    box-shadow: 0 0 0 2px rgba(21, 21, 21, 0.15);
    opacity: 0;
    animation: sporeBurst 1.35s ease-out infinite;
}

@keyframes sporeBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}

.spam-particle.p1 { --dx: -70px; --dy: -55px; animation-delay: 0s; }
.spam-particle.p2 { --dx: 62px;  --dy: -78px; animation-delay: 0.15s; }
.spam-particle.p3 { --dx: -45px; --dy: -95px; animation-delay: 0.45s; }
.spam-particle.p4 { --dx: 80px;  --dy: -40px; animation-delay: 0.6s; }
.spam-particle.p5 { --dx: -85px; --dy: -20px; animation-delay: 0.9s; }
.spam-particle.p6 { --dx: 35px;  --dy: -100px; animation-delay: 1.05s; }

.spam-label {
    position: absolute;
    top: 18px;
    left: 50%;
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: #fff;
    text-shadow: 2px 2px 0 var(--ink);
    opacity: 0;
    pointer-events: none;
    animation: labelRise 1.35s ease-out infinite;
}

@keyframes labelRise {
    0% { transform: translate(calc(-50% + var(--lx, 0px)), 0); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--lx, 0px)), -70px); opacity: 0; }
}

.spam-label.l1 { --lx: -34px; animation-delay: 0.2s; }
.spam-label.l2 { --lx: 28px;  animation-delay: 0.65s; }
.spam-label.l3 { --lx: 0px;   animation-delay: 1s; }

/* --- Scene: collecting floaters --- */
.scene-floaters .floaters-house { left: 78%; right: auto; }

.flying-collector {
    position: absolute;
    width: 64px;
    height: 64px;
    bottom: 180px;
    z-index: 6;
    /* The game's jetpack state: 4 used frames at the head of a 256x32
       sheet (2x = 512x64); shroomFrames' default --frames: 4 steps
       exactly through them */
    background-image: url('assets/shrooms/collector_jetpack.png');
    background-size: 512px 64px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: shroomFrames 0.72s steps(4) infinite, collectorFly 12s linear infinite;
}

@keyframes collectorFly {
    0%   { left: -8%;  transform: translateY(0); }
    25%  { transform: translateY(-45px); }
    50%  { transform: translateY(15px); }
    75%  { transform: translateY(-35px); }
    100% { left: 104%; transform: translateY(0); }
}

.floater {
    position: absolute;
    bottom: -40px;
    width: 32px;
    z-index: 12;
    image-rendering: pixelated;
    opacity: 0;
    animation: floatUp var(--t, 7s) linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(-400px) rotate(18deg); opacity: 0; }
}

.floater.f1 { left: 16%; --t: 8s;   --d: 0s; }
.floater.f2 { left: 38%; --t: 6.5s; --d: 2s; }
.floater.f3 { left: 58%; --t: 7.5s; --d: 4s; }
.floater.f4 { left: 88%; --t: 6s;   --d: 1s; }

.floater-label {
    position: absolute;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 2px 2px 0 var(--ink);
    opacity: 0;
    z-index: 12;
    pointer-events: none;
    animation: labelRise 2.4s ease-out infinite;
}

.floater-label.fl1 { left: 32%; top: 42%; animation-delay: 1.2s; }
.floater-label.fl2 { left: 64%; top: 56%; animation-delay: 2.6s; }

/* Busy-workers scene: micro mushrooms the chopper harvests, and the
   chop-impact dust puff (brown, up-and-out with gravity, like the
   game's ChopDust particles) */
.cw-micro {
    position: absolute;
    width: 32px;
    bottom: 118px;
    z-index: 11;
    image-rendering: pixelated;
}

.chop-dust {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(153, 128, 77, 0.9);
    z-index: 12;
    pointer-events: none;
}

/* JS-driven catch scene (script.js initCarouselFloaters). The .floater /
   .flying-collector rules above remain as the no-WebGL CSS fallback. */
.cf-floater {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    z-index: 12;
    pointer-events: none;
}

.cf-collector {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    z-index: 13;
    pointer-events: none;
}

.cf-collector-sprite {
    width: 64px;
    height: 64px;
    background-image: url('assets/shrooms/collector_jetpack.png');
    background-size: 512px 64px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: shroomFrames 0.72s steps(4) infinite;
}

.carousel-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--card);
    border: 2.5px solid var(--ink);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    z-index: 5;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}

.carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.carousel-dot:hover {
    background: var(--gold);
}

.carousel-dot.active {
    background: var(--accent);
    transform: scale(1.25);
}

/* ============================================
   Resources
   ============================================ */

.resources-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.resource-card {
    --resource-color: var(--accent);
    --resource-soft: var(--accent-soft);
    background: var(--card);
    border: var(--border-w) solid var(--ink);
    border-radius: var(--radius);
    padding: 2.25rem 1.75rem 1.75rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.resource-spores { --resource-color: var(--gold); --resource-soft: var(--gold-soft); }
.resource-caps   { --resource-color: var(--accent); --resource-soft: var(--accent-soft); }
.resource-wisdom { --resource-color: var(--purple); --resource-soft: var(--purple-soft); }

.resource-visual {
    position: relative;
    height: 110px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-glow {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--resource-soft) 0%, transparent 70%);
    z-index: 0;
}

/* Spore orb */
.spore-collector {
    position: relative;
    width: 90px;
    height: 90px;
    z-index: 1;
}

.spore-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 35% 30%, #FFF3D6, var(--gold));
    border: 2px solid #D18E1F;
    border-radius: 50%;
    animation: sporePulse 3s ease-in-out infinite;
}

@keyframes sporePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

.spore-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border: 2px dashed #D18E1F;
    border-radius: 50%;
    opacity: 0.5;
    animation: ringSpin 12s linear infinite;
}

@keyframes ringSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.spore-particles {
    position: absolute;
    inset: 0;
}

.spore-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.7;
    animation: sporeOrbit 4s ease-in-out infinite;
}

.spore-particle:nth-child(1) { top: 8%;  left: 48%; animation-delay: 0s; }
.spore-particle:nth-child(2) { top: 28%; left: 88%; animation-delay: 0.6s; }
.spore-particle:nth-child(3) { top: 72%; left: 82%; animation-delay: 1.2s; }
.spore-particle:nth-child(4) { top: 90%; left: 44%; animation-delay: 1.8s; }
.spore-particle:nth-child(5) { top: 70%; left: 6%;  animation-delay: 2.4s; }
.spore-particle:nth-child(6) { top: 26%; left: 10%; animation-delay: 3s; }

@keyframes sporeOrbit {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-8px) scale(0.8); opacity: 0.35; }
}

/* Caps visual */
.cap-display {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.cap-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cap-top {
    width: 48px;
    height: 26px;
    background: radial-gradient(circle at 35% 25%, #FF7A3D, var(--accent));
    border: 2px solid var(--accent-border);
    border-radius: 24px 24px 6px 6px;
    animation: capBob 3s ease-in-out infinite;
}

.cap-stem {
    width: 16px;
    height: 20px;
    background: #F3E4C8;
    border: 2px solid #C9B48D;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

@keyframes capBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.cap-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
}

.cap-piece {
    width: 34px;
    height: 10px;
    background: radial-gradient(circle at 35% 25%, #FF7A3D, var(--accent));
    border: 1.5px solid var(--accent-border);
    border-radius: 5px;
}

.cap-piece:nth-child(2) { opacity: 0.85; }
.cap-piece:nth-child(3) { opacity: 0.7; }

/* Wisdom orb */
.wisdom-orb {
    position: relative;
    width: 90px;
    height: 90px;
    z-index: 1;
}

.wisdom-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    background: radial-gradient(circle at 35% 30%, #D9CCFF, var(--purple));
    border: 2px solid #5E35B1;
    border-radius: 50%;
    animation: sporePulse 4s ease-in-out infinite;
}

.wisdom-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border: 2px solid rgba(124, 77, 255, 0.35);
    border-radius: 50%;
    animation: wisdomAura 4s ease-in-out infinite;
}

.wisdom-aura::after {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1px dashed rgba(124, 77, 255, 0.25);
    border-radius: 50%;
}

@keyframes wisdomAura {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.35; }
}

.wisdom-runes {
    position: absolute;
    inset: 0;
    animation: runesRotate 15s linear infinite;
}

@keyframes runesRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rune {
    position: absolute;
    font-size: 14px;
    color: var(--purple);
    opacity: 0.8;
}

.rune:nth-child(1) { top: -6px; left: 50%; transform: translateX(-50%); }
.rune:nth-child(2) { top: 50%; right: -6px; transform: translateY(-50%); }
.rune:nth-child(3) { bottom: -6px; left: 50%; transform: translateX(-50%); }
.rune:nth-child(4) { top: 50%; left: -6px; transform: translateY(-50%); }

/* Resource info */
.resource-info {
    text-align: center;
    width: 100%;
}

.resource-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--resource-color);
    margin-bottom: 0.5rem;
}

.resource-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 1rem;
}

.counter-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ink);
    display: inline-block;
    position: relative;
    font-variant-numeric: tabular-nums;
}

.counter-rate {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--green);
}

.wisdom-bonus {
    color: var(--purple) !important;
}

.resource-description {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 1.25rem;
}

.resource-producers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.producer-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    background: var(--resource-soft);
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
}

.prestige-tag {
    background: var(--purple-soft);
    border-color: var(--purple);
}

.resource-unlock {
    margin-top: 0.5rem;
}

.unlock-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    padding: 0.3rem 0.8rem;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    display: inline-block;
}

/* Counter tick animation (JS toggles .counter-tick) */
.counter-tick {
    animation: counterTick 0.15s ease-out;
}

@keyframes counterTick {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.counter-paused {
    color: var(--resource-color, var(--accent)) !important;
}

.counter-paused::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--resource-color, var(--accent));
    border-radius: 2px;
    opacity: 0.6;
    animation: pausePulse 1s ease-in-out infinite;
}

@keyframes pausePulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.8); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1); }
}

/* Wisdom mystery treatment */
.wisdom-mysterious .wisdom-scrambled {
    filter: blur(1px);
    opacity: 0.75;
    transition: filter 0.4s, opacity 0.4s;
}

.wisdom-mysterious:hover .wisdom-scrambled {
    filter: blur(0);
    opacity: 1;
}

.wisdom-interference {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        rgba(124, 77, 255, 0.03) 3px 4px
    );
    z-index: 2;
}

.wisdom-discover-hint {
    text-align: center;
    margin-top: 1rem;
}

.wisdom-discover-hint span {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--purple);
    background: var(--purple-soft);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    display: inline-block;
}

/* ============================================
   CTA
   ============================================ */

.cta-content {
    background: var(--accent);
    border: 3px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 7px 8px 0 var(--ink);
    text-align: center;
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
    transform: rotate(-0.8deg);
    position: relative;
}

/* Mushroom sticker slapped on the corner */
.cta-content::before {
    content: '';
    position: absolute;
    top: -30px;
    right: 40px;
    width: 62px;
    height: 62px;
    background: url('assets/ground_shrooms/purple.png') no-repeat center / contain;
    image-rendering: pixelated;
    transform: rotate(14deg);
    filter: drop-shadow(2px 3px 0 rgba(58, 42, 24, 0.35));
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.cta-content > p {
    font-size: 1.2rem;
    color: #FFE7D8;
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* Buttons sit on the red block — recolor for contrast */
.cta-content .btn-primary {
    background: #fff;
    color: var(--accent);
}

.cta-content .btn-primary:hover {
    background: var(--gold-soft);
}

.cta-content .btn-secondary {
    background: var(--ink);
    color: #fff;
}

.cta-content .btn-secondary:hover {
    background: #241a0f;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.cta-features span {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

/* ============================================
   Footer — dark anchor
   ============================================ */

.footer {
    background: var(--ink);
    color: #F5E9CF;
    padding: 3rem 2rem;
    position: relative;
    z-index: 1;
    border-top: 3px solid var(--ink);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo img {
    width: 28px;
    height: 28px;
}

.footer-logo span {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: #EEEFE9;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(238, 239, 233, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #fff;
}

.copyright {
    font-size: 0.9rem;
    color: rgba(238, 239, 233, 0.5);
}

/* ============================================
   Modals (wiki / wishlist)
   ============================================ */

.wiki-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(21, 21, 21, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.wiki-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.wiki-modal {
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: 6px 7px 0 var(--ink);
    padding: 2.5rem 2.25rem 2rem;
    max-width: 420px;
    width: calc(100% - 2rem);
    text-align: center;
    position: relative;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s;
}

.wiki-modal-overlay.active .wiki-modal {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--text);
}

.modal-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.modal-sparkles {
    font-size: 1.25rem;
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.modal-divider {
    width: 60px;
    height: 3px;
    margin: 0 auto 1rem;
    background: repeating-linear-gradient(
        to right,
        var(--accent) 0 6px,
        transparent 6px 12px
    );
}

.modal-text {
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.modal-features {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.modal-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.modal-feature .feature-icon {
    font-size: 1.1rem;
    margin: 0;
    display: inline;
}

.modal-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 62%;
    background: var(--accent);
    border-radius: 999px;
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 900px) {
    .hero-text h1 {
        font-size: 2.75rem;
    }

    .nav-links a:not(.nav-btn) {
        display: none;
    }

    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    /* "Play the demo" popup: on a phone the hero scene is so narrow that
       the desktop top-right placement sits ON the mushroom — the next tap
       of someone playing with it lands on the CTA, which reads as
       clickjacking (owner, 2026-09-08). Present it as a bottom-of-screen
       toast instead: clearly separate from the game preview, nowhere near
       the tapping finger. Desktop placement is untouched. */
    .demo-popup {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.9rem;
        text-align: left;
        animation: demoToastUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .demo-popup[hidden] {
        display: none;
    }

    .demo-popup-text {
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .demo-popup-btn {
        flex-shrink: 0;
    }

    .navbar {
        padding: 0.55rem 1rem;
    }

    .logo-text {
        font-size: 0.75rem;
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .nav-btn {
        font-size: 0.82rem;
        padding: 0.4rem 0.75rem;
    }

    .cta-long { display: none; }
    .cta-short { display: inline; }

    .hero {
        padding: 6.5rem 1rem 0;
    }

    .hero-text h1 {
        font-size: 1.85rem;
        overflow-wrap: break-word;
    }

    .tagline {
        font-size: 1.05rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-scene-frame {
        /* Tall enough for the 2x mushroom (256px) at bottom: 44px plus
           the CLICK ME label above the cap */
        height: 340px;
    }

    .scene-ground {
        height: 88px;
    }

    /* Shorter frame + 88px ground: shift the parallax stack and houses
       down to keep everything tucked behind the lower grass line. The
       frame crops the extra layer height off the top. */
    .forest-far { bottom: 40px; }
    .forest-trees { bottom: 52px; }
    .forest-bushes { bottom: 64px; }

    /* Compound selectors so these outweigh the desktop
       .hero-house.house-* rules — a bare .hero-house override loses
       on specificity and leaves the houses floating at bottom: 108px. */
    .hero-house.house-small,
    .hero-house.house-medium { bottom: 76px; }
    .hero-house.house-large { display: none; }
    .hero-house.house-small { left: 6%; }

    .hero-shroom { bottom: 86px; }

    .live-scene { height: 280px; }
    .spam-stage { bottom: 72px; }
    .flying-collector { bottom: 140px; }

    /* Corner bushes drop to native 1x so they don't swallow the scene */
    .corner-bush { width: 176px; bottom: -14px; }
    .corner-bush-left { left: -45px; }
    .corner-bush-right { right: -45px; }

    .deco-shroom { bottom: 86px; } /* same 2px tuck below the 88px ground top */
    .hero-mushroom { bottom: 44px; }

    .section-header h2 {
        font-size: 1.85rem;
    }

    .cta-content h2 {
        font-size: 1.85rem;
    }

    .btn {
        justify-content: center;
    }

    .features,
    .workers,
    .village,
    .resources,
    .cta {
        padding: 3.5rem 1rem;
    }

    .worker-card {
        width: 100%;
        max-width: 300px;
    }
}

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

    html {
        scroll-behavior: auto;
    }
}