ui/styles.py

APP_CSS = """
/* ══════════════════════════════════════════════════════════════════════════
   1. CORE GRADIO UTILITIES, COLOR OVERRIDES & WHITE-FLASH SUPPRESSION
   ══════════════════════════════════════════════════════════════════════════ */
.gradio-container {
    background:
        radial-gradient(circle at top left, rgba(255, 244, 190, 0.55), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(133, 214, 159, 0.22), transparent 28rem),
        linear-gradient(135deg, #10281f 0%, #214732 48%, #f6e7c8 100%);
}

.gradio-container,
.gradio-container .prose,
.gradio-container .markdown,
.gradio-container label,
.gradio-container .tabitem,
.gradio-container .form,
.gradio-container .block {
    color: #173d2a !important;
}

.gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4,
.gradio-container p, .gradio-container li, .gradio-container span, .gradio-container strong {
    color: inherit;
}

.gradio-container input, .gradio-container textarea, .gradio-container select {
    color: #10281f !important;
    background: #fffdf4 !important;
    border-color: rgba(23, 61, 42, 0.32) !important;
}

.gradio-container input::placeholder, .gradio-container textarea::placeholder {
    color: #526a5c !important;
    opacity: 1;
}

.gradio-container input:focus, .gradio-container textarea:focus, .gradio-container select:focus {
    border-color: #2f7d55;
    box-shadow: 0 0 0 3px rgba(47, 125, 85, 0.22);
}

.gradio-container button {
    color: #173d2a !important;
}

.gradio-container button:hover:not(:disabled) {
    filter: brightness(0.96);
}

.gradio-container button:disabled, .gradio-container button[disabled] {
    color: #526a5c !important;
    background: rgba(231, 235, 225, 0.88) !important;
    opacity: 1;
}

.gradio-container button.primary, .gradio-container button[variant="primary"] {
    color: #fffdf4 !important;
    background: #17633f !important;
}

.gradio-container [role="dialog"], .gradio-container .modal, .gradio-container .toast, .gradio-container .tooltip {
    color: #10281f !important;
    background: #fffdf4 !important;
}

.gradio-container [role="alert"], .gradio-container .error {
    color: #7f1d1d !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

.gradio-container .tabitem {
    background: rgba(255, 250, 235, 0.92) !important;
    border-radius: 0 0 22px 22px;
    padding: 0.8rem;
}

.gradio-container .chatbot, .gradio-container .message, .gradio-container .bubble-wrap {
    color: #10281f !important;
}

.gradio-container .tab-nav button, .gradio-container [role="tab"] {
    color: #173d2a !important;
    background: rgba(255, 250, 235, 0.9) !important;
}

.gradio-container .tab-nav button.selected, .gradio-container [role="tab"][aria-selected="true"] {
    color: #fffdf4 !important;
    background: #17633f !important;
}

.gradio-container a {
    color: #0f5f3d !important;
    font-weight: 700;
}

.gradio-container a:hover {
    color: #093d28 !important;
}

/* Suppress Gradio processing artifacts and system white flashes */
.generating .forest-scene, .pending .forest-scene { opacity: .88 !important; }
.progress-level, .progress-level-inner { display: none !important; }
div.gradio-html { background: transparent !important; }
.wrap.default.pending, .wrap.default.generating { background: transparent !important; }


/* ══════════════════════════════════════════════════════════════════════════
   2. PRESENTATION HERO HEADER BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.myco-hero {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: 28px;
    background: rgba(255, 250, 231, 0.88);
    border: 1px solid rgba(64, 96, 70, 0.24);
    box-shadow: 0 20px 60px rgba(15, 40, 26, 0.22);
}

.myco-mascot {
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    font-size: 4rem;
    background: linear-gradient(145deg, #fff8d9, #f5b7a7);
    box-shadow: inset 0 -10px 24px rgba(121, 62, 35, 0.16);
}

.eyebrow {
    margin: 0;
    color: #2f6f4f;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.myco-hero h1 {
    margin: 0.1rem 0;
    font-size: 3rem;
    color: #173d2a;
}

.myco-hero p:last-child {
    margin-bottom: 0;
    color: #31533f;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. HOME PAGE VISUAL POSTCARD & CELESTIAL BACKGROUNDS
   ══════════════════════════════════════════════════════════════════════════ */
.home-forest-postcard {
    position: relative;
    overflow: hidden;
    margin: 1rem 0;
    padding: 1.25rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 18%, rgba(190, 205, 255, 0.38), transparent 9rem),
        radial-gradient(circle at 50% 76%, rgba(255, 235, 176, 0.3), transparent 10rem),
        linear-gradient(180deg, #121f4f 0%, #163a46 38%, #245c3c 70%, #523b20 100%);
    border: 1px solid rgba(255, 244, 190, 0.34);
    box-shadow: 0 18px 48px rgba(8, 30, 20, 0.24);
    color: #fff9d7 !important;
    text-align: center;
}

.home-forest-postcard span, .home-forest-postcard p {
    color: #fff9d7 !important;
}

.home-sky {
    position: relative;
    min-height: 4.7rem;
}

.home-milky-way {
    display: inline-block;
    font-size: clamp(3rem, 9vw, 5.5rem);
    animation: myco-drift 14s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(201, 218, 255, 0.46));
}

/* Star Configurations */
.home-star {
    position: absolute;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    animation: myco-twinkle 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 251, 198, 0.75));
}

.home-star.star-one { left: 18%; top: 0.8rem; }
.home-star.star-two { right: 19%; top: 1.9rem; animation-delay: 0.8s; }
.home-star.star-three { left: 50%; top: 3.4rem; animation-delay: 1.4s; }

/* Forest Floor Base */
.home-forest-floor {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.3rem, 2vw, 1rem);
    min-height: 7rem;
}

.home-tree {
    font-size: clamp(3rem, 8vw, 5.6rem);
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

.home-grass {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 0.25rem;
}

/* Mushroom Configurations */
.home-myco, .home-brown-mushroom {
    font-size: clamp(3.4rem, 8vw, 6rem);
    animation: myco-breathe 3.2s ease-in-out infinite;
    filter: drop-shadow(0 14px 22px rgba(255, 225, 140, 0.22));
    animation-delay: 0.55s;
}

.home-myco {
    filter: drop-shadow(0 14px 24px rgba(255, 92, 92, 0.32));
}

/* Moon Configuration */
.home-moon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    animation: moon-glow 6s ease-in-out infinite; 
    filter: drop-shadow(0 0 12px rgba(255, 251, 198, 0.75));
}

/* Smooth floating movement for the Milky Way */
@keyframes myco-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(6px, -12px);
    }
}

/* Shimmering scaling and opacity effect for the stars */
@keyframes myco-twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Organic breathing pulse for the mushrooms */
@keyframes myco-breathe {
    0%, 100% {
        transform: scaleY(1) scaleX(1);
    }
    50% {
        transform: scaleY(1.06) scaleX(1.02);
    }
}

/* Gentle swaying and pulsing glow for the moon */
@keyframes moon-glow {
    0%, 100% {
        transform: rotate(-3deg);
        filter: drop-shadow(0 0 12px rgba(255, 251, 198, 0.75));
    }
    50% {
        transform: rotate(3deg) translateY(-2px);
        filter: drop-shadow(0 0 22px rgba(255, 251, 198, 0.95));
    }
}

.home-forest-postcard p {
    max-width: 42rem;
    margin: 0.9rem auto 0;
    font-weight: 800;
}

.home-whisper {
    display: inline-block;
    margin-top: 0.65rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(255, 249, 215, 0.28);
    border-radius: 999px;
    background: rgba(255, 249, 215, 0.12);
    color: #fff9d7 !important;
    font-weight: 900;
}

.home-myco-wrapper, .home-brown-wrapper { position:relative; display:inline-block; }
    .home-spore {
      position:absolute; left:50%; top:20%; width:4px; height:4px;
      background:#a8ffb2; border-radius:50%; filter:blur(0.5px);
      box-shadow:0 0 6px #52ff6b,0 0 10px #fff;
      opacity:0; pointer-events:none;
      animation:floatHomeSpore var(--duration) ease-out infinite;
      animation-delay:var(--delay);
    }
    @keyframes floatHomeSpore {
      0%   { transform:translate(0,0) scale(1); opacity:0; }
      15%  { opacity:1; }
      80%  { opacity:0.7; }
      100% { transform:translate(var(--x),var(--y)) scale(0.2); opacity:0; }
    }

/* ══════════════════════════════════════════════════════════════════════════
   4. INTERACTIVE GAME DISPLAY WRAPPERS & SHELLS
   ══════════════════════════════════════════════════════════════════════════ */
#game-shell, #game-shell * {
    backface-visibility: hidden;
}

#game-shell {
    padding: 1rem;
    border: 1px solid rgba(255, 244, 190, 0.28);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 244, 190, 0.13), transparent 18rem),
        linear-gradient(180deg, rgba(8, 26, 19, 0.92), rgba(20, 49, 35, 0.82));
    box-shadow: 0 24px 70px rgba(4, 18, 12, 0.3);
}

#game-shell .generating, #game-shell .generating * { opacity: 1 !important; }
#game-shell .generating::before, #game-shell .generating::after { display: none !important; }
#game-shell button { font-weight: 900 !important; }

#near-monitor-controls {
    margin: 0.55rem 0;
    padding: 0.7rem;
    border: 1px solid rgba(255, 244, 190, 0.26);
    border-radius: 20px;
    background: rgba(13, 38, 28, 0.52);
}

#near-monitor-controls button {
    min-height: 3rem;
    font-size: 1.05rem !important;
}

.play-hook {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(255, 244, 190, 0.32);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(18, 54, 38, 0.96), rgba(39, 92, 61, 0.92));
    color: #f9ffe9 !important;
    box-shadow: 0 16px 42px rgba(8, 30, 20, 0.2);
}

.play-hook h2, .play-hook p, .play-hook span { color: #f9ffe9 !important; }
.play-hook h2 { margin: 0.15rem 0 0.55rem; font-size: 1.8rem; }
.play-hook .eyebrow { color: #d8ffc5 !important; }

.hook-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.hook-steps span {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
    padding: 0.45rem 0.7rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. FOREST SCENE BASEBOARD STYLING
   ══════════════════════════════════════════════════════════════════════════ */
.forest-scene, .forest-scene * {
    color: #f9ffe9 !important;
}

.forest-scene {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    transition: box-shadow 120ms ease, filter 120ms ease;
    overflow: hidden;
    min-height: 20rem; /* Preserves maximum vertical clearance */
    padding: 1rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 72%, rgba(255, 239, 173, 0.26), transparent 8rem),
        radial-gradient(circle at 18% 24%, rgba(134, 225, 153, 0.22), transparent 10rem),
        linear-gradient(180deg, #123626 0%, #245c3c 54%, #523b20 100%);
    border: 1px solid rgba(225, 255, 209, 0.25);
    box-shadow: 0 18px 48px rgba(8, 30, 20, 0.26);
}

.scene-stage {
    position: relative;
    height: 13rem; /* Preserves original stage boundaries */
    margin: 0.75rem 0;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(transparent 62%, rgba(106, 79, 33, 0.55) 63%),
        radial-gradient(ellipse at bottom, rgba(190, 255, 180, 0.24), transparent 60%);
}

.scene-stage span {
    position: absolute;
    line-height: 1;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
}


/* ══════════════════════════════════════════════════════════════════════════
   6. SPRITE PLACEMENT, ENVIRONMENT ASSETS & MOTION CHANNELS
   ══════════════════════════════════════════════════════════════════════════ */
.tree-left   { left: 6%;  bottom: 18%; font-size: 5rem;   filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.tree-right  { right: 7%; bottom: 20%; font-size: 4.75rem; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.wood-log    { right: 20%; bottom: 18%; font-size: 2.25rem; }

.grass-one {
    left: 27%; bottom: 16%; font-size: 2.5rem;
    animation: grassSway 4s ease-in-out infinite;
    transform-origin: bottom center;
    filter: drop-shadow(0 0 6px rgba(120, 255, 120, 0.25));
}

.grass-two {
    right: 30%; bottom: 18%; font-size: 2.25rem;
    animation: grassSway 5s ease-in-out infinite;
    animation-delay: -2s;
    transform-origin: bottom center;
    filter: drop-shadow(0 0 6px rgba(120, 255, 120, 0.25));
}

.sparkle-one { left: 35%; top: 20%; font-size: 1.8rem; animation: twinkle 1.8s ease-in-out infinite; }
.sparkle-two { right: 34%; top: 26%; font-size: 1.6rem; animation: twinkle 2.2s ease-in-out infinite reverse; }

.fallen-leaf {
    left: 50%; bottom: 10%; font-size: 2.5rem;
    transform-origin: bottom center;
    filter: drop-shadow(0 0 6px rgba(120, 255, 120, 0.25));
}

/* Myco player animation and transition parameters */
.myco-player {
    font-size: 4rem; 
    z-index: 2;
    transition: left .32s cubic-bezier(.34,1.56,.64,1), bottom .32s cubic-bezier(.34,1.56,.64,1);
    animation: myco-bob 2.4s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(255,92,92,.28));
}

/* Precise Map Matrix Layout Node Overrides */
.pos-0-0 .myco-player { left: 16%; bottom: 64%; }
.pos-1-0 .myco-player { left: 42%; bottom: 64%; }
.pos-2-0 .myco-player { left: 68%; bottom: 64%; }
.pos-0-1 .myco-player { left: 16%; bottom: 38%; }
.pos-1-1 .myco-player { left: 42%; bottom: 38%; }
.pos-2-1 .myco-player { left: 68%; bottom: 38%; }
.pos-0-2 .myco-player { left: 16%; bottom: 15%; }
.pos-1-2 .myco-player { left: 42%; bottom: 15%; }
.pos-2-2 .myco-player { left: 68%; bottom: 15%; }

/* Roaming mushroom sprites */
.roam-sprite {
    font-size: 2.2rem;
    z-index: 2;
    transition: opacity .3s;
    animation: roam-bob 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.roam-0-0 { left: 10%; bottom: 58%; } 
.roam-1-0 { left: 37%; bottom: 58%; } 
.roam-2-0 { left: 63%; bottom: 58%; }
.roam-0-1 { left: 10%; bottom: 32%; } 
.roam-1-1 { left: 37%; bottom: 32%; } 
.roam-2-1 { left: 63%; bottom: 32%; }
.roam-0-2 { left: 10%; bottom: 9%;  }  
.roam-1-2 { left: 37%; bottom: 9%;  }  
.roam-2-2 { left: 63%; bottom: 9%;  }

.roam-poison { 
    animation: roam-bob 2s ease-in-out infinite, poison-pulse 1.2s ease-in-out infinite; 
}

/* Mushroom Target Object */
.mushroom-sprite {
    right: 37%; bottom: 24%; font-size: 3.4rem; z-index: 2;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
}


/* ══════════════════════════════════════════════════════════════════════════
   7. DETAILED GAME RUNTIME STATE SELECTIONS & ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */
/* STATE: Waiting Loop */
.state-waiting .mushroom-sprite { opacity: 0; }

/* STATE: Discovered Sequence */
.state-discovered .mushroom-sprite {
    animation: shroom-popup 0.7s cubic-bezier(.34,1.56,.64,1) both,
               discovery-pop 1.6s ease-out both;
}
.state-discovered .myco-player {
    animation: myco-bob 2.4s ease-in-out infinite,
               myco-run-in 0.6s cubic-bezier(.34,1.56,.64,1) both;
}

/* STATE: Picked / Gathered Sequence */
.state-picked .mushroom-sprite {
    animation: shroom-catch 0.55s cubic-bezier(.34,1.56,.64,1) both,
               myco-pick-pop 700ms ease both;
}
.state-picked .myco-player {
    animation: myco-bob 2.4s ease-in-out infinite,
               myco-catch-jump 0.55s ease both;
}

/* STATE: Hazard Danger Encounter */
.state-danger .mushroom-sprite {
    animation: shroom-popup 0.7s cubic-bezier(.34,1.56,.64,1) both,
               poison-pulse 1.2s ease-in-out infinite 0.7s;
}
.state-danger .myco-player {
    animation: myco-bob 2.4s ease-in-out infinite,
               myco-recoil 0.5s ease both;
}

/* STATE: Defeat / Session End */
.state-game-over,
.state-game-over .forest-scene {
    animation: screen-shake .45s ease both;
    background:
        radial-gradient(circle at 50% 72%, rgba(255, 62, 91, 0.35), transparent 8rem),
        linear-gradient(180deg, #3b0a0a 0%, #6b1a1a 54%, #2a0a0a 100%) !important;
}
.state-game-over .mushroom-sprite {
    animation: shroom-explode .6s ease both;
}
.state-game-over .myco-player {
    animation: myco-fall .6s ease both;
}

/* Global Rendering Keyframes Registry */
@keyframes grassSway {
    0%, 100% { transform: rotate(-3deg) translateY(0px); }
    25% { transform: rotate(2deg) translateY(-2px); }
    50% { transform: rotate(4deg) translateY(-4px); }
    75% { transform: rotate(-2deg) translateY(-2px); }
}
@keyframes roam-bob { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-0.3rem); } 
}
@keyframes myco-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.45rem); }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes shroom-popup {
    0%   { opacity:0; transform:translateY(3rem) scale(.2); }
    60%  { opacity:1; transform:translateY(-.4rem) scale(1.18); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes discovery-pop {
    0% { opacity: 0; transform: scale(0.25) translateY(1rem); }
    70% { opacity: 1; transform: scale(1.12) translateY(-0.25rem); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes myco-run-in {
    0%   { transform:translateX(-3rem) scaleX(-1); }
    100% { transform:translateX(0) scaleX(1); }
}
@keyframes shroom-catch {
    0%   { opacity:1; transform:translateY(0) scale(1); }
    40%  { opacity:1; transform:translateY(-2.5rem) scale(1.3) rotate(15deg); }
    100% { opacity:0; transform:translateY(-5rem) scale(.2) rotate(40deg); }
}
@keyframes myco-pick-pop {
    0% { transform: translate(-50%, -50%) scale(1); }
    45% { transform: translate(-50%, -78%) scale(1.28); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes myco-catch-jump {
    0%,100%{ transform:translateY(0); }
    40%    { transform:translateY(-1.4rem) scale(1.1); }
}
@keyframes poison-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 62, 91, 0.6)); }
    50% { filter: drop-shadow(0 0 28px rgba(255, 62, 91, 1)); }
}
@keyframes myco-recoil {
    0%  { transform:translateX(0); }
    30% { transform:translateX(-1.2rem); }
    60% { transform:translateX(.4rem); }
    100%{ transform:translateX(0); }
}
@keyframes screen-shake {
    0%,100%{ transform:translateX(0); }
    20%    { transform:translateX(-8px); }
    40%    { transform:translateX(8px); }
    60%    { transform:translateX(-5px); }
    80%    { transform:translateX(5px); }
}
@keyframes shroom-explode {
    0%  { transform:scale(1) rotate(0); opacity:1; }
    50% { transform:scale(1.8) rotate(20deg); opacity:.8; }
    100%{ transform:scale(0) rotate(90deg); opacity:0; }
}
@keyframes myco-fall {
    0%  { transform:rotate(0) translateY(0); opacity:1; }
    100%{ transform:rotate(-90deg) translateY(2rem); opacity:.4; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. TARGET LOOT RARITY CONDITION MATCHERS & FILTERS
   ══════════════════════════════════════════════════════════════════════════ */
.rarity-common .mushroom-sprite {
    filter: drop-shadow(0 0 8px rgba(255,255,255,.15));
}

.rarity-rare .mushroom-sprite {
    filter: drop-shadow(0 0 18px #6dd5ff) drop-shadow(0 0 18px rgba(138,220,255,.9));
    text-shadow: 0 0 24px rgba(193, 247, 255, 0.9);
}

.rarity-legendary .mushroom-sprite {
    filter: drop-shadow(0 0 30px gold) drop-shadow(0 0 28px rgba(255,215,0,1));
    text-shadow: 0 0 24px rgba(193, 247, 255, 0.9);
    animation: legendary-pulse 1.5s ease-in-out infinite;
}

.state-danger .mushroom-sprite,
.state-game-over .mushroom-sprite {
    filter: drop-shadow(0 0 24px crimson) drop-shadow(0 0 18px rgba(255,62,91,.9)) !important;
}

@keyframes legendary-pulse {
    0%,100%{ filter:drop-shadow(0 0 18px rgba(255,215,0,.7)); transform:scale(1); }
    50%    { filter:drop-shadow(0 0 36px rgba(255,215,0,1)); transform:scale(1.1); }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. NAVIGATION HEAD-UP PANEL, MINI-MAP BOARD & CAPTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.scene-hud, .scene-caption {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(13, 38, 28, 0.68);
    backdrop-filter: blur(6px);
}

.scene-hud {
    flex-wrap: wrap;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
}

.scene-caption { border-radius: 18px; }
.scene-caption span { color: #d9f4d4; }

.forest-map {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin: 0.5rem auto 0.75rem;
    max-width: 10rem;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(13, 38, 28, 0.58);
}

.map-tile {
    display: grid;
    min-height: 1.8rem;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 900;
}

.map-tile.active {
    background: rgba(255, 224, 138, 0.92);
    color: #3d2c00 !important;
}

.map-tile.has-mush { 
    background: rgba(100, 200, 100, 0.25); 
}

.map-tile.has-poison { 
    background: rgba(200, 60, 60, 0.25); 
}

.score-burst {
    margin: 0.75rem auto 0;
    max-width: 520px;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 224, 112, 0.18);
    border: 1px solid rgba(255, 244, 190, 0.36);
    color: #fff7d6;
    font-weight: 900;
    text-align: center;
    animation: score-pop .56s ease both, myco-score-pop 560ms ease both;
}

.state-game-over .score-burst {
    background: rgba(130, 0, 30, 0.45);
    border-color: rgba(255, 120, 140, 0.55);
}

@keyframes score-pop {
    0%{transform:scale(.92);opacity:0;}
    45%{transform:scale(1.06);opacity:1;}
    100%{transform:scale(1);opacity:1;}
}
@keyframes myco-score-pop {
    0% { transform: scale(0.92); opacity: 0; }
    45% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.story-moment {
    margin: 0.85rem auto 0;
    max-width: 760px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 234, 166, 0.3);
    border-radius: 18px;
    background: rgba(25, 18, 45, 0.72);
    color: #fff7d6;
    box-shadow: 0 0 24px rgba(165, 111, 255, 0.22);
}

.story-moment strong, .story-moment span { display: block; }
.story-moment span { margin-top: 0.25rem; color: #f6e7b2; }


/* ══════════════════════════════════════════════════════════════════════════
   10. QUEST TRACKER MODULES, ECO-MAP CRADLES & BRAND IMAGES
   ══════════════════════════════════════════════════════════════════════════ */
#discovery-card, #mycodex, #progress-panel, #quest-log {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 250, 235, 0.94);
    color: #173d2a !important;
    border: 1px solid rgba(72, 108, 75, 0.18);
    box-shadow: 0 12px 28px rgba(16, 40, 31, 0.12);
}

#discovery-card *, #mycodex *, #progress-panel *, #quest-log * {
    color: #173d2a !important;
}

.world-map-panel {
    border-radius: 28px;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(21, 67, 49, 0.96), rgba(44, 94, 72, 0.92));
    color: #f7ffe8 !important;
    box-shadow: 0 22px 60px rgba(14, 38, 29, 0.22);
}

.world-map-header h2 { margin: 0.1rem 0 0.35rem; font-size: 2rem; }
.world-map-header p { margin: 0.2rem 0; color: #f7ffe8 !important; }
.world-map-panel h2, .world-map-panel h3, .world-map-panel p, .world-map-panel span, .world-map-panel strong {
    color: #f7ffe8 !important;
}
.world-map-panel .eyebrow { color: #d8ffc5 !important; }

.achievement-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1rem 0; }
.achievement { border-radius: 999px; padding: 0.45rem 0.75rem; font-size: 0.9rem; font-weight: 800; }
.achievement.earned { background: rgba(255, 224, 138, 0.95); color: #3d2c00 !important; }
.achievement.pending { background: rgba(255, 255, 255, 0.12); color: #d4efcf !important; }

.map-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.map-card { border-radius: 22px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); }
.map-card.unlocked { background: rgba(236, 255, 217, 0.18); border-color: rgba(214, 255, 177, 0.4); }
.map-card.locked { background: rgba(17, 44, 34, 0.72); filter: saturate(0.9); }
.map-card-top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
.map-card-top span { font-size: 0.82rem; font-weight: 800; }
.map-card p { margin-bottom: 0; color: #f7ffe8 !important; }
.map-card strong, .map-card span { color: #fffdf4 !important; }

#ai-status {
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 18px;
    background: rgba(236, 253, 245, 0.72);
    color: #17402f !important;
    font-weight: 800;
    padding: 0.65rem 0.9rem;
}

.ai-tick-badge { 
    display: inline-block; 
    padding: 0.15rem 0.55rem; 
    border-radius: 999px; 
    background: rgba(80, 220, 120, 0.22); 
    border: 1px solid rgba(80, 220, 120, 0.4); 
    color: #0abf4b;
    font-size: 0.72rem; 
    font-weight: 800; 
    animation: ai-pulse 2s ease-in-out infinite; 
}

@keyframes ai-pulse { 
    0%, 100% { opacity: 0.6; } 
    50% { opacity: 1; } 
}

.myco-image, .myco-image-2 {
    background: #0b1d12 !important; 
    border: 2px solid #4ade80 !important; 
    padding: 16px !important; 
    width: 80% !important;
    max-width: 80% !important; 
    margin: 20px auto !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.myco-image { border-radius: 12px !important; }
.myco-image-2 { border-radius: 6px !important; padding: 8px !important; }


/* ══════════════════════════════════════════════════════════════════════════
   11. VIEWPORT BREAKPOINT RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .myco-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .myco-mascot {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 3rem;
    }

    .myco-hero h1 {
        font-size: 2.25rem;
    }

    .forest-start-btn button {
        border-radius: 24px !important;
        padding: 16px 32px !important;
        background: linear-gradient(135deg, #2d5a27, #4caf50) !important;
        border: 2px solid #8bc34a !important;
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.35);
        transition: all 0.2s ease;
    }

    .forest-start-btn button:hover {
        transform: translateY(-2px);
    }
}

#myco-live-log textarea {
    font-family: monospace !important;
    font-size: 0.8rem !important;
    background: rgba(10, 20, 15, 0.95) !important;
    color: #90ffb8 !important;
    border: 1px solid rgba(80, 220, 120, 0.3) !important;
    border-radius: 12px !important;
}

/* Magic Mushroom */
#narrative-card {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10; /* Forces text to sit on top of the HTML animation */
    max-width: 320px;
    
    /* FIX: Changed from #ffffff to a dark, high-contrast forest green */
    color: #123321; 
    
    /* Lighter, pastel glassmorphism green background */
    background: linear-gradient(
        135deg, 
        rgba(230, 247, 237, 0.6), 
        rgba(168, 230, 194, 0.4)
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    padding: 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(110, 200, 145, 0.5); /* Clearer light green border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

"""