Deploy Myco from CI

ui/renderers.py

@@ -1,5 +1,6 @@
 """Markdown renderers for the Myco Gradio interface."""
 
+import hashlib
 from html import escape
 from game.progression import (
     AREA_UNLOCKS, current_area, next_area, next_mystery,
@@ -12,235 +13,97 @@ POISONOUS_MUSHROOM_NAMES = {
     "Ghost Gill", "Pepper Pixie", "Ruby Knuckle", "Clockwork Chanterelle",
 }
 
+# ── 8-BIT MATRIX BLUEPRINTS ──
+MATRIX_DOME = [[0,0,0,1,1,1,1,0,0,0],[0,0,1,2,2,3,2,1,0,0],[0,1,2,2,3,2,2,2,1,0],[1,2,3,2,2,2,3,2,2,1],[1,1,1,1,1,4,1,1,1,1],[0,0,0,0,1,4,1,0,0,0],[0,0,0,0,1,4,1,0,0,0],[0,0,0,0,1,1,1,0,0,0]]
+MATRIX_SKULL = [[0,0,1,1,1,1,1,1,0,0],[0,1,2,2,2,2,2,2,1,0],[1,2,1,2,2,2,1,2,2,1],[1,2,1,2,2,2,1,2,2,1],[0,1,2,2,1,1,2,2,1,0],[0,0,1,2,1,1,2,1,0,0],[0,0,1,4,4,4,4,1,0,0],[0,0,0,1,1,1,1,0,0,0]]
+MATRIX_FLAT = [[0,0,1,1,1,1,1,1,0,0],[0,1,3,2,2,2,3,2,1,0],[1,2,2,2,3,2,2,2,2,1],[1,1,1,1,4,4,1,1,1,1],[0,0,0,1,4,4,1,0,0,0],[0,0,0,1,4,4,1,0,0,0],[0,0,1,4,4,4,4,1,0,0],[0,0,1,1,1,1,1,1,0,0]]
+MATRIX_STAR = [[0,0,0,0,1,1,0,0,0,0],[0,1,0,1,2,2,1,0,1,0],[1,2,1,2,2,2,2,1,2,1],[0,1,2,3,2,2,3,2,1,0],[0,0,1,1,4,4,1,1,0,0],[0,0,0,1,4,4,1,0,0,0],[0,0,0,1,4,4,1,0,0,0],[0,0,0,1,1,1,1,0,0,0]]
+
+def generate_mushroom_sprite(name: str) -> str:
+    """Generates the procedural pixel mushroom visual."""
+    hash_val = int(hashlib.md5(name.encode('utf-8')).hexdigest(), 16)
+    shapes = [MATRIX_DOME, MATRIX_SKULL, MATRIX_FLAT, MATRIX_STAR]
+    matrix = shapes[hash_val % len(shapes)]
+    palettes = [("#d62828", "#f77f00", "#fcbf49"), ("#00f2fe", "#ff007f", "#25003e"), ("#ffb703", "#ffffff", "#fb8500")]
+    c_cap, c_spot, c_stem = palettes[hash_val % len(palettes)]
+    color_map = {1: "#121214", 2: c_cap, 3: c_spot, 4: c_stem}
+    px_scale = 5
+    shadows = [f"{c*px_scale}px {r*px_scale}px 0 {color_map[v]}" 
+               for r, row in enumerate(matrix) for c, v in enumerate(row) if v in color_map]
+    return f'<div style="width:{px_scale}px; height:{px_scale}px; box-shadow: {", ".join(shadows)}; margin: 0 auto; transform: scale(1.4);"></div>'
+
 # ── Inline CSS + keyframes injected once into the scene ──────────────────────
 SCENE_STYLES = """
 <style>
-/* ── Base scene ── */
 .forest-scene {
-    position: relative; isolation: isolate;
-    overflow: hidden; min-height: 20rem;
-    padding: 0.75rem; border-radius: 28px;
-    background:
-        radial-gradient(circle at 50% 72%, rgba(255,239,173,.26), transparent 8rem),
-        radial-gradient(circle at 18% 24%, rgba(134,225,153,.22), transparent 10rem),
-        linear-gradient(180deg,#123626 0%,#245c3c 54%,#523b20 100%);
-    border: 1px solid rgba(225,255,209,.25);
-    box-shadow: 0 18px 48px rgba(8,30,20,.26);
-    color: #f9ffe9;
+    position: relative; isolation: isolate; overflow: hidden; min-height: 20rem; padding: 0.75rem; border-radius: 28px;
+    background: radial-gradient(circle at 50% 72%, rgba(255,239,173,.26), transparent 8rem), radial-gradient(circle at 18% 24%, rgba(134,225,153,.22), transparent 10rem), linear-gradient(180deg,#123626 0%,#245c3c 54%,#523b20 100%);
+    border: 1px solid rgba(225,255,209,.25); box-shadow: 0 18px 48px rgba(8,30,20,.26); color: #f9ffe9;
 }
-
-/* ── HUD bar ── */
 .scene-hud {
-    position: relative; z-index: 3;
-    display: flex; flex-wrap: wrap; gap: .4rem;
-    padding: .5rem .75rem; border-radius: 999px;
-    background: rgba(13,38,28,.72); backdrop-filter: blur(6px);
-    font-size: .8rem; font-weight: 800;
+    position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .75rem; border-radius: 999px;
+    background: rgba(13,38,28,.72); backdrop-filter: blur(6px); font-size: .8rem; font-weight: 800;
 }
-
-/* ── Stage ── */
 .scene-stage {
-    position: relative; height: 13rem;
-    margin: .6rem 0;
-    background:
-        linear-gradient(transparent 62%, rgba(106,79,33,.55) 63%),
-        radial-gradient(ellipse at bottom, rgba(190,255,180,.2), transparent 60%);
+    position: relative; height: 13rem; margin: .6rem 0;
+    background: linear-gradient(transparent 62%, rgba(106,79,33,.55) 63%), radial-gradient(ellipse at bottom, rgba(190,255,180,.2), transparent 60%);
     border-radius: 22px; overflow: hidden;
 }
 .scene-stage span { position: absolute; line-height:1; }
-
-/* ── Trees / grass ── */
 .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)); }
 .grass-one  { left:26%; bottom:14%; font-size:2.4rem; }
 .grass-two  { right:28%;bottom:16%; font-size:2.2rem; }
-
-/* ── Sparkles ── */
 .sparkle-one { left:34%;  top:18%; font-size:1.8rem; animation:twinkle 1.8s ease-in-out infinite; }
 .sparkle-two { right:33%; top:24%; font-size:1.6rem; animation:twinkle 2.2s ease-in-out infinite reverse; }
-@keyframes twinkle {
-    0%,100%{opacity:.3;transform:scale(.85);}
-    50%{opacity:1;transform:scale(1.18);}
-}
-
-/* ── Myco player — position grid ── */
+@keyframes twinkle { 0%,100%{opacity:.3;transform:scale(.85);} 50%{opacity:1;transform:scale(1.18);} }
 .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));
 }
-@keyframes myco-bob {
-    0%,100%{transform:translateY(0);}
-    50%{transform:translateY(-.45rem);}
-}
-.pos-0-0 .myco-player{left:14%;bottom:62%;}
-.pos-1-0 .myco-player{left:41%;bottom:62%;}
-.pos-2-0 .myco-player{left:67%;bottom:62%;}
-.pos-0-1 .myco-player{left:14%;bottom:36%;}
-.pos-1-1 .myco-player{left:41%;bottom:36%;}
-.pos-2-1 .myco-player{left:67%;bottom:36%;}
-.pos-0-2 .myco-player{left:14%;bottom:13%;}
-.pos-1-2 .myco-player{left:41%;bottom:13%;}
-.pos-2-2 .myco-player{left:67%;bottom:13%;}
-
-/* ── Mushroom sprite ── */
+@keyframes myco-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-.45rem);} }
+.pos-0-0 .myco-player{left:14%;bottom:62%;} .pos-1-0 .myco-player{left:41%;bottom:62%;} .pos-2-0 .myco-player{left:67%;bottom:62%;}
+.pos-0-1 .myco-player{left:14%;bottom:36%;} .pos-1-1 .myco-player{left:41%;bottom:36%;} .pos-2-1 .myco-player{left:67%;bottom:36%;}
+.pos-0-2 .myco-player{left:14%;bottom:13%;} .pos-1-2 .myco-player{left:41%;bottom:13%;} .pos-2-2 .myco-player{left:67%;bottom:13%;}
 .mushroom-sprite {
-    right:33%; bottom:22%; font-size:3.6rem; z-index:2;
+    position: absolute; right:33%; bottom:22%; z-index:2;
     filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
 }
-
-/* ── STATE: waiting (no mushroom) ── */
 .state-waiting .mushroom-sprite { opacity:0; }
-
-/* ── STATE: discovered — mushroom pops up, Myco runs toward it ── */
-.state-discovered .mushroom-sprite {
-    animation: shroom-popup 0.7s cubic-bezier(.34,1.56,.64,1) 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;
-}
-@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 myco-run-in {
-    0%   { transform:translateX(-3rem) scaleX(-1); }
-    100% { transform:translateX(0) scaleX(1); }
-}
-
-/* ── STATE: picked — mushroom flies up and disappears ── */
-.state-picked .mushroom-sprite {
-    animation: shroom-catch 0.55s cubic-bezier(.34,1.56,.64,1) both;
-}
-.state-picked .myco-player {
-    animation: myco-bob 2.4s ease-in-out infinite,
-               myco-catch-jump 0.55s ease both;
-}
-@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-catch-jump {
-    0%,100%{ transform:translateY(0); }
-    40%    { transform:translateY(-1.4rem) scale(1.1); }
-}
-
-/* ── STATE: danger (poison, not yet picked) ── */
-.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;
-    filter: drop-shadow(0 0 18px rgba(255,62,91,.9));
-}
-.state-danger .myco-player {
-    animation: myco-bob 2.4s ease-in-out infinite,
-               myco-recoil 0.5s ease both;
-}
-@keyframes poison-pulse {
-    0%,100%{ filter:drop-shadow(0 0 10px rgba(255,62,91,.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); }
-}
-
-/* ── STATE: game over ── */
-.state-game-over .forest-scene,
-.state-game-over {
-    animation: screen-shake .45s ease both;
-    background:
-        radial-gradient(circle at 50% 72%, rgba(255,62,91,.35), transparent 8rem),
-        linear-gradient(180deg,#3b0a0a 0%,#6b1a1a 54%,#2a0a0a 100%) !important;
-}
-.state-game-over .mushroom-sprite {
-    animation: shroom-explode .6s ease both;
-    filter: drop-shadow(0 0 24px rgba(255,62,91,1));
-}
-.state-game-over .myco-player {
-    animation: myco-fall .6s ease both;
-}
-@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; }
-}
-
-/* ── Rarity glows ── */
-.rarity-rare .mushroom-sprite     { filter:drop-shadow(0 0 18px rgba(138,220,255,.9)); }
+.state-discovered .mushroom-sprite { animation: shroom-popup 0.7s cubic-bezier(.34,1.56,.64,1) 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; }
+@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 myco-run-in { 0%{ transform:translateX(-3rem) scaleX(-1); } 100%{ transform:translateX(0) scaleX(1); } }
+.state-picked .mushroom-sprite { animation: shroom-catch 0.55s cubic-bezier(.34,1.56,.64,1) both; }
+.state-picked .myco-player { animation: myco-bob 2.4s ease-in-out infinite, myco-catch-jump 0.55s ease both; }
+@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-catch-jump { 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-1.4rem) scale(1.1); } }
+.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; filter: drop-shadow(0 0 18px rgba(255,62,91,.9)); }
+.state-danger .myco-player { animation: myco-bob 2.4s ease-in-out infinite, myco-recoil 0.5s ease both; }
+@keyframes poison-pulse { 0%,100%{ filter:drop-shadow(0 0 10px rgba(255,62,91,.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); } }
+.state-game-over .forest-scene, .state-game-over { animation: screen-shake .45s ease both; background: radial-gradient(circle at 50% 72%, rgba(255,62,91,.35), transparent 8rem), linear-gradient(180deg,#3b0a0a 0%,#6b1a1a 54%,#2a0a0a 100%) !important; }
+.state-game-over .mushroom-sprite { animation: shroom-explode .6s ease both; filter: drop-shadow(0 0 24px rgba(255,62,91,1)); }
+.state-game-over .myco-player { animation: myco-fall .6s ease both; }
+@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; } }
+.rarity-rare .mushroom-sprite { filter:drop-shadow(0 0 18px rgba(138,220,255,.9)); }
 .rarity-legendary .mushroom-sprite{ filter:drop-shadow(0 0 28px rgba(255,215,0,1)); animation:legendary-pulse 1s ease-in-out infinite 0.7s; }
-@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); }
-}
-
-/* ── Mini map grid ── */
-.forest-map {
-    display:grid; grid-template-columns:repeat(3,1fr);
-    gap:.3rem; margin:.4rem auto .6rem;
-    max-width:9rem; padding:.4rem;
-    border:1px solid rgba(255,255,255,.18); border-radius:14px;
-    background:rgba(13,38,28,.58);
-}
-.map-tile {
-    display:grid; min-height:1.7rem; place-items:center;
-    border-radius:8px; background:rgba(255,255,255,.1); font-weight:900;
-}
+@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); } }
+.forest-map { display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; margin:.4rem auto .6rem; max-width:9rem; padding:.4rem; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(13,38,28,.58); }
+.map-tile { display:grid; min-height:1.7rem; place-items:center; border-radius:8px; background:rgba(255,255,255,.1); font-weight:900; }
 .map-tile.active { background:rgba(255,224,138,.92); color:#3d2c00!important; }
-
-/* ── Caption ── */
-.scene-caption {
-    display:flex; justify-content:space-between; gap:.6rem;
-    padding:.55rem .8rem; border-radius:14px;
-    background:rgba(13,38,28,.68); backdrop-filter:blur(6px);
-    align-items:center;
-}
+.scene-caption { display:flex; justify-content:space-between; gap:.6rem; padding:.55rem .8rem; border-radius:14px; background:rgba(13,38,28,.68); backdrop-filter:blur(6px); align-items:center; }
 .scene-caption span { color:#d9f4d4; }
-
-/* ── Score burst ── */
-.score-burst {
-    margin:.65rem auto 0; max-width:520px;
-    padding:.5rem .85rem; border-radius:999px;
-    background:rgba(255,224,112,.18); border:1px solid rgba(255,244,190,.36);
-    color:#fff7d6; font-weight:900; text-align:center;
-    animation:score-pop .56s ease both;
-}
-@keyframes score-pop {
-    0%{transform:scale(.92);opacity:0;}
-    45%{transform:scale(1.06);opacity:1;}
-    100%{transform:scale(1);opacity:1;}
-}
-.state-game-over .score-burst {
-    background:rgba(130,0,30,.45); border-color:rgba(255,120,140,.55);
-}
-
-/* ── Story moment ── */
-.story-moment {
-    margin:.75rem auto 0; max-width:760px;
-    padding:.8rem 1rem; border:1px solid rgba(255,234,166,.3);
-    border-radius:18px; background:rgba(25,18,45,.72);
-    color:#fff7d6; box-shadow:0 0 24px rgba(165,111,255,.22);
-}
+.score-burst { margin:.65rem auto 0; max-width:520px; padding:.5rem .85rem; border-radius:999px; background:rgba(255,224,112,.18); border:1px solid rgba(255,244,190,.36); color:#fff7d6; font-weight:900; text-align:center; animation:score-pop .56s ease both; }
+@keyframes score-pop { 0%{transform:scale(.92);opacity:0;} 45%{transform:scale(1.06);opacity:1;} 100%{transform:scale(1);opacity:1;} }
+.state-game-over .score-burst { background:rgba(130,0,30,.45); border-color:rgba(255,120,140,.55); }
+.story-moment { margin:.75rem auto 0; max-width:760px; padding:.8rem 1rem; border:1px solid rgba(255,234,166,.3); border-radius:18px; background:rgba(25,18,45,.72); color:#fff7d6; box-shadow:0 0 24px rgba(165,111,255,.22); }
 .story-moment strong,.story-moment span { display:block; }
 .story-moment span { margin-top:.2rem; color:#f6e7b2; }
-
-/* ── Suppress Gradio white flash ── */
 .generating .forest-scene, .pending .forest-scene { opacity:.88!important; }
 .progress-level,.progress-level-inner { display:none!important; }
 div.gradio-html { background:transparent!important; }
@@ -248,55 +111,6 @@ div.gradio-html { background:transparent!important; }
 </style>
 """
 
-def hero_markdown() -> str:
-    return """
-<div class="myco-hero">
-  <div class="myco-mascot">🍄</div>
-  <div>
-    <p class="eyebrow">Tiny AI forest game</p>
-    <h1>Myco</h1>
-    <p>Follow an AI mushroom companion through a glowing forest. Every discovery starts with Myco's intuition.</p>
-  </div>
-</div>
-"""
-
-def home_forest_markdown() -> str:
-    return """
-<div class="home-forest-postcard" aria-label="Animated Myco forest postcard">
-  <div class="home-sky">
-    <span class="home-milky-way" title="Milky Way">🌌</span>
-    <span class="home-star star-one">✨</span>
-    <span class="home-star star-two">✦</span>
-    <span class="home-star star-three">✧</span>
-  </div>
-  <div class="home-forest-floor">
-    <span class="home-tree left">🌲</span>
-    <span class="home-grass grass-left">🌿</span>
-    <span class="home-myco" title="Myco">🍄</span>
-    <span class="home-brown-mushroom" title="Brown mushroom">🍄‍🟫</span>
-    <span class="home-grass grass-right">🍃</span>
-    <span class="home-tree right">🌳</span>
-    <span class="home-moon">🌖</span>
-  </div>
-  <p><strong>The Milky Way is awake.</strong> Myco hears a brown mushroom whispering your first clue.</p>
-  <span class="home-whisper">"Tap Play. Let's find what the forest is hiding."</span>
-</div>
-"""
-
-def play_hook_markdown() -> str:
-    return """
-<div class="play-hook">
-  <p class="eyebrow">Mission</p>
-  <h2>Goal: follow clues until Myco remembers the Impossible Mushroom.</h2>
-  <div class="hook-steps">
-    <span>1 · Move through the forest</span>
-    <span>2 · Search Clearing — mushroom pops up!</span>
-    <span>3 · Myco reacts · Pick, Study, or Follow Whisper</span>
-  </div>
-  <p>Every clue advances one mystery. Follow whispers to reveal why the MycoDex is regrowing a forest that vanished.</p>
-</div>
-"""
-
 def forest_scene(
     current: MushroomState | None,
     collection: CollectionState | None,
@@ -310,7 +124,7 @@ def forest_scene(
     if current is None:
         mushroom_name = "Hidden mushroom"
         rarity        = "common"
-        sprite        = "✨"
+        sprite_html   = "✨"
         status        = "The moss is listening. Click Search Clearing to wake the forest."
         omen          = "Myco is waiting to sense the first spore."
         event_label   = "🌌 Dreaming Forest"
@@ -323,7 +137,7 @@ def forest_scene(
     else:
         mushroom_name = current.get("name", "Mystery mushroom")
         rarity        = current.get("rarity", "Common").lower()
-        sprite        = "🍄‍🟫"
+        sprite_html   = generate_mushroom_sprite(mushroom_name)
         game_over     = current.get("game_over") == "Yes"
         studied       = current.get("studied") == "Yes"
         event_label   = f"{current.get('event_emoji','✨')} {current.get('event_title','Strange Omen')}"
@@ -334,15 +148,11 @@ def forest_scene(
         reward_text   = current.get("reward_text", "Decide whether to risk the pickup.")
         state_cls     = _scene_state_class(current)
         status        = f"A {rarity} {mushroom_name} breaks through the moss!"
-        if game_over:
-            status = f"💀 GAME OVER: {mushroom_name} was poisonous!"
+        if game_over: status = f"💀 GAME OVER: {mushroom_name} was poisonous!"
         omen = "New field note unlocked." if studied else "Ask Myco what the forest is hiding."
-        if current.get("picked") == "Yes":
-            omen = "✅ Picked! Move to the next clearing."
-        if game_over:
-            omen = "Press Search Clearing to start a new run."
+        if current.get("picked") == "Yes": omen = "✅ Picked! Move to the next clearing."
+        if game_over: omen = "Press Search Clearing to start a new run."
 
-    # Unique key forces browser to re-run CSS animations on every render
     import time
     anim_key = str(int(time.time() * 1000))[-6:]
 
@@ -364,7 +174,7 @@ def forest_scene(
     <span class="grass grass-one">🌿</span>
     <span class="grass grass-two">🍃</span>
     <span class="myco-player" title="Myco">🍄</span>
-    <span class="mushroom-sprite" title="{escape(mushroom_name)}">{sprite if current else "✨"}</span>
+    <div class="mushroom-sprite" title="{escape(mushroom_name)}">{sprite_html}</div>
     <span class="sparkle sparkle-one">✨</span>
     <span class="sparkle sparkle-two">✦</span>
   </div>