@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');
        .spark-mesh-container {
            --text-color: #f8fafc;
            --primary: #38bdf8;
            --secondary: #c084fc;
            --accent: #f43f5e;
            --success: #34d399;
            --magic: #fbbf24;
            --comet: #f97316;
            
            --noun-bg: #1e3a8a;
            --verb-bg: #9a3412;
            --adj-bg: #581c87;
            
            --font-main: 'Fredoka', sans-serif;

            /* Replaces global body/html styling */
            position: relative;
            width: 100%; 
            height: 100vh; /* Adjust this to 100% if embedding inside a fixed-height parent div */
            background: #0f172a;
            color: var(--text-color); 
            font-family: var(--font-main);
            overflow: hidden; 
            user-select: none;
            transition: background 1.5s ease-in-out;
            z-index: 70000;
        }

        /* Screen Shake */
        @keyframes spark-shake {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            20% { transform: translate(-3px, 2px) rotate(-1deg); }
            40% { transform: translate(3px, -2px) rotate(1deg); }
            60% { transform: translate(-3px, -2px) rotate(-1deg); }
            80% { transform: translate(3px, 2px) rotate(1deg); }
        }
        .spark-mesh-container.shake-screen { animation: spark-shake 0.4s; }

        @keyframes spark-egg-shake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-15deg) scale(1.1); }
            50% { transform: rotate(15deg) scale(1.1); }
            75% { transform: rotate(-15deg) scale(1.1); }
        }
        .spark-mesh-container .egg-shaking { animation: spark-egg-shake 0.3s infinite; }

        .spark-mesh-container .particle {
            position: absolute; width: 12px; height: 12px; border-radius: 50%;
            pointer-events: none; z-index: 40;
            transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s;
        }

        /* HUD & UI */
        .spark-mesh-container #hud {
            position: absolute; top: 0; left: 0; width: 100%;
            pointer-events: none; z-index: 10; display: flex;
            justify-content: space-between; padding: 20px; box-sizing: border-box;
            display: none;
        }
        .spark-mesh-container .hud-panel {
            background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px);
            padding: 15px 25px; border-radius: 20px; border: 3px solid rgba(255, 255, 255, 0.15);
            pointer-events: auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); text-align: center; position: relative;
        }
        .spark-mesh-container h1 { margin: 0 0 5px 0; font-size: 2rem; color: var(--success); text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
        .spark-mesh-container .stats { font-size: 1.3rem; margin: 5px 0; font-weight: 600; }
        
        .spark-mesh-container .meter-container { width: 100%; height: 20px; background: rgba(0,0,0,0.5); border-radius: 10px; margin-top: 10px; position: relative; overflow: hidden; border: 2px solid white; }
        .spark-mesh-container .meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); border-radius: 8px; transition: width 0.3s ease; }

        /* SVG Graph */
        .spark-mesh-container svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; cursor: grab; display: none; }
        .spark-mesh-container svg:active { cursor: grabbing; }

        .spark-mesh-container .link { stroke: rgba(255, 255, 255, 0.2); stroke-width: 4px; stroke-dasharray: 8, 4; animation: dash 2s linear infinite; }
        .spark-mesh-container .link.comet-link { stroke: var(--comet); stroke-width: 6px; stroke-dasharray: 12, 6; animation: dash 1s linear infinite; }
        @keyframes dash { to { stroke-dashoffset: -24; } }

        .spark-mesh-container .node-group { cursor: pointer; }
        .spark-mesh-container .node-circle { stroke: rgba(255,255,255,0.4); stroke-width: 3px; transition: stroke-width 0.2s, filter 0.2s, transform 0.2s, fill 0.5s; rx: 30; ry: 30; }
        .spark-mesh-container .node-group:hover .node-circle { stroke: var(--magic); filter: drop-shadow(0 0 15px var(--magic)); stroke-width: 5px; }
        
        .spark-mesh-container .node-circle.noun { fill: var(--noun-bg); }
        .spark-mesh-container .node-circle.verb { fill: var(--verb-bg); }
        .spark-mesh-container .node-circle.adj { fill: var(--adj-bg); }
        .spark-mesh-container .node-circle.comet { stroke: var(--comet); fill: #7c2d12; filter: drop-shadow(0 0 15px var(--comet)); }

        .spark-mesh-container .node-text { fill: white; font-size: 20px; font-weight: 700; font-family: var(--font-main); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
        .spark-mesh-container .node-text.comet { fill: #fde047; }

        .spark-mesh-container .midpoint-group { cursor: pointer; }
        .spark-mesh-container .midpoint-circle { fill: var(--success); stroke: white; stroke-width: 3px; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .spark-mesh-container .midpoint-circle.magic { fill: var(--magic); filter: drop-shadow(0 0 8px var(--magic)); }
        .spark-mesh-container .midpoint-circle.comet { fill: var(--comet); stroke: #facc15; }
        .spark-mesh-container .midpoint-group:hover .midpoint-circle { transform: scale(1.5); }
        
        .spark-mesh-container .midpoint-text { fill: white; font-size: 18px; font-weight: 900; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
        .spark-mesh-container .midpoint-text.magic { fill: #000; }
        .spark-mesh-container .midpoint-text.comet { font-size: 14px; }

        .spark-mesh-container .floating-text { position: absolute; font-weight: bold; font-size: 1.5rem; pointer-events: none; animation: spark-floatUp 1.5s ease-out forwards; z-index: 50; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
        @keyframes spark-floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-50px) scale(1.2); } }

        .spark-mesh-container .recenter-btn { position: absolute; bottom: 30px; right: 30px; background: var(--primary); color: #0f172a; border: 3px solid white; padding: 12px 25px; border-radius: 15px; font-size: 1.3rem; font-weight: 700; font-family: var(--font-main); cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 10; display: none; }
        .spark-mesh-container .recenter-btn:hover { background: #7dd3fc; transform: scale(1.1); }

        /* Modals */
        .spark-mesh-container .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px); z-index: 100; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; }
        .spark-mesh-container .modal { background: linear-gradient(135deg, #1e293b, #0f172a); padding: 40px; border-radius: 24px; border: 4px solid var(--secondary); text-align: center; max-width: 500px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(192, 132, 252, 0.3); position: relative; max-height: 90vh; overflow-y: auto; }

        .spark-mesh-container .modal h2 { margin-top: 0; color: var(--success); font-size: 2.2rem; }
        .spark-mesh-container .modal p { font-size: 1.2rem; color: #cbd5e1; margin-bottom: 10px; }
        
        .spark-mesh-container #hint-text { color: var(--magic); font-size: 1.1rem; min-height: 24px; font-weight: bold; margin-bottom: 15px; }
        
        .spark-mesh-container .modal input { width: 100%; padding: 15px; border-radius: 12px; border: 3px solid #475569; background: #020617; color: white; font-size: 1.5rem; font-family: var(--font-main); box-sizing: border-box; outline: none; text-align: center; font-weight: bold; text-transform: capitalize; }
        .spark-mesh-container .modal input:focus { border-color: var(--primary); box-shadow: 0 0 15px rgba(56, 189, 248, 0.5); }
        .spark-mesh-container .modal input:disabled { opacity: 0.5; cursor: not-allowed; }
        
        .spark-mesh-container button.action-btn { background: var(--success); color: #0f172a; border: none; padding: 15px 35px; border-radius: 12px; font-size: 1.4rem; font-weight: 700; font-family: var(--font-main); cursor: pointer; transition: transform 0.1s, background 0.2s; margin-top: 20px; box-shadow: 0 5px 15px rgba(52, 211, 153, 0.4); }
        .spark-mesh-container button.action-btn:hover { background: #10b981; transform: scale(1.05); }
        .spark-mesh-container button.action-btn:disabled { background: #64748b; transform: none; cursor: not-allowed; box-shadow: none; }
        .spark-mesh-container button.cancel-btn { background: transparent; color: #94a3b8; border: 2px solid #475569; padding: 15px 35px; border-radius: 12px; font-size: 1.4rem; font-weight: 700; font-family: var(--font-main); cursor: pointer; margin-left: 10px; }

        /* Start Realm Styles */
        .spark-mesh-container .realm-btn { width: 100%; margin: 10px 0; padding: 20px; font-size: 1.5rem; font-weight: bold; border-radius: 15px; cursor: pointer; border: 3px solid white; display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-family: var(--font-main); }
        .spark-mesh-container .realm-btn:hover { transform: scale(1.05); }
        .spark-mesh-container #realm-ocean { background: linear-gradient(90deg, #0284c7, #082f49); }
        .spark-mesh-container #realm-magic { background: linear-gradient(90deg, #166534, #064e3b); }
        .spark-mesh-container #realm-space { background: linear-gradient(90deg, #6b21a8, #2e1065); }
        .spark-mesh-container .realm-btn.locked { filter: grayscale(100%); opacity: 0.6; cursor: not-allowed; }
        .spark-mesh-container .realm-btn.locked:hover { transform: none; }

        .spark-mesh-container .grammar-legend { display: flex; justify-content: space-around; background: rgba(0,0,0,0.4); padding: 10px; border-radius: 15px; margin-top: 15px; font-size: 1rem;}
        .spark-mesh-container .leg-item { display: flex; align-items: center; gap: 5px;}
        .spark-mesh-container .leg-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; }

        .spark-mesh-container #pet-container { font-size: 5rem; margin: 20px 0; min-height: 100px; filter: drop-shadow(0 0 20px var(--magic)); }
        .spark-mesh-container #pet-name { font-size: 1.5rem; color: var(--magic); font-weight: bold; }

        .spark-mesh-container .zoo-btn { background: var(--secondary); color: white; border: 2px solid white; padding: 10px 20px; border-radius: 10px; font-size: 1.2rem; cursor: pointer; margin-top: 15px; font-weight: bold; font-family: var(--font-main); }
        .spark-mesh-container .zoo-btn:hover { background: #d8b4fe; }

        .spark-mesh-container .zoo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; margin-top: 20px; }
        .spark-mesh-container .zoo-item { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 15px; text-align: center; border: 2px solid rgba(255,255,255,0.2); }
        .spark-mesh-container .zoo-emoji { font-size: 2.5rem; margin-bottom: 5px; }
        .spark-mesh-container .zoo-name { font-size: 0.9rem; font-weight: bold; color: var(--primary); }
        /*CSS for cell : exploreGame*/