:root { color-scheme: dark; --ink:#f5efc2; --muted:#9eac7b; --green:#213d2a; --line:#719261; --gold:#f4c969; --void:#0b110e; --rarity-common:#9aa0a6; --rarity-uncommon:#65b96f; --rarity-rare:#3b82f6; --rarity-legendary:#a855f7; --rarity-mythic:#f59e0b; }
        * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        ::selection { background:transparent; color:inherit; }
        html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--void); }
        body { color:var(--ink); font-family:'VT323',monospace; letter-spacing:.02em; }
        button,input { font:inherit; }
        button { cursor:pointer; }
        button, a, input, select { -webkit-tap-highlight-color:transparent; }
        .world { position:relative; width:100%; height:100svh; overflow:hidden; background:var(--void); }
        #canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; -webkit-tap-highlight-color:transparent; }
        .title { position:absolute; z-index:2; top:3.5%; left:50%; width:max-content; text-align:center; transform:translateX(-50%); pointer-events:none; text-shadow:3px 3px #193522; }
        .title h1 { margin:0; font-size:clamp(2.5rem,7vw,5.5rem); line-height:.75; font-weight:400; letter-spacing:.05em; }
        .title p:last-child { margin:.5rem 0 0; color:#e2e8b6; font-size:1.35rem; }
        .habitat-event { position:absolute; z-index:3; top:7.25rem; left:50%; padding:.2rem .5rem; color:#d8f5a8; background:rgba(20,34,25,.82); border:1px solid #719261; box-shadow:2px 2px #050a07; transform:translateX(-50%); font-size:.8rem; letter-spacing:.12em; pointer-events:none; }
        .panel { position:absolute; z-index:3; padding:.72rem; background:rgba(20,34,25,.94); border:2px solid var(--line); box-shadow:4px 4px #050a07; }
        .stats { top:1rem; left:1rem; width:14rem; }
        .care { top:1rem; right:1rem; width:18rem; }
        .care-stack { position:absolute; top:1rem; right:1rem; z-index:3; display:grid; width:21rem; gap:.65rem; }
        .care-top { display:grid; grid-template-columns:2.35rem 18rem; gap:.65rem; align-items:start; }
        .care-top > .care { position:relative; top:auto; right:auto; width:100%; }
        .care-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; justify-self:end; width:18rem; }
        .chronicle { left:1rem; bottom:1rem; width:23rem; }
        .pollination-history { left:25rem; bottom:1rem; width:21rem; }
        .legend { right:1rem; bottom:1rem; width:11rem; }
        .kicker { display:flex; justify-content:space-between; gap:.5rem; color:var(--gold); font-size:.82rem; line-height:1; letter-spacing:.12em; }
        .hybrid-alert { padding:.16rem .3rem; color:#182316; background:#f4c969; border:1px solid #ffe6a1; letter-spacing:.06em; white-space:nowrap; }
        .hybrid-alert.flash { animation: hybrid-flash 1100ms steps(2,end) 3; }
        @keyframes hybrid-flash { 0%,100% { opacity:1; box-shadow:0 0 0 transparent; } 50% { opacity:.28; box-shadow:0 0 10px #f4c969; } }
        .dot { display:inline-block; width:.55rem; height:.55rem; margin-right:.25rem; background:#a9d16d; box-shadow:0 0 7px #a9d16d; }
        .capacity { display:flex; align-items:baseline; gap:.4rem; margin-top:.5rem; color:var(--muted); font-size:1rem; }
        .capacity strong { color:var(--ink); font-size:2.6rem; line-height:.8; font-weight:400; }
        .sync-status { margin-top:.45rem; color:#86b6a1; font-size:.7rem; letter-spacing:.1em; }
        .sync-status.pulse { animation: sync-pulse 900ms steps(3,end); }
        @keyframes sync-pulse { 0%,100% { text-shadow:none; } 35% { color:#d8f5a8; text-shadow:0 0 8px #a9d16d; } }
        .care label { display:block; margin:.8rem 0 .2rem; color:var(--muted); font-size:.9rem; }
        .care-row { display:flex; gap:.35rem; margin-top:.7rem; }
        .care input { width:45%; min-width:0; padding:.4rem; color:var(--ink); background:#15291b; border:2px solid #557450; outline:0; }
        .care input:focus { border-color:var(--gold); }
        .mister { margin-top:.5rem; padding:.18rem .35rem; color:#bde3cf; background:#183c36; border:1px solid #6aa189; font-size:.8rem; }
        .mister:disabled { color:#708477; background:#12231f; border-color:#42594e; cursor:not-allowed; opacity:.7; }
        .ecology { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; }
        .ecology button { padding:.18rem .35rem; color:#d6e9be; background:#1b3527; border:1px solid #66885a; font-size:.75rem; }
        .ecology button.active { color:#172316; background:#a8d275; }
        .reset { margin-top:.7rem; padding:0; color:#d99686; background:none; border:0; font-size:.75rem; text-decoration:underline; }
        .dev-tools { top:12rem; right:1rem; width:18rem; }
        .dev-tools .tool-row { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.55rem; }
        .dev-tools button { padding:.25rem .35rem; color:var(--gold); background:#172b1c; border:1px solid #66885a; font-size:.75rem; }
        button:disabled { opacity:.38; filter:saturate(.35); cursor:not-allowed; }
        .dev-tools button.active { color:#182316; background:#a9d16d; }
        .dev-tools button.dev-danger { color:#ffd7d0; background:#6c302d; border-color:#d96d62; }
        .dev-note { margin:.45rem 0 0; color:var(--muted); font-size:.72rem; }
        .dev-event-panel { left:calc(50% + 9.5rem); bottom:1rem; width:15rem; }
        .dev-event-log { display:grid; gap:.3rem; max-height:6.5rem; margin-top:.55rem; overflow:auto; color:#d8f5a8; font-size:.75rem; line-height:1.05; }
        .dev-event-log p { margin:0; padding-left:.4rem; border-left:2px solid #f4c969; }
                .spider-toggle { position:absolute; top:4rem; left:15.75rem; z-index:4; min-width:8.5rem; padding:.3rem .45rem; color:var(--ink); background:#284630; border:2px solid var(--line); box-shadow:3px 3px #050a07; font-size:.78rem; }
                .care-actions > .spider-toggle { position:relative; top:auto; left:auto; width:100%; min-width:0; }
                .spider-toggle.spider-off { color:#ffd7d0; background:#6c302d; border-color:#d96d62; }
                .spider-toggle.spider-neutral { color:var(--ink); background:#284630; border-color:var(--line); }
                .spider-toggle.spider-creepy { color:#182316; background:#a9d16d; border-color:#d8f5a8; }
                .mobile-toolbar button.spider-off { color:#ffd7d0; background:#6c302d; border-color:#d96d62; }
                .mobile-toolbar button.spider-neutral { color:var(--gold); background:rgba(20,34,25,.96); border-color:var(--line); }
                .mobile-toolbar button.spider-creepy { color:#182316; background:#a9d16d; border-color:#d8f5a8; }
        .primary { flex:1; padding:.38rem; color:#182316; background:var(--gold); border:2px solid #ffe6a1; box-shadow:2px 2px #806032; font-size:.88rem; }
        .primary:active { transform:translate(2px,2px); box-shadow:none; }
        .quiet { margin-top:.55rem; padding:0; color:#a9d16d; background:none; border:0; text-decoration:underline; font-size:.8rem; }
        .status { min-height:1.1rem; margin:.45rem 0 0; color:var(--muted); font-size:.82rem; }
        .status:empty { display:none; }
        .log { display:grid; gap:.35rem; max-height:9.5rem; margin-top:.65rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; color:var(--muted); font-size:.8rem; line-height:1.1; }
        .log p { margin:0; padding-left:.45rem; border-left:2px solid #587653; }
        .log time { color:var(--gold); }
        .pollination-log { display:grid; gap:.4rem; max-height:9.5rem; margin-top:.65rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
        .pollination-log article { position:relative; display:grid; gap:.08rem; padding:.25rem 3.2rem .25rem .5rem; border-left:2px solid var(--gold); }
        .pollination-log strong { color:var(--ink); font-size:.9rem; font-weight:400; line-height:1; overflow-wrap:anywhere; }
        .pollination-log span { color:#a9d16d; font-size:.75rem; line-height:1; overflow-wrap:anywhere; }
        .pollination-log time { position:absolute; top:.25rem; right:0; color:var(--gold); font-size:.72rem; }
        .pollination-empty { margin:0; color:var(--muted); font-size:.8rem; }
        .legend { display:grid; gap:.35rem; color:var(--muted); font-size:.78rem; }
        .legend span:not(.kicker) { display:flex; align-items:center; gap:.5rem; }
        .legend i { display:inline-block; width:1.25rem; height:.25rem; background:#382e27; }
        .legend .fibrous { background:repeating-linear-gradient(90deg,#382e27 0 4px,transparent 4px 7px); }
        .legend .ghost { background:#c7b77e; opacity:.5; }
        .back { position:absolute; top:1rem; right:1rem; z-index:4; display:flex; align-items:center; gap:.4rem; padding:.35rem .55rem; color:#f4e7b1; background:#2e5035; border:2px solid #a47a48; box-shadow:3px 3px #050a07; text-decoration:none; font-size:1rem; }
        .home-back { top:auto; bottom:1rem; }
        .about-home-open { top:1rem; right:auto; left:15.75rem; justify-content:center; width:2.35rem; height:2.35rem; padding:0; font-size:1.3rem; }
        .care-top > .about-home-open { position:relative; top:auto; right:auto; left:auto; }
        .care-actions > .guidebook-home-open { position:relative; top:auto; right:auto; left:auto; width:100%; min-width:0; padding:.35rem .4rem; font-size:.78rem; }
        .care-actions > button { min-height:2.45rem; }
        .icon-label { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
        .icon-label svg { width:1rem; height:1rem; flex:0 0 auto; stroke-width:2; }
        .icon-only { display:grid; place-items:center; }
        .icon-only svg { width:1.2rem; height:1.2rem; stroke-width:2; }
        .inspector { right:1rem; bottom:4.5rem; width:20rem; }
        .inspector.rarity-common { border-color:var(--rarity-common); }
        .inspector.rarity-uncommon { border-color:var(--rarity-uncommon); box-shadow:4px 4px #050a07,0 0 10px rgba(101,185,111,.25); }
        .inspector.rarity-rare { border-color:var(--rarity-rare); box-shadow:4px 4px #050a07,0 0 10px rgba(59,130,246,.28); }
        .inspector.rarity-legendary { border-color:var(--rarity-legendary); box-shadow:4px 4px #050a07,0 0 12px rgba(168,85,247,.38); }
        .inspector.rarity-mythic { border-color:var(--rarity-mythic); box-shadow:4px 4px #050a07,0 0 14px rgba(245,158,11,.45); animation:rarity-mythic-border 3s steps(6,end) infinite; }
        .close { position:absolute; top:.25rem; right:.45rem; color:var(--muted); background:none; border:0; font-size:1.2rem; }
        .inspector h2 { margin:.65rem 1.5rem .1rem 0; font-size:1.15rem; line-height:1.05; font-weight:400; overflow-wrap:anywhere; }
        .tag { margin:0 0 .5rem; color:#fff3a6; font-size:1rem; line-height:1; text-shadow:2px 2px #182316; }
        .tag.rarity-common { color:var(--rarity-common); }
        .tag.rarity-uncommon { color:var(--rarity-uncommon); }
        .tag.rarity-rare { color:var(--rarity-rare); }
        .tag.rarity-legendary { color:var(--rarity-legendary); text-shadow:0 0 6px #7e22ce,2px 2px #34204f; }
        .tag.rarity-mythic { color:var(--rarity-mythic); text-shadow:0 0 6px #facc15,2px 2px #604b18; animation:rarity-mythic-text 3s steps(6,end) infinite; }
        @keyframes rarity-mythic-border { 0% { border-color:#f59e0b; } 20% { border-color:#facc15; } 40% { border-color:#65b96f; } 60% { border-color:#3b82f6; } 80% { border-color:#a855f7; } 100% { border-color:#f43f5e; } }
        @keyframes rarity-mythic-text { 0% { color:#f59e0b; } 20% { color:#facc15; } 40% { color:#65b96f; } 60% { color:#3b82f6; } 80% { color:#a855f7; } 100% { color:#f43f5e; } }
        .rarity-ladder { display:flex; flex-wrap:wrap; gap:.35rem .6rem; margin:.35rem 0; }
        .rarity-ladder .tag { margin:0; font-size:1rem; }
        .facts { display:grid; gap:.35rem; margin:0; }
        .facts div { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid #36523a; padding-top:.25rem; font-size:.85rem; }
        .facts .milestone-fact dd { color:#f4c969; text-align:right; }
        .milestone-track { height:.4rem; margin:.45rem 0 .15rem; border:1px solid #36523a; background:#0c1711; overflow:hidden; }
        .milestone-track span { display:block; width:0; height:100%; background:#f4c969; transition:width 280ms steps(6,end); }
        .facts dt { color:var(--muted); }.facts dd { margin:0; text-align:right; }
        .hybrid-details { margin:.55rem 0; padding:.35rem .45rem; background:#102016; border:1px solid #36523a; }
        .hybrid-details summary { color:var(--gold); cursor:pointer; font-size:.82rem; }
        .hybrid-details p { margin:.35rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.15; overflow-wrap:anywhere; }
        .hybrid-details #inspect-hybrid-name { color:var(--ink); }
        .lineage-tree-open { width:100%; margin-top:.65rem; padding:.4rem .55rem; color:var(--gold); background:#172b1c; border:2px solid #587653; }
        .lineage-tree { width:min(42rem,calc(100% - 2rem)); }
        .lineage-tree-view { max-height:min(72vh,42rem); margin-top:.75rem; overflow:auto; }
        .lineage-tree-list { margin:0; padding:0; list-style:none; }
        .lineage-tree-list .lineage-tree-list { margin-left:2rem; padding-left:1rem; border-left:2px solid #36523a; }
        .lineage-tree-list li { position:relative; margin:.45rem 0; }
        .lineage-tree-list .lineage-tree-list > li::before { position:absolute; top:3.1rem; left:-1rem; width:.8rem; border-top:2px solid #36523a; content:''; }
        .lineage-node { display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.7rem; align-items:center; width:min(24rem,100%); padding:.4rem; background:#102016; border:1px solid #426249; }
        .lineage-node.rarity-common { border-color:var(--rarity-common); }.lineage-node.rarity-uncommon { border-color:var(--rarity-uncommon); }.lineage-node.rarity-rare { border-color:var(--rarity-rare); }.lineage-node.rarity-legendary { border-color:var(--rarity-legendary); }.lineage-node.rarity-mythic { border-color:var(--rarity-mythic); animation:rarity-mythic-border 3s steps(6,end) infinite; }
        .lineage-portrait { width:6.5rem; height:6.5rem; background:#08170f; image-rendering:pixelated; }
        .lineage-portrait-hidden { display:grid; place-items:center; color:var(--gold); border:1px dashed #587653; font-family:Georgia,serif; font-size:4rem; line-height:1; }
        .lineage-node strong,.lineage-node span,.lineage-node small { display:block; overflow-wrap:anywhere; }
        .lineage-node strong { color:var(--ink); font-size:1rem; font-weight:400; }
        .lineage-node span { margin-top:.15rem; color:var(--muted); font-size:.82rem; }
        .lineage-node small { margin-top:.25rem; color:var(--gold); font-size:.78rem; }
        .lineage-branch { margin:.25rem 0 0; }
        .lineage-branch > summary { width:max-content; padding:.2rem .35rem; color:var(--muted); cursor:pointer; font-size:.75rem; }
        .debug { position:absolute; top:50%; left:1rem; z-index:3; display:flex; gap:.3rem; align-items:center; color:var(--muted); font-size:.75rem; opacity:.75; }
        .debug button { padding:.18rem .3rem; color:var(--gold); background:#17271a; border:1px solid #526f4e; }
        body dialog { position:fixed; top:50%; left:50%; width:min(23rem,calc(100% - 2rem)); max-height:calc(100svh - 2rem); margin:0; overflow:auto; padding:1rem; color:var(--ink); background:#14251a; border:3px solid var(--line); box-shadow:6px 6px #050a07; transform:translate(-50%,-50%); font-family:'VT323',monospace; }
        dialog::backdrop { background:rgba(5,10,7,.78); }
        dialog .kicker { padding-right:1.4rem; }
        dialog h2 { margin:0 0 .3rem; color:var(--gold); font-size:1.8rem; font-weight:400; }
        dialog p { margin:.2rem 0 .8rem; color:var(--muted); font-size:1rem; }
        dialog input { width:100%; padding:.45rem; color:var(--ink); background:#102016; border:2px solid #557450; outline:0; }
        dialog select { width:100%; padding:.45rem; color:var(--ink); background:#102016; border:2px solid #557450; outline:0; }
        body dialog#seed-dialog.has-mutation-preview { width:min(48rem,calc(100% - 2rem)); }
        .mutation-preview { margin:.7rem 0; padding:.65rem; background:#0d1910; border:2px solid #426249; }
        .mutation-preview[hidden] { display:none; }
        .mutation-preview h3 { margin:.55rem 0 .15rem; color:var(--ink); font-size:1.25rem; font-weight:400; line-height:1; overflow-wrap:anywhere; }
        .mutation-preview > p { margin:0 0 .55rem; color:#a9d16d; font-size:.82rem; line-height:1.05; overflow-wrap:anywhere; }
        .mutation-parent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
        .mutation-parent-card { display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:.15rem .55rem; align-items:start; min-width:0; padding:.45rem; background:#102016; border:1px solid var(--rarity-common); }
        .mutation-parent-card.rarity-uncommon { border-color:var(--rarity-uncommon); }.mutation-parent-card.rarity-rare { border-color:var(--rarity-rare); }.mutation-parent-card.rarity-legendary { border-color:var(--rarity-legendary); }.mutation-parent-card.rarity-mythic { border-color:var(--rarity-mythic); animation:rarity-mythic-border 3s steps(6,end) infinite; }
        .mutation-parent-card canvas { grid-row:1/4; width:100%; aspect-ratio:1; background:#08170f; image-rendering:pixelated; }
        .mutation-parent-card small { color:var(--muted); font-size:.72rem; }
        .mutation-parent-card strong { color:var(--ink); font-size:1rem; font-weight:400; line-height:1; overflow-wrap:anywhere; }
        .mutation-parent-card span { color:var(--gold); font-size:.82rem; overflow-wrap:anywhere; }
        #dialog-color { height:2.7rem; padding:.2rem; }
        .emoji-picker { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.3rem; max-height:12rem; padding:.4rem; overflow:auto; background:#102016; border:2px solid #557450; }
        .emoji-picker button { display:grid; place-items:center; aspect-ratio:1; min-width:0; padding:0; color:var(--ink); background:#1b3527; border:1px solid #587653; font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif; font-size:1.2rem; line-height:1; }
        .emoji-picker button:first-child { font-family:'VT323',monospace; font-size:.72rem; }
        .emoji-picker button.active { color:#182316; background:var(--gold); border-color:#ffe6a1; box-shadow:inset 0 0 0 2px #806032; }
        .emoji-picker button:disabled { opacity:.3; cursor:not-allowed; }
        .emoji-picker button:focus-visible { outline:2px solid #fff0b3; outline-offset:1px; }
        .dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.8rem; }
        .dialog-actions button { min-height:2.4rem; padding:.35rem .6rem; color:var(--ink); background:#284630; border:2px solid #719261; touch-action:manipulation; }
        .dialog-actions .confirm { color:#182316; background:var(--gold); border-color:#ffe6a1; }
        .archive-entry { padding:.45rem; border:1px solid #36523a; background:#102016; color:var(--muted); font-size:.9rem; }
        .archive-entry strong { color:var(--ink); font-weight:400; }
        .archive-entry em { color:var(--gold); font-style:normal; }
        .metrics { width:min(54rem,calc(100% - 3rem)); }
        .metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.8rem; }
        .metric { padding:.45rem; background:#102016; border:1px solid #36523a; }
        .metric small { display:block; color:var(--muted); font-size:.75rem; }.metric strong { display:block; margin-top:.1rem; color:var(--ink); font-size:1.3rem; font-weight:400; }
        .metric-wide { grid-column:1/-1; }
        .metrics .metric-wide { grid-column:auto; }
        body dialog.guidebook { width:min(68rem,calc(100% - 2rem)); }
        .guidebook-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0 .65rem; padding-bottom:.5rem; border-bottom:2px solid #36523a; }
        .guidebook-tabs > [role="tablist"] { display:flex; gap:.4rem; }
        .guidebook-tabs button { padding:.3rem .55rem; color:var(--muted); background:#172b1c; border:1px solid #4e704e; }
        .guidebook-tabs button.active { color:#182316; background:var(--gold); }
        .guidebook-view { max-height:min(72vh,46rem); overflow:auto; }
        .guidebook-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.55rem; }
        .guidebook-card { display:grid; grid-template-rows:auto auto auto 1fr; min-width:0; padding:.5rem; background:#102016; border:1px solid var(--rarity-common); }
        .guidebook-card.rarity-uncommon { border-color:var(--rarity-uncommon); }.guidebook-card.rarity-rare { border-color:var(--rarity-rare); }.guidebook-card.rarity-legendary { border-color:var(--rarity-legendary); }.guidebook-card.rarity-mythic { border-color:var(--rarity-mythic); animation:rarity-mythic-border 3s steps(6,end) infinite; }
        .guidebook-card canvas { width:100%; aspect-ratio:1; background:#08170f; image-rendering:pixelated; }
        .guidebook-card strong { margin-top:.4rem; color:var(--ink); font-size:1.05rem; font-weight:400; line-height:1; overflow-wrap:anywhere; }
        .guidebook-card small { margin-top:.2rem; color:var(--rarity-common); font-size:.75rem; }
        .guidebook-card.rarity-uncommon small { color:var(--rarity-uncommon); }.guidebook-card.rarity-rare small { color:var(--rarity-rare); }.guidebook-card.rarity-legendary small { color:var(--rarity-legendary); }.guidebook-card.rarity-mythic small { color:var(--rarity-mythic); animation:rarity-mythic-text 3s steps(6,end) infinite; }
        .guidebook-card p { margin:.3rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.05; overflow-wrap:anywhere; }
        .guidebook-card .guidebook-genome { color:#d8f5a8; }
        .guidebook-card button { align-self:end; margin-top:.5rem; padding:.3rem .45rem; color:var(--gold); background:#172b1c; border:1px solid #66885a; }
        .guidebook-hybrid-grid { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
                .mobile-toolbar { display:none; }
                @media (max-width:700px), (orientation:landscape) and (max-height:500px) {
                            html, body, button, a, input, select { -webkit-tap-highlight-color:transparent !important; }
                            button, a, input, select { -webkit-appearance:none; appearance:none; }
                            button:focus, a:focus, input:focus, select:focus { outline:none; }
                            button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #fff0b3; outline-offset:3px; }
                        .mobile-toolbar { display:contents; }
                        .mobile-toolbar button { position:absolute; z-index:6; width:2.35rem; height:2.35rem; padding:0; color:var(--gold); background:rgba(20,34,25,.96); border:2px solid var(--line); box-shadow:3px 3px #050a07; font-size:1.25rem; line-height:1; }
                        .mobile-toolbar button svg { width:1.2rem; height:1.2rem; margin:auto; stroke-width:2; }
                        .mobile-toolbar .mobile-plant-action { display:flex; align-items:center; justify-content:center; gap:.35rem; width:6.2rem; color:#182316; background:var(--gold); border-color:#ffe6a1; box-shadow:3px 3px #806032; font-size:1rem; letter-spacing:.04em; }
                        .mobile-toolbar .mobile-plant-action svg { width:1.1rem; height:1.1rem; margin:0; }
                        .mobile-toolbar button:active, .mobile-toolbar button[aria-expanded="true"] { color:#182316; background:var(--gold); transform:translate(1px,1px); box-shadow:1px 1px #050a07; }
                        .mobile-toolbar [data-mobile-target="stats"] { top:.65rem; left:.65rem; }
                        .mobile-toolbar [data-mobile-target="dev-tools"] { top:.65rem; left:3.35rem; }
                        .mobile-toolbar [data-mobile-target="about"] { top:.65rem; right:7.2rem; }
                        .mobile-toolbar [data-mobile-target="care"] { top:.65rem; right:.65rem; }
                        .mobile-toolbar [data-mobile-target="guidebook"] { top:3.35rem; right:3.925rem; width:2.925rem; }
                        .mobile-toolbar #spider-mobile-toggle { top:3.35rem; right:.65rem; width:2.925rem; }
                        .mobile-toolbar [data-mobile-target="chronicle"] { bottom:calc(.65rem + env(safe-area-inset-bottom, 0px)); left:.65rem; }
                        .mobile-toolbar [data-mobile-target="pollination-history"] { bottom:calc(.65rem + env(safe-area-inset-bottom, 0px)); left:3.35rem; }
                        .care-stack, .care-top, .care-actions { display:contents; }
                        .care-top > .care { position:absolute; }
                        .mobile-menu { display:none; }
                        .mobile-menu.mobile-open { display:block; }
                        .stats.mobile-menu { top:3.65rem; bottom:auto; left:.65rem; right:auto; width:min(14rem,calc(100% - 1.3rem)); max-height:calc(100svh - 7rem); overflow:auto; }
                        .care.mobile-menu { top:6.35rem; bottom:auto; left:auto; right:.65rem; width:min(18rem,calc(100% - 1.3rem)); max-height:calc(100svh - 7rem); overflow:auto; }
                        .chronicle.mobile-menu, .pollination-history.mobile-menu { top:auto; bottom:3.65rem; left:.65rem; right:auto; width:min(23rem,calc(100% - 1.3rem)); max-height:calc(100svh - 7rem); overflow:auto; }
                        .dev-tools.mobile-menu, .dev-event-panel.mobile-menu { top:3.65rem; bottom:auto; left:.65rem; right:auto; width:min(18rem,calc(100% - 1.3rem)); transform:none; max-height:calc(100svh - 7rem); overflow:auto; }
                        #about-open { display:none; }
                        #guidebook-direct-open { display:none; }
                        #spider-toggle { display:none; }
                        .inspector { left:.65rem; right:.65rem; bottom:calc(3.75rem + env(safe-area-inset-bottom, 0px)); width:auto; max-height:42svh; overflow:auto; }
                        .back { top:.65rem; right:.65rem; bottom:auto; padding:.3rem .45rem; font-size:.9rem; }
                        .home-back { top:auto; bottom:calc(.65rem + env(safe-area-inset-bottom, 0px)); }
                            .title { top:6.25rem; width:calc(100% - 1.4rem); }
                            .title h1 { font-size:clamp(2rem,10vw,3.5rem); line-height:.9; }
                                                .habitat-event { top:9.7rem; max-width:calc(100% - 8rem); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
                        .title p:last-child { font-size:1rem; }
                        .legend { display:none; }
                        .debug { display:none; }
                }
                @media (max-width:700px), (orientation:landscape) and (max-height:500px) {
                        .mobile-toolbar button { flex:none; }
                        .mobile-menu { padding:.6rem; }
                        .care-row { flex-direction:column; gap:.45rem; }
                        .care input, .care .primary { width:100%; min-height:2.2rem; }
                        .stats.mobile-menu, .care.mobile-menu, .chronicle.mobile-menu, .pollination-history.mobile-menu, .dev-tools.mobile-menu, .dev-event-panel.mobile-menu { max-height:calc(100svh - 7rem); }
                        .inspector h2 { max-width:calc(100% - 1.5rem); overflow-wrap:anywhere; }
                        .facts div { align-items:flex-start; }
                        .facts dd { max-width:62%; overflow-wrap:anywhere; }
                        #seed-dialog { width:calc(100% - 1.25rem); max-height:calc(100svh - 1.25rem); padding:.8rem; }
                        .metrics { width:calc(100% - 1.25rem); }
                        .metric-grid { grid-template-columns:1fr; }
                        .mutation-parent-card { grid-template-columns:1fr; grid-template-rows:auto; }
                        .mutation-parent-card canvas { grid-row:auto; }
                        #seed-dialog .dialog-actions { position:sticky; bottom:0; padding-top:.6rem; background:#14251a; }
                        body dialog.guidebook { width:calc(100% - 1.25rem); max-height:calc(100svh - 1.25rem); padding:.75rem; }
                        .guidebook-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
                        .guidebook-hybrid-grid { grid-template-columns:1fr; }
                }
        @media (max-width:700px) and (orientation:portrait) { .title { top:23%; } .title h1 { font-size:clamp(2.3rem,12vw,4rem); } .title p:last-child { font-size:1rem; } .stats,.care { top:auto; bottom:4.1rem; width:calc(50% - 1.4rem); } .stats { left:.7rem; }.care { right:.7rem; } .chronicle { top:.7rem; bottom:auto; left:.7rem; width:calc(100% - 1.4rem); } .dev-event-panel { left:.7rem; bottom:14rem; width:calc(50% - 1rem); } .dev-tools { bottom:1rem; width:calc(50% - 1rem); } .legend { display:none; } .back { top:.65rem; right:.7rem; bottom:auto; } .home-back { top:auto; bottom:calc(.7rem + env(safe-area-inset-bottom, 0px)); } .debug { display:none; } }
        @media (max-width:700px) and (orientation:portrait) { .title { top:6.25rem; width:calc(100% - 1.4rem); } .title h1 { font-size:clamp(2rem,10vw,3.5rem); line-height:.9; } }
        @media (orientation:landscape) and (max-height:500px) {
                .title { top:.35rem; transform:translateX(-50%) scale(.55); transform-origin:top center; }
                .title p:last-child { display:none; }
                .mobile-toolbar [data-mobile-target="stats"], .mobile-toolbar [data-mobile-target="dev-tools"], .mobile-toolbar [data-mobile-target="about"], .mobile-toolbar [data-mobile-target="care"] { top:.4rem; }
                .mobile-toolbar [data-mobile-target="guidebook"], .mobile-toolbar #spider-mobile-toggle { top:3.1rem; }
                .stats.mobile-menu, .dev-tools.mobile-menu, .dev-event-panel.mobile-menu { top:3.2rem; max-height:calc(100svh - 6.6rem); }
                .care.mobile-menu { top:5.8rem; max-height:calc(100svh - 6.6rem); }
                .chronicle.mobile-menu, .pollination-history.mobile-menu { top:auto; max-height:calc(100svh - 6.6rem); }
                .inspector { max-height:60svh; }
        }