A brand new RPG-Game inside drawaria.online explore new worlds and discover the secrets of this adventure!
// ==UserScript==
// @name Drawaria.online Stories Game
// @namespace http://tampermonkey.net/
// @version 3.0
// @description A brand new RPG-Game inside drawaria.online explore new worlds and discover the secrets of this adventure!
// @author YouTubeDrawaria
// @include https://drawaria.online/*
// @include https://*.drawaria.online/*
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @connect images.unsplash.com
// @connect ibb.co
// @connect myinstants.com
// @connect picsum.photos
// @run-at document-start
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// =====================================================================
// === SECCIÓN DE DEFINICIÓN DE NIVELES GLOBALES (PEGAR CÓDIGO AQUÍ) ===
// =====================================================================
// NOTA IMPORTANTE: Pegar el código COMPLETO de cada nivel (todo lo que está dentro del IIFE)
// dentro de su respectiva función global.
window.startGameLevel1 = function() {
// ==UserScript==
// @name Drawaria Game Level 1 - Start Point
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Level 1: Start Point. Navigate the dark platform to the end to advance the background. Complete all three phases to talk to the Cube Fairy and finish the level.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Start Point";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-start-point.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground on the SVG floor)
const AVATAR_HEIGHT_PX = 64; // Assuming avatar scaled to 64px height for screen ratio
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX; // Top position for the avatar image
// Adjusted LEVEL_END_X: 800 + 220 = 1020. This allows the player to move far off the right edge.
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level (50px from right edge)
const LEVEL_START_X = 50; // Starting X coordinate
const CUBE_FAIRY_ID = 'cube-fairy-npc';
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
// POSITION OF CUBE FAIRY (NPC)
const CUBE_FAIRY_X = 650;
const CUBE_FAIRY_Y = 250;
const CUBE_FAIRY_SCALE = 0.3; // Scale the 500x500 SVG down
// Dialogue for Cube Fairy (Phase 0-2)
const DIALOGUE_LINES = [
{ name: "Cube Fairy", text: `Welcome to the ${LEVEL_TITLE}, little one.` },
{ name: "Cube Fairy", text: "You must cross this void to advance. Reach the end of the screen three times." },
{ name: "Cube Fairy", text: "Each time you successfully cross, the path will change slightly." },
{ name: "Cube Fairy", text: "I will only speak with you again once you have proven your worth." }
];
// Final Dialogue (Phase 3+)
const DIALOGUE_LINES_FINAL = [
{ name: "Cube Fairy", text: "You did it! You successfully crossed the void and adapted to the changing paths." },
{ name: "Cube Fairy", text: "This marks the end of the first level. You are ready for what comes next." },
{ name: "Cube Fairy", text: "Congratulations! Level 1 complete." }
];
// --- 2. SVG ASSETS PLACEHOLDERS ---
// Map 1: Black background with simple floor glow
const MAP_SVG_1 = `
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<rect width="100%" height="100%" fill="#000000" style="pointer-events: none;"/>
<g style="filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));">
<text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 62.3px; font-weight: 700; text-transform: capitalize; white-space: pre; transform-box: fill-box; transform-origin: 50% 50%; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));" x="234.008" y="245.741" transform="matrix(1, 0, 0, 1.227273, 0, -66.145973)">Start Point</text>
<rect style="fill: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" height="12.986" x="262.127" y="200.766" width="250.735"/>
<rect style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" height="6.992" x="281.607" y="223.242" width="211.776"/>
<rect style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" height="4.994" x="311.575" y="238.226" width="151.839"/>
<path d="M 380 91.392 L 389.522 110.41 L 410.604 119 L 389.522 127.59 L 380 146.608 L 370.478 127.59 L 349.396 119 L 370.478 110.41 Z" bx:shape="star 380 119 30.604 27.608 0.44 4 1@856741a6" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(253, 253, 253);" transform="matrix(-0.99527449, 0.09710149, -0.09710152, -0.99527448, 589.3810518, 242.69671543)"/>
<path d="M 380 91.392 L 389.522 110.41 L 410.604 119 L 389.522 127.59 L 380 146.608 L 370.478 127.59 L 349.396 119 L 370.478 110.41 Z" bx:shape="star 380 119 30.604 27.608 0.44 4 1@856741a6" style="stroke: rgb(0, 0, 0); stroke-width: 0; fill: rgb(253, 253, 253);" transform="matrix(0.99527443, 0.09710206, 0.09710206, -0.99527443, 194.57313959, 243.42127973)"/>
<animateMotion path="M 0 0 L -0.428 17.094" calcMode="linear" begin="0s" dur="5.48s" fill="freeze" repeatCount="indefinite"/>
<animateMotion path="M -2.136 16.026 L -1.496 -7.479" calcMode="linear" begin="5.47s" dur="4.67s" fill="freeze" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.08;1" begin="10.12s" dur="4.72s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
<defs>
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<ellipse cx="400" cy="450" rx="350" ry="15" fill="white" filter="url(#glow)"/>
<g transform="matrix(1, 0, 0, 1.504657, -4.23077, -282.676697)" style="filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));">
<ellipse style="fill: rgb(255, 255, 255); stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="76.229" cy="505.556" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="123.161" cy="499.145" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="164.568" cy="516.934" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="211.5" cy="510.523" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="247.902" cy="497.704" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="294.834" cy="491.293" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="322.688" cy="518.002" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="369.62" cy="511.591" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="420.978" cy="497.703" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="467.91" cy="491.292" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="509.654" cy="518.002" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="556.586" cy="511.591" rx="7.478" ry="8.547"/>
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 1; stroke-opacity: 0;" cx="595.124" cy="492.361" rx="11.752" ry="13.355"/>
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 1; stroke-opacity: 0;" cx="642.056" cy="485.95" rx="7.478" ry="8.547"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="673.115" cy="521.208" rx="11.752" ry="13.355"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 1; stroke: rgba(0, 0, 0, 0); stroke-opacity: 0;" cx="720.047" cy="514.797" rx="7.478" ry="8.547"/>
<animateMotion path="M -1.068 68.41 L 23.846 -131.744" calcMode="linear" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>
`;
// Map 2: Spotlight and Drawaria logo
const MAP_SVG_2 = `
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#000000"/>
<defs>
<filter id="floor-glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="spotlight-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<ellipse cx="400" cy="450" rx="350" ry="15" fill="white" filter="url(#floor-glow)"/>
<path d="M 300.379 0 L 500.379 0 L 549.621 433.12 L 249.621 433.12 L 300.379 0 Z" fill="white" filter="url(#spotlight-filter)" style="opacity: 0.59; fill-opacity: 0.98;">
<animate attributeName="fill-opacity" values="0.98;0.8" begin="0s" dur="2.55s" keyTimes="0; 1" repeatCount="indefinite"/>
</path>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAfU0lEQVR4nN1cB1wU17o/M7OFXZDem4iCIlUUVBRsYEGNKHbBGkuwXjXlaow3xhsTS4qJLc3YYo9diEbEggWwsHRQFBCR3mHLzJw3Z7awLIvist773vvzm2V3ds4353znnK/PAvB/BObmJvij2+u3STIcKGmGE3yZ9ellG2tzk/92v/QGAwM+dvb48i9+2rVsGvMe1zf9pYsn9JVm9hKTIg6kRASUiYxh7Jm1a/V9n/8a3hs/2EOS4SGRZHSXnTq8bJlAYIDpizaPxwWJsQv3y9J4kBbhEDIMpBhGJsVFxunrHrpCbytl0jiPUIIq4nGoAs74vgnbN6yf9p6+aPt4u1kEuBWF45BiPsnnBYOQeSWN9XUPXaE3Bg4OsHLHoIR5BwFHms1fNaNhZ/9AL2t90A4a4BqANT+2Rp1VLWvmDYbxX+qDfmegNwZC8iWGYTRLEMMg4DbEOX/xycCNhobCTm/l98IcR+J0lcZZHGCEcU1naXcW+hX2UMkrDBBADIb0Tl4wO2pMQGdIGhkJcV83iT+GUW3vxTGt7AxtfUB/DOQ4AJV8YrYxhsYnzeRvWuu23sSki+5kOTjfxKCsOxIN6oAYByTcynnRmS7rA3pjYHpeYSbEeMww5X9yUMBYdmbc5MihnjoThhQfyIodlZMDGeXBHpgBqG3iFuih652C3hj454XK2yTHSQYhI5tUoh4CQpaPfxDl9A9d6YaPGeyEkZVAuQIxVnlggMZNydJyUKyHrncKemPgocOXReWygXcZ+0J1DkOCnlEsPo6iSWGh/Wx1ocvlkL0A3ag2KXJW0hyn2rv30553tt+dhV6VyO4jNd9TmLmatKJZew0Xp5lNGucToRNRWkxASLY6BRkFUljWJS8tLe//kRJhsGvf3xdrOZEpEKkRZOgqOImBRjBiIDVaJ6IM8zBGlrL00EdEFsNBHemaoq9+dwZ6ZWBtbb005tPMRaRBvzokrDDlwXDSwbR4YO/ePcx1oQvlVrP8A4Y+G4M/Y1/c0mffdYXenf5zF+49On6r70cUbg/VDQ8umWPZv59rj7cmiAsopN1bwEyHwKv+TtLz+E53VoHJk0d0O7x30je5ycvPbf1y7hgul6O78c/YbIRQKOgUY4VCA/zvc8t3SdOsaDqVgHQqDmWpRnDT+nEfvC2tYUP7uUiz+jRTDA1aREBSxIcpCav3dKZ/Sjg52XG//XruPEleWKWMoUulcqAsw0O2b9eK6ToR9PVxdWwsWJNY+GjRX/u+n/rPubPHetvaWhroRMu3pyA7ZdMBCcNEtmOphvD4gSUr3paOQMDHM+5+/IskzYaWiYxgdebU1KFDAjvlY3M4HDBy1AD39MQPzknTHWkUHkMRHloR5ZG8WKabfB0S7NlbktFNKh+wEEoye0oqs6JSf9oZtdzbq4fd29Jj3DB+3OllX4qfjX9a92zZw3Hjg13Uv0dhKj/fng6+3k6+vj7dvJyd7QltdLp2dRBs/3L2rLiz6zaEhPSx12lwCqDA7M4di2aI8yNKyFQBG1tEjIOpSgZyYXn2ir91Iu7oaMt7enfSPeoxjyGkjLtxmW1jCsW5I8vj/lyydcTwAKe3oSkUCoGLi43A0dGu1UqOjgr3S7625JA4b3iNNL0rlGR5kqWZq24PCPTWyV7sCCwtzYwe3Vy9U5LRnaRSuRCJF8iuPo5q9YnzhtWuWBoxQOebLI+JHCzJ6iOlGWJQbWnL5Y8QNuYMK7keu35t9+7OfB0HwU26+c3XktzgJjKVzw6CVkWZhTD+3NIdOnf+NRg21N/iVebyezJRF3ZxKBcIVKw+dH9x3tDqj9dMG4thnQwgHfolZqE0oxtJK2YGKQGo+I8GLEs1hpLChUXbvno/hMMhOqxwRozoa5F1d8EFaZq5fNtoHIh2buKk253rvZb7Dg9wrsqZk06l8lRjaZF58l3WnDu2gmHeIL3cEDHl9z1zlkoy3Bh5qDFIdMNUXC5sM72kx3+f/VnXrjac19HDcQwsXDDGozJzagaSO9qYpzxyEyc/1ssgFOjj52GanzL/JplqACnNCUO7ijlfIorMWDB/vL8u9LUOnCQpetHKP/bAnfPqZg41282RPDRCQVLkWbSsbgg4ZCZ3Yt+yjV5/zLQNn3F8dUFhiVgbvaVLwgdtX0Od4DSesccZ3xhqu4hxz2iGdl2zSZa2r1GOZVCQv8WggW4ukKzvC2Ez42hzqzHCuOCx6GXx49Ts4sLCl5Rmu8FB3YId+bHBGOvRKIxyRbyIwixhoXRy/KyYhJn3kzLKOsCvtwPSkiuXhQ6XFM4uJBmtrL6VVVuakSWyNGv6Rty6zczKbUPj35/PiRDnDqxFQltzBajTQjJJJjKjd2yZNkO9vZeXh8HSxSMnPn8Uc1b6ZFi5JKMrjZQayYgRUmQMZen2UJYbWF+ZsyDl972zP5nwXoC9gZq6mjV9uJ8424fN5tGpHHl/RYZQ8mR09bnjH64xMzMW6J1x6mBMJuDRq6thYeb63dIMD5oSyTtBq7YBB6LOMR0qNTUxNFRvu/nz6HHirH6NNMM8qNamDRMVGrAhd8ILZsupEkXrP5kWWv9sgUiaZkMh00pplMsVD65SbqrtyNiJjCKoSYj9eAuj5Fg24oz8+G3fqnniguiXkryhUFo4L//SqWX/7t/fy4n57p3yrg1mzwodXPh4/nVZugvJCmRF59HKkuQObDI1EaoGH7N4QoA0J6iOUsx6ixJqLcQRY9E10kxP2bpPpkxDbQP6eVo8jF/xG6PIKLRyyTScvU6ThjotdUWEvB5JUUzWjGmh3d81T7Qaru0hNS2/8Exc+bH8Kt8k197DBSamppY0BAY04SjNqxu/e8+vNy8x8hMGDfRx+HmzySUhedMWyU5VLE8RDEUSCIPy2YcYF8iMhlf9dNlr0acbjxx7f36Ez4HtLuedDQ6PImAlxgYjoIKGor3SzGhrbsiFNI6RAG9+ZBke5hZZWOl0TZT+vLTTnGoHnTJ4GC/CclCQp2NFZW1z/PXUvPLyCtrAgEfcvjj7pJ/1kYk4kLGRGG2gARquIXhJTrm1bvvLxUePX8laumTCoG1rqFNEfawtAajX9o6dhDd0n2Ymqdlg7IuZayuHnr9w62knhtou9FY9oMTnn06LXDf97nGCKiYUi6YNWA0IuoDshpknx03/c3FB4avq5TGT+m1fXRvHabxpIV+1sNX1mOI/hDxA44ykwI2YD2KA0zXMdxJ5IBzTSDwxfzTggefN0fHh0fFjc3OfarUSOoO32sJvgq2tFe/Yjz1P8sV3rTEtzJOzhTFXgAF42jz/wugpJ6MKi0rrJ0eG+ez9DL/Mbbpmjcwc9eA9ez0kAMnrDaDlguuXH/b55WCs1b/++Euw9fxti98FdlPTXNz8LWjxE0dmvQGgti4xNqlAgy784m5NxMCn1xIy9Gpj6h1f/zt6rkxk3q6RLNeUPNhQ9I9Uf38PVmOHjuhvV50TLSJFXFYTt76eCyXZfZuTr68+MHv2OB+hUNDujjn425qVDVmDqjRpKJWctHBOuqlpF1577f/rQNVZ5dkL72gbQIuGZJz1J6PKIyYMcUdtkMeTenv5fhSm0nSvUPVVTV5M4vSpI/xNTU071Ic1q6cMqc8IqZKbWq19eWmmOxwbPlD39Go70JshNCd6rJcxfasvppYVVgdbCkSYw2PXXT+6cPF2LjoXs3jcsF7m8bMIduspr0Nb3BCkVsw4HRh+KezYiWsPa2o6VsGx45uTN7YetpxDcbrKkPRT9oMVBGQxCApwCuzkMNvgtT7s22DiWOdwDhnL06405Cqhnvte+qYtF09RFIVcM86qedYbOLLLXHVrBF1bx596f+qCS/Pzn71o6uPXyzhqindkyACLcBNjjvCR6GXRizLDlPjbxWcuXYpvk5X7eseFS3PHjyjoZvRclT6Qm0JS0NMF+r7NmPz8etk6O5nbDAnxdoOyKmtAVguEfMwlNNTfpaKiuXTPgaxvWjFw5MhBfIEB7svBmuzDR/V1glAqBBiH6YBQfP7SnWeAEDzOyXnxMjv7Gal5s+42FaMwxmzRDsj6nbuP1G/Ozy+qR2diPgjv5WCYGIzLWkrWEGjcHOw+0riVYV5d+JgBrsd/cLti0HzBFYeNrAXpGsCoBUywOGZq2Bef9Zw0d9s3f/6lfiepVEbT0PgFM2E9VNsLpVaZY0xYr27tMQvJ17CwAV093U2HDexDBAd6gyAj4oUdF5YKcTqbA5gJYPYQmyEEMAG42uKg75apQziGhkLiozWRw5dGOawxwVJCoDhbgDGmAQ4yADI2ALulcBAdxAeQYwEwg96VlZKp8bsOFR08euJu3NOnz8hu3Ry6WBgV9sKgdpsPLb8GLLDk599vxSpPBfk7jCOkl3GgaQxzHRrvJBU/RG/3f+O737Dxt+5ATTMj+xCnGwCn8YztF4sDTtFw2pgd3x5vFQKDmFKQqNFGFWNYRSu/F4X2Q4L72k2b2HPWvEjDaaDudj9clsQwW4KMSLldDlqqctRL62jElfrLPThnj8z7OsQtbhXRXEDgyhZscRCmdm+04JjVRTYA0FhgYQ3/mrJhlv2UeVNmXB4z/dh0CzOBoxFRbAFl8nYoh6venpl/kJRjdryw8GW98hzdnBuAPAYNPjMvtKy2tkrC3rfxoQ/Go9vMh5I0V/zQ6OP3vb87dNh8UFm5vI2cRL2RupHNJlbR0KgmVS6Fx+Pi+354f+6s0OdbQMNZa6KyUWFGtvSdzUVj2s11+RQRAA9xj13DoeTMU6VetUVkEXX2DjRb/8ehi4ET5+fwxfOGjgod7uONU7UqE0GzPTJ87zyiW62SoYPdbbSpG5wsNQ0d5tWHHQDPuUa7SlLehwQm4Kr/9KktxUuMLco3MxTbYS15fbWOSFXBjokTgj1mhtz/kWj825rAGuVMajNsBSO1HBQwAtVExD2c8UUpZV2fvJpAzQOAyoIeDLT84SxZVi1gXMR1ytIUMwWwWTvjER2uk/jm7exWma6k5IxKzavZz1QlmDDCcC4qVM944X4MQi5Qxu/aDg8DBFWODRns7KdioI2Jo4mgykLdC4KKYUPQsuItLa24GKSAUuxgykN952EttWaQlX5CION5y2q4cxJPP4xe5z/iz3D8wN9DFsqMQisZvSgngSlnDirZpGJkC2MZdYHZg/zmOae/2xV3efBAb3sA2yoQqNgSMsymvKKyulUtXzNlWYm2NtSYMOQ5eNvdivjj4Mdzvth67XuK70O19AdoXI96yAh2SqzyqOZFDxmCywoM1FnOTjy7CLiqc3t/Opm675L7P2W83lK0gFRlc1DegvV+oBliGEUZT89PeTXnyPr9wQuj1pu7dg08PmT63F1bil9WVHMWL/9p/+nzg/6cFjl3iqdz1Th351p/Q06xBUZWM1tSQrCsZ9UZj4RcC0m91KEs9WmXO/dEgt/Xb9zKpv8gXYaxs6Uh+zDFZDRKjGrS05+2EmYvKo3P08B4HgerUbseDYQGHNlT7livo78Qi0O3QSNZIah82E2bIEL0KYYpBS8lrGxF8b1gf2IUQddr3w04X9UHiqLh8g9Pfl9avej65NEhH9qZFA5C5DCuRWlJlXFZ0qOqh83Q9tG1+MdpV66cKWxqampLDyjswCtXE2uZ4xfm7S8oa+bl1d1SYGBtGxba345hC5eZOfrc+fgiDCdKUlKulzc0NLZiBmRVO6Y1vCQPQ7VN4J0+++BGzKQB5aAhzqq1vsTk1a3kUzzcs+RjUM1nJQymuKjlHgo/meNM30l6nobO9OrpbOPlnB+KNbWsVnn4TMlAXpuK1s1f/iTa/CWI1sqdDqCNIV1RUS1LSEgpYd6WxMYlP+oIEQyTWwfqWw1TSRUGdH2bNnfuimoePA08EmBNrMJR9ZVC+6kUGUQmCzPrsEnOBKy1TFYa5414/4dxf51gPZsvPh0XhTUdMtcUC5DdCmhWbJvbdKST0Isrl5ZRUQEwpXLB2sTpTIRNjgMG+LZKrDPeCPztaNFBitddwi4ujdXb5jNoHUxlaWCMDk7usr++vlE2KMjPJqzP89U4aGipClNVh8lL4q7eLMzUx3jVoRcG5hdUVdBY6xIa9VWAS/ONXbpaemu2O3oiQVTUEHwLqttdatAmx+RKjTWmQA0W9mjbdwkH0fnN6wevE8gS7DUDuOwKBOj6LuDOw8b7uo2wfeiFgS9ekTk0bkaq911pULPvqRJi6fyBEzTbNTQ0Ub+eEm+mOD2lyi2sDnWlpKKFmMeck3H9a3bsx5enPBA1bP1y/tggl8tL5fZc6yEp6xOBoV/V6bPJV/QxXnXohYH3k3OKSKJ7LdSICCuBTA03qwdTrazMjDS/+2HX6Zt3ngYdQDYWbKNqsVbGCOIh48gBktu/bu9F/6Vf7ziaGDVzRI+lkQU/cxlnAOVZWluMCkXDaOq8sr7nnheUNOhjvOrQS0S6vLy6aV708BBzTqq7uiukvqIMiAoza9f3SmKvZiYzJoTqPOP8g8fpjTdDRoT7mwuKXRnTCWvxIpChh8u3LcZjGOdEFTaF39l+2Dz6s89/jYueNdpz70bjcwaSqy7KZ1PaSk7GRuD7N/3zm5oFKQ9yygjG5/L16WFvY2NibWdrjUlkpETcLGnf3XkD9JYT2fP9/PkLh53+FQf1bZSIfPthQCoYVLN4szD0wMG4B5rthUID/qYNM0f79gShfX2sehgJSUN2yeFChsHFRXXNprnHzmbHHztx465YLCEXLxw34KtV8KRQHOeIsR5GiwZXuzEgMWNwsyBqy6iJe9ajjGHi359+GuCcsBaQpTzAtW8sl/hmbtv37NuLsRkXnzzJbxNl+o+hTx8P84bssFJlQZLW5HkqBzY+nZkzY/rI15bIdelihJmaGqsOFDVRx6Ffly+R5AY1yHPOrfPDyrwxOlCaoCZ3ocjdzZkVHeHhwd3EWX6kst5HnmIgoCTdkSrLiLm/ZNGEYW87br0llV69qmgOGDSmi5t1+hCcjd5oeCWKF44022L8ON8pTaBXSnJKbhFNt909UqkUMKtMddA0DQiCwJYsmuR/bF/ob4OcT6ziyp6wwQvNAIj6HRv5Y0oWrCsLv3X7MbJrgYebWcDU4flzCDZu2RJpwekmTAgfOIwOImaFhE62SkmtuFlRUdNecLMVdN7C/fv7dxkQ0K03pOrscp7UpF27/uipRy9Xi5QLvimcujMucnnUljly95jRojwPiahk6KHDZwp3HT+ZmMVMgKTNxQzc3JxNIyMC/SYMN17Yt1vqREIqErBBALWwWWsXEvlFjB9rOPbV6Hm5IxJuZqpsP2+v7o7Jp2zTudL7JuwEK3x1JSORxCAxQ1AOJt3+YlfFor37LmotdFLHWzMwMMDTZO2ykEXjgmtiOM33XTCqhunswIqIDyp9/rpyr+TLTdHhqycnnePJnnA088LKZLiy3zTGBRTXVdIA+uTmvzR+cD428zmzHgqYAZmHDu/jLMCLuvm6SfthzQ/scKoUQ7IOf22XEfP4oJbzXv6GH6jpu/ecSta84rcfl0+aOSZvF9GQYEtgsjb9A6wmx4GUH1Tx3QmHtZu2nDrU3CxpG5R8Wwba2lriyxaPmrBiluQrA8k1dwLWy0suGApS3B58uLff4J0/nknk83nYtQurtgfa/f4Pgq7EcCXjWgVYNaLF7En0mcN6DCx30Spj6xdoVVhYc9W1jECRb8Ys4TNx5IWYj5OX/B2fVKJtHCjgED5moOu3G/13dhWeHUPQL3GsVdmeHMhcoghnWU7tlF8nzz36YW5ugVYTqEMMtLOzEsafX/BLd+GxqQT5gmAHplz2zCEznpUfFp3rd/PWPdbpNTMz5l84OvOHAIdTC7noQel2oroq3sHXG9Ga5zVBMSuZFA6uv54euH7e4n17Skur3qhNbWwsuFs2zZg1K6x4K1F/2YotQ2k1yZgiFmgIGwWTkpZ8Wjz36PGr2Zp03qhEAvp52KVcGZdgTe0L5dBVqNhUwRAUvmKWOq+3eN9Fl8X7fjqfqmzDCH7qzr2qv/0HR5rbmxb5Y3Q9DhWxLU2eaJdjLWhzDlMEKdj4AKpYcJfm1EQeWfTJy4h/bT5yrbGxud3tpg503bmLSY8v38L3Dx45v4eZYVUPjK4iUDhNeRv5nWQYT5bmOG6U46xayjsxKTm3sMMMHBk2wPnib77XhA0HPJWaS+WcI/+C6y49cjNo6Yf/PPoH0pzqqKiqJs9cyopz6BVZ6enGC8ZkpXysVdlGawZpCya0F+FmVxzPozmrfPSNDT8Sc2PWnPghJ/e5Tl5GSUl5088H7pyoJAckBgYF9+CBEicMNmEtDJQzEyeLBCXVDtILV55dUm/fLgPt7W0E5w8OP2pBHQ4kUPJHSYl1qTjMlgmp2nup3/sfrjt0uKGhUSsNZiXCsxceJFWTLpe8+oS5GnGrXDBYhyuj3cqJUM98aYM8gEAwMskSUIbDXl5M8vn9q184K9ZsuLAtOSVHZQqhRJG3l3sXiqappqaOrUQE1J6h8+zQ6edHgFForpt7114CvMwKFS2prmFkYmqB56XzcTkJHSL6/faFU6VpdrS6UcxWoqY70mU5q67PmjGyd0c7iGBra0VsWBc9LPnq/NOSvOH10jRrSIkM2PoX1dMAiop5SsRjjG4BlIksoSzLX1KbOz3r6pm5+z9ZGzkhJDhQa53HmNH97ZOvzL0syRv5qiR1Wsa6tRFT36Z/6vD07NFl2+ZJC0sfj3kmFZlBZHhL0rvRq1dO76t5bbuyfduWhRNXjL9ymtFSGHLSScIGNPNGPdz1R9P273fHni4rq5K21/Z1QPUwbj2czCInBvb38zQZACVFtoCstQofM8Ty0uX4CpwwkkKOWQHGsy+NvZqenl9Qm/rgQU5VXV3ja+/3JGnRFReDg2E4lLGanCTsqfOPxm+cEvXjv3XpJ4Kvj7vFyg9CZg70kYXfSJJdX/7RiW0yGdkxvxk9MPjrvlUTy5/t/vXAnjlrlyyaGGBpaaaz4Y3MmzlRIwNOHVm5Zmx4YFdd6WhDRMRwY0mWP6XpPkoyukvXfTRRtwe9/zeBYR5x++91mySZXmIZszXFBVH53bs76a3ULCJimLEkpx8FRXibsrbarNHPvL1dLfV1r/8Kft01Z4U03ZlWPpsmTbOHs6NH+72pHXr0dtGCcQHBwX1eG3wwMRGC8oyoVDq1dSCDZsvkDGFi7NKdjILRW+RJHe+8zv8fKycOjhqesh2ni1XxJpSitrQwEr6p7Z6dixbtXJ17J+4Xh+RN//qgjQBXora2Cdx8ZHKYAjzNKl/mXmLQz/X+/JGhfd84YbrgnTJw2LC+XT77wHAvR5rDldtLkE3K0xwrmP+sKud1bS0tzbHR/V8t55FPOHzxFZtFk8Q/WlqYtrvtf/vj8Sma7yFhC4ugwkBnzuPMe444zfCz1f4rOvUkejt4pwz8YP6AZUbSC55yn1bh0qIlIvTOP3uubW2fOvx8XX2NqPtuyKJFdqgFER8wc0ZIuwWSV67ef5750vuyMi3QYqCjVxL4dRVN8+jlbKOfkbXgnTFw1Mggm5F982JQmrGlSEde0XRH1CXhTe1Hj+gdiNFl8kgqs2pxspQI8jdt17ZD5sXx2KbdFOFMKY2zljwyczQ9FqxdNnBhJ4fVBu+MgaEh1lGG5D3HlpI5BPSLQzb0n7ElP7+pfU9X3AGDYtUzDiiU5e8BvFEtdntt9v4cd6OEHHmNVg5LmYxXJOmnhzUvMTEx0uuzce+EgX5+nkZLpgmW4KBR7qqpBDsG8ip8Hhw+mtAmJ6KJXt2NvDFItzCfIeJiJ7EzMOBx22tTU1MnW/9VziaS5yWGagl+TFkX0hBvv3njDN1+UKIdvBMGhgxy8+NLE7srfzARKpxdCjOFlxONf6yurn9juAmSZQIA1N1ZFC6utkTFcq9rd/TEjTspBSE/00Bej4Mp/Hf0jwD1YNpocjHjEOht3HpnIOrwpNHms3DyldpWg2wyvIIekf71t7GnO0SHqtN4KATtx8ZW9YvagEpG3l95dl0dNyKLhi0UWK3MfDaF1/otev+9kLcY0muhdwYyMoYb5EMGodBVCxgJhjtQv5/nbKyoqNEeutEEhI6tg4eIcR3LgWVnFzRs3kfOIwWBta20MvqFTeoVMXey1YKOjebN0DsDe/Z0sQGSzN7qz4tAwAU5lSPObvry9IUOE4Ly+CNUk58AM6DbJn+145vvjt/f9ofzchm3p0SuR5QZGRrAJtHAtxnT66B3BvZyt3PApOUcxUOtbJ1/s8Go4sUfJ33Y3CzueOIa46g0MAt2AQrRY/kdjgJ9tunE4f1X/VbKeD1lrGZmi5L4oEraW28/bPEOlIiyLFj+QhoMbtqwizPt7r30Z29Hhl/UKtqGNCnXsVnuW3QMNE3DlR+e+GnHcc/5lNGEKspgAHgijjk0dd6xVW/Vl/8kevbsZtKQPycHBWMb8ibnM77wUF3o5N1fcB5VFrREVjjw6qkpx3Ttl7e3OxERMey1GlwX6O1RLyVycp7Vhs0yHDwlMrz3qdPJqagSVRc6TZR9NiOxxstzyKjKlI/q+3T+ybu0tFwKHbq2bw96ZyDC3bvp5cxxozM0Tl/Mfth7hhEkYC3rh9AcZ1n+C5ikrz7+v4efXy+7xuzhNRT7s1BcmJ8y54axsZHet2Bn8R/+3Y+O4/Hj7JKn9ZHf0bgVkAkHVx+5JPiorq6hQwU//0n8D0CboKfGrhAwAAAAAElFTkSuQmCC" width="80" height="80" x="358.014" y="209.925" style="" transform="matrix(0.807069, 0, 0, 1.144699, 79.072182, -42.951752)">
<title>drawaria-logo</title>
</image>
</svg>
`;
// Map 3: Floor and spotlight rays (final map)
const MAP_SVG_3 = `
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#111111"/>
<g transform="matrix(1.187943, 0, 0, 1.151757, 386.645294, 0.195094)" opacity="0.4" filter="url(#ray-blur)" style="stroke-width: 1.35466; vector-effect: non-scaling-stroke;">
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(-40)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(-30)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(-20)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(-10)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(0)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(10)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(20)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(30)"/>
<rect x="-2" y="0" width="4" height="400" fill="white" transform="rotate(40)"/>
<animate attributeName="opacity" values="0.4;0.45" begin="0s" dur="2s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
<defs>
<filter id="spotlight-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="ray-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<ellipse cx="403.205" cy="475.427" rx="344.957" ry="22.521" fill="white" filter="url(#spotlight-blur)" style=""/>
<ellipse cx="400" cy="480" rx="350" ry="20" fill="white" opacity="0.2" filter="url(#spotlight-blur)"/>
<rect y="442.521" width="1360" height="57.479" fill="black" opacity="0.6" style=""/>
</svg>
`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3];
// Cube Fairy SVG
const CUBE_FAIRY_SVG_CONTENT = `
<?xml version="1.0" encoding="utf-8"?>
<svg height="900" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" width="900" xmlns="http://www.w3.org/2000/svg">
<title/>
<g id="Composition_445b829fca0b4132b3d29b0a3ad1fc42">
<g id="Layer_624346cd05d646f7a3f94e5fac2a1f6e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_62250bd6ab7a4da19142a88de5b1f690" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_289871e692ec49548e910714011b29d5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_605d6403a529440bad1ca6279a6fbffb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0faf33997edd4f84a47e7fc145bdca2a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0d1afe9409b44391bc4da60c4c40410a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_f3b30ec9f300423eb47305caf9da22b9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_578939f9ef5948a99969d70000425c72" opacity="1">
<g id="Group_3546f761a4bc4a4fa3f2648a6ec0dab9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4931839c20154578afe4254fa9a3f272" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_57e8a96570064a13b5821bf70e0482cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d263dd0743449e1bbed711b422bece5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_60f642c4c27c4987866e82f8de63a28d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b7876e756884ac28a05d4830f8e2767" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd0ceb27508e4ef7b40ed67c059ec48a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d0f537ddf8c2492592085fc466e5c589" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0910e13e62a3425ca744f9366b75b1ff" opacity="1" transform="matrix(-0.177927, 0.984044, -0.984044, -0.177927, 232.909, 58.6668)">
<g id="Group_70b6aa5054fa418bb18a8a530275ab8a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6aad8811b5a34308b46c779638ca5883" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ada09a9e3957429ea8ad2b2e4863a825" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_afe42cc27815441b9b1b80fb9c05599f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_407c2d8105634716b3cf87b6c1d19586" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_92c3038cb3ce4b7d87316d9bbc969208" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_37337e3c3da24a1c9cebe7ba9dfb7877" opacity="1" transform="matrix(0.177927, 0.984044, -0.984044, 0.177927, 444.508, -116.305)">
<g id="Group_ca67085633b44936bad142cac42e003f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cce31530b92141fcafa11267756a6346" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ad2c1fe7d3c446fd8d11f2ed1e2887dc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_9f262dc44b3e491b82062f66875c4d3f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4bec6e9f6bfc45dfbcb9d017286e41c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2a4fd8529faa4ee8bbcfe77c5f352e23" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(416.363 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(-1.04032 1)">
<g transform="translate(0 0)">
<g id="Group_af8442450fe743d0881a014d1638901a" opacity="1">
<g id="Group_5314e37a1b974609bbf566cf63070c37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6e702614cd9042ba81102e880afef873" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e0a2a5017a714cb9b03fea6ce45f81dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_12768e2885b945e0918396d7b18ca741" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c2ada61ce854298b97d297e069de3df" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b8b9b2d35195470bb581bac9ced98a15" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_565e2f10da9948ed8f59e069558ab6b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_072c2b9ab3b74bb0b0cf52af0644fc16" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_eadcc05ee44f4a9ea6d3dbd958fd8a18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe4af599a66a4a49a0281a0f413b480d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d5b8a87626d046c891143992f8dbeb35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7bf696f18809465a934fe9d1eda181ba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f353b22e446b483ebce3366134bca565" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_efaf09ce5ac64c13b78f1960bd9ee744" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_0aeb68a87203407e9d20d3c488ae7464" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
<g id="Group_34668add9f7d408f8551b29402fd266e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd3b65c846714f1d9791a4f6c0bb0424" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_93132806e00e4c7198417ffc4cb6212b" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.856 -0.816 C 1.856 -0.816 1.631 16.315 1.631 16.315 C 1.631 16.315 1.937 -10.299 1.937 -10.299 C 1.937 -10.299 1.897 -6.9 1.897 -6.9 C 1.897 -6.9 1.651 5.975 1.651 5.975" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -5.24651)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_d67fd13048d54b26a92523e6fe67bb13" opacity="1">
<g id="Group_21f50d7af90f499c9dc2b7bc415d97bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_74e397143f07412cbce0eebd64898cde" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a3762da37fe6420f991b60b055ca6dfe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3f990a1c9e7438294c6bc3daff3c536" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3333000d975344ceac3d127aea89d5b6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c488e718a0c4663931da30fb2691cee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c754bc8df1954ac4a916915b9cc4b7d6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_29b60323f74b47a387fd64cb8590ebcd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a48dab89b7334706a2c54982808c8197" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7f63df9daa78450cb4ac1f6b6774ce7d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3530e59116a74432806fb1ba123a3285" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_27d16373aea74ab1b8f2809567766dc3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_94103e30fa964c94bc4a13e720e2a802" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_abb249dbca604c519c8004252594ad84" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_525022d7e07f41e2a1141072136b57ed" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_a0f94389490e42eca766562e07da8970" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3023467dd9734fba8fd5873fe124f4c1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fd5a78335da84dfd855583a22a71f17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_1120be8b5a8d4514aab460416f20c7e2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
<g id="Group_6623dd2ea3b94f15b55a98f52c7a49e0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9ae687bd935a4795aebfe24827c12131" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_a7f4031c54bf428d87ad39b9c43447ea" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_58f02105999346ffa661722acce66b32" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9271c5f202714724b85b4c7b54a80324" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1e37efe1f748432496121f11c575dfc8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f6ef2aa16b114ecab82bd726f6138676" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
<g id="Group_2a742b4c68b843d99c5ba6e5a3c9120d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779268157858473cadd4d6dad7b87a2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2fab7e398ab54dabbf7f731d97e6dc87" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_c152098ce4ea4170bb3d0561a3aa30a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd47e2b04ce5435a8e472817cb2cf756" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_22c50ae32992475c8e98eea626334e24" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_2d0478506d91449187b26e68f60f2960" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
<g id="Group_4dc75f562f0f44afb654dc039c587cba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b1f10a474051419692ff940fee23dd2c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_cf5303a5bb574f50afa3825adad9cafa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
</g>
<g id="Group_01dc3c3d42744ca4ba0d85637dbe8376" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3c61d0bbc86f4c64af10fe69a878df02" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a7c005ccc54d4d84a4fbdbfb4caa5803" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_082a86ce7eb844519e2202dc875e7613" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
<g id="Group_a35aaf40939746b3aa59203b775f279a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6fcc44c99614402699246237c321e4a1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6942bc714e494dd69af43173bdb0a952" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.161111; 0.355556; 0.666667" path="M 0,-5.24651 C 0,-5.24651 0,4.19721 0,4.19721 0,4.19721 0,-2.0986 0,-2.0986 0,-2.0986 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_fea3ae62132741188596da54dce89ef2" opacity="1">
<g id="Group_ae46728d8ede4f0891f79e5ae1d9fe60" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_895fdefe1d8d4898baed53e0e0effc14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_946f9b61e52749e1955b1e98946ab893" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f9905f6dfa72444f96e86e9ed95f4f63" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_df22397efc3349b68397472c6af5f7f2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94e16cb3c3604988be33b3f048a4edb3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3cebc3bf87c46bd9b23f509465c9671" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_848f66f0333b4f80adb1dcf2184da5c3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_16e607232e40425285f33a660febf23d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b0c789323dd4d868a6ca258481c3692" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5c975c22c5be43908dcd08317c9c6a5b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_52b9e3ff5c0744ffaba9129802aeac78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9eb061b8adb146cf82edbccf56d19095" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_802dcfe8e719448794dd64699c5ddb52" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_fc624ae2c6a14ca0af745e2024110e37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_bbb436121f1c4edb9d0cbdbb57ab5975" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_96937179d9c64f739c28e922ad427e0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_fc7db8580e784591a9d17af18d39e642" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.326 -0.551 C 1.326 -0.551 1.631 16.315 1.631 16.315 C 1.631 16.315 1.406 -10.564 1.406 -10.564 C 1.406 -10.564 1.101 -6.37 1.101 -6.37 C 1.101 -6.37 1.386 5.71 1.386 5.71" repeatCount="indefinite"/>
</g>
<g id="Group_31139b44f4a54ed0b254b48ed355b107" opacity="1" transform="matrix(1, 0, 0, 0.950946, 0.990442, 10.583)">
<g id="Group_085f214f43ca45db9264a50cca82398e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_179563955cc0441aa13c0b61e4d4cbdb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c411480c5474c8cbf7f9e2d3412d17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_428d0a047dd04673a092df58788dd44e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f8fea14bc733433084925f346e69ec31" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4310ff126a45430dbf89f8459cc6103e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4c834c0193aa4a108b7d31be1504e976" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c221ce162d44051955593b04e951f35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ed41a6e8573c457080d161ed4f4751bd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d9b96792d4bf4db9b8d041636aaa9a0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3019e453bde64354b02b5acbd9811f74" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_912aeef445ee4df2900c1962603c2e6a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
<g id="Group_b70cd452dde64b03a53a475ec1d40823" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_07d616537785432fb5953807910067e1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9198d846b8044b20988871940c043045" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="Group_07bf950fb5b744c08da1b602acce90f0" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 103.462, 0.097262)">
<g id="Group_773ac49d227d47aca3363b5015667a78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_679d8fb26cd04228ae1dccf28c8d6003" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_bd3d28adbd8547dcac86548851a4f98d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
<g id="Group_acc78697a70d4a40a8b549253bfbb45a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b11e86ddd07d437f90a0c5ec7abbfda5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ed4ad324e01742af9949383f6b8445f4" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_257af3be2db5451a98050fb0d6feaf39" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 161.795, -0.014585)">
<g id="Group_25ecec9c5ecc445c823a47a76d6224c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94ba71a35feb4cda85d74446fd7116cd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_af6483015cc9479790b8c22131f2ea72" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_9bb47d7862b54caa93b83c41537c9635" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d921cba171054c84a3f1808b8e459fe7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2ea52e9465d54c08a559910df8d5abfa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_b16201a6547b45e99fd4c4d8b5ee9e56" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 135.47, 0.061733)">
<g id="Group_bf83fc0b3341442984cd6cce2dcecd19" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3d6e18a5df041aca29a49d721224e64" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_56798b44691145f8a59f513c48ac8413" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_409836a08cb5459aa9d0d0f643fd5c12" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c92d7d97dcb44812875c1b846fa1aca4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_da13152381f2499eb2f8f2e7bdbf0686" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_cc623433226b40ddaef69231521dab81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7fd751bd13754d8f8cdb763d0491408a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_437c13ca93864f71b80723f533099a8d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#fee8d2" fill-opacity="1" id="Fill_937828450c04405cb5b24002364ceada" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f3fe49167d6f40448822a68c2beee7a8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b4db3b4ce592487facef052e458c8c0b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_afee68700f384c14957243cd80d4c469" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_55e95fb7ee614601b8d9d6bc77ecc4aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3f93614f02324a56858a83b53f20ec18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3b8018d9e2545cc9c493fdfe7c6fe81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_66757b8e97d242d9bb17f261a9dc6a9c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_96d7c61b65ea4e9e82eebc58d985b225" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a5c951f1776548a5b3ee96d6bf98f312" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_75459dbecf6e461da0939c2b91942f35" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_1cc2d6febaa64442ad9f57f6d2316ae8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d932349903a04ba2a57176818cb9c5cb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e8ade258977946b3a941a0279fe49ff2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_fcd55e49f8f543b485fe53795012c916" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f29853f1642e466b8786f5df0921b7c6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0d04e2332d414ec98d3789f06b274a2e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c8b1b874176d440ebe70a0b4b29ddb2f" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_d712d75c75a546cc8cf8db4ff449423e" opacity="1" transform="matrix(-1, 0, 0, -1, 474.685, 531.463)">
<g id="Group_1c294b6e5c184912a4e38108286a79a9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2cb5d67cf44b471f96f1ed2cd1e15bdf" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_206e73005765431584268d3c903abd1d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_904216b925194138a71af571dd411cdc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6195333e77e3445a98657d886705e38d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_909d034755aa457996c394978b26a020" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_c47d0f843ffe43aaa964d3ba067fd74d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe713c29db1b4f4ab5bdc86700a247be" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_051bcc3c9a8145b7b064c28b06c3ad13" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_e352b4de5a2e4474b2252585fda10ef6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_656efa98c79c4305b3ead9d5d74df8a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7594c2aad9954880b586ce0eef9433fe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_4cb973583a15459299f98566bc1358fe" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_aca6ca588cc64afdbfbd62a7268426e3" opacity="1">
<g id="Group_ed2913ea75cb48e4b41ee3e0ee7b6c85" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3651a3aa951404a8fb7390f69f687db" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_59a87ad457764c49bd6a00f98764c656" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779954feb6df4fb68620f8c4ff42cc3e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_11f057441cd74c6dbabf36a6ec3c12bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c4aebfc2b014b59a0add11371e215aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e1f194d04ca4432d9664c27ab790b148" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f4a36f8fbc174fee9445738549544d46" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ce197513a8cc494c93869e1d6299062b" opacity="1" transform="matrix(0.392565, 0.919724, -0.919724, 0.392565, 31.2082, 39.0615)">
<g id="Group_e8350cd87e87432c991a81dca1493f5e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_66a432833f7444dca55cb2a8bebeb323" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_93cb0c00a0df448f9c457787b18ccd2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_da683ce285dc443f8fe408e0f484d72b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3409296c0f7452d97449901f46c19f1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_1fd6de85a5c14f219ea3f54d0822ae32" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_241374713016444fa46e7d5b10ad6e9c" opacity="1" transform="matrix(-0.392565, 0.919724, -0.919724, -0.392565, 449.288, -81.2542)">
<g id="Group_7b4884754f61449b94eae24ac6025192" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e7f3fb64be42403387eb602d3da14e34" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_f16dd6039b214f8983ce4ca7911dd9c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_6600cd45f7cd4857956cfde6336b2322" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f99e58d12d27428c97965400365bc683" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ae14d61fcfda4f7e962eb7abc1ca43a8" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
<g transform="translate(-5.68434e-14 1.71918)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_c1da6565ad7a44b7937e52ece78e73a7" opacity="1">
<g id="Group_e05da2ce9e2141d58669cc9dff991497" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_bba8dfa44cc04d8190f0d00939be16ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c531c675587458394e5098b286b4a51" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_caf5454d5ae04e8780788490d52a1e95" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1b27ef5587dd4de197f5f350d043422c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_781b8505367c42a3857f234570eace38" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e94c594dd0354662a84f034fae37aac7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_c97b2af9c9c34f0ebe788810caf4e9ab" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_5f715f838b3944b7a3da530f38b50a25" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1508c9dbd6fa46aaa56d30844c6c486d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_57410754afa04a8397fcb572b6132546" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_69526d6ad2644b0582714865bd660c90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fee0271290da441f8626210b71d6b96a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c731d322ff364143b71a5a798af8bdf7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_f43b0980669249a6966233b37cf3c8cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_29c1c68302a045ab99b09b0aa9b09afc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e6b7536fa3cb48a5b6df62a0c28f2417" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9257e3ac72b04b10b821c75be0d620ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_6d802c88b86f43a4bccbe3ed0399f3b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_645f362498b84c9db32ee5332fba1042" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e919f5e73d4b410cb87d940368242035" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_4e1603b8462841f1a51c6eb3b893da90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_ae12bc5f84564d398f5479e2ee744666" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_671c90609d414f64bc4a9dda4bdc5fee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_51fe2c4a88e14a3983a44bbf31489932" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_988df225ba86472b95857e71cc009bb0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6eb2bf7373eb491295094e25c051f329" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c94c0958917c4d249b046d44ff9d76ab" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_036c24f9d8214f3cbce54c0f2b5511a7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7ed8b3a36a9245718e21c6c601dd18f7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f6128c42fef74189a7adb193b8531b0d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_38c19d56776d42d39e8da1ee55141f47" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_0b299d727c594def8ff19d475edfa090" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_413d579327514781a85f892f0fd029ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_48d91b1135ef4bcc9e3e2e87f76d31b6" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_94b3b2d1ecc54bcb83bd2af4287e7335" opacity="1" transform="matrix(0.997575, -0.069598, 0.069598, 0.997575, -10.3555, 15.7956)">
<g id="Group_3e6cf58a22df41aeaecab2dffde923dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dbe4deef0d064ae886720333f6afbd29" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_d2238b0204ca4073a7abe17a764a293d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
<g id="Group_5881f2eb8f67401da829c500b2b0bef2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_419ec196b3cd4d43922ded9c4369feca" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_24722db5bec74d26b6f083f6271deeb5" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
</g>
<g id="Group_be0995bd67f34e859e3987fb53d1f410" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cbd635acea7e4bbbbfc25f27e4b617c9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3bb3174017554936a6e30ea1d6a28eba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f93e3b5ff8514aa4aec3a042071413a2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_ad973a3955f147cd867bdfbaf4c01185" opacity="1" transform="matrix(-0.997575, -0.0695981, -0.0695981, 0.997575, 420.995, 16.5246)">
<g id="Group_828b524ee6c943179d1481ec334f9b88" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_acc6c697956f4ad3bfb057ec0b803172" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_09d00d4c2fa8494b897f5622bf04a927" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
<g id="Group_2cba7d963f4f42fa80de15bd729b1ef4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dcfb0bad6ae440b7bfaff639c94c46ee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f8d0d55c1cf74b408b1ef2d6283329cc" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
</g>
<g id="Group_721b904a63554f419a7989a670d34dc0" opacity="1" transform="matrix(0.980581, 0.196116, -0.196116, 0.980581, 36.1716, -29.591)">
<g id="Group_dcd06f12613d4191aa93ac82285bb333" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d9fd996419d4ca38abefdb622e76fd2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_8c4db01f8a294b86a25ca48da3a82df5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
<g id="Group_d31ed3f59dcc4eb0b5b032b76af01b5f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1efad0479d884cd7b83b05b14626b607" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f570a013b87b4b99a5733740cc6bec08" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
</g>
<g id="Group_0c0eec48be45438095795d32aacdabdd" opacity="1" transform="matrix(-0.980581, 0.196116, 0.196116, 0.980581, 375.074, -29.3765)">
<g id="Group_85cbc12fbb49406698b0039ac613a554" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4dd71c4562c44ee7833fccd1c2fd5727" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_e86e56d7af1b40518583d0250ca9541d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
<g id="Group_25e6d3f3edff4f1fbd57b1371bb58f5a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_aa3250f8fef44c74b2e3e7974148a2c7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_12f1561499c8471f9ecbc4e3a571abc7" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
</g>
<g id="Group_f2c24a9da86e4b62ad7b6c34b7c60b14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5e9aa5ad63a04e5a977827a22736c105" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b5cccfe98d4f421cbc4386f369f9700a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_117872a1e50742c0971fe225f32e6a20" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_1c847fc6e7774d5c8750f96064b3a547" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_04d00887dda24f73946be18da7ca9025" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6e4183e42f644a41b75e2cd222a9e2ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.411111; 0.700000" path="M -5.68434e-14,1.71918 C -5.68434e-14,1.71918 0.671553,5.7485 0.671553,5.7485 0.671553,5.7485 0.671553,1.04763 0.671553,1.04763 0.671553,1.04763 0.671553,3.73384 0.671553,3.73384" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
`;
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
const MAX_LEVEL_PHASES = 3; // Total phases to complete (0, 1, 2 = 3 passes)
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let npcClickArea = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject NPC and Dialogue Box
injectCubeFairy();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = "Start Point Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #447bf9;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(68, 123, 249, 0.5);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
// Successfully started playing, hide the button
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Ensure the NPC visibility state is correct after map change
updateNPCVisibility();
}
function updateNPCVisibility() {
const fairy = document.getElementById(`${CUBE_FAIRY_ID}-clickarea`);
if (fairy) {
// Only show the NPC when phasesCompleted is equal to or greater than the max phases (3 passes)
fairy.style.display = (phasesCompleted >= MAX_LEVEL_PHASES) ? 'block' : 'none';
}
}
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Start Point dialogue box (darker, more ethereal)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(10, 10, 30, 0.8); /* Very dark blue/black */
border: 5px solid #447bf9; /* Cube Fairy's blue color */
box-shadow: 0 0 20px rgba(68, 123, 249, 0.5); /* Blue glow effect */
border-radius: 10px;
font-family: 'Courier New', monospace; /* Monospace for ethereal feel */
z-index: 10001;
display: none;
cursor: pointer; /* Clickable to advance dialogue */
`;
dialogueBox.addEventListener('click', processDialogue);
}
function injectCubeFairy() {
const parent = document.body;
const NPC_WIDTH = 500;
const NPC_HEIGHT = 500;
const SCALED_SIZE = NPC_WIDTH * CUBE_FAIRY_SCALE;
const CLICK_AREA_SIZE = SCALED_SIZE + 50; // Larger click area
// Invisible container for the larger click area
npcClickArea = document.createElement('div');
npcClickArea.id = `${CUBE_FAIRY_ID}-clickarea`;
// Position the click area to center the fairy at CUBE_FAIRY_X/Y
npcClickArea.style.cssText = `
position: absolute;
top: ${CUBE_FAIRY_Y - SCALED_SIZE / 2}px;
left: ${CUBE_FAIRY_X - SCALED_SIZE / 2}px;
width: ${SCALED_SIZE}px;
height: ${SCALED_SIZE}px;
z-index: 999;
cursor: pointer;
display: none; /* Initially hidden */
`;
// SVG Container for the Cube Fairy graphic
const svgContainer = document.createElement('div');
svgContainer.id = CUBE_FAIRY_ID;
svgContainer.innerHTML = CUBE_FAIRY_SVG_CONTENT;
// Scale the SVG content to fit the area
svgContainer.style.cssText = `
width: 100%;
height: 100%;
transform: scale(${CUBE_FAIRY_SCALE});
transform-origin: 0 0; /* Important for scaling correctly */
`;
npcClickArea.addEventListener('click', startDialogue);
npcClickArea.appendChild(svgContainer);
parent.appendChild(npcClickArea);
createDialogueBox();
}
function startDialogue() {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
// Set the correct listener for the first dialogue step
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive) return;
const lines = (phasesCompleted < MAX_LEVEL_PHASES) ? DIALOGUE_LINES : DIALOGUE_LINES_FINAL;
if (currentDialogueIndex >= lines.length) {
endDialogue();
return;
}
const line = lines[currentDialogueIndex];
dialogueName.textContent = `${line.name}:`;
dialogueText.textContent = line.text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= lines.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
if (phasesCompleted >= MAX_LEVEL_PHASES) {
isLevelComplete = true;
dialogueBox.style.display = 'none';
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:gold; font-size:36px; text-align:center; font-family: 'Courier New', monospace;">
LEVEL COMPLETE!<br>Thank you for playing Start Point.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
if (npcClickArea) {
npcClickArea.style.display = 'none';
}
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
return;
}
// Standard dialogue end
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #447bf9;
color: white;
border: 4px solid gold;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
`;
// Use a simple reload to simulate going back to the Drawaria lobby (the home screen)
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
phasesCompleted++;
// Check if we need to change the background to the next map in the array
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
// After final phase completion (3 passes), ensure NPC is visible.
if (phasesCompleted >= MAX_LEVEL_PHASES) {
updateNPCVisibility();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Constants of Movement
const GRAVITY = 0.5;
const MAX_SPEED = 10;
const JUMP_HEIGHT = 15;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Collision with the ground
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map or stay on the final map
if (phasesCompleted < MAX_LEVEL_PHASES) {
advanceMap();
} else {
// If max phases are complete and we reach the end, ensure NPC is visible for the final click
updateNPCVisibility();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel2 = function() {
// ==UserScript==
// @name Drawaria Game Level 2 - Drawaria Springs
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Level 2: Drawaria Springs. Experience dynamic backgrounds and NPC encounters, including a swimming phase.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Drawaria Springs";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-springs.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground on the SVG floor)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX; // Top position for the avatar image
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level (Adjusted from user's input)
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. SVG ASSETS PLACEHOLDERS ---
// Map 1: Bunny
const MAP_SVG_1 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(102, 204, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Grass Gradient -->
<linearGradient id="grassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(143, 194, 98);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(160, 210, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#skyGradient)" />
<!-- 2. Sun (top left) -->
<circle cx="50" cy="50" r="60" fill="rgb(255, 230, 0)" />
<!-- 3. Horizon/Distant Grass (behind the ground level) -->
<rect x="0" y="250" width="800" height="150" fill="rgb(100, 180, 50)" />
<!-- 4. Main Ground (Green Area) -->
<rect x="0" y="300" width="800" height="200" fill="url(#grassGradient)" />
<!-- 5. Path (Asphalt/Stone look) -->
<!-- Main Path (a large, wavy area leading to the fountain) -->
<path d="M0 450 H800 V380 C700 350, 600 380, 400 380 C200 380, 100 350, 0 380 Z"
fill="rgb(150, 160, 170)" opacity="0.6"/>
<!-- Central Path -->
<path d="M200 450 Q400 400, 600 450 L600 500 L200 500 Z"
fill="rgb(180, 190, 200)"/>
<!-- 6. Trees (Stylized) -->
<!-- Distant Trees (on the horizon) -->
<circle cx="500" cy="250" r="40" fill="rgb(67, 133, 1)" />
<circle cx="650" cy="270" r="50" fill="rgb(67, 133, 1)" />
<!-- Closer Trees -->
<rect x="350" y="300" width="15" height="100" fill="rgb(139, 69, 19)" />
<circle cx="357.5" cy="290" r="80" fill="rgb(85, 170, 0)" />
<!-- 7. Fountain / Water Feature (Center-right background) -->
<g transform="translate(500, 300)" opacity="0.8">
<rect x="-10" y="50" width="20" height="50" fill="rgb(200, 200, 200)" />
<ellipse cx="0" cy="50" rx="40" ry="10" fill="rgb(180, 180, 180)" />
<path d="M-10 50 L10 50 L10 30 C10 30, 0 20, -10 30 Z" fill="rgb(200, 200, 200)" />
<!-- Water effect -->
<path d="M-5 40 C-10 30, 10 30, 5 40 Q0 30, -5 40" fill="rgb(0, 170, 255)" opacity="0.7"/>
<path d="M-15 45 C-20 35, 20 35, 15 45 Q0 35, -15 45" fill="rgb(0, 170, 255)" opacity="0.5"/>
</g>
<!-- 8. Bushes/Flowers (Placeholder detail) -->
<g transform="translate(150, 420)">
<circle cx="0" cy="0" r="20" fill="rgb(85, 170, 0)" />
<circle cx="10" cy="-5" r="5" fill="white" />
<circle cx="-10" cy="5" r="5" fill="pink" />
</g>
<g transform="translate(680, 420)">
<circle cx="0" cy="0" r="25" fill="rgb(67, 133, 1)" />
<circle cx="5" cy="5" r="4" fill="yellow" />
<circle cx="-10" cy="-5" r="4" fill="white" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>
`;
// Map 2: Donkey
const MAP_SVG_2 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (Same as Map 1) -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(102, 204, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Grass Gradient (Same as Map 1) -->
<linearGradient id="grassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(143, 194, 98);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(160, 210, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#skyGradient)" />
<!-- 2. Sun (top left) -->
<circle cx="50" cy="50" r="60" fill="rgb(255, 230, 0)" />
<!-- 3. Horizon/Distant Grass (behind the ground level) -->
<rect x="0" y="250" width="800" height="150" fill="rgb(100, 180, 50)" />
<!-- 4. Main Ground (Green Area) -->
<rect x="0" y="300" width="800" height="200" fill="url(#grassGradient)" />
<!-- 5. Path (Slightly different shape for change) -->
<!-- Main Path -->
<path d="M0 450 H800 V400 Q700 370, 400 400 Q100 430, 0 400 Z"
fill="rgb(160, 170, 180)" opacity="0.7"/>
<!-- Central Path Segment -->
<rect x="150" y="400" width="500" height="100" fill="rgb(190, 200, 210)"/>
<!-- 6. Trees (Different positions/shapes) -->
<!-- Large Tree 1 (Left) -->
<rect x="100" y="300" width="15" height="100" fill="rgb(139, 69, 19)" />
<rect x="60" y="250" width="100" height="100" fill="rgb(85, 170, 0)" rx="20" ry="20" />
<!-- Large Tree 2 (Right) -->
<rect x="650" y="300" width="15" height="100" fill="rgb(139, 69, 19)" />
<circle cx="657.5" cy="270" r="70" fill="rgb(67, 133, 1)" />
<!-- 7. Small Pond / Spring (New Feature) -->
<g transform="translate(400, 400)">
<ellipse cx="0" cy="50" rx="60" ry="20" fill="rgb(0, 150, 200)" />
<path d="M-50 50 Q0 30, 50 50" stroke="white" stroke-width="2" fill="none" opacity="0.6"/>
</g>
<!-- 8. Bushes/Flowers (Placeholder detail) -->
<g transform="translate(250, 420)">
<circle cx="0" cy="0" r="25" fill="rgb(85, 170, 0)" />
<rect x="-15" y="-15" width="30" height="30" fill="pink" rx="5" ry="5" opacity="0.5"/>
</g>
<g transform="translate(550, 420)">
<circle cx="0" cy="0" r="20" fill="rgb(67, 133, 1)" />
<polygon points="-10,5 0,-10 10,5" fill="yellow" opacity="0.7"/>
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 (for reference, remove in final script if needed) -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>
`;
// Map 3: Transition
const MAP_SVG_3 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (Slightly cooler/cloudy) -->
<linearGradient id="cloudySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 220, 230);stop-opacity:1" />
</linearGradient>
<!-- Grass Gradient (More muted green) -->
<linearGradient id="mutedGrassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 160, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 180, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#cloudySkyGradient)" />
<!-- 2. Sun/Moon (Clouded over) -->
<circle cx="50" cy="50" r="60" fill="rgb(255, 255, 180)" opacity="0.6" />
<!-- 3. Clouds (Flat White Style) -->
<g fill="white" opacity="0.7">
<ellipse cx="200" cy="120" rx="60" ry="20" />
<ellipse cx="600" cy="80" rx="80" ry="30" />
</g>
<!-- 4. Horizon/Distant Grass -->
<rect x="0" y="250" width="800" height="150" fill="rgb(80, 140, 40)" />
<!-- 5. Main Ground (Muted Green Area) -->
<rect x="0" y="300" width="800" height="200" fill="url(#mutedGrassGradient)" />
<!-- 6. Simple Path (Straight line across) -->
<rect x="0" y="420" width="800" height="80" fill="rgb(150, 160, 170)" opacity="0.8"/>
<!-- 7. Trees (Minimalist, Silhouette style) -->
<!-- Tree 1 (Left) -->
<rect x="250" y="300" width="10" height="120" fill="rgb(100, 50, 10)" />
<circle cx="255" cy="280" r="60" fill="rgb(60, 120, 30)" />
<!-- Tree 2 (Right) -->
<rect x="550" y="300" width="10" height="100" fill="rgb(100, 50, 10)" />
<circle cx="555" cy="270" r="50" fill="rgb(80, 160, 40)" />
<!-- 8. Single Rock/Stone Detail (Path detail) -->
<ellipse cx="400" cy="450" rx="40" ry="15" fill="rgb(130, 130, 130)" />
<!-- This horizontal line represents the absolute ground level at Y=450 (for reference, remove in final script if needed) -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>
`;
// Map 4: Happy Face + Fish (Swimming starts)
const MAP_SVG_4 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (A bit darker due to water reflection/depth) -->
<linearGradient id="deepSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 150, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 180, 220);stop-opacity:1" />
</linearGradient>
<!-- Deep Water Gradient -->
<linearGradient id="waterDeepGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 120, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 80, 150);stop-opacity:1" />
</linearGradient>
<!-- Water Surface Effect (for movement illusion) -->
<filter id="waveFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.03" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#deepSkyGradient)" />
<!-- 2. Sun (Still present, but reflecting off water) -->
<circle cx="50" cy="50" r="60" fill="rgb(255, 230, 0)" opacity="0.8" />
<!-- 3. Horizon Land (Small strip of land far away) -->
<rect x="0" y="250" width="800" height="10" fill="rgb(50, 100, 30)" />
<!-- 4. Deep Water Body (Starts at 260px and fills the remaining screen) -->
<rect x="0" y="260" width="800" height="240" fill="url(#waterDeepGradient)" filter="url(#waveFilter)" />
<!-- 5. Water Surface Highlights (Foam/Light Reflection) -->
<path d="M0 260 Q100 250, 200 260 T400 255 T600 260 T800 250"
fill="none"
stroke="white"
stroke-width="3"
opacity="0.5" />
<path d="M0 270 Q150 265, 300 270 T600 265 T800 270"
fill="none"
stroke="rgb(180, 230, 255)"
stroke-width="5"
opacity="0.7" />
<!-- 6. Underwater Plants/Shadows (Simple shape on the 'ground' at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(0, 60, 100)" />
<g fill="rgb(0, 100, 150)" opacity="0.8">
<path d="M100 450 V430 Q110 420, 120 430 V450 Z" />
<path d="M600 450 V410 Q620 400, 640 410 V450 Z" />
</g>
<!-- NOTE: The 'ground' for the player is still AVATAR_GROUND_Y (386), but movement logic will handle the swimming effect and preventing sinking past 450 (which is the actual floor of the SVG). -->
</svg>
`;
// Map 5: Fish (Swimming ends)
const MAP_SVG_5 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (Back to bright and sunny) -->
<linearGradient id="brightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(102, 204, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Grass Gradient (Back to lively green) -->
<linearGradient id="livelyGrassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(143, 194, 98);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(160, 210, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#brightSkyGradient)" />
<!-- 2. Sun (top left) -->
<circle cx="50" cy="50" r="60" fill="rgb(255, 230, 0)" />
<!-- 3. Horizon/Distant Grass -->
<rect x="0" y="250" width="800" height="150" fill="rgb(100, 180, 50)" />
<!-- 4. Main Ground (Lively Green Area) -->
<rect x="0" y="300" width="800" height="200" fill="url(#livelyGrassGradient)" />
<!-- 5. Path (Muddy/Washed out) -->
<path d="M0 450 H800 V400 Q700 370, 400 400 Q100 430, 0 400 Z"
fill="rgb(130, 90, 60)" opacity="0.9"/>
<!-- Central Path Segment (Muddy) -->
<rect x="150" y="400" width="500" height="100" fill="rgb(140, 100, 70)" opacity="0.7"/>
<!-- 6. Trees (Scattered) -->
<!-- Tree 1 (Center) -->
<rect x="390" y="300" width="10" height="100" fill="rgb(139, 69, 19)" />
<circle cx="395" cy="270" r="60" fill="rgb(85, 170, 0)" />
<!-- Tree 2 (Far Right) -->
<rect x="700" y="350" width="10" height="50" fill="rgb(139, 69, 19)" />
<circle cx="705" cy="330" r="40" fill="rgb(67, 133, 1)" />
<!-- 7. Puddles / Remnants of the flood (Water spots on the ground) -->
<g opacity="0.9" fill="rgb(0, 140, 200)">
<ellipse cx="100" cy="460" rx="40" ry="10" />
<ellipse cx="500" cy="470" rx="80" ry="20" />
</g>
<!-- 8. Debris / Rocks (A few scattered elements) -->
<rect x="250" y="440" width="20" height="10" fill="rgb(100, 100, 100)" rx="2" ry="2"/>
<rect x="750" y="430" width="15" height="15" fill="rgb(120, 120, 120)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>
`;
// Map 6: Circle Fairy
const MAP_SVG_6 = `
<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Ethereal Sky Gradient (Soft light, spiritual/magical feeling) -->
<linearGradient id="etherealSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 220, 240);stop-opacity:1" />
</linearGradient>
<!-- Crystal Water Gradient (Very light, clear blue/green) -->
<linearGradient id="crystalWaterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 230, 255);stop-opacity:1" />
</linearGradient>
<!-- Ground Stone Gradient -->
<linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 190, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(160, 170, 180);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Ethereal) -->
<rect x="0" y="0" width="800" height="500" fill="url(#etherealSkyGradient)" />
<!-- 2. Light Source (Subtle Glow at the top) -->
<circle cx="400" cy="0" r="150" fill="white" opacity="0.3" />
<!-- 3. Ground (Stone/Rock Formation) -->
<rect x="0" y="300" width="800" height="200" fill="url(#stoneGradient)" />
<!-- 4. Main Spring Pool (Center) -->
<ellipse cx="400" cy="420" rx="300" ry="80" fill="url(#crystalWaterGradient)" />
<ellipse cx="400" cy="420" rx="280" ry="60" fill="rgb(200, 230, 255)" opacity="0.8" />
<!-- 5. Floating Rock Platform (Platform for the Fairy/Avatar) -->
<ellipse cx="400" cy="380" rx="150" ry="30" fill="rgb(150, 160, 170)" stroke="rgb(120, 130, 140)" stroke-width="2" />
<!-- 6. Waterfall/Spring Source (Behind the platform) -->
<g transform="translate(400, 300)">
<!-- Rock Cliff behind -->
<path d="M-100 0 L100 0 L50 -50 L-50 -50 Z" fill="rgb(150, 160, 170)" />
<!-- Water flowing down -->
<rect x="-10" y="0" width="20" height="50" fill="rgb(180, 230, 255)" opacity="0.9" />
<circle cx="0" cy="40" r="15" fill="rgb(180, 230, 255)" opacity="0.7" />
</g>
<!-- 7. Ethereal Details (Glowing Dust/Particles) -->
<g fill="white" opacity="0.5">
<circle cx="100" cy="350" r="3" />
<circle cx="700" cy="320" r="5" />
<circle cx="450" cy="150" r="2" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>
`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6];
// Character SVG Placeholders (Used in NPC_DATA)
// ESTE BLOCO FOI MOVIDO AQUI PARA CORRIGIR O ERRO DE INICIALIZAÇÃO.
const CHAR_SVG_1 = `
<svg height="100" inkscape:export-xdpi="96" inkscape:export-ydpi="96" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 335 372" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<defs/>
<sodipodi:namedview bordercolor="#666666" borderlayer="true" inkscape:document-units="px" inkscape:pagecheckerboard="true" pagecolor="#ffffff"/>
<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/MovingImage"/>
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="Composition_3b348df703d247509adcbb148276fd71" inkscape:groupmode="layer" inkscape:label="Composition">
<g id="Layer_f89b4aa40f09491ea955b3f71169edc3" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_06253d48be0743fca0afe5a80cfd0935" inkscape:groupmode="layer" inkscape:label="Composition" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_ce4951eafaf041cdad10e7b351f77924" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_105e27e2e1bd4cb89ea348b38be4761e" inkscape:groupmode="layer" inkscape:label="Composition" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_8d2b3f04b8bd457db0d979101738097b" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0.742122 -2.59323)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_c11d310f92d34050a69ae77b259cae2b" inkscape:label="Group" opacity="1">
<g id="Group_19b08b05600449c1859324282fc00861" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_97bcad9baf7f48b7884a94210e8da1da" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_322497cbbbea40d0adef43fe3f4de7a6" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_988aeebb09514b7e91cb4cb6919d0cb0" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d3d28a0b81914eecabd8ac325362bac5" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_d9e881ec4b27498d872aee1b55e9782a" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 54.544,326.688 C 60.002,333.056 58.432,343.354 51.039,349.692 43.645,356.029 33.227,356.005 27.77,349.638 23.784,344.987 23.546,338.24 26.589,332.469 15.022,330.992 6.349,324.855 6.35,317.508 6.35,309.15 17.573,302.358 31.513,302.21 23.678,294.343 20.611,284.86 24.71,280.024 29.236,274.685 40.783,277.037 50.5,285.276 60.217,293.514 64.425,304.52 59.9,309.858 58.919,311.015 57.609,311.81 56.059,312.263 57.059,313.899 57.604,315.665 57.604,317.508 57.604,320.525 56.141,323.339 53.615,325.71 53.939,326.017 54.249,326.344 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 Z" sodipodi:nodetypes="ccccccccccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_5ee23d8728254302ac03455fa09feff9" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_4b513cc7dbdc40d3b6e41680c530f7d3" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 54.544,326.688 C 60.002,333.056 58.432,343.354 51.039,349.692 43.645,356.029 33.227,356.005 27.77,349.638 23.784,344.987 23.546,338.24 26.589,332.469 15.022,330.992 6.349,324.855 6.35,317.508 6.35,309.15 17.573,302.358 31.513,302.21 23.678,294.343 20.611,284.86 24.71,280.024 29.236,274.685 40.783,277.037 50.5,285.276 60.217,293.514 64.425,304.52 59.9,309.858 58.919,311.015 57.609,311.81 56.059,312.263 57.059,313.899 57.604,315.665 57.604,317.508 57.604,320.525 56.141,323.339 53.615,325.71 53.939,326.017 54.249,326.344 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 54.544,326.688 Z" sodipodi:nodetypes="ccccccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="1.266667" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.225564; 0.582707" path="M 0,0 C 0,0 3.1686,7.92151 3.1686,7.92151 3.1686,7.92151 -1.5843,-12.6744 -1.5843,-12.6744" repeatCount="indefinite"/>
</g>
<g id="Group_a817a4359fd04737b862e1a02fab8966" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ba6bec609a564f2bb893c2f30130a168" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_ecff1d9892834882a80b8e3ba4a0a5b6" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 166.646,199.831 C 228.192,199.831 278.546,220.285 282.441,257.234 282.441,257.234 283.521,266.018 283.521,266.018 283.521,266.018 283.239,344.838 283.239,344.838 283.239,344.838 49.489,344 49.489,344 49.489,344 49.771,265.181 49.771,265.181 49.771,265.181 49.561,255.018 49.561,255.018 54.114,218.461 105.561,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 Z" sodipodi:nodetypes="cccccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_904edabb1bc54bfaa94132e4f88728b1" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_e077810fc403405a8e635755be2d2e85" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 166.646,199.831 C 228.192,199.831 278.546,220.285 282.441,257.234 282.441,257.234 283.521,266.018 283.521,266.018 283.521,266.018 283.239,344.838 283.239,344.838 283.239,344.838 49.489,344 49.489,344 49.489,344 49.771,265.181 49.771,265.181 49.771,265.181 49.561,255.018 49.561,255.018 54.114,218.461 105.561,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 166.646,199.831 Z" sodipodi:nodetypes="cccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g id="Group_9b15445a719144808c61bdaeb771eb2d" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_826896392d534d2185a7bb79c8f80a16" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_c98133210e164385a364ef86a9c90436" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 261.752,153.846 C 261.752,198.69 220.616,235.043 169.872,235.043 119.128,235.043 77.992,198.69 77.992,153.846 77.992,132.678 87.158,113.403 102.173,98.949 92.827,93.879 80.272,81.265 68.994,64.724 52.061,39.888 44.419,15.605 51.925,10.487 59.432,5.368 79.245,21.353 96.179,46.189 106.991,62.046 114.015,77.677 115.727,88.239 130.911,78.436 149.627,72.649 169.872,72.649 220.616,72.649 261.752,109.002 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 Z" sodipodi:nodetypes="cccccccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_b5e85e91528a4bf6a73102963f87c101" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_e22a944b365746e7854b40823d0ff5c7" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 261.752,153.846 C 261.752,198.69 220.616,235.043 169.872,235.043 119.128,235.043 77.992,198.69 77.992,153.846 77.992,132.678 87.158,113.403 102.173,98.949 92.827,93.879 80.272,81.265 68.994,64.724 52.061,39.888 44.419,15.605 51.925,10.487 59.432,5.368 79.245,21.353 96.179,46.189 106.991,62.046 114.015,77.677 115.727,88.239 130.911,78.436 149.627,72.649 169.872,72.649 220.616,72.649 261.752,109.002 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 261.752,153.846 Z" sodipodi:nodetypes="cccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g transform="translate(-56.5339 11.5967)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_8b8f0c8daf294c188120396a572b5ec2" inkscape:label="Group" opacity="1">
<g id="Group_fdc0c25769d24ea18e307f730be0a11e" inkscape:label="Group" opacity="1" transform="matrix(0.999953, 0.009708, -0.009708, 0.999953, 0, 0)">
<g id="Group_e8d6b769ae064667a9a96af8f1fa9dad" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_709afbd9e7734423a8a078c260834016" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0e6d20c33b994df6a86fcafd58a507c4" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_83ca5113693145d697a9cde547289e0e" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_b1b7d1b29665495298cdf3c63ec1cc44" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="163.64" cy="260.741" rx="43.149" ry="18.781" style="stroke:none;"/>
</g>
</g>
<g id="Group_e3d594d8f73c4d7bba89bc0d28c0e959" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_920644652155466ca9e5c971e7ff8197" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="163.64" cy="260.741" rx="43.149" ry="18.781" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="1.266667" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.263158; 0.939850" path="M -56.5339,4.80176 C -56.5339,4.80176 -56.5339,14.3076 -56.5339,14.3076 -56.5339,14.3076 -56.5339,1.63316 -56.5339,1.63316" repeatCount="indefinite"/>
</g>
<g transform="translate(65.5831 12.6811)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_54ff47c2c7ba4f30bf8d425cec822d57" inkscape:label="Group" opacity="1">
<g id="Group_290b7c3e46c548bab3ead00bdd8fe2e3" inkscape:label="Group" opacity="1" transform="matrix(0.999953, 0.009708, -0.009708, 0.999953, 0, 0)">
<g id="Group_0a97f6b606f04aacb20c0e6792f0aab9" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 0.994765, 0, 0)">
<g id="Group_4a97324b0139428a856d3bb562a4c660" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_368cbd7bf93e465ab843249fcfab1eca" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_30df7185902d4bf2bf336153ebe6fbed" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_721b3741bdda44049d6ec3548ac01b22" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="163.64" cy="260.741" rx="43.149" ry="18.781" style="stroke:none;"/>
</g>
</g>
<g id="Group_a57a18475af24d35a23c5f615353ea0f" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_92e99f8a9d724c4cb9b9ebdd0df90fc2" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="163.64" cy="260.741" rx="43.149" ry="18.781" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="1.266667" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.263158; 0.939850" path="M 65.2442,2.83642 C 65.2442,2.83642 65.2442,12.3422 65.2442,12.3422 65.2442,12.3422 66.8285,13.9265 66.8285,13.9265" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
<g transform="translate(-0.45549 -2.36654)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_6f8a0c8d361847a3aee1bda89b2564b4" inkscape:label="Group" opacity="1">
<g id="Group_44c67ba420b2499b9a0247fdb1dd8761" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_bc4398fee49b4a4ab9fdbfc3ae733c11" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_83be4fea5ebb48fb97b0a292b8dec3c0" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_58906da86c04469e9e3d32134d429ada" inkscape:label="Group 3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dc55a79ce8c5461c8026c4c6123fd7f9" inkscape:label="Group 2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6d0f9839e5434e56bae2fcac4171325f" inkscape:label="Group 1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1c2a22b7f2df493fa0773ce1108ef628" inkscape:label="Group" opacity="1" transform="matrix(-0.572182, 0.820127, -0.820127, -0.572182, 420.567, -153.161)">
<g id="Group_febd3542edd64fd6a3d79ef944b72a15" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_f7c59fbfef964d3eb3ced4e14ea6810e" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="37.31" ry="0" style="stroke:none;" width="56.016" x="276.709" y="7.639"/>
</g>
</g>
<g id="Group_22efb2d8ffed4c4bb2ace465957f739c" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_91c577cf19894f51bc1e875cb35f9460" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="37.31" ry="0" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" width="56.016" x="276.709" y="7.639"/>
</g>
</g>
</g>
<g id="Group_cc2b69fce61d435eaa79389f105c8fff" inkscape:label="Group" opacity="1" transform="matrix(-0.046461, 0.99892, -0.99892, -0.046461, 355.062, -39.5969)">
<g id="Group_eeaa0b90401743b399bd63b4ef2e5109" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_56279bbb22b74625adb30ac20bdfb8ce" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="186.966" cy="144.765" rx="16.045" ry="10.541" style="stroke:none;"/>
</g>
</g>
<g id="Group_f8ef526811d7428ca8bbeb8c93b4062a" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_d1448ed2057745b7bdaadfbe3e39ea68" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="186.966" cy="144.765" rx="16.045" ry="10.541" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g id="Group_7c67455365204db696b06993a206b500" inkscape:label="Group" opacity="1" transform="matrix(-0.0487231, 0.998812, -0.998812, -0.0487231, 378.341, -21.3985)">
<g id="Group_6be4535cd6254066a558401c8e52b41c" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_a8b8b7ff04ba4fc7b7f709855c771900" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="226.126" cy="200.378" rx="8.308" ry="4.398" style="stroke:none;"/>
</g>
</g>
<g id="Group_c8bcef00f35c4cb7971880249a26f50f" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_7d79dc79fbfb4dcf945e3c780f5fd3a7" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="226.126" cy="200.378" rx="8.308" ry="4.398" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g id="Group_7e0130e71ffa482386e6cddd13188910" inkscape:label="Group" opacity="1" transform="matrix(0.0487231, 0.998812, 0.998812, -0.0487231, -35.4435, -21.2666)">
<g id="Group_483d6c37651f4cff9a39398c9945c0ff" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_284c80f5030147e882d3a871d8862e2a" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="226.126" cy="200.378" rx="8.308" ry="4.398" style="stroke:none;"/>
</g>
</g>
<g id="Group_5f2648eaa67c484cb9b56bf1cf31c271" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_a40800f39bbf4105b33dfb00cb97e071" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="226.126" cy="200.378" rx="8.308" ry="4.398" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g id="Group_80094381f5f6403d9bf319760a515806" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_34635e7fe44d4a16ad7867f048125cff" inkscape:label="Fill" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0ec1d7b9b0554cd0bc5bda4d5812b475" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_bdcadb875b4c49b291d0a2cc3ce0baa4" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 185.668,171.619 C 185.621,174.833 178.949,177.342 170.765,177.223 162.581,177.105 155.984,174.403 156.031,171.189 156.078,167.975 162.75,165.466 170.934,165.584 179.118,165.703 185.714,168.405 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_32f43a8bbcec4ef2ab4950a29c73c0d6" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_3783a33a5aeb4cdc86e337ae2f15e0c0" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 167.572,189.51 C 164.828,192.169 161.567,193.543 159.177,193.279 156.726,193.96 152.756,192.042 149.533,188.416 145.738,184.147 144.416,179.126 146.581,177.201 148.745,175.278 153.577,177.178 157.373,181.448 157.839,181.973 158.268,182.509 158.658,183.049 159.05,182.569 159.483,182.098 159.952,181.644 163.37,178.333 167.59,177.014 169.932,178.373 170.023,178.261 170.123,178.157 170.231,178.061 172.395,176.138 177.227,178.038 181.023,182.308 181.489,182.833 181.918,183.369 182.308,183.909 182.7,183.429 183.133,182.958 183.602,182.504 187.397,178.828 192.18,177.608 194.284,179.78 196.388,181.952 195.017,186.694 191.222,190.37 188.478,193.029 185.217,194.403 182.827,194.139 180.376,194.82 176.406,192.902 173.183,189.276 172.101,188.059 171.22,186.78 170.563,185.529 169.874,186.884 168.864,188.259 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 Z" sodipodi:nodetypes="cccccccccccccccccccc" style="stroke:none;"/>
</g>
</g>
</g>
<g id="Group_a052a4ee01ac411d90949891a47a0767" inkscape:label="Stroke" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_df6c5725025b4c0982b22acf4d376166" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_110f5936a3884db498e259e6250032ba" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 185.668,171.619 C 185.621,174.833 178.949,177.342 170.765,177.223 162.581,177.105 155.984,174.403 156.031,171.189 156.078,167.975 162.75,165.466 170.934,165.584 179.118,165.703 185.714,168.405 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 185.668,171.619 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_7005b6d8c52a46678bdec559e7f69299" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_3c64d1eb5fb746deb1ac02c13f5a3a50" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 167.572,189.51 C 164.828,192.169 161.567,193.543 159.177,193.279 156.726,193.96 152.756,192.042 149.533,188.416 145.738,184.147 144.416,179.126 146.581,177.201 148.745,175.278 153.577,177.178 157.373,181.448 157.839,181.973 158.268,182.509 158.658,183.049 159.05,182.569 159.483,182.098 159.952,181.644 163.37,178.333 167.59,177.014 169.932,178.373 170.023,178.261 170.123,178.157 170.231,178.061 172.395,176.138 177.227,178.038 181.023,182.308 181.489,182.833 181.918,183.369 182.308,183.909 182.7,183.429 183.133,182.958 183.602,182.504 187.397,178.828 192.18,177.608 194.284,179.78 196.388,181.952 195.017,186.694 191.222,190.37 188.478,193.029 185.217,194.403 182.827,194.139 180.376,194.82 176.406,192.902 173.183,189.276 172.101,188.059 171.22,186.78 170.563,185.529 169.874,186.884 168.864,188.259 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 167.572,189.51 Z" sodipodi:nodetypes="cccccccccccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<g id="Group_6cd0324ae20e4783af49df3ad481bbe5" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b0e9e11603b64416b109aa7bc358a1f5" inkscape:label="Fill" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_97b9d384ded94e9b8cbbb0d9953ad8ab" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_fbff1b59ac794228ba9eb22afe9bad7b" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 41.346,202.059 C 41.346,202.059 105.448,184.091 105.448,184.091 105.448,184.091 103.632,179.51 103.632,179.51 103.632,179.51 39.53,197.478 39.53,197.478 39.53,197.478 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_d6d3857cc8a6486393766d05ed0d95cd" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_41ff79e91c164916880f2c363ba3dcb1" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 27.259,180.541 C 27.259,180.541 102.045,174.253 102.045,174.253 102.045,174.253 101.495,169.628 101.495,169.628 101.495,169.628 26.709,175.916 26.709,175.916 26.709,175.916 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_551bf9a8c35a45da8ed10b4dfea4a7af" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_c944ba7fbea141e9a5961105b1ebc6ef" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 21.252,160.805 C 21.252,160.805 103.517,162.602 103.517,162.602 103.517,162.602 103.634,158.848 103.634,158.848 103.634,158.848 21.368,157.051 21.368,157.051 21.368,157.051 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_4a334b41a0fe4a7ea1acc4e51384cffb" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_9e2f04f23d3549c1952e44713d23a96d" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 317.624,159.7 C 317.624,159.7 235.358,161.497 235.358,161.497 235.358,161.497 235.473,165.25 235.473,165.25 235.473,165.25 317.739,163.453 317.739,163.453 317.739,163.453 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_ed173f267ba94dfbaa959023a6c61086" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_7b03ae4883464c4eaf7712f133b4d75a" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 312.282,178.57 C 312.282,178.57 237.496,172.281 237.496,172.281 237.496,172.281 236.946,176.907 236.946,176.907 236.946,176.907 311.732,183.195 311.732,183.195 311.732,183.195 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
<g id="Group_2e1e5d20bc2c4e99adb6930ba7e4c486" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_6e76b711865c4a579701656831dabe56" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 299.463,200.131 C 299.463,200.131 235.36,182.165 235.36,182.165 235.36,182.165 233.544,186.746 233.544,186.746 233.544,186.746 297.647,204.713 297.647,204.713 297.647,204.713 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
</g>
</g>
</g>
<g id="Group_c15141e8cd89498b851269bbc0e3dffd" inkscape:label="Stroke" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_8d17e816e43b4ae59d430f142d4b23f9" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_409c9a1ad64a4975b103431ddc820a76" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 41.346,202.059 C 41.346,202.059 105.448,184.091 105.448,184.091 105.448,184.091 103.632,179.51 103.632,179.51 103.632,179.51 39.53,197.478 39.53,197.478 39.53,197.478 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 41.346,202.059 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_74125d0283d84024b0770ca16d6ca920" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_1f1e5429b9fd441cad4e803a5b98d9e1" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 27.259,180.541 C 27.259,180.541 102.045,174.253 102.045,174.253 102.045,174.253 101.495,169.628 101.495,169.628 101.495,169.628 26.709,175.916 26.709,175.916 26.709,175.916 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 27.259,180.541 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_0061d6f2ea20443a8e12dc7a51263f28" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_b1e0a81ee9e64dada837800f19b5246b" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 21.252,160.805 C 21.252,160.805 103.517,162.602 103.517,162.602 103.517,162.602 103.634,158.848 103.634,158.848 103.634,158.848 21.368,157.051 21.368,157.051 21.368,157.051 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 21.252,160.805 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_11b23673d0f749b28dc75afa08188366" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_b4a58ddf429a4f63b2d423362d9c50e6" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 317.624,159.7 C 317.624,159.7 235.358,161.497 235.358,161.497 235.358,161.497 235.473,165.25 235.473,165.25 235.473,165.25 317.739,163.453 317.739,163.453 317.739,163.453 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 317.624,159.7 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_433f79f46e6144e7b3eb8f17a9df8cfd" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c984453fd63444a08a3120f3012c0991" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 312.282,178.57 C 312.282,178.57 237.496,172.281 237.496,172.281 237.496,172.281 236.946,176.907 236.946,176.907 236.946,176.907 311.732,183.195 311.732,183.195 311.732,183.195 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 312.282,178.57 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
<g id="Group_dd274086fb2743f6a5150f8edee4f442" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_42a263934eec4e7d8e1ec32d05a045fd" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 299.463,200.131 C 299.463,200.131 235.36,182.165 235.36,182.165 235.36,182.165 233.544,186.746 233.544,186.746 233.544,186.746 297.647,204.713 297.647,204.713 297.647,204.713 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 299.463,200.131 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<g id="Group_b0ce22c1a99840eab39e11e04800cc1d" inkscape:label="Group" opacity="1" transform="matrix(0.046461, 0.99892, 0.99892, -0.046461, -12.4587, -39.9881)">
<g id="Group_ddd73bba7e0a4a3796ac0bdb3852b95b" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_ad149c72a872432eac16a122449f4255" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="186.966" cy="144.765" rx="16.045" ry="10.541" style="stroke:none;"/>
</g>
</g>
<g id="Group_f4158837e18441ab82d68f55532ed05b" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9171eea9d33641a9a709686ea26f73f2" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="186.966" cy="144.765" rx="16.045" ry="10.541" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
<g id="Group_1fd6cdc3c8e74059b53d664c4b4b9440" inkscape:label="Ellipse" opacity="1" transform="matrix(0.946717, -0.322066, 0.322066, 0.946717, -12.8506, 76.7278)">
<g id="Group_eadc2919f2c44f0a904b22821de79a70" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#d8d8d8" fill-opacity="1" id="Fill_97da3bd48ddf4ac5b943c7829acd445e" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="242.081" cy="95.6919" rx="19.0116" ry="47.5291" style="stroke:none;"/>
</g>
</g>
<g id="Group_32aa59b5c892410c9dc106a29e683400" inkscape:label="Group" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f714d17b90484c48aa234f0cab92deec" inkscape:label="Group" opacity="1" stroke="#555555" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="242.081" cy="95.6919" rx="19.0116" ry="47.5291" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="1.266667" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.300752; 0.601504; 0.845865" path="M 0,-3.1686 C 0,-3.1686 -1.5843,1.5843 -1.5843,1.5843 -1.5843,1.5843 1.5843,-9.50581 1.5843,-9.50581 1.5843,-9.50581 -1.5843,-4.75291 -1.5843,-4.75291" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
</svg>
`;
const CHAR_SVG_2 = `
<svg height="200" inkscape:export-xdpi="96" inkscape:export-ydpi="96" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 702 504" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<defs/>
<sodipodi:namedview bordercolor="#666666" borderlayer="true" inkscape:document-units="px" inkscape:pagecheckerboard="true" pagecolor="#ffffff"/>
<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/MovingImage"/>
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="Composition_80b48a3ad7244fed85da2b3c7238eb55" inkscape:groupmode="layer" inkscape:label="Composition">
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Layer_f1397ef6550347ce9c4c5dac0592c202" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1">
<g transform="translate(-1.32093 -6.60465)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_88d3f20c55ce4bd89bc396416f5959d7" inkscape:label="Group" opacity="1">
<g fill="#d8d8d8" fill-opacity="1" id="Stroke_5fec1f663c594a4a981521a8081e7eaf" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(-0.014083, 0.999901, -0.999901, -0.014083, 635.499, -26.0944)">
<rect height="27.865" ry="0" style="stroke:none;" width="75.862" x="341.72" y="267.541"/>
<rect height="27.865" ry="0" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" width="75.862" x="341.72" y="267.541"/>
</g>
<g fill="#d8d8d8" fill-opacity="1" id="Stroke_35c44de5b1fd486cbf7a6fc23e9975c1" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(-0.014083, 0.999901, -0.999901, -0.014083, 790.185, -33.3201)">
<rect height="27.865" ry="0" style="stroke:none;" width="75.862" x="341.72" y="267.541"/>
<rect height="27.865" ry="0" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" width="75.862" x="341.72" y="267.541"/>
</g>
<g fill="#fffcd0" fill-opacity="1" id="Stroke_3b6403687cd647909972a0308a554fd6" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 373.85,396.905 C 374.51,397.371 321.728,395.689 320.966,395.837 316.622,396.682 332.446,380.884 346.607,380.884 360.768,380.884 370.236,394.352 373.85,396.905 373.85,396.905 373.85,396.905 373.85,396.905 Z" sodipodi:nodetypes="cccc" style="stroke:none;"/>
<path d="M 373.85,396.905 C 374.51,397.371 321.728,395.689 320.966,395.837 316.622,396.682 332.446,380.884 346.607,380.884 360.768,380.884 370.236,394.352 373.85,396.905 373.85,396.905 373.85,396.905 373.85,396.905 Z" sodipodi:nodetypes="cccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#fffcd0" fill-opacity="1" id="Stroke_e726d66e0bf04eb1baa64fe4207feb8e" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 528.536,389.679 C 529.196,390.145 476.414,388.463 475.652,388.611 471.308,389.456 487.132,373.658 501.293,373.658 515.454,373.658 524.922,387.126 528.536,389.679 528.536,389.679 528.536,389.679 528.536,389.679 Z" sodipodi:nodetypes="cccc" style="stroke:none;"/>
<path d="M 528.536,389.679 C 529.196,390.145 476.414,388.463 475.652,388.611 471.308,389.456 487.132,373.658 501.293,373.658 515.454,373.658 524.922,387.126 528.536,389.679 528.536,389.679 528.536,389.679 528.536,389.679 Z" sodipodi:nodetypes="cccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.227778; 0.505556; 0.822222" path="M -1.32093,-6.60465 C -1.32093,-6.60465 0,-13.2093 0,-13.2093 0,-13.2093 -11.8884,-3.96279 -11.8884,-3.96279 -11.8884,-3.96279 2.64186,-3.96279 2.64186,-3.96279" repeatCount="indefinite"/>
</g>
<g fill="#d8d8d8" fill-opacity="1" id="Stroke_1a02ff6eedca464a879b2afa0c2d821b" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 150.107,208.761 C 97.888,208.761 55.556,191.302 55.556,169.765 55.556,148.228 97.888,130.769 150.107,130.769 152.624,130.769 155.119,130.81 157.586,130.889 161.147,106.646 182.033,88.034 207.265,88.034 223.108,88.034 237.237,95.371 246.44,106.833 246.44,106.833 270.3,88.034 270.3,88.034 270.3,88.034 255.642,124.742 255.642,124.742 256.839,129.039 257.479,133.569 257.479,138.248 257.479,151.043 252.693,162.719 244.815,171.586 244.815,171.586 267.12,202.813 267.12,202.813 287.18,194.524 311.846,189.637 338.515,189.637 372.016,189.637 402.358,197.349 424.378,209.829 433.927,207.215 444.278,205.785 455.089,205.785 500.682,205.785 538.079,231.223 541.749,263.59 541.749,263.59 560.739,321.194 560.739,321.194 560.739,321.194 552.801,323.811 552.801,323.811 552.801,323.811 539.593,283.746 539.593,283.746 530.347,311.358 496.021,331.861 455.089,331.861 449.881,331.861 444.78,331.529 439.824,330.893 439.824,330.893 437.96,394.891 437.96,394.891 437.96,394.891 405.594,393.949 405.594,393.949 405.594,393.949 407.699,321.685 407.699,321.685 405.589,320.689 403.543,319.629 401.566,318.508 383.173,324.865 361.594,328.525 338.515,328.525 319.559,328.525 301.615,326.056 285.618,321.651 285.618,321.651 283.274,402.117 283.274,402.117 283.274,402.117 250.908,401.174 250.908,401.174 250.908,401.174 253.597,308.862 253.597,308.862 230.85,296.246 216.72,278.604 216.72,259.081 216.72,257.027 216.876,254.994 217.183,252.986 217.183,252.986 183.775,206.216 183.775,206.216 173.316,207.861 161.966,208.761 150.107,208.761 150.107,208.761 150.107,208.761 150.107,208.761 Z" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccc" style="stroke:none;"/>
<path d="M 150.107,208.761 C 97.888,208.761 55.556,191.302 55.556,169.765 55.556,148.228 97.888,130.769 150.107,130.769 152.624,130.769 155.119,130.81 157.586,130.889 161.147,106.646 182.033,88.034 207.265,88.034 223.108,88.034 237.237,95.371 246.44,106.833 246.44,106.833 270.3,88.034 270.3,88.034 270.3,88.034 255.642,124.742 255.642,124.742 256.839,129.039 257.479,133.569 257.479,138.248 257.479,151.043 252.693,162.719 244.815,171.586 244.815,171.586 267.12,202.813 267.12,202.813 287.18,194.524 311.846,189.637 338.515,189.637 372.016,189.637 402.358,197.349 424.378,209.829 433.927,207.215 444.278,205.785 455.089,205.785 500.682,205.785 538.079,231.223 541.749,263.59 541.749,263.59 560.739,321.194 560.739,321.194 560.739,321.194 552.801,323.811 552.801,323.811 552.801,323.811 539.593,283.746 539.593,283.746 530.347,311.358 496.021,331.861 455.089,331.861 449.881,331.861 444.78,331.529 439.824,330.893 439.824,330.893 437.96,394.891 437.96,394.891 437.96,394.891 405.594,393.949 405.594,393.949 405.594,393.949 407.699,321.685 407.699,321.685 405.589,320.689 403.543,319.629 401.566,318.508 383.173,324.865 361.594,328.525 338.515,328.525 319.559,328.525 301.615,326.056 285.618,321.651 285.618,321.651 283.274,402.117 283.274,402.117 283.274,402.117 250.908,401.174 250.908,401.174 250.908,401.174 253.597,308.862 253.597,308.862 230.85,296.246 216.72,278.604 216.72,259.081 216.72,257.027 216.876,254.994 217.183,252.986 217.183,252.986 183.775,206.216 183.775,206.216 173.316,207.861 161.966,208.761 150.107,208.761 150.107,208.761 150.107,208.761 150.107,208.761 Z" sodipodi:nodetypes="ccccccccccccccccccccccccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#fffcd0" fill-opacity="1" id="Stroke_a17a3e2eb09e48c0ab3351881f87c0d9" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 294.176,411.321 C 294.836,411.787 242.054,410.105 241.292,410.253 236.948,411.098 252.772,395.3 266.933,395.3 281.094,395.3 290.562,408.768 294.176,411.321 294.176,411.321 294.176,411.321 294.176,411.321 Z" sodipodi:nodetypes="cccc" style="stroke:none;"/>
<path d="M 294.176,411.321 C 294.836,411.787 242.054,410.105 241.292,410.253 236.948,411.098 252.772,395.3 266.933,395.3 281.094,395.3 290.562,408.768 294.176,411.321 294.176,411.321 294.176,411.321 294.176,411.321 Z" sodipodi:nodetypes="cccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#fffcd0" fill-opacity="1" id="Stroke_2726f4ad57714c72b8bff6a2cd3879e5" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 448.862,404.095 C 449.522,404.561 396.74,402.879 395.978,403.027 391.634,403.872 407.458,388.074 421.619,388.074 435.78,388.074 445.248,401.542 448.862,404.095 448.862,404.095 448.862,404.095 448.862,404.095 Z" sodipodi:nodetypes="cccc" style="stroke:none;"/>
<path d="M 448.862,404.095 C 449.522,404.561 396.74,402.879 395.978,403.027 391.634,403.872 407.458,388.074 421.619,388.074 435.78,388.074 445.248,401.542 448.862,404.095 448.862,404.095 448.862,404.095 448.862,404.095 Z" sodipodi:nodetypes="cccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#000000" fill-opacity="1" id="Stroke_119475c66ad34979929fdcd7b709de63" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="86.698" cy="153.548" rx="3.449" ry="6.132" style="stroke:none;"/>
<ellipse cx="86.698" cy="153.548" rx="3.449" ry="6.132" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#000000" fill-opacity="1" id="Stroke_8fe820aa4a004b0f80b59226ada2f2d9" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="177.183" cy="127.437" rx="10.348" ry="10.348" style="stroke:none;"/>
<ellipse cx="177.183" cy="127.437" rx="10.348" ry="10.348" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#000000" fill-opacity="1" id="Stroke_15fbb1e065474509a5ac88beeb5e8020" inkscape:label="Group" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="95.43" cy="194.793" rx="16.863" ry="2.32" style="stroke:none;"/>
<ellipse cx="95.43" cy="194.793" rx="16.863" ry="2.32" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_7cb83ae9f9774494ba1beaeb8e2f2a23" inkscape:label="Group" opacity="1" stroke="#4a4a4a" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 547.661,323.776 C 547.661,331.396 551.313,342.617 555.97,342.617 558.602,342.617 560.992,339.032 562.573,334.538 564.944,336.196 567.37,337.206 569.095,337.206 573.752,337.206 568.959,327.916 568.959,320.296 568.959,314.352 560.265,314.22 556.44,318.065 552.112,317.958 547.661,319.861 547.661,323.776 547.661,323.776 547.661,323.776 547.661,323.776 Z" sodipodi:nodetypes="ccccccc" style="stroke:none;"/>
<path d="M 547.661,323.776 C 547.661,331.396 551.313,342.617 555.97,342.617 558.602,342.617 560.992,339.032 562.573,334.538 564.944,336.196 567.37,337.206 569.095,337.206 573.752,337.206 568.959,327.916 568.959,320.296 568.959,314.352 560.265,314.22 556.44,318.065 552.112,317.958 547.661,319.861 547.661,323.776 547.661,323.776 547.661,323.776 547.661,323.776 Z" sodipodi:nodetypes="ccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.233333; 0.505556; 0.894444" path="M 0,0 C 0,0 0,11.8884 0,11.8884 0,11.8884 -1.32093,-9.24651 -1.32093,-9.24651 -1.32093,-9.24651 0,2.64186 0,2.64186" repeatCount="indefinite"/>
</g>
</g>
</svg>
`;
const CHAR_SVG_3 = `
<svg height="100" inkscape:export-xdpi="96" inkscape:export-ydpi="96" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<defs/>
<sodipodi:namedview bordercolor="#666666" borderlayer="true" inkscape:document-units="px" inkscape:pagecheckerboard="true" pagecolor="#ffffff"/>
<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/MovingImage"/>
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="Composition_6d32381960df446bb54c94a56b0923a1" inkscape:groupmode="layer" inkscape:label="Composition">
<g id="Layer_0288c8eb75794b44b2c636dfd0b99346" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0.812446 0.266947)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffd93d" fill-opacity="1" id="Stroke_f4ffc4c4b46441fb87a4d9cfb6861ca9" inkscape:label="Group" opacity="1" stroke="#af8b2d" stroke-opacity="1" stroke-width="3">
<path d="M 19.94,89.166 C 19.94,89.166 57.374,133.981 57.374,133.981 67.525,110.552 102.364,92.041 146.793,86.361 146.793,86.361 130.97,20.376 130.97,20.376 130.97,20.376 209.01,86.993 209.01,86.993 259.746,94.593 296.885,119.083 296.885,148.121 296.885,183.229 242.595,211.689 175.624,211.689 114.457,211.689 63.868,187.948 55.559,157.085 55.559,157.085 19.94,210.263 19.94,210.263 19.94,210.263 19.94,89.166 19.94,89.166 19.94,89.166 19.94,89.166 19.94,89.166 Z" sodipodi:nodetypes="cccccccccc" style="stroke:none;"/>
<path d="M 19.94,89.166 C 19.94,89.166 57.374,133.981 57.374,133.981 67.525,110.552 102.364,92.041 146.793,86.361 146.793,86.361 130.97,20.376 130.97,20.376 130.97,20.376 209.01,86.993 209.01,86.993 259.746,94.593 296.885,119.083 296.885,148.121 296.885,183.229 242.595,211.689 175.624,211.689 114.457,211.689 63.868,187.948 55.559,157.085 55.559,157.085 19.94,210.263 19.94,210.263 19.94,210.263 19.94,89.166 19.94,89.166 19.94,89.166 19.94,89.166 19.94,89.166 Z" sodipodi:nodetypes="cccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.544444; 0.844444" path="M 0,0 C 0,0 0,4.70058 0,4.70058 0,4.70058 0,5.95407 0,5.95407 0,5.95407 1.25349,-2.82035 1.25349,-2.82035" repeatCount="indefinite"/>
</g>
<g fill="#ffd93d" fill-opacity="1" id="Stroke_77b00558b0d448e4a04b8c323da55239" inkscape:label="Group" opacity="1" stroke="#d39900" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="156.254" cy="192.828" rx="51.355" ry="14.899" style="stroke:none;"/>
<ellipse cx="156.254" cy="192.828" rx="51.355" ry="14.899" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g transform="translate(0 -2.1936)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#fd5252" fill-opacity="1" id="Stroke_29707f9b09a74bfabbd133c36ff404ef" inkscape:label="Group" opacity="1" stroke="#943636" stroke-opacity="1" stroke-width="3">
<path d="M 145.481,434.842 C 145.481,434.842 158.386,401.907 158.386,401.907 124.912,397.57 96.918,385.943 80.885,370.425 67.433,374.913 38.699,381.735 8.04,377.727 8.04,377.727 25.402,363.534 56.283,345.834 25.224,328.057 7.753,313.776 7.753,313.776 33.67,310.388 58.21,314.738 73.308,318.876 90.023,294.254 134.875,276.626 187.582,276.626 254.553,276.626 308.843,305.086 308.843,340.194 308.843,367.568 275.837,390.901 229.55,399.852 216.373,413.418 171.623,437.403 145.481,434.842 145.481,434.842 145.481,434.842 145.481,434.842 Z" sodipodi:nodetypes="ccccccccccc" style="stroke:none;"/>
<path d="M 145.481,434.842 C 145.481,434.842 158.386,401.907 158.386,401.907 124.912,397.57 96.918,385.943 80.885,370.425 67.433,374.913 38.699,381.735 8.04,377.727 8.04,377.727 25.402,363.534 56.283,345.834 25.224,328.057 7.753,313.776 7.753,313.776 33.67,310.388 58.21,314.738 73.308,318.876 90.023,294.254 134.875,276.626 187.582,276.626 254.553,276.626 308.843,305.086 308.843,340.194 308.843,367.568 275.837,390.901 229.55,399.852 216.373,413.418 171.623,437.403 145.481,434.842 145.481,434.842 145.481,434.842 145.481,434.842 Z" sodipodi:nodetypes="ccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.544444" path="M 0,0 C 0,0 0,-10.968 0,-10.968 0,-10.968 0,-2.1936 0,-2.1936" repeatCount="indefinite"/>
</g>
<g fill="#ffd93d" fill-opacity="1" id="Stroke_a7bfb3ca10eb4f0aa5679cfb2b909ab5" inkscape:label="Group" opacity="1" stroke="#00c58e00" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 165.97,171.48 C 165.97,171.48 208.81,171.48 208.81,171.48 208.81,171.48 208.81,195.795 208.81,195.795 208.81,195.795 165.97,195.795 165.97,195.795 165.97,195.795 165.97,171.48 165.97,171.48 165.97,171.48 165.97,171.48 165.97,171.48 Z" sodipodi:nodetypes="ccccc" style="stroke:none;"/>
<path d="M 165.97,171.48 C 165.97,171.48 208.81,171.48 208.81,171.48 208.81,171.48 208.81,195.795 208.81,195.795 208.81,195.795 165.97,195.795 165.97,195.795 165.97,195.795 165.97,171.48 165.97,171.48 165.97,171.48 165.97,171.48 165.97,171.48 Z" sodipodi:nodetypes="ccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#bd8900" fill-opacity="1" id="Stroke_9212cf2f79104ce196deec1dc4c0554d" inkscape:label="Group" opacity="1" stroke="#d39900" stroke-opacity="1" stroke-width="3" transform="matrix(0, -1, -1, 0, 3.49666, -66.0273)">
<ellipse cx="-197.74" cy="-252.315" rx="19.796" ry="7.535" style="stroke:none;"/>
<ellipse cx="-197.74" cy="-252.315" rx="19.796" ry="7.535" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#aa1919" fill-opacity="1" id="Stroke_89c2d94c11a7448f875b5767789eb882" inkscape:label="Group" opacity="1" stroke="#943636" stroke-opacity="1" stroke-width="3" transform="matrix(0, -1, -1, 0, 463.3, 597.382)">
<ellipse cx="282.723" cy="200.606" rx="19.796" ry="7.535" style="stroke:none;"/>
<ellipse cx="282.723" cy="200.606" rx="19.796" ry="7.535" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</svg>
`;
const CHAR_SVG_4 = `
<svg height="100" inkscape:export-xdpi="96" inkscape:export-ydpi="96" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 322 475" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
`;
const CIRCLE_FAIRY_SVG_CONTENT = `
<?xml version="1.0" encoding="utf-8"?>
<svg height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" xmlns:bx="https://boxy-svg.com">
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g>
<path d="M 357.456 474.35 L 169.798 474.35 L 179.994 427.741 C 173.843 418.353 170.367 407.684 170.367 396.37 C 170.367 358.775 208.751 328.298 256.101 328.298 C 303.451 328.298 341.835 358.775 341.835 396.37 C 341.835 406.348 339.131 415.824 334.274 424.363 L 357.456 474.35 Z" style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="249.111" cy="309.165" rx="61.449" ry="50.042"/>
<path style="stroke-width: 3px; fill: rgb(140, 216, 46); stroke: rgb(7, 54, 30);" d="M 208.923 273.185 C 204.353 262.775 286.958 260.31 293.765 275.814 C 295.137 303.531 210.725 309.586 208.923 273.185 Z"/>
<path d="M 244.194 386.264 C 244.194 392.202 239.27 397.014 233.195 397.014 C 227.121 397.014 222.196 392.202 222.196 386.264 C 222.196 385.411 222.298 384.579 222.49 383.783 L 152.338 314.933 L 164.934 296.769 L 236.175 366.687 C 236.991 366.353 237.887 366.168 238.826 366.168 C 242.658 366.168 245.766 369.238 245.766 373.024 C 245.766 375.839 244.045 378.261 241.585 379.314 C 243.212 381.189 244.194 383.614 244.194 386.264 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="163.009" cy="299.337" rx="26.861" ry="22.813"/>
<path d="M 340.7 310.81 C 340.7 304.745 336.086 299.829 330.394 299.829 C 324.702 299.829 320.087 304.745 320.087 310.81 C 320.087 311.683 320.183 312.532 320.364 313.346 L 254.628 383.684 L 266.431 402.241 L 333.186 330.811 C 333.951 331.152 334.79 331.34 335.67 331.34 C 339.261 331.34 342.173 328.205 342.173 324.338 C 342.173 321.461 340.561 318.987 338.255 317.911 C 339.78 315.996 340.7 313.517 340.7 310.81 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.00007, -0.000019)"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="329.693" cy="300.073" rx="24.285" ry="23.549"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 229.596 274.003 L 224.955 293.497 L 229.596 274.003 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 252.958 276.788 L 252.803 298.138 L 252.958 276.788 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" d="M 278.175 293.497 L 273.534 274.003 L 278.175 293.497 Z" transform="matrix(-1, 0, 0, -1, -0.000038, 0.000026)"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 175.614 451.586 L 346.777 452.031"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 195.518 473.502 L 196.186 451.689"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 239.403 473.946 L 238.838 451.895"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 323.659 473.947 L 322.991 452.134"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 277.891 473.605 L 278.559 451.792"/>
<animateMotion path="M 0 0 L -0.279 12.176 L 0.313 0" calcMode="linear" dur="4s" fill="freeze" keyTimes="0; 0.486169; 1" keyPoints="0; 0.486169; 1" repeatCount="indefinite"/>
</g>
<g>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="144.462" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="356.516" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);" cx="252.912" cy="203.076" rx="91.621" ry="73.223"/>
<path d="M 396.229 158.035 C 405.719 177.944 346.805 178.014 303.884 167.892 C 286.095 163.697 262.807 158.838 248.78 148.841 C 235.384 161.203 209.02 169.799 198.586 172.453 C 156.702 183.108 97.623 177.112 106.164 152.458 C 114.705 127.804 159.162 71.113 198.586 71.113 C 218.155 71.113 235.885 76.796 248.78 85.999 C 263.204 76.796 283.037 71.113 304.926 71.113 C 349.024 71.113 386.739 138.126 396.229 158.035 Z" style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);"/>
<path d="M 204.525 -212.249 Q 220.532 -237.27 236.538 -212.249 L 236.538 -212.249 Q 252.544 -187.228 220.532 -187.228 L 220.532 -187.228 Q 188.519 -187.228 204.525 -212.249 Z" bx:shape="triangle 188.519 -237.27 64.025 50.042 0.5 0.5 1@3efc720f" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 268.182 -212.619 Q 284.189 -237.64 300.195 -212.619 L 300.195 -212.619 Q 316.201 -187.598 284.189 -187.598 L 284.189 -187.598 Q 252.176 -187.598 268.182 -212.619 Z" bx:shape="triangle 252.176 -237.64 64.025 50.042 0.5 0.5 1@c050bfcc" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 269.47 240.574 C 269.47 245.248 274.733 251.245 252.176 251.245 C 229.619 251.245 231.203 244.512 231.203 239.838 C 231.203 235.164 230.355 241.678 252.912 241.678 C 275.469 241.678 269.47 235.9 269.47 240.574 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="213.419" cy="199.581" rx="8.095" ry="9.199"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="278.18" cy="200.685" rx="8.095" ry="9.199"/>
<path d="M 239.08 172.175 C 239.08 174.613 230.998 172.75 220.634 172.75 C 210.27 172.75 201.548 174.613 201.548 172.175 C 201.548 169.737 209.95 167.76 220.314 167.76 C 230.678 167.76 239.08 169.737 239.08 172.175 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<path d="M 304.209 172.911 C 304.209 175.349 296.127 173.486 285.763 173.486 C 275.399 173.486 266.677 175.349 266.677 172.911 C 266.677 170.473 275.079 168.496 285.443 168.496 C 295.807 168.496 304.209 170.473 304.209 172.911 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<animateMotion path="M 0 0 L -0.205 20.066 L -0.001 -0.497" calcMode="linear" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.488361; 1" keyPoints="0; 0.488361; 1" repeatCount="indefinite"/>
</g>
</svg>
`;
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// NPCs that move on the ground or have special behavior (Fish)
const NPC_DATA = {
// Phase 0: Map 1 (index 0)
0: { char_id: 'CHAR_1_Bunny', name: 'Bunny', svg_content: CHAR_SVG_1, initial_x: 700, dialogue: ["Bunny: Hop, skip, and jump! Keep moving to the right!", "Bunny: The darkness is just a shadow, keep going!"] },
// Phase 1: Map 2 (index 1)
1: { char_id: 'CHAR_2_Donkey', name: 'Donkey', svg_content: CHAR_SVG_2, initial_x: 500, dialogue: ["Donkey: Don't stop for too long, the journey is long.", "Donkey: This music makes me want to dance!"] },
// Phase 2: Map 3 (index 2) - No specific NPC required in the request for this phase.
// Phase 3: Map 4 (index 3) - Swimming starts (Happy Face on ground, Fish floating)
3: [
{ char_id: 'CHAR_3_HappyFace', name: 'Happy Face', svg_content: CHAR_SVG_3, initial_x: 300, dialogue: ["Fish: Look! The path is wet now! Swim across!", "Fish: Use up and down arrows to float and dive."] , type: 'ground'},
{ char_id: 'CHAR_4_Fish', name: 'Fish', svg_content: CHAR_SVG_4, initial_x: 600, initial_y: 200, dialogue: ["Fish: This is my territory now. Try to catch me!", "Fish: Be careful, the current is strong in the Springs!"] , type: 'swimming'},
],
// Phase 4: Map 5 (index 4) - Swimming ends (Fish remains, gravity returns to normal)
4: [
{ char_id: 'CHAR_4_Fish', name: 'Fish', svg_content: CHAR_SVG_4, initial_x: 600, initial_y: AVATAR_GROUND_Y, dialogue: ["Fish: The water is gone, but I am still here. Keep jumping!", "Fish: You are almost there! One more step..."] , type: 'ground'},
],
// Phase 5: Map 6 (index 5) - Final NPC
5: { char_id: 'CIRCLE_FAIRY', name: 'Circle Fairy', svg_content: CIRCLE_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Circle Fairy: You overcame the darkness and the flood!", "Circle Fairy: Your perseverance shines brighter than gold.", "Circle Fairy: Drawaria Springs complete!"] },
};
const MAX_TRANSITIONS = 5; // 5 transitions (Map 1 -> 2 -> 3 -> 4 -> 5 -> 6)
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box (NPCs injected by updateMapSVG)
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #447bf9;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(68, 123, 249, 0.5);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
function injectNPCs() {
removeAllNPCs();
const currentNPCs = NPC_DATA[currentMapIndex];
if (!currentNPCs) return;
const npcs = Array.isArray(currentNPCs) ? currentNPCs : [currentNPCs];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
const size = isFinalNPC ? NPC_WIDTH_DEFAULT * (npcData.scale || 1) : NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container (assuming NPC SVGs are roughly 100x100 if no scale/size is specified)
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
clickArea.addEventListener('click', () => startDialogue(npcData));
clickArea.appendChild(svgContainer);
document.body.appendChild(clickArea);
});
}
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Springs dialogue box (light blue/green theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(100, 200, 255, 0.9); /* Light Blue/Springs color */
border: 5px solid #2ecc71; /* Green spring border */
box-shadow: 0 0 20px rgba(46, 204, 113, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
// Initial listener will be set inside startDialogue dynamically
}
let activeNPCDialogue = null;
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Circle Fairy)
if (phasesCompleted >= MAX_TRANSITIONS) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:gold; font-size:36px; text-align:center; font-family: Arial, sans-serif;">
LEVEL COMPLETE!<br>Drawaria Springs is safe.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #447bf9;
color: white;
border: 4px solid gold;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
phasesCompleted++;
// Check if we need to change the background to the next map in the array
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
// Final NPC appears on Map 6 (index 5) when phasesCompleted hits 5
if (phasesCompleted === MAX_TRANSITIONS) {
const finalNPCData = NPC_DATA[MAX_TRANSITIONS].find(npc => npc.final_npc);
if (finalNPCData) {
injectNPCs(); // Re-injects only the final NPC (Circle Fairy)
}
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Dynamic Physics based on Map Index
const IS_SWIMMING_MAP = (currentMapIndex === 3); // Map 4 is index 3
const GRAVITY = IS_SWIMMING_MAP ? 0.1 : 0.5; // Low gravity for swimming
const JUMP_HEIGHT = 15; // Standard jump
// Movement constants
const MAX_SPEED = 10;
const FRICTION = IS_SWIMMING_MAP ? 0.95 : 0.9; // Less friction in water
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
if (IS_SWIMMING_MAP) {
// Swimming controls: allow vertical movement anytime
if (keys['ArrowUp']) {
avatarVY = Math.max(avatarVY - 1.5, -5); // Swim up
} else if (keys['ArrowDown']) {
avatarVY = Math.min(avatarVY + 1.5, 5); // Swim down
}
// When swimming, treat water floor as soft boundary to prevent falling far
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
// Bounce off bottom softly
if (avatarVY > 0) avatarVY *= -0.5;
}
} else {
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel3 = function() {
// ==UserScript==
// @name Drawaria Game Level 3 - Grand Desert
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 3: Grand Desert. Traverse the scorching desert, meeting new characters in each phase.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Grand Desert";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-desert.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground on the SVG floor)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX; // Top position for the avatar image
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level (consistent across levels)
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders (Movable NPCs)
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="227.971" y1="41.578" x2="227.971" y2="429.487" id="gradient-0" gradientTransform="matrix(0.999893, -0.014613, 0.010507, 0.718943, -0.412511, 15.017064)">
<stop offset="0" style="stop-color: rgb(16.471% 89.02% 46.667%)"/>
<stop offset="1" style="stop-color: rgb(0% 52.429% 20.315%)"/>
</linearGradient>
</defs>
<g style="transform-origin: 225.655px 235.533px;">
<path d="M 92.506 135.043 C 108.534 149.091 133.819 258.249 164.156 188.829 L 164.156 94.392 C 160.301 85.999 194.323 39.276 240.545 41.667 C 277.094 43.558 316.417 71.969 316.417 91.307 C 316.417 110.645 318.094 179.811 315.901 194 C 310.859 226.62 316.965 231.849 341.112 205.235 C 379.123 163.342 462.188 182.519 323.878 280.983 C 322.263 282.133 319.935 280.93 318.002 280.826 L 318.002 429.487 L 164.156 429.487 L 164.156 294.077 C 190.151 304.863 76.042 251.981 59.402 199.732 C 31.736 112.859 76.478 120.995 92.506 135.043 Z" style="fill: url("#gradient-0"); stroke-width: 3px; stroke: rgb(34, 86, 11);"/>
<ellipse style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(34, 86, 11);" cx="243.753" cy="197.24" rx="38.881" ry="2.651" transform="matrix(1, 0, 0, 1, 0, 2)">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 2;0 0" begin="0s" dur="4s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 4;1 1" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</ellipse>
<ellipse style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(34, 86, 11);" cx="211.144" cy="161.01" rx="12.96" ry="16.305">
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.2" begin="0s" dur="4s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</ellipse>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="3;0" dur="4s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<ellipse style="stroke-width: 1; transform-origin: 277.34px 160.581px; stroke: rgb(34, 86, 11);" cx="277.34" cy="160.581" rx="12.96" ry="16.305">
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.2" begin="0s" dur="4s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</ellipse>
</g>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="189.816" y1="133.346" x2="189.816" y2="260.411" id="gradient-0" gradientTransform="matrix(0.077299, 0.997008, -0.793799, 0.061544, 337.546511, -7.088601)">
<stop offset="0" style="stop-color: rgb(39.216% 34.118% 2.3529%)"/>
<stop offset="1" style="stop-color: rgb(24.489% 20.84% 0%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="204.467" y1="235.539" x2="204.467" y2="329.634" id="gradient-1" gradientTransform="matrix(0.36826, 0.929723, -0.639248, 0.253204, 334.575451, 38.043423)">
<stop offset="0" style="stop-color: rgb(39.216% 34.118% 2.3529%)"/>
<stop offset="1" style="stop-color: rgb(24.489% 20.84% 0%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="425.726" y1="184.709" x2="425.726" y2="403.913" id="gradient-2" gradientTransform="matrix(0.995677, -0.092879, 0.058978, 0.632255, -21.98172, 188.077665)">
<stop offset="0" style="stop-color: rgb(39.216% 34.118% 2.3529%)"/>
<stop offset="1" style="stop-color: rgb(24.489% 20.84% 0%)"/>
</linearGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="209.936" cy="362.952" r="144.765" id="gradient-3" gradientTransform="matrix(1.341459, -0.03152, 0.02349, 0.999724, -80.210221, 6.717189)">
<stop offset="0" style="stop-color: rgb(100% 95.294% 66.667%)"/>
<stop offset="1" style="stop-color: rgb(178, 173, 132);"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="56.624" cy="439.317" r="32.051" id="gradient-4" gradientTransform="matrix(2.132002, 0.100233, -0.066461, 1.413666, -34.900959, -187.405789)">
<stop offset="0" style="stop-color: rgb(100% 95.294% 66.667%)"/>
<stop offset="1" style="stop-color: rgb(57.764% 54.308% 27.939%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="396.368" cy="403.525" r="32.051" id="gradient-5" gradientTransform="matrix(2.463609, -0.063906, 0.038839, 1.497241, -595.800063, -175.318728)">
<stop offset="0" style="stop-color: rgb(100% 95.294% 66.667%)"/>
<stop offset="1" style="stop-color: rgb(57.764% 54.308% 27.939%)"/>
</radialGradient>
</defs>
<g>
<path d="M 354.701 326.602 C 354.701 405.078 289.888 468.696 209.936 468.696 C 129.984 468.696 65.171 405.078 65.171 326.602 C 65.171 248.126 123.767 257.563 203.719 257.563 C 283.67 257.563 354.701 248.126 354.701 326.602 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-3");"/>
<g>
<ellipse style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-4");" cx="56.624" cy="439.317" rx="32.051" ry="29.38"/>
<animateMotion path="M 0 0 L -13.499 -74.275" calcMode="linear" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>
</g>
<path d="M 113.316 137.343 C 124.359 142.437 183.903 125.864 275.506 137.719 C 246.146 174.856 308.864 268.956 318.52 259.785 L 61.112 258.933 C 68.331 272.27 133.006 168.799 113.316 137.343 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-0"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.990434, -0.13799, 0.13799, 0.990434, 0, 0.000003)"/>
<path d="M 365.681 254.249 C 365.681 295.884 293.48 329.636 204.416 329.636 C 115.352 329.636 43.151 295.884 43.151 254.249 C 43.151 212.614 115.619 249.4 204.683 249.4 C 293.748 249.4 365.681 212.614 365.681 254.249 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-1"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.996036, -0.088948, 0.088948, 0.996036, -0.000002, 0.000002)"/>
<g style="transform-origin: 421.419px 308.807px;">
<path d="M 424.29 185.746 C 430.227 184.445 435.68 184.285 440.316 185.746 C 444.681 187.122 449.571 192.146 451.533 193.759 C 452.487 194.543 452.345 194.654 453.136 195.362 C 454.419 196.509 456.674 197.135 459.012 200.169 C 463.384 205.845 473.052 220.625 476.106 232.221 C 479.231 244.086 479.027 261.62 477.175 270.682 C 475.902 276.908 473.752 280.594 470.23 284.037 C 466.557 287.627 460.958 290.208 455.273 291.516 C 449.002 292.958 438.524 292.975 433.905 291.516 C 430.852 290.551 429.643 288.958 428.029 286.708 C 426.124 284.05 424.592 280.802 423.756 276.024 C 422.566 269.227 422.549 254.42 423.756 248.246 C 424.519 244.341 425.342 241.762 427.495 240.233 C 429.726 238.649 434.781 238.629 437.11 239.165 C 438.84 239.563 440.011 240.215 440.85 241.836 C 442.073 244.2 441.886 249.379 441.918 253.588 C 441.954 258.221 440.404 264.854 440.85 268.545 C 441.164 271.147 441.204 273.749 442.986 274.422 C 445.496 275.368 453.96 273.295 456.875 269.614 C 460.277 265.32 460.28 255.245 460.08 248.246 C 459.884 241.36 458.67 234.201 455.807 227.947 C 452.87 221.531 447.089 214.4 442.452 210.319 C 438.659 206.981 435.486 203.857 430.7 203.909 C 424.501 203.976 413.697 209.098 407.73 215.127 C 401.34 221.583 391.768 263.604 389.544 267.787 C 388.65 269.47 401.132 342.684 405.593 362.563 C 408.884 377.224 409.893 393.22 408.798 398.887 C 408.321 401.362 407.652 401.799 406.127 402.627 C 404.074 403.742 398.841 404.231 396.512 403.695 C 394.783 403.297 393.833 403.173 392.773 401.024 C 390.46 396.334 391.835 382.318 388.499 368.973 C 383.779 350.087 369.869 275.222 373.542 262.136 C 378.67 243.866 387.334 208.528 399.717 196.43 C 407.866 188.469 416.997 187.345 424.29 185.746 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-2");"/>
<ellipse style="stroke-width: 3px; stroke: rgb(155, 120, 65); fill: url("#gradient-5");" cx="396.368" cy="403.525" rx="32.051" ry="29.38"/>
<animateMotion path="M -40.894 -2.503 C -40.894 -2.502 -5.363 45.274 -7.658 38.389" calcMode="linear" dur="3s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;10" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="transform-origin: 208.013px 404.611px;">
<path d="M 245.826 417.017 C 251.189 416.499 230.075 449.658 209.687 449.658 C 189.299 449.658 164.492 422.385 173.548 415.462 C 182.604 408.539 240.463 417.535 245.826 417.017 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65);"/>
<path d="M 188.624 386.979 C 177.12 394.877 180.038 380.056 162.472 380.056 C 144.905 380.056 142.166 394.985 132.432 385.317 C 122.698 375.649 144.905 359.564 162.472 359.564 C 180.038 359.564 200.128 379.081 188.624 386.979 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65);"/>
<path d="M 282.583 388.928 C 271.079 396.826 273.997 382.005 256.431 382.005 C 238.864 382.005 236.125 396.934 226.391 387.266 C 216.657 377.598 238.864 361.513 256.431 361.513 C 273.997 361.513 294.087 381.03 282.583 388.928 Z" style="stroke-width: 3px; stroke: rgb(155, 120, 65);"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -20" dur="3s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
<animateMotion path="M 0 0 L 0.688 -17.526" calcMode="linear" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="376.758" cy="440.266" r="27.646" id="gradient-3" gradientTransform="matrix(2.275915, 0.106111, -0.0849, 1.820948, -443.332211, -401.413376)">
<stop offset="0" style="stop-color: rgb(100% 96.471% 58.431%)"/>
<stop offset="1" style="stop-color: rgb(57.196% 55.183% 19.108%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="237.76" cy="357.09" r="137.145" id="gradient-4" gradientTransform="matrix(1.941893, -0.951779, 0.725766, 1.480734, -483.108109, 54.629699)">
<stop offset="0" style="stop-color: rgb(100% 96.471% 58.431%)"/>
<stop offset="1" style="stop-color: rgb(57.196% 55.183% 19.108%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="89.165" cy="441.642" r="27.646" id="gradient-5" gradientTransform="matrix(1.530079, 1.762625, -2.379985, 2.065946, 1003.836357, -627.930997)">
<stop offset="0" style="stop-color: rgb(100% 96.471% 58.431%)"/>
<stop offset="1" style="stop-color: rgb(57.196% 55.183% 19.108%)"/>
</radialGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="240.076" y1="236.096" x2="240.076" y2="310.877" id="gradient-0">
<stop offset="0" style="stop-color: rgb(59.216% 19.608% 0%)"/>
<stop offset="1" style="stop-color: rgb(39.467% 9.8514% 0%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="232.87" y1="156.47" x2="232.87" y2="277.121" id="gradient-1">
<stop offset="0" style="stop-color: rgb(59.216% 19.608% 0%)"/>
<stop offset="1" style="stop-color: rgb(39.467% 9.8514% 0%)"/>
</linearGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="232.522" cy="237.844" r="42.924" id="gradient-2" gradientTransform="matrix(2.038243, -0.494117, 0.271984, 1.12192, -306.10408, 85.895074)">
<stop offset="0" style="stop-color: rgb(100% 91.765% 0%)"/>
<stop offset="1" style="stop-color: rgb(56.533% 52.649% 0%)"/>
</radialGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="232.467" y1="156.469" x2="232.467" y2="246.875" id="gradient-6" gradientTransform="matrix(0.055861, 0.998429, -0.266461, 0.014908, 261.174205, -77.965343)">
<stop offset="0" style="stop-color: rgb(100% 71.765% 71.765%)"/>
<stop offset="1" style="stop-color: rgb(63.444% 38.232% 38.759%)"/>
</linearGradient>
</defs>
<g>
<path d="M 374.905 364.952 C 374.905 305.451 313.503 257.216 237.76 257.216 C 162.017 257.216 100.615 305.451 100.615 364.952 C 100.615 424.453 156.776 456.964 232.519 456.964 C 308.262 456.964 374.905 424.453 374.905 364.952 Z" style="stroke-width: 3; stroke: rgb(129, 90, 65); fill: url("#gradient-4"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000018, 0.000002)"/>
<path d="M 327.156 249.675 C 327.156 291.486 159.058 280.821 142.548 249.092 C 126.038 217.363 161.811 154.958 236.599 156.498 C 311.387 158.038 327.156 207.864 327.156 249.675 Z" style="stroke-width: 3px; stroke: rgb(129, 90, 65); fill: url("#gradient-1");"/>
<path d="M 80.757 236.096 C 103.401 249.906 389.585 247.9 387.633 237.629 C 406.84 242.682 408.953 297.847 397.533 294.842 C 398.447 306.86 81.938 323.94 80.757 294.842 C 82.913 303.574 68.231 249.224 80.757 236.096 Z" style="stroke-width: 3px; stroke: rgb(129, 90, 65); fill: url("#gradient-0");"/>
<path d="M 271.25 397.651 C 281.431 400.544 275.645 431.76 238.346 433.175 C 201.047 434.59 196.191 407.288 201.949 399.981 C 207.707 392.674 219.18 408.075 233.105 410.462 C 247.03 412.849 261.069 394.758 271.25 397.651 Z" style="stroke-width: 3px; stroke: rgb(129, 90, 65);"/>
<path d="M 160.113 330.506 L 158.865 336.867 L 181.782 341.36 C 181.49 342.512 181.273 343.706 181.14 344.934 L 159.064 349.263 L 160.311 355.624 L 181.239 351.52 C 181.988 356.913 184.353 361.608 187.683 364.782 C 175.462 367.07 174.139 373.601 176.937 375.651 C 180.438 378.216 187.415 372.81 195.882 371.972 C 204.35 371.135 212.887 377.484 219.079 376.469 C 224.343 375.605 222.585 367.549 207.987 364.856 C 212.1 360.98 214.761 354.796 214.761 347.831 C 214.761 336.092 207.2 326.575 197.873 326.575 C 192.289 326.575 187.339 329.985 184.265 335.242 L 160.113 330.506 Z" style="stroke-width: 3px; stroke: rgb(129, 90, 65);"/>
<path d="M 246.278 372.104 L 245.03 365.743 L 267.947 361.25 C 267.655 360.098 267.438 358.904 267.305 357.676 L 245.229 353.347 L 246.476 346.986 L 267.404 351.09 C 268.153 345.697 270.518 341.002 273.848 337.828 C 261.627 335.54 260.304 329.009 263.102 326.959 C 266.603 324.394 273.58 329.8 282.047 330.638 C 290.515 331.475 299.052 325.126 305.244 326.141 C 310.508 327.005 308.75 335.061 294.152 337.754 C 298.265 341.63 300.926 347.814 300.926 354.779 C 300.926 366.518 293.365 376.035 284.038 376.035 C 278.454 376.035 273.504 372.625 270.43 367.368 L 246.278 372.104 Z" style="stroke-width: 3; stroke: rgb(129, 90, 65); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000031, -0.000004)"/>
<path d="M 219.822 157.775 C 219.822 156.034 243.048 156.37 243.048 156.876 C 225.421 191.462 317.033 247.952 323.846 222.151 C 324.776 222.895 328.298 246.771 326.317 245.186 C 326.317 245.186 257.23 248.832 255.177 245.411 L 210.388 245.412 C 210.388 245.412 140.413 244.415 140.371 244.288 C 138.308 246.351 136.763 226.658 139.473 223.948 C 168.217 241.629 235.401 181.443 219.822 157.775 Z" style="stroke-width: 3px; stroke: rgb(129, 90, 65); fill: url("#gradient-6");"/>
<path d="M 232.522 198.602 L 246.396 223.63 L 275.446 228.58 L 254.971 248.999 L 259.051 277.086 L 232.522 264.677 L 205.993 277.086 L 210.073 248.999 L 189.598 228.58 L 218.648 223.63 Z" bx:shape="star 232.522 241.987 45.133 43.385 0.523 5 1@555bfabb" style="stroke-width: 3px; stroke: rgb(129, 90, 65); fill: url("#gradient-2");"/>
<ellipse style="stroke-width: 3px; stroke: rgb(129, 90, 65); fill: url("#gradient-5");" cx="89.165" cy="441.642" rx="27.646" ry="24.496">
<animateMotion path="M 0 0 L -12.35 -88.94" calcMode="linear" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>
</ellipse>
<ellipse style="stroke-width: 3; stroke: rgb(129, 90, 65); fill: url("#gradient-3");" cx="376.758" cy="440.266" rx="27.646" ry="24.496">
<animateMotion path="M 0 0 L 22.65 -89.94" calcMode="linear" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>
</ellipse>
<animateMotion path="M 0 0 L 100 0" calcMode="linear" dur="3s" fill="freeze" repeatCount="indefinite"/>
</g>
<animateMotion path="M 0 0 L -2.978 -41.1" calcMode="linear" dur="3s" fill="freeze" repeatCount="indefinite"/>
</svg>`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<g>
<g style="transform-origin: 179.9px 275.33px;">
<path style="stroke-width: 3px; stroke: rgb(236, 165, 66); fill: rgb(255, 197, 80);" d="M 80.857 113.608 L 62.421 106.845 L 78.165 102.953 C 79.921 102.519 82.288 102.298 85.121 102.343 C 91.557 102.499 100.423 103.945 110.882 106.413 C 131.794 111.372 159.067 120.352 185.973 130.767 C 212.878 141.188 239.411 153.043 258.859 163.714 C 268.579 169.056 290.393 188.485 290.393 188.485 C 290.393 188.485 332.145 254.312 332.144 295.544 C 332.145 379.92 263.983 448.322 179.901 448.322 C 95.819 448.322 27.657 379.921 27.657 295.544 C 27.657 232.521 65.683 178.412 119.967 155.06 L 80.857 113.608 Z"/>
<path style="stroke-width: 3; stroke: rgb(236, 165, 66); fill: rgb(255, 247, 163);" d="M 111.076 211.682 L 98.579 206.925 L 109.251 204.188 C 110.441 203.883 112.046 203.728 113.966 203.759 C 118.328 203.869 124.338 204.886 131.427 206.622 C 145.601 210.109 164.087 216.424 182.324 223.749 C 200.561 231.078 218.545 239.415 231.727 246.92 C 238.316 250.676 253.102 264.34 253.102 264.34 C 253.102 264.34 281.402 310.634 281.401 339.631 C 281.402 398.97 235.201 447.075 178.209 447.075 C 121.217 447.075 75.016 398.971 75.016 339.631 C 75.016 295.309 100.79 257.256 137.585 240.833 L 111.076 211.682 Z"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="transform-origin: 187.342px 281.628px;">
<path d="M 168.837 284.302 C 180.69 290.131 156.697 306.827 129.975 311.236 C 103.253 315.645 85.557 284.644 94.191 255.829 C 102.825 227.014 156.984 278.473 168.837 284.302 Z" style="stroke-width: 3px; stroke: rgb(236, 165, 66);"/>
<path d="M 160.325 298.037 C 169.706 300.851 150.717 308.915 129.572 311.045 C 108.425 313.174 94.422 298.202 101.254 284.284 C 108.086 270.368 150.946 295.22 160.325 298.037 Z" style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(236, 165, 66); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.99317, -0.11668, 0.11668, 0.99317, 0, 0.000001)"/>
<path d="M 279.59 275.777 C 291.443 269.948 267.45 253.252 240.728 248.843 C 214.006 244.434 196.31 275.435 204.944 304.25 C 213.578 333.065 267.737 281.606 279.59 275.777 Z" style="stroke-width: 3px; stroke: rgb(236, 165, 66); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0, 0.00004)"/>
<path d="M 272.716 294.589 C 282.097 291.775 263.107 283.711 241.962 281.581 C 220.815 279.452 206.812 294.424 213.644 308.343 C 220.476 322.259 263.336 297.406 272.716 294.589 Z" style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(236, 165, 66); transform-origin: 243.537px 296.962px;" transform="matrix(-0.99317, -0.11668, 0.11668, -0.99317, 0.000013, 0.000002)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.8" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<path d="M 235.065 347.754 C 271.751 327.132 243.193 400.285 183.235 391.982 C 123.277 383.679 114.109 346.672 132.361 347.754 C 150.613 348.836 198.379 368.376 235.065 347.754 Z" style="stroke-width: 3px; stroke: rgb(236, 165, 66); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;5" begin="0.02s" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<animateMotion path="M 0 0 L 19.357 -25.921" calcMode="linear" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite"/>
</g>
<g style="transform-origin: 413.16px 271.345px;">
<path style="stroke-width: 1; stroke: rgb(155, 0, 0); fill: rgb(255, 172, 42);" d="M 422.666 174.383 L 460.639 276.349 C 467.143 285.822 470.957 297.335 470.957 309.75 C 470.957 342.09 445.08 368.307 413.16 368.307 C 381.24 368.307 355.363 342.09 355.363 309.75 C 355.363 304.187 356.129 298.806 357.559 293.707 L 372.854 207.845 L 403.773 242.956 L 422.666 174.383 Z"/>
<path style="stroke-width: 1; stroke: rgb(155, 0, 0); fill: rgb(249, 255, 42);" d="M 421.185 250.128 L 447.166 311.707 C 451.616 317.428 454.226 324.381 454.226 331.879 C 454.226 351.41 436.521 367.243 414.681 367.243 C 392.84 367.243 375.135 351.41 375.135 331.879 C 375.135 328.519 375.659 325.27 376.638 322.19 L 387.103 270.336 L 408.258 291.541 L 421.185 250.128 Z"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1.1 1.1" begin="0s" dur="4s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateMotion path="M 0 0 L -10.884 -28.801" calcMode="linear" begin="0.03s" dur="4s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_5 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="224.516" y1="73.657" x2="224.516" y2="416.008" id="gradient-0" gradientTransform="matrix(1, 0, 0, 1, 0, 0)">
<stop offset="0" style="stop-color: rgb(100% 92.941% 50.588%)"/>
<stop offset="1" style="stop-color: rgb(57.889% 53.038% 10.852%)"/>
</linearGradient>
</defs>
<g>
<path d="M 41.55 373.544 C 40.148 371.301 197.693 60.111 223.948 74.116 C 279.45 69.84 407.491 373.544 407.491 373.544 C 407.491 396.996 388.479 416.008 365.027 416.008 L 84.014 416.008 C 60.562 416.008 41.55 396.996 41.55 373.544 Z" style="stroke-width: 3px; paint-order: stroke markers; fill: url("#gradient-0"); stroke: rgb(80, 59, 36);"/>
<ellipse style="transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 3px; stroke: rgb(80, 59, 36);" cx="178.197" cy="275.255" rx="26.463" ry="24.485">
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.4" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</ellipse>
<path d="M 227.061 362.159 C 202.046 362.159 170.55 343.418 170.55 335.633 C 170.55 323.531 177.263 313.721 185.543 313.721 C 192.064 313.721 215.466 332.753 225.565 333.077 C 242.366 333.617 269.633 313.601 272.039 313.145 C 279.548 311.721 285.878 322.955 285.878 335.057 C 285.878 345.07 250.719 362.159 227.061 362.159 Z" style="transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 3px; stroke: rgb(80, 59, 36);" transform="matrix(1, 0, 0, 1, 0, 3.167)">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 5" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 0" begin="16.9s" dur="3s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-10" begin="0s" dur="3s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.4" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<ellipse style="transform-origin: 273.823px 274.767px; stroke-width: 3px; stroke: rgb(80, 59, 36);" cx="273.823" cy="274.767" rx="26.463" ry="24.485">
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.4" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</ellipse>
<animateMotion path="M 0 0 L 0 -21" calcMode="linear" dur="3s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_6 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="237.929" cy="258.46" r="191.921" id="gradient-5" gradientTransform="matrix(1.228842, 0.608231, -0.601587, 1.215458, 101.038016, -200.403005)">
<stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)"/>
<stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="239.63" cy="142.306" r="33.84" id="gradient-6">
<stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)"/>
<stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="223.817" cy="414.546" r="55.223" id="gradient-8">
<stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)"/>
<stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="283.032" cy="410.179" r="55.223" id="gradient-9">
<stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)"/>
<stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)"/>
</radialGradient>
</defs>
<animateMotion path="M 0 0 C 0.188 0.188 -0.122 9.607 -1.441 5.687" calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"/>
<g>
<path style="fill: url("#gradient-5"); stroke: rgb(107, 106, 106); stroke-width: 3px;" d="M 46.008 143.509 L 193.207 141.135 C 193.22 141.137 193.188 141.258 193.112 141.487 C 210.706 132.896 230.477 128.075 251.374 128.075 C 264.146 128.075 276.496 129.876 288.187 133.237 C 304.641 115.582 418.584 91.97 429.85 109.863 C 391.154 112.637 359.45 158.607 353.932 176.416 C 372.92 199.405 384.327 228.886 384.327 261.031 C 384.327 281.622 379.647 301.119 371.292 318.517 C 384.922 325.659 428.234 374.665 422.216 383.359 C 423.139 378.558 397.689 369.206 374.458 363.634 C 387.124 383.215 399.457 407.941 394.677 412.761 C 397.441 405.542 337.267 375.598 319.703 375.108 C 299.735 387.095 276.359 393.987 251.374 393.987 C 226.866 393.987 203.907 387.356 184.193 375.79 C 168.065 375.062 105.395 406.072 108.214 413.436 C 103.435 408.617 115.768 383.89 128.433 364.309 C 105.203 369.881 79.752 379.233 80.675 384.034 C 74.635 375.309 118.283 325.979 131.746 319.116 C 123.21 301.567 118.421 281.858 118.421 261.031 C 118.421 237.331 124.622 215.079 135.49 195.809 C 118.635 176.895 79.376 145.901 46.008 143.509 Z"/>
<g>
<path d="M 232.051 182.042 L 223.454 134.08 C 212.979 136.714 205.79 139.396 205.79 133.547 C 205.79 124.49 219.387 102.57 239.37 102.57 C 259.353 102.57 272.95 119.285 272.95 128.342 C 272.95 128.559 272.944 128.768 272.933 128.968 L 273.47 128.968 L 267.743 173.221 L 249.48 145.986 Z" style="fill: url("#gradient-6"); stroke: rgb(107, 106, 106); stroke-width: 3px;"/>
<path d="M 290.357 330.7 C 290.357 346.419 283.932 350.174 252.908 350.174 C 221.884 350.174 213.212 345.67 213.212 329.951 C 213.212 314.232 220.386 322.461 251.41 322.461 C 282.434 322.461 290.357 314.981 290.357 330.7 Z" style="fill: rgb(255, 255, 255); stroke: rgb(107, 106, 106); stroke-width: 3px;"/>
<path d="M 310.651 313.874 C 310.651 316.31 283.223 324.783 250.534 324.783 C 217.844 324.783 192.273 316.31 192.273 313.874 C 192.273 311.438 217.38 320.141 250.069 320.141 C 282.758 320.141 310.651 311.438 310.651 313.874 Z" style="stroke: rgb(107, 106, 106); stroke-width: 3px;"/>
<path d="M 290.138 330.308 C 290.138 332.744 272.444 341.217 251.355 341.217 C 230.266 341.217 213.77 332.744 213.77 330.308 C 213.77 327.872 229.967 336.575 251.055 336.575 C 272.143 336.575 290.138 327.872 290.138 330.308 Z" style="stroke-width: 3px; stroke: rgb(10, 9, 9);"/>
<path d="M 222.646 274.908 C 226.845 278.059 229.175 280.856 228.953 282.03 C 228.399 284.959 212.814 271.593 192.23 268.188 C 183.563 266.754 175.389 267.316 168.874 268.228 L 168.781 268.883 C 168.722 268.664 168.693 268.455 168.694 268.253 C 159.837 269.507 154.089 271.385 154.408 269.701 C 154.724 268.033 160.704 264.878 169.596 263.097 L 173.503 235.347 C 157.327 228.578 146.877 219.907 147.28 218.036 C 147.789 215.658 164.395 229.134 188.388 235.622 C 212.383 242.11 234.68 239.153 234.169 241.53 C 234.029 242.18 232.289 242.865 229.343 243.383 L 222.646 274.908 Z" style="stroke: rgb(107, 106, 106); stroke-width: 3px;"/>
<path d="M 226.291 289.648 L 274.785 289.875 C 273.071 289.922 254.709 305.457 251.203 319.482 C 254.756 318.372 233.435 290.119 226.291 289.648 Z" style="stroke: rgb(107, 106, 106); stroke-width: 3px;"/>
<path d="M 339.081 226.066 C 343.28 222.915 345.61 220.118 345.388 218.944 C 344.834 216.015 329.249 229.381 308.665 232.786 C 299.998 234.22 291.824 233.658 285.309 232.746 L 285.216 232.091 C 285.157 232.31 285.128 232.519 285.129 232.721 C 276.272 231.467 270.524 229.589 270.843 231.273 C 271.159 232.941 277.139 236.096 286.031 237.877 L 289.938 265.627 C 273.762 272.396 263.312 281.067 263.715 282.938 C 264.224 285.316 280.83 271.84 304.823 265.352 C 328.818 258.864 351.115 261.821 350.604 259.444 C 350.464 258.794 348.724 258.109 345.778 257.591 L 339.081 226.066 Z" style="stroke: rgb(107, 106, 106); stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000027, 0.000014)"/>
</g>
<animateMotion path="M 4.7341837739367065 -1.1455598276309047 L 8.356 19.787" calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"/>
</g>
<animateMotion path="M 0 0 L 0.293 9.537" calcMode="linear" dur="2s" fill="freeze" repeatCount="indefinite"/>
<path d="M 331.719 410.67 L 306.714 410.67 C 306.743 410.545 306.771 410.421 306.797 410.295 L 338.255 397.448 L 305.884 397.448 L 330.785 387.278 C 331.118 385.468 278.957 389.227 266.59 392.362 C 245.605 397.681 226.997 384.919 227.837 406.346 C 228.677 427.773 245.605 433.553 267.525 433.553 C 278.764 433.553 288.913 430.35 296.133 425.203 L 331.719 410.67 Z" style="transform-box: fill-box; transform-origin: 50% 50%; fill: url("#gradient-9"); stroke: rgb(107, 106, 106); stroke-width: 3px;" transform="matrix(-1, 0, 0, -1, -0.000018, 0.000023)">
<animateMotion path="M 0 0 L 0.293 18.208" calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"/>
</path>
<path d="M 272.504 414.055 L 247.499 414.055 C 247.528 414.18 247.556 414.304 247.582 414.43 L 279.04 427.277 L 246.669 427.277 L 271.57 437.447 C 271.903 439.257 219.742 435.498 207.375 432.363 C 186.39 427.044 167.782 439.806 168.622 418.379 C 169.462 396.952 186.39 391.172 208.31 391.172 C 219.549 391.172 229.698 394.375 236.918 399.522 L 272.504 414.055 Z" style="transform-origin: 223.817px 414.547px; fill: url("#gradient-8"); stroke: rgb(107, 106, 106); stroke-width: 3px;">
<animateMotion path="M 0 0 L -4.909 8.67" calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"/>
</path>
</svg>`;
const CHAR_SVG_7 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="240.439" y1="37.447" x2="240.439" y2="382.532" id="gradient-0" gradientTransform="matrix(0.999923, 0.012408, -0.007013, 0.565177, 2.70131, 163.350255)">
<stop offset="0" style="stop-color: rgb(100% 100% 100%)"/>
<stop offset="1" style="stop-color: rgb(56.687% 56.687% 56.687%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="379.741" y1="294.406" x2="379.741" y2="486.151" id="gradient-1" gradientTransform="matrix(0.679387, -0.73378, 0.277113, 0.256572, 29.082613, 588.209009)">
<stop offset="0" style="stop-color: rgb(100% 100% 100%)"/>
<stop offset="1" style="stop-color: rgb(56.687% 56.687% 56.687%)"/>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="126.979" y1="366.563" x2="126.979" y2="442.52" id="gradient-2" gradientTransform="matrix(0.999937, -0.011191, 0.006009, 0.536936, -2.651171, 206.335958)">
<stop offset="0" style="stop-color: rgb(100% 100% 100%)"/>
<stop offset="1" style="stop-color: rgb(56.687% 56.687% 56.687%)"/>
</linearGradient>
</defs>
<g style="transform-origin: 252.887px 264.893px;">
<path d="M 298.13 382.532 L 182.746 382.532 L 182.746 305.513 C 106.522 287.805 51.336 235.948 51.336 174.733 C 51.336 98.912 136 37.447 240.439 37.447 C 344.878 37.447 429.542 98.912 429.542 174.733 C 429.542 235.948 374.355 287.805 298.13 305.513 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-0");"/>
<g style="transform-origin: 241.536px 210.34px;">
<path d="M 233.542 204.388 C 242.033 208.925 210.053 249.431 180.362 249.431 C 150.671 249.431 133.765 195.279 132.413 175.909 C 131.061 156.539 225.051 199.851 233.542 204.388 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<path d="M 349.284 216.292 C 357.775 211.755 325.795 171.249 296.104 171.249 C 266.413 171.249 249.507 225.401 248.155 244.771 C 246.803 264.141 340.793 220.829 349.284 216.292 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000067, -0.000011)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.7" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<rect x="220.174" y="312.707" width="7.556" height="69.745" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<rect x="255.328" y="312.707" width="7.556" height="69.745" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<g>
<path d="M 310.134 450.073 C 315.864 456.697 324.149 458.011 331.438 454.371 C 330.004 463.12 332.154 472.546 337.791 479.063 C 346.414 489.031 359.933 488.41 367.984 477.675 C 376.034 466.939 375.569 450.152 366.946 440.184 C 365.983 439.071 364.961 438.089 363.89 437.239 L 417.049 366.351 C 417.762 367.507 418.563 368.605 419.45 369.629 C 428.073 379.599 441.591 378.977 449.642 368.242 C 457.692 357.504 457.23 340.719 448.605 330.75 C 442.638 323.85 434.327 322.023 427.103 325.11 C 428.915 316.289 427.136 306.923 421.747 300.693 C 413.602 291.278 400.294 292.587 392.023 303.618 C 383.751 314.647 383.648 331.223 391.793 340.639 C 393.302 342.384 394.99 343.761 396.789 344.774 L 343.617 415.682 C 342.693 413.655 341.519 411.783 340.089 410.128 C 331.942 400.712 318.635 402.021 310.363 413.052 C 302.092 424.081 301.989 440.657 310.134 450.073 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-1"); transform-origin: 379.803px 390.912px;" transform="matrix(0.996929, 0.078308, -0.078308, 0.996929, 0, 0.000002)"/>
<animate attributeName="display" values="none;inline" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" calcMode="discrete" keyTimes="0; 0.5"/>
</g>
<g>
<path d="M 210.643 386.491 C 210.643 394.121 205.695 400.734 198.468 403.986 C 204.7 407.643 208.856 414.219 208.856 421.726 C 208.856 433.21 199.125 442.52 187.122 442.52 C 175.118 442.52 165.387 433.21 165.387 421.726 C 165.387 420.443 165.508 419.189 165.74 417.971 L 86.484 417.971 C 86.682 419.098 86.785 420.256 86.785 421.437 C 86.785 432.921 77.054 442.231 65.05 442.231 C 53.046 442.231 43.315 432.921 43.315 421.437 C 43.315 413.49 47.975 406.583 54.824 403.083 C 48.288 399.657 43.911 393.379 43.911 386.202 C 43.911 375.355 53.909 366.563 66.241 366.563 C 78.573 366.563 88.571 375.355 88.571 386.202 C 88.571 388.212 88.228 390.152 87.589 391.978 L 166.866 391.978 C 166.291 390.236 165.983 388.396 165.983 386.491 C 165.983 375.644 175.98 366.852 188.313 366.852 C 200.645 366.852 210.643 375.644 210.643 386.491 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-2"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.663385, 0.748278, -0.748278, 0.663385, 0.000004, -0.000018)"/>
<animate attributeName="display" values="inline;none" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite" calcMode="discrete" keyTimes="0; 0.5"/>
</g>
<animateMotion path="M 0 0 L -1.647 -18.151" calcMode="linear" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1.1 1.1" dur="4s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const TRIANGLE_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" width="700" xmlns="http://www.w3.org/2000/svg">
<title/>
<g id="Composition_237f8cc0cf064b83bd9184e9a0d70fd2">
<g id="Layer_6fcc2b7d79124000a55163479d062c32" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke: none; stroke-width: 2px;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_0ef027a138354a3a914cb5c264e3f75d" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 200.262,259.119 C 200.262,259.119 201.187,306.377 201.187,306.377 201.187,306.377 115.315,307.281 115.315,307.281 115.315,307.281 114.565,256.501 114.565,256.501 115.662,233.749 134.726,219.155 157.625,219.156 180.222,219.156 198.724,236.79 200.262,259.119 200.262,259.119 200.262,259.119 200.262,259.119 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 200.262,259.119 C 200.262,259.119 201.187,306.377 201.187,306.377 201.187,306.377 115.315,307.281 115.315,307.281 115.315,307.281 114.565,256.501 114.565,256.501 115.662,233.749 134.726,219.155 157.625,219.156 180.222,219.156 198.724,236.79 200.262,259.119 200.262,259.119 200.262,259.119 200.262,259.119 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.200000; 0.394444; 0.616667; 0.861111" path="M 0,0 C 0,0 0,-8.39442 0,-8.39442 0,-8.39442 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-6.29581 -1.0493,-6.29581 -1.0493,-6.29581 -2.0986,-2.0986 -2.0986,-2.0986" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="Stroke_2e6c824d2de64fedad20638f9ad4f5cb" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 2 0 C 2 0 2 9.234 2 9.234 C 2 9.234 1.896 3.358 1.896 3.358 C 1.896 3.358 2.056 10.913 2.056 10.913 C 2.056 10.913 1.679 2.518 1.679 2.518" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke: none; stroke-width: 2px;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_d5df62baaec7485d8e61bed9917b663d" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="157.861" cy="197.478" rx="31.17" ry="28.337" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="157.861" cy="197.478" rx="31.17" ry="28.337" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_2c49a36ac0514ecdbee6c6f6d1add8fc" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 135.773,184.525 C 133.912,182.097 136.987,176.444 141.725,172.812 145.722,169.75 155.881,168.385 158.179,168.385 160.615,168.385 171.05,170.412 174.248,172.356 179.267,175.409 181.623,180.756 180.059,183.384 178.786,185.525 175.007,185.695 170.938,184.034 169,188.19 164.019,191.146 158.179,191.147 152.282,191.147 147.26,188.131 145.364,183.911 141.325,186.205 137.329,186.555 135.773,184.525 135.773,184.525 135.773,184.525 135.773,184.525 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 135.773,184.525 C 133.912,182.097 136.987,176.444 141.725,172.812 145.722,169.75 155.881,168.385 158.179,168.385 160.615,168.385 171.05,170.412 174.248,172.356 179.267,175.409 181.623,180.756 180.059,183.384 178.786,185.525 175.007,185.695 170.938,184.034 169,188.19 164.019,191.146 158.179,191.147 152.282,191.147 147.26,188.131 145.364,183.911 141.325,186.205 137.329,186.555 135.773,184.525 135.773,184.525 135.773,184.525 135.773,184.525 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ebebeb" fill-opacity="1" id="Stroke_eacac69c39cb433b827dd0857a77afac" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="158.223" cy="126.244" rx="53.217" ry="47.126" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="158.223" cy="126.244" rx="53.217" ry="47.126" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 2 0 C 2 0 2 9.234 2 9.234 C 2 9.234 2.358 3.358 2.358 3.358 C 2.358 3.358 2.518 10.913 2.518 10.913 C 2.518 10.913 1.679 2.518 1.679 2.518" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_740fd26847b144998faaab5e38cb4d8a" opacity="1">
<g fill="#ffffff" fill-opacity="1" id="Fill_32ea43da47724c7c88a983535e7acdc8" style="stroke:none;">
<path d="M 170.448,247.508 C 170.58,247.498 170.714,247.493 170.849,247.493 170.976,247.493 171.102,247.497 171.227,247.506 171.227,247.506 170.272,246.92 170.272,246.92 170.34,247.11 170.399,247.307 170.448,247.508 170.448,247.508 170.448,247.508 170.448,247.508 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 161.639,248.91 C 161.639,246.041 163.648,243.715 166.126,243.715 167.723,243.715 169.126,244.682 169.921,246.137 169.921,246.137 198.95,198.848 198.95,198.848 198.95,198.848 206.201,203.299 206.201,203.299 206.201,203.299 176.919,251 176.919,251 176.919,251 175.829,250.331 175.829,250.331 176.703,251.624 177.225,253.265 177.225,255.05 177.225,259.224 174.37,262.607 170.849,262.607 167.328,262.607 164.473,259.224 164.473,255.05 164.473,254.618 164.504,254.194 164.563,253.781 162.855,253.046 161.639,251.142 161.639,248.91 161.639,248.91 161.639,248.91 161.639,248.91 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 154.555,248.201 C 154.555,250.373 152.93,252.185 150.772,252.599 150.775,252.707 150.777,252.815 150.777,252.924 150.777,257.749 147.711,261.661 143.929,261.661 140.147,261.661 137.081,257.749 137.081,252.924 137.081,250.52 137.842,248.343 139.074,246.763 139.074,246.763 108.271,201.209 108.271,201.209 108.271,201.209 116.182,195.859 116.182,195.859 116.182,195.859 148.639,243.858 148.639,243.858 149.02,243.764 149.42,243.714 149.832,243.714 152.44,243.714 154.555,245.723 154.555,248.201 154.555,248.201 154.555,248.201 154.555,248.201 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
<g id="Stroke_d47ef98376be4de991212e94d163c6af" stroke="#000000" stroke-opacity="1" stroke-width="1" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;">
<path d="M 170.448,247.508 C 170.58,247.498 170.714,247.493 170.849,247.493 170.976,247.493 171.102,247.497 171.227,247.506 171.227,247.506 170.272,246.92 170.272,246.92 170.34,247.11 170.399,247.307 170.448,247.508 170.448,247.508 170.448,247.508 170.448,247.508 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
<path d="M 161.639,248.91 C 161.639,246.041 163.648,243.715 166.126,243.715 167.723,243.715 169.126,244.682 169.921,246.137 169.921,246.137 198.95,198.848 198.95,198.848 198.95,198.848 206.201,203.299 206.201,203.299 206.201,203.299 176.919,251 176.919,251 176.919,251 175.829,250.331 175.829,250.331 176.703,251.624 177.225,253.265 177.225,255.05 177.225,259.224 174.37,262.607 170.849,262.607 167.328,262.607 164.473,259.224 164.473,255.05 164.473,254.618 164.504,254.194 164.563,253.781 162.855,253.046 161.639,251.142 161.639,248.91 161.639,248.91 161.639,248.91 161.639,248.91 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
<path d="M 154.555,248.201 C 154.555,250.373 152.93,252.185 150.772,252.599 150.775,252.707 150.777,252.815 150.777,252.924 150.777,257.749 147.711,261.661 143.929,261.661 140.147,261.661 137.081,257.749 137.081,252.924 137.081,250.52 137.842,248.343 139.074,246.763 139.074,246.763 108.271,201.209 108.271,201.209 108.271,201.209 116.182,195.859 116.182,195.859 116.182,195.859 148.639,243.858 148.639,243.858 149.02,243.764 149.42,243.714 149.832,243.714 152.44,243.714 154.555,245.723 154.555,248.201 154.555,248.201 154.555,248.201 154.555,248.201 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.422222; 0.700000; 0.877778" path="M 0,0 C 0,0 0,-4.19721 0,-4.19721 0,-4.19721 0,-2.84217e-14 0,-2.84217e-14 0,-2.84217e-14 0,-5.24651 0,-5.24651 0,-5.24651 0,0 0,0" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_1561cdddf09f4b539b28885a2039a8d2" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="113.466" cy="192.755" rx="18.419" ry="16.53" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="113.466" cy="192.755" rx="18.419" ry="16.53" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_eb651ccec2c0425a807ed944a28b1a40" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="198.477" cy="195.77" rx="16.058" ry="15.349" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="198.477" cy="195.77" rx="16.058" ry="15.349" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_bd8ef478d88f44eda400d980ffd8e3a6" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="144.637" cy="120" rx="6.612" ry="17.711" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="144.637" cy="120" rx="6.612" ry="17.711" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_29199cc523374aeab7ce36d757c9883a" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="171.321" cy="120.945" rx="6.848" ry="17.238" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="171.321" cy="120.945" rx="6.848" ry="17.238" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_6a3878f1a27545c4bff592bee9249b86" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="143.22" cy="111.263" rx="2.834" ry="7.557" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="143.22" cy="111.263" rx="2.834" ry="7.557" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_196d22dd532145b9b5158aa3881b44b1" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="169.113" cy="111.943" rx="2.389" ry="6.514" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="169.113" cy="111.943" rx="2.389" ry="6.514" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_a6468358403c43b893f3c87c920799ff" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 171.557,149.565 C 171.557,152.043 165.791,159.247 158.097,159.247 150.403,159.247 145.582,152.043 145.582,149.565 145.582,147.087 150.403,155.94 158.097,155.94 165.791,155.94 171.557,147.087 171.557,149.565 171.557,149.565 171.557,149.565 171.557,149.565 Z" style="stroke-width: 2px;"/>
<path d="M 171.557,149.565 C 171.557,152.043 165.791,159.247 158.097,159.247 150.403,159.247 145.582,152.043 145.582,149.565 145.582,147.087 150.403,155.94 158.097,155.94 165.791,155.94 171.557,147.087 171.557,149.565 171.557,149.565 171.557,149.565 171.557,149.565 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="Stroke_84828ffbec7247aeaa4d1e1c6a882ca4" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 208.427,92.512 C 215.961,99.508 164.028,102.19 159.548,98.03 167.62,98.03 165.881,87.153 161.081,87.153 171.442,96.363 107.965,102.99 103.101,98.666 130.62,88.799 161.166,62.625 158.52,65.318 158.52,65.318 165.685,78.628 165.685,78.628 165.685,78.628 188.052,66.746 188.052,66.746 188.052,66.746 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 208.427,92.512 C 215.961,99.508 164.028,102.19 159.548,98.03 167.62,98.03 165.881,87.153 161.081,87.153 171.442,96.363 107.965,102.99 103.101,98.666 130.62,88.799 161.166,62.625 158.52,65.318 158.52,65.318 165.685,78.628 165.685,78.628 165.685,78.628 188.052,66.746 188.052,66.746 188.052,66.746 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_3e521e50883f45bd8a6ed95e9c0282d8" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 201.012,293.275 C 201.012,293.275 201.212,308.035 201.212,308.035 201.212,308.035 115.217,308.035 115.217,308.035 115.217,308.035 115.217,292.778 115.217,292.778 115.217,292.778 115.244,292.778 115.244,292.778 115.72,285.913 119.287,281.132 127.5,281.132 135.713,281.132 136.796,287.404 142.573,293.938 142.573,293.938 150.607,280.163 157.399,281.463 169.561,283.79 171.984,297.404 174.038,293.945 190.864,265.605 199.463,295.377 201.012,293.275 201.012,293.275 201.012,293.275 201.012,293.275 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 201.012,293.275 C 201.012,293.275 201.212,308.035 201.212,308.035 201.212,308.035 115.217,308.035 115.217,308.035 115.217,308.035 115.217,292.778 115.217,292.778 115.217,292.778 115.244,292.778 115.244,292.778 115.72,285.913 119.287,281.132 127.5,281.132 135.713,281.132 136.796,287.404 142.573,293.938 142.573,293.938 150.607,280.163 157.399,281.463 169.561,283.79 171.984,297.404 174.038,293.945 190.864,265.605 199.463,295.377 201.012,293.275 201.012,293.275 201.012,293.275 201.012,293.275 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.200000; 0.394444; 0.616667; 0.861111" path="M 0,0 C 0,0 0,-8.39442 0,-8.39442 0,-8.39442 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-6.29581 -1.0493,-6.29581 -1.0493,-6.29581 -2.0986,-2.0986 -2.0986,-2.0986" repeatCount="indefinite"/>
</g>
<g fill="#ff3f09" fill-opacity="1" id="Stroke_ee476db24f844fcf9a63f57d622c6e6e" opacity="1" stroke="#00000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1.21925, 0.859588, -20.1128)">
<rect height="27.077" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 1.80241px;" width="123.351" x="101.501" y="64.4753"/>
</g>
<g transform="matrix(-0.758634, 0, 0, -0.311579, 258.288305, 92.002054)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="group-1" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="stroke-width: 2px; stroke: rgba(117, 32, 0, 0);"/>
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px; stroke: rgba(117, 32, 0, 0);"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
</g>
</g>
</svg>`;
// NPC DATA (Phase index corresponds to MAP_SVG index)
const NPC_DATA = {
0: { char_id: 'CHAR_1_Cactus', name: 'Mr. Cactus', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Mr. Cactus: Welcome to the scorching desert.", "Mr. Cactus: Don't touch me! Just keep moving right."] },
1: { char_id: 'CHAR_2_CowBoy', name: 'Cow Boy', svg_content: CHAR_SVG_2, initial_x: 500, dialogue: ["Cow Boy: Howdy, partner! This desert goes on forever.", "Cow Boy: You look like you're heading for the pyramids."] },
2: { char_id: 'CHAR_3_CowGirl', name: 'Cow Girl', svg_content: CHAR_SVG_3, initial_x: 600, dialogue: ["Cow Girl: Careful of the sandstorms, they're sneaky!", "Cow Girl: Find the Triangle Fairy at the end!"] },
3: { char_id: 'CHAR_4_FireGuy', name: 'Fire Guy', svg_content: CHAR_SVG_4, initial_x: 250, dialogue: ["Fire Guy: Phew! It's so hot I'm almost melting!", "Fire Guy: The desert holds many secrets, keep exploring!"] },
4: { char_id: 'CHAR_5_PyramidHead', name: 'Pyramid Head', svg_content: CHAR_SVG_5, initial_x: 550, dialogue: ["Pyramid Head: The spirits of the sand guide your path.", "Pyramid Head: Do not falter. Continue your pilgrimage."] },
5: { char_id: 'CHAR_6_Wolfy', name: 'Wolfy', svg_content: CHAR_SVG_6, initial_x: 350, dialogue: ["Wolfy: Aooooh! This place is lonely. Good luck finding the way out.", "Wolfy: The next phase will be your final test."] },
6: { char_id: 'CHAR_7_SkullBones', name: 'Skull Bones', svg_content: CHAR_SVG_7, initial_x: 450, dialogue: ["Skull Bones: The end is nigh! Only the fairy can help you now.", "Skull Bones: But first, a word of advice: watch your step..."] },
7: { char_id: 'TRIANGLE_FAIRY', name: 'Triangle Fairy', svg_content: TRIANGLE_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Triangle Fairy: Welcome, traveler, to the end of the Grand Desert.", "Triangle Fairy: You have mastered the sand and the heat.", "Triangle Fairy: You have earned your rest. Grand Desert complete!"] },
};
const MAX_TRANSITIONS = 7; // 7 transitions (Map 1 -> 2 -> ... -> 8). Total 8 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert Sky Gradient (Dusty Tan/Orange) -->
<linearGradient id="desertSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 180, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 160, 80);stop-opacity:1" />
</linearGradient>
<!-- Sand Dune Gradient (Light Beige/Sand) -->
<linearGradient id="sandDuneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 240, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 220, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Dusty Tan) -->
<rect x="0" y="0" width="800" height="500" fill="url(#desertSkyGradient)" />
<!-- 2. Sun (Intense Yellow/Orange) -->
<circle cx="750" cy="80" r="100" fill="rgb(255, 210, 0)" />
<!-- 3. Distant Horizon (Darker Sand) -->
<path d="M0 350 Q200 320, 400 350 T800 340 V500 H0 Z"
fill="rgb(180, 140, 60)" />
<!-- 4. Main Ground Dune (Sand/Dune effect) - This is the primary platform -->
<path d="M0 450 Q200 440, 400 450 T800 440 V500 H0 Z"
fill="url(#sandDuneGradient)" />
<!-- 5. Background Dune 1 (Far left) -->
<path d="M0 450 Q100 400, 200 450"
fill="rgb(210, 170, 90)"
opacity="0.8" />
<!-- 6. Background Dune 2 (Center-right) -->
<path d="M500 450 Q650 420, 800 450 V500 H500 Z"
fill="rgb(220, 180, 100)"
opacity="0.9" />
<!-- 7. Small Pyramid Silhouette (Distant detail) -->
<g transform="translate(600, 320)" fill="rgb(160, 120, 50)" opacity="0.6">
<polygon points="0,0 50,50 -50,50" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert Sky Gradient (Dusty Tan/Orange - Same as Map 1) -->
<linearGradient id="desertSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 180, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 160, 80);stop-opacity:1" />
</linearGradient>
<!-- Sand Dune Gradient (Light Beige/Sand - Same as Map 1) -->
<linearGradient id="sandDuneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 240, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 220, 170);stop-opacity:1" />
</linearGradient>
<!-- Pyramid Colors -->
<linearGradient id="pyramidSideLight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(210, 180, 140);"/>
<stop offset="100%" style="stop-color:rgb(180, 150, 110);"/>
</linearGradient>
</defs>
<!-- 1. Sky (Dusty Tan) -->
<rect x="0" y="0" width="800" height="500" fill="url(#desertSkyGradient)" />
<!-- 2. Sun (Intense Yellow/Orange) -->
<circle cx="750" cy="80" r="100" fill="rgb(255, 210, 0)" />
<!-- 3. Distant Horizon (Darker Sand) -->
<path d="M0 350 Q200 320, 400 350 T800 340 V500 H0 Z"
fill="rgb(180, 140, 60)" />
<!-- 4. Main Ground Dune (Steeper platform) -->
<path d="M0 450 Q400 420, 800 450 V500 H0 Z"
fill="url(#sandDuneGradient)" />
<!-- 5. Pyramids (Closer detail, stylized version) -->
<g transform="translate(150, 320)">
<!-- Pyramid 1 (Smallest, furthest) -->
<polygon points="0,0 70,130 -70,130" fill="url(#pyramidSideLight)" stroke="rgb(150, 120, 80)" stroke-width="1" />
<!-- Pyramid 2 (Middle, slightly darker side) -->
<polygon points="100,-10 200,130 0,130" fill="rgb(190, 160, 110)" stroke="rgb(150, 120, 80)" stroke-width="1" />
<!-- Pyramid 3 (Largest, closest) -->
<polygon points="150,-40 300,130 0,130" fill="url(#pyramidSideLight)" stroke="rgb(150, 120, 80)" stroke-width="1" />
</g>
<!-- 6. Small Cactus Silhouette (Background Detail) -->
<rect x="700" y="380" width="10" height="70" fill="rgb(0, 100, 0)" />
<circle cx="705" cy="380" r="15" fill="rgb(0, 100, 0)" />
<rect x="695" y="400" width="20" height="10" fill="rgb(0, 100, 0)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert Sky Gradient (Dusty Tan/Orange - Same as Map 1) -->
<linearGradient id="desertSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 180, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 160, 80);stop-opacity:1" />
</linearGradient>
<!-- Sand/Rock Floor Gradient (More emphasis on rock/stone) -->
<linearGradient id="rockFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(210, 180, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 160, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Dusty Tan) -->
<rect x="0" y="0" width="800" height="500" fill="url(#desertSkyGradient)" />
<!-- 2. Sun (Intense Yellow/Orange) -->
<circle cx="750" cy="80" r="100" fill="rgb(255, 210, 0)" />
<!-- 3. Distant Mesas/Canyons (Dark brown silhouette) -->
<path d="M0 350 L150 280 L300 350 L500 250 L650 350 L800 300 V500 H0 Z"
fill="rgb(120, 80, 40)" />
<!-- 4. Main Ground (Flat and rocky platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#rockFloorGradient)" />
<!-- 5. Tumbleweed Detail (Movement effect hint) -->
<circle cx="100" cy="430" r="10" fill="rgb(160, 120, 80)" stroke="rgb(100, 70, 40)" stroke-width="1" />
<!-- 6. Small Rocks/Pebbles (Ground detail) -->
<g fill="rgb(140, 140, 140)" opacity="0.7">
<circle cx="250" cy="445" r="5" />
<ellipse cx="450" cy="440" rx="15" ry="5" />
<circle cx="700" cy="448" r="4" />
</g>
<!-- 7. Small Desert Plant (Foreground detail) -->
<path d="M50 450 V430 Q55 425, 60 430 V450" fill="rgb(0, 120, 0)" />
<path d="M70 450 V435 Q75 428, 80 435 V450" fill="rgb(0, 100, 0)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert Sky Gradient (Dusty Tan/Orange - Consistent) -->
<linearGradient id="desertSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 180, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 160, 80);stop-opacity:1" />
</linearGradient>
<!-- Sand Floor Gradient (Main platform) -->
<linearGradient id="sandFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240, 220, 170);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 200, 150);stop-opacity:1" />
</linearGradient>
<!-- Oasis Water Color -->
<stop id="oasisWater" stop-color="rgb(0, 170, 200)" />
</defs>
<!-- 1. Sky (Dusty Tan) -->
<rect x="0" y="0" width="800" height="500" fill="url(#desertSkyGradient)" />
<!-- 2. Sun (Intense Yellow/Orange) -->
<circle cx="750" cy="80" r="100" fill="rgb(255, 210, 0)" />
<!-- 3. Distant Horizon (Darker Sand) -->
<path d="M0 350 Q200 320, 400 350 T800 340 V500 H0 Z"
fill="rgb(180, 140, 60)" />
<!-- 4. Main Ground (Flat Sand Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sandFloorGradient)" />
<!-- 5. Sandcastle/Fortress Silhouette (Background Detail) -->
<g transform="translate(600, 350)" fill="rgb(255, 210, 0)" stroke="rgb(200, 160, 0)" stroke-width="1" opacity="0.9">
<rect x="0" y="0" width="100" height="80" />
<!-- Towers with Red Flags -->
<rect x="-10" y="-30" width="20" height="30" />
<polygon points="0,-30 10,-40 -10,-40" fill="red" />
<rect x="90" y="-30" width="20" height="30" />
<polygon points="100,-30 110,-40 90,-40" fill="red" />
</g>
<!-- 6. Oasis Pool (Foreground/Midground Feature) -->
<g transform="translate(200, 430)">
<ellipse cx="0" cy="0" rx="80" ry="25" fill="rgb(80, 190, 200)" />
<!-- Palm Tree at Oasis -->
<rect x="-5" y="-120" width="10" height="100" fill="rgb(139, 69, 19)" />
<path d="M-50 -100 L 0 -140 L 50 -100 L 0 -120 Z" fill="rgb(0, 100, 0)" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert Sky Gradient (Dusty Tan/Orange - Consistent) -->
<linearGradient id="desertSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 180, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 160, 80);stop-opacity:1" />
</linearGradient>
<!-- Dark Rock Gradient -->
<linearGradient id="darkRockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 110, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 80, 50);stop-opacity:1" />
</linearGradient>
<!-- Rocky Floor Gradient -->
<linearGradient id="rockyFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(190, 160, 120);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(170, 140, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Dusty Tan) -->
<rect x="0" y="0" width="800" height="500" fill="url(#desertSkyGradient)" />
<!-- 2. Sun (Intense Yellow/Orange) -->
<circle cx="750" cy="80" r="100" fill="rgb(255, 210, 0)" />
<!-- 3. Mesas/Cliffs (Darker, more imposing) -->
<path d="M0 350 L100 250 L200 350 L350 200 L550 300 L650 250 L800 350 V500 H0 Z"
fill="url(#darkRockGradient)" />
<!-- Shadow detail on cliffs -->
<path d="M100 250 L200 350 L150 300 Z" fill="black" opacity="0.1" />
<path d="M550 300 L650 250 L600 275 Z" fill="black" opacity="0.1" />
<!-- 4. Main Ground (Rocky Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#rockyFloorGradient)" />
<!-- 5. Boulder Cluster (Left side detail) -->
<g transform="translate(150, 430)" fill="rgb(150, 150, 150)" stroke="rgb(100, 100, 100)" stroke-width="1">
<circle cx="0" cy="0" r="15" />
<ellipse cx="25" cy="10" rx="20" ry="10" />
<circle cx="-15" cy="15" r="8" />
</g>
<!-- 6. Wind Blown Sand/Dust Effect (Near the ground) -->
<path d="M0 450 Q200 445, 400 450 T800 445" fill="none" stroke="rgb(255, 240, 200)" stroke-width="2" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.4;0.7" dur="4s" repeatCount="indefinite" />
</path>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunset/Night Sky Gradient -->
<linearGradient id="nightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(50, 60, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 100, 140);stop-opacity:1" />
</linearGradient>
<!-- Sand Dune Gradient (Colder, shadowed tone) -->
<linearGradient id="nightSandDuneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 130, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 100, 70);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Night/Sunset Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#nightSkyGradient)" />
<!-- 2. Moon (or setting Sun) - Soft, ethereal light -->
<circle cx="100" cy="100" r="80" fill="white" opacity="0.6" />
<!-- 3. Distant Horizon (Darker Sand) - Silhouette -->
<path d="M0 350 Q200 320, 400 350 T800 340 V500 H0 Z"
fill="rgb(90, 70, 40)" />
<!-- 4. Main Ground Dune (Colder Sand Platform) -->
<path d="M0 450 Q200 440, 400 450 T800 440 V500 H0 Z"
fill="url(#nightSandDuneGradient)" />
<!-- 5. Silhouettes of Pyramids (Far Background) -->
<g transform="translate(600, 300)" fill="rgb(50, 40, 20)" opacity="0.8">
<polygon points="0,0 80,80 -80,80" />
<polygon points="50,20 120,80 50,80" />
</g>
<!-- 6. Scattered Small Cactus (Foreground Silhouette) -->
<rect x="150" y="400" width="10" height="50" fill="rgb(0, 80, 0)" />
<rect x="400" y="410" width="10" height="40" fill="rgb(0, 60, 0)" />
<!-- 7. Dust/Wind Effect (Soft, low-opacity movement) -->
<path d="M0 450 Q200 445, 400 450 T800 445" fill="none" stroke="rgb(255, 255, 255)" stroke-width="1" opacity="0.3">
<animate attributeName="opacity" values="0.3;0.1;0.3" dur="5s" repeatCount="indefinite" />
</path>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Midnight Sky Gradient (Very Dark Blue/Black) -->
<linearGradient id="midnightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(20, 20, 40);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(40, 40, 80);stop-opacity:1" />
</linearGradient>
<!-- Dark Sand Gradient (Deep Shadow) -->
<linearGradient id="darkSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 60, 40);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(60, 40, 20);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Midnight Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#midnightSkyGradient)" />
<!-- 2. Stars/Night Glow (Small white dots) -->
<g fill="white" opacity="0.8">
<circle cx="150" cy="50" r="2" />
<circle cx="300" cy="120" r="1" />
<circle cx="500" cy="70" r="3" />
<circle cx="650" cy="180" r="1.5" />
<circle cx="780" cy="10" r="2.5" />
<circle cx="40" cy="200" r="1" />
</g>
<!-- 3. Distant Dark Horizon (Extremely dark silhouette) -->
<path d="M0 350 Q200 340, 400 350 T800 345 V500 H0 Z"
fill="rgb(30, 20, 10)" />
<!-- 4. Main Ground (Simple, dark sand platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#darkSandGradient)" />
<!-- 5. Single Rock/Bone (Detail for Skull Bones NPC theme) -->
<rect x="100" y="440" width="30" height="10" fill="rgb(150, 150, 150)" />
<rect x="700" y="445" width="20" height="5" fill="rgb(160, 160, 160)" />
<!-- 6. Subtle Fog/Mist (Low ground effect) -->
<rect x="0" y="400" width="800" height="50" fill="white" opacity="0.05" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Final Sky Gradient (Deep, Mystical Violet/Blue) -->
<linearGradient id="mysticalSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 50, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 70, 130);stop-opacity:1" />
</linearGradient>
<!-- Gold Light/Glow (For the final reveal) -->
<radialGradient id="goldGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255, 215, 0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(100, 70, 0);stop-opacity:0.3"/>
</radialGradient>
<!-- Sacred Ground Stone -->
<linearGradient id="sacredStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 120, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Mystical Violet) -->
<rect x="0" y="0" width="800" height="500" fill="url(#mysticalSkyGradient)" />
<!-- 2. Pyramid Entrance/Structure (The backdrop for the Fairy) -->
<g transform="translate(400, 450)">
<!-- Main Large Pyramid Face (Left Side Shadowed) -->
<polygon points="-300,0 0,-250 0,0" fill="rgb(100, 70, 40)" />
<!-- Main Large Pyramid Face (Right Side Illuminated by the Fairy's glow) -->
<polygon points="0,0 300,0 0,-250" fill="rgb(150, 110, 60)" />
<!-- Pyramid Base/Platform -->
<rect x="-400" y="0" width="800" height="50" fill="url(#sacredStoneGradient)" />
<!-- Central Gold Symbol/Focus Point (Where the Fairy stands) -->
<circle cx="0" cy="-100" r="100" fill="url(#goldGlow)" opacity="0.8" />
<polygon points="-50,-100 50,-100 0,-150" fill="rgb(255, 215, 0)" stroke="rgb(200, 160, 0)" stroke-width="2" />
</g>
<!-- 3. Ground (Stone Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sacredStoneGradient)" />
<!-- 4. Glowing Sand (Foreground light effect) -->
<path d="M0 450 Q200 445, 400 450 T800 445" fill="none" stroke="rgb(255, 215, 0)" stroke-width="3" opacity="0.5">
<animate attributeName="opacity" values="0.5;0.2;0.5" dur="3s" repeatCount="indefinite" />
</path>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null; // Stores the dialogue array for the current NPC interaction
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #e67e22; /* Desert/Orange color */
color: white;
border: 2px solid #f1c40f;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(230, 126, 34, 0.5);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = isFinalNPC ? NPC_WIDTH_DEFAULT : NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al mapContainer (la escena de juego) ***
mapContainer.appendChild(clickArea);
});
}
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Desert dialogue box (sand/orange/gold theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(230, 126, 34, 0.9); /* Desert Orange */
border: 5px solid #f1c40f; /* Gold/Yellow Border */
box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Triangle Fairy is only NPC in phase 7)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:gold; font-size:36px; text-align:center; font-family: Arial, sans-serif;">
LEVEL COMPLETE!<br>The secrets of the Grand Desert are yours.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #e67e22;
color: white;
border: 4px solid #f1c40f;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
phasesCompleted++;
// Check if we need to change the background to the next map in the array
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
// Final NPC (Triangle Fairy) is automatically loaded with the last map (MAP_SVG_8)
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics (No Swimming Mode)
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel4 = function() {
// ==UserScript==
// @name Drawaria Game Level 4 - Sunny Beach
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 4: Sunny Beach. Enjoy the sun and waves as you meet characters on your journey across the sand.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Sunny Beach";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-beach.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground on the SVG sand)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders (Movable NPCs)
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="250.801" y1="30.325" x2="250.801" y2="463.551" id="gradient-3" gradientTransform="matrix(-0.999892, -0.014703, 0.004807, -0.326924, 483.725308, 241.794082)">
<stop offset="0" style="stop-color: rgb(100% 93.333% 34.118%)"/>
<stop offset="1" style="stop-color: rgb(57.183% 53.469% 0%)"/>
</linearGradient>
</defs>
<ellipse style="stroke-width: 3px; stroke: rgb(105, 119, 35); fill: url("#gradient-3");" cx="250.801" cy="246.938" rx="173.395" ry="216.613"/>
<path style="stroke-width: 3px; stroke: rgb(105, 119, 35); fill: rgba(255, 238, 87, 0.01);" d="M 79.106 214.459 C 105.144 205.78 128.057 183.047 142.604 160.419 C 154.877 141.328 162.41 120.961 176.379 103.001 C 180.378 97.86 183.291 87.983 187.187 84.087 C 187.545 83.729 193.485 85.381 193.942 85.438 C 201.331 86.362 209.453 85.438 216.909 85.438 C 238.534 85.438 261.55 86.047 283.108 84.087 C 288.254 83.62 298.55 78.683 301.347 78.683 C 301.346 82.311 304.5 84.989 306.075 88.14 C 309.237 94.465 311.873 101.479 314.181 108.406 C 323.467 136.263 345.961 159.099 366.871 180.009 C 373.43 186.568 380.309 197.749 387.136 202.3 C 392.04 205.57 395.762 210.796 400.646 214.459 C 404.875 217.631 412.257 220.666 415.507 223.916 C 416.619 225.028 420.755 227.969 422.262 227.969"/>
<path d="M 253.049 86.79 L 270.205 92.852 L 296.139 87.671 L 303.438 94.232 L 336.521 90.257 L 333.506 96.906 L 371.658 94.388 L 358.518 100.707 L 399.343 99.802 L 376.903 105.394 L 417.836 106.16 L 387.505 110.673 L 425.974 113.063 L 389.66 116.214 L 423.247 120.076 L 383.231 121.667 L 409.826 126.759 L 368.621 126.689 L 386.554 132.692 L 346.75 130.967 L 354.893 137.502 L 318.992 134.23 L 316.833 140.887 L 287.09 136.273 L 274.765 142.635 L 253.049 136.969 L 231.333 142.635 L 219.008 136.273 L 189.265 140.887 L 187.106 134.23 L 151.205 137.502 L 159.348 130.967 L 119.544 132.692 L 137.477 126.689 L 96.272 126.759 L 122.867 121.667 L 82.851 120.076 L 116.438 116.214 L 80.124 113.063 L 118.593 110.673 L 88.262 106.16 L 129.195 105.394 L 106.755 99.802 L 147.58 100.707 L 134.44 94.388 L 172.592 96.906 L 169.577 90.257 L 202.66 94.232 L 209.959 87.671 L 235.893 92.852 Z" bx:shape="star 253.049 114.823 173.267 28.033 0.79 25 1@956b4dc9" style="stroke-width: 3px; stroke: rgb(105, 119, 35); fill: rgb(73, 165, 216);"/>
<ellipse style="stroke-width: 3px; stroke: rgb(105, 119, 35);" cx="191.915" cy="240.969" rx="20.941" ry="48.636"/>
<ellipse style="stroke-width: 3px; stroke: rgb(105, 119, 35);" cx="299.997" cy="245.697" rx="20.941" ry="48.636"/>
<path d="M 309.682 359.213 C 309.682 371.525 288.613 360.564 254.291 360.564 C 219.969 360.564 185.39 371.525 185.39 359.213 C 185.39 346.901 213.214 336.921 247.536 336.921 C 281.858 336.921 309.682 346.901 309.682 359.213 Z" style="stroke-width: 3px; stroke: rgb(105, 119, 35);"/>
<ellipse style="stroke-width: 3px; stroke: rgb(105, 119, 35);" cx="126.621" cy="297.067" rx="36.477" ry="8.782"/>
<ellipse style="stroke-width: 3px; stroke: rgb(105, 119, 35);" cx="133.376" cy="328.14" rx="34.451" ry="8.782"/>
<ellipse style="stroke-width: 3; stroke: rgb(105, 119, 35);" cx="-367.44" cy="307.199" rx="36.477" ry="8.782" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3; stroke: rgb(105, 119, 35);" cx="-360.68" cy="338.272" rx="34.451" ry="8.782" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 225.92 189.253 C 222.219 194.91 206.97 191.48 191.861 181.594 C 176.752 171.708 167.503 159.108 171.205 153.451 C 174.906 147.794 176.645 153.925 191.754 163.811 C 206.864 173.698 229.622 183.596 225.92 189.253 Z" style="stroke-width: 3; stroke: rgb(105, 119, 35); transform-origin: 196.268px 174.859px;"/>
<path d="M 463.627 144.462 C 459.926 138.805 444.677 142.234 429.568 152.12 C 414.459 162.006 405.21 174.607 408.911 180.263 C 412.613 185.92 414.352 179.789 429.461 169.903 C 444.571 160.016 467.329 150.118 463.627 144.462 Z" style="stroke-width: 3; stroke: rgb(105, 119, 35); transform-origin: 363.047px 168.988px;" transform="matrix(-1, 0, 0, -1, 0.000004, -0.000012)"/>
<path d="M 252.885 395.671 L 279.511 399.47 L 317.996 397.819 L 325.629 402.748 L 365.661 403.688 L 352.255 408.427 L 383.107 411.705 L 352.255 414.983 L 365.661 419.722 L 325.629 420.662 L 317.996 425.591 L 279.511 423.94 L 252.885 427.739 L 226.259 423.94 L 187.774 425.591 L 180.141 420.662 L 140.109 419.722 L 153.515 414.983 L 122.663 411.705 L 153.515 408.427 L 140.109 403.688 L 180.141 402.748 L 187.774 397.819 L 226.259 399.47 Z" bx:shape="star 252.885 411.705 130.222 16.034 0.79 12 1@2ee07150" style="stroke-width: 3px; stroke: rgb(105, 119, 35); fill: rgb(73, 216, 100);"/>
<path d="M 248.512 437.458 L 265.501 439.76 L 290.057 438.76 L 294.927 441.747 L 320.469 442.317 L 311.916 445.189 L 331.601 447.176 L 311.916 449.163 L 320.469 452.035 L 294.927 452.605 L 290.057 455.592 L 265.501 454.592 L 248.512 456.894 L 231.523 454.592 L 206.967 455.592 L 202.097 452.605 L 176.555 452.035 L 185.108 449.163 L 165.423 447.176 L 185.108 445.189 L 176.555 442.317 L 202.097 441.747 L 206.967 438.76 L 231.523 439.76 Z" bx:shape="star 248.512 447.176 83.089 9.718 0.79 12 1@9629f3f3" style="stroke-width: 3px; stroke: rgb(105, 119, 35); fill: rgb(73, 216, 100);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-4" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 9 0.64 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="9"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1.28"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 264.329px 285.468px;">
<g style="filter: url("#inner-shadow-filter-0");">
<rect x="249.348" y="324.335" width="24.81" height="118.604" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(81, 216, 52);"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(81, 216, 52);" transform="matrix(0.866432, 0.499295, -0.499295, 0.866432, 279.912419, -47.327284)" cx="190.651" cy="430.836" rx="41.206" ry="17.577"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(81, 216, 52);" transform="matrix(-0.866432, 0.499295, 0.499295, 0.866432, 244.804236, -44.301089)" cx="190.651" cy="430.836" rx="41.206" ry="17.577"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 3px;" transform="matrix(0.853506, 0.521083, -0.521083, 0.853506, 253.355361, -59.824956)" cx="229.076" cy="422.97" rx="33.677" ry="1.147"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 3px;" transform="matrix(-0.853506, 0.521083, 0.521083, 0.853506, 265.611828, -56.799844)" cx="229.076" cy="422.97" rx="33.677" ry="1.147"/>
<path d="M 360.229 174.307 L 358.755 299.237 C 356.278 325.544 314.912 346.473 264.245 346.473 C 213.578 346.473 172.212 325.544 169.735 299.237 L 169.06 299.237 C 169.06 299.237 169.157 167.318 169.589 163.856 C 170.909 153.3 170.393 111.817 170.393 111.817 C 170.393 111.817 194.15 147.878 196.613 146.646 C 203.041 143.433 227.314 109.343 230.65 111.011 C 232.511 111.941 257.62 147.797 258.466 148.643 C 258.652 148.829 260.944 147.047 261.268 146.641 C 264.267 142.893 293.554 113.884 298.501 111.411 C 300.83 110.247 320.608 149.932 324.123 153.447 C 324.271 153.596 358.688 111.34 359.358 112.011 C 359.918 112.57 360.109 157.406 360.147 174.307 L 360.229 174.307 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(216, 177, 95);"/>
<path d="M 210.877 -240.161 Q 231.565 -263.31 252.253 -240.161 L 252.253 -240.161 Q 272.941 -217.012 231.565 -217.012 L 231.565 -217.012 Q 190.189 -217.012 210.877 -240.161 Z" bx:shape="triangle 190.189 -263.31 82.752 46.298 0.5 0.5 1@a17a4789" style="stroke: rgb(0, 0, 0); stroke-width: 3px;" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 286.822 -241.021 Q 307.51 -264.17 328.198 -241.021 L 328.198 -241.021 Q 348.886 -217.872 307.51 -217.872 L 307.51 -217.872 Q 266.134 -217.872 286.822 -241.021 Z" bx:shape="triangle 266.134 -264.17 82.752 46.298 0.5 0.5 1@c3dc6425" style="stroke: rgb(0, 0, 0); stroke-width: 3px;" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<rect x="184.303" y="214.659" width="163.839" height="9.187" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
</g>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1.2 1.2" begin="0s" dur="6s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;3" dur="6s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 #3f3fff" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="#3f3fff" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="drop-shadow-filter-0" bx:preset="drop-shadow 1 0 0 15 1 #2c94b39f" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="15"/>
<feOffset dx="0" dy="0"/>
<feComponentTransfer result="offsetblur">
<feFuncA id="spread-ctrl" type="linear" slope="2"/>
</feComponentTransfer>
<feFlood flood-color="#2c94b39f"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g>
<ellipse style="stroke-width: 3px; stroke: rgb(0, 0, 0); fill: rgb(85, 201, 216); filter: url("#inner-shadow-filter-0") url("#drop-shadow-filter-0");" cx="140.481" cy="144.187" rx="54.454" transform="matrix(0.008771, 0.999962, -0.999962, 0.008771, 283.428834, 2.44871)" ry="50.612"/>
<path style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" d="M 121.071 156.194 C 128.926 157.504 137.213 157.51 145.185 157.51 C 146.013 157.51 153.596 157.151 154.393 157.948 C 156.122 159.677 151.664 170.322 150.447 171.54 C 147.045 174.942 142.478 175.02 136.855 172.893 C 135.851 172.513 122.06 164.949 122.824 156.633"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.018865, 0.999822, -0.999822, 0.018865, 248.619811, 21.501097)" cx="113.206" cy="132.561" rx="10.22" ry="11.085"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.018865, 0.999822, -0.999822, 0.018865, 289.685364, 24.392857)" cx="113.206" cy="132.561" rx="10.22" ry="11.085"/>
<ellipse style="stroke-width: 3px; stroke: rgb(0, 0, 0); fill: rgb(85, 201, 216); filter: url("#inner-shadow-filter-0") url("#drop-shadow-filter-0");" cx="140.481" cy="144.187" rx="34.645" transform="matrix(0.009669, 0.999953, -0.99997, 0.007956, 401.902393, 66.307587)" ry="35.499"/>
<path style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" d="M 245.464 215.567 C 250.974 216.401 256.786 216.405 262.378 216.405 C 262.959 216.405 268.277 216.176 268.836 216.683 C 270.049 217.783 266.922 224.556 266.069 225.331 C 263.683 227.495 260.479 227.545 256.535 226.192 C 255.831 225.95 246.158 221.138 246.694 215.847"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.020797, 0.999784, -0.99986, 0.017113, 373.651697, 88.02553)" cx="113.206" cy="132.561" rx="6.502" ry="7.775"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.020797, 0.999784, -0.99986, 0.017113, 402.455012, 89.865374)" cx="113.206" cy="132.561" rx="6.502" ry="7.775"/>
<ellipse style="stroke-width: 3px; stroke: rgb(0, 0, 0); fill: rgb(85, 201, 216); filter: url("#inner-shadow-filter-0") url("#drop-shadow-filter-0");" cx="140.481" cy="144.187" rx="26.941" transform="matrix(0.009354, 0.999956, -0.999967, 0.008224, 306.256819, 135.608048)" ry="26.706"/>
<path style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" d="M 153.147 283.209 C 157.292 283.857 161.664 283.86 165.871 283.86 C 166.308 283.86 170.309 283.682 170.729 284.076 C 171.642 284.932 169.29 290.199 168.648 290.802 C 166.853 292.484 164.442 292.523 161.475 291.471 C 160.946 291.283 153.669 287.541 154.072 283.426"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.02012, 0.999798, -0.999846, 0.017689, 281.904889, 158.277563)" cx="113.206" cy="132.561" rx="5.056" ry="5.849"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 216, 216); stroke: rgb(26, 59, 254);" transform="matrix(0.02012, 0.999798, -0.999846, 0.017689, 303.573835, 159.708318)" cx="113.206" cy="132.561" rx="5.056" ry="5.849"/>
<animateMotion path="M 0 0 L 1 -78" calcMode="linear" begin="0s" dur="10s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 237.837px 230.41px; filter: url("#inner-shadow-filter-0");">
<path d="M 857.222 413.889 Q 857.222 409.299 861.401 406.651 Q 865.863 403.823 871.697 405.532 Q 878.182 407.431 882.294 413.889 Q 886.913 421.145 886.172 430.603 Q 885.344 441.179 878.115 450.076 Q 870.109 459.93 857.222 464.032 Q 843.093 468.529 827.972 464.551 Q 811.544 460.23 799.322 447.317 Q 786.148 433.4 782.008 413.889 Q 777.575 393 784.847 372.103 Q 792.588 349.859 811.258 334.276 Q 831.033 317.771 857.222 313.603 Q 884.843 309.207 911.544 319.801 Q 939.599 330.933 958.547 355.389 Q 978.392 381.002 982.579 413.889 Q 986.952 448.234 973.022 480.746 Q 958.512 514.613 928.258 536.926 Q 896.815 560.117 857.222 564.317 Q 816.157 568.675 777.829 551.401 Q 738.149 533.519 712.472 497.46 Q 685.933 460.192 681.722 413.889 Q 677.376 366.104 697.997 321.96 Q 719.248 276.467 761.115 247.426 Q 775.047 237.763 790.528 230.649" bx:shape="spiral 857.222 413.889 0 195 0 700 1@093acc45" style="stroke: rgb(10, 108, 129); fill: rgb(182, 235, 255); stroke-width: 3.20079px; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.224391, -0.910011, -0.910014, -0.22439, -594.457616, -167.511897)">
<animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"/>
</path>
<rect style="fill: rgb(216, 216, 216); stroke: rgb(10, 108, 129); stroke-width: 3px; fill-opacity: 0;" height="0.005" transform="matrix(0.841401, 0.540411, 0.540411, -0.841401, 553.539093, 417.755418)" x="-300.17" y="-0.452" width="94.1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;20" begin="0s" dur="2s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
<g style="transform-origin: 213.268px 159.79px;">
<path d="M 197.716 175.813 C 186.971 175.387 138.968 180.541 131.232 175.813 C 123.496 171.085 146.115 140.87 164.474 140.87 C 182.833 140.87 208.461 176.239 197.716 175.813 Z" style="stroke: rgb(0, 0, 0);"/>
<path d="M 294.32 143.768 C 283.575 144.194 235.572 139.04 227.836 143.768 C 220.1 148.496 242.719 178.711 261.078 178.711 C 279.437 178.711 305.065 143.342 294.32 143.768 Z" style="stroke: rgb(0, 0, 0); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000054, 0.000003)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;10" begin="0s" dur="2s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;10 -30" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_5 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="258.407" y1="78.818" x2="258.407" y2="437.426" id="gradient-1">
<stop offset="0" style="stop-color: rgb(100% 96.078% 47.451%)"/>
<stop offset="1" style="stop-color: rgb(56.907% 55.075% 1.2779%)"/>
</linearGradient>
</defs>
<g>
<path d="M 412.549 141.323 C 412.542 143.164 412.337 144.986 411.939 146.783 L 412.428 146.783 L 412.428 437.426 L 105.212 437.426 L 105.212 147.333 C 104.578 145.031 104.256 142.693 104.265 140.324 C 104.393 106.081 173.507 78.545 258.638 78.82 C 343.768 79.096 412.677 107.079 412.549 141.323 Z" style="stroke-width: 3px; stroke: rgb(98, 97, 29); fill: url("#gradient-1");"/>
<path style="stroke-width: 3px; stroke: rgb(98, 97, 29); fill: rgb(255, 245, 121);" d="M 134.415 221.588 C 155.889 202.835 175.611 188.253 201.575 155.129 C 208.793 145.921 214.073 133.792 219.266 123.702 C 220.574 121.16 222.804 115.845 222.804 115.845 C 222.804 115.845 222.338 119.202 222.804 120.756 C 223.492 123.047 228.427 127 229.881 128.612 C 239.741 139.56 254.113 146.827 265.262 156.112 C 272.7 162.306 280.235 170.662 288.261 175.754 C 298.897 182.502 311.673 185.787 322.758 191.468 C 342.461 201.564 366.178 214.081 386.447 214.081"/>
<path style="stroke-width: 3px; stroke: rgb(98, 97, 29); fill: rgb(255, 245, 121);" d="M 135.109 220.915 C 128.304 235.275 140.206 335.557 144.904 349.467 C 155.352 380.406 166.234 401.67 178.098 407.194 C 188.833 412.192 198.234 424.261 210.002 428.183 C 220.985 431.844 232.373 434.337 243.584 436.579 C 254.045 438.671 265.554 434.876 275.488 433.221 C 318.658 426.025 354.076 386.027 372.877 348.425 C 393.455 307.27 385.471 255.59 385.471 214.095"/>
<path d="M 259.494 139.551 L 300.478 146.018 L 359.716 143.208 L 371.464 151.599 L 433.083 153.199 L 412.448 161.265 L 459.937 166.846 L 412.448 172.427 L 433.083 180.494 L 371.464 182.093 L 359.716 190.484 L 300.478 187.674 L 259.494 194.141 L 218.51 187.674 L 159.272 190.484 L 147.524 182.093 L 85.905 180.494 L 106.54 172.427 L 59.051 166.846 L 106.54 161.265 L 85.905 153.199 L 147.524 151.599 L 159.272 143.208 L 218.51 146.018 Z" bx:shape="star 259.494 166.846 200.443 27.295 0.79 12 1@e70c867c" style="stroke-width: 3px; stroke: rgb(98, 97, 29); fill: rgb(245, 157, 255);"/>
<path d="M 254.803 383.495 L 275.748 389.113 L 308.393 384.766 L 315.368 391.046 L 356.176 388.441 L 348.424 394.703 L 392.974 394.122 L 371.336 399.687 L 414.799 401.193 L 381.619 405.458 L 419.285 408.888 L 378.16 411.391 L 405.948 416.373 L 361.333 416.842 L 376.231 422.837 L 332.962 421.222 L 333.356 427.58 L 296.121 424.056 L 281.969 430.087 L 254.803 425.036 L 227.637 430.087 L 213.485 424.056 L 176.25 427.58 L 176.644 421.222 L 133.375 422.837 L 148.273 416.842 L 103.658 416.373 L 131.446 411.391 L 90.321 408.888 L 127.987 405.458 L 94.807 401.193 L 138.27 399.687 L 116.632 394.122 L 161.182 394.703 L 153.43 388.441 L 194.238 391.046 L 201.213 384.766 L 233.858 389.113 Z" bx:shape="star 254.803 406.951 165.046 23.456 0.771 19 1@53192229" style="stroke-width: 3px; stroke: rgb(98, 97, 29); fill: rgb(133, 255, 121);"/>
<path d="M 225.682 255.371 C 225.682 263.093 208.474 246.422 187.737 246.422 C 166.999 246.422 150.583 263.093 150.583 255.371 C 150.583 247.649 165.924 220.64 186.662 220.64 C 207.4 220.64 225.682 247.649 225.682 255.371 Z" style="stroke-width: 3; stroke: rgb(98, 97, 29); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999753, 0.022217, -0.022217, 0.999753, 0, 0.000001)"/>
<path d="M 365.541 260.019 C 365.541 267.741 348.59 251.07 328.16 251.07 C 307.731 251.07 291.559 267.741 291.559 260.019 C 291.559 252.297 306.672 225.288 327.102 225.288 C 347.531 225.288 365.541 252.297 365.541 260.019 Z" style="stroke-width: 3; stroke: rgb(98, 97, 29); transform-origin: 328.55px 243.674px;" transform="matrix(0.999753, 0.022217, -0.022217, 0.999753, 0, -0.000001)"/>
<path style="stroke-width: 3px; stroke: rgb(98, 97, 29);" d="M 206.183 302.2 L 308.682 301.483 C 317.091 342.235 222.111 379.387 206.183 302.2 Z"/>
</g>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;3" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</svg>`;
const CHAR_SVG_6 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<g style="transform-origin: 239.965px 239.544px;">
<path style="fill: rgb(207, 216, 37); stroke-width: 3.25689px; stroke: rgb(97, 127, 0);" transform="matrix(0.897984, 0, 0, 0.944262, -311.297339, -74.161562)" d="M 613.889 170.556 L 613.889 170.556 L 645.362 235.357 A 101.85 101.85 0 0 1 645.362 235.357 L 708.914 201.431 L 708.914 201.431 L 696.287 272.356 A 101.85 101.85 0 0 1 696.287 272.356 L 767.643 282.264 L 767.643 282.264 L 715.739 332.222 A 101.85 101.85 0 0 1 715.739 332.222 L 767.643 382.18 L 767.643 382.18 L 696.287 392.088 A 101.85 101.85 0 0 1 696.287 392.088 L 708.914 463.013 L 708.914 463.013 L 645.362 429.087 A 101.85 101.85 0 0 1 645.362 429.087 L 613.889 493.889 L 613.889 493.889 L 582.416 429.087 A 101.85 101.85 0 0 1 582.416 429.087 L 518.864 463.013 L 518.864 463.013 L 531.491 392.088 A 101.85 101.85 0 0 1 531.491 392.088 L 460.135 382.18 L 460.135 382.18 L 512.039 332.222 A 101.85 101.85 0 0 1 512.039 332.222 L 460.135 282.264 L 460.135 282.264 L 531.491 272.356 A 101.85 101.85 0 0 1 531.491 272.356 L 518.864 201.431 L 518.864 201.431 L 582.416 235.357 A 101.85 101.85 0 0 1 582.416 235.357 Z M 613.889 332.222 A 0 0 0 0 0 613.889 332.222 A 0 0 0 0 0 613.889 332.222" bx:shape="cog 613.889 332.222 0 101.85 161.667 1 10 1@f32c09b4"/>
<ellipse style="fill: rgb(207, 216, 37); stroke-width: 3px; stroke: rgb(97, 127, 0);" cx="239.964" cy="240.541" rx="86.306" ry="92.791"/>
<path style="stroke-width: 3px; stroke: rgb(97, 127, 0);" d="M 200.083 261.587 L 271.706 260.817 C 275.532 293.34 208.233 330.865 200.083 261.587 Z"/>
<path d="M 195.194 193.905 C 199.525 193.356 203.468 192.958 208 194.417 C 213.503 196.189 221.341 200.581 225.672 205.43 C 229.869 210.129 232.473 217.206 233.868 222.846 C 235.126 227.932 235.3 234.072 234.38 237.701 C 233.699 240.392 232.304 242.355 230.539 243.592 C 228.793 244.815 225.961 245.5 223.879 245.129 C 221.774 244.753 219.332 243.577 217.989 241.287 C 216.17 238.186 217.136 230.762 215.94 226.432 C 214.886 222.621 214.155 218.931 211.586 216.443 C 208.801 213.748 202.951 211.413 199.292 211.321 C 196.152 211.242 192.832 212.465 190.84 214.65 C 188.626 217.079 187.943 221.978 187.254 225.92 C 186.543 229.991 187.723 235.76 186.742 238.726 C 186.043 240.837 184.963 242.098 183.412 243.08 C 181.718 244.152 178.834 244.988 176.753 244.616 C 174.648 244.24 172.172 243.226 170.862 240.775 C 168.933 237.166 168.632 228.037 169.325 222.334 C 169.975 216.993 172.273 211.689 174.448 207.479 C 176.383 203.733 178.129 200.25 181.363 198.003 C 184.877 195.562 190.653 194.48 195.194 193.905 Z M 274.762 192.71 C 281.709 191.468 290.297 192.212 296.276 194.246 C 301.562 196.045 306.381 199.539 309.339 203.211 C 312.042 206.566 313.107 210.294 313.949 214.992 C 314.97 220.689 315.132 231.4 313.949 235.482 C 313.251 237.89 312.208 238.853 310.619 239.836 C 308.834 240.94 305.53 241.68 303.448 241.372 C 301.576 241.096 299.745 239.777 298.582 238.555 C 297.509 237.429 296.953 236.487 296.533 234.457 C 295.86 231.207 297.35 223.451 296.533 219.602 C 295.905 216.647 295.416 214.273 293.203 212.687 C 290.384 210.666 284.103 209.401 279.372 210.126 C 274.141 210.927 266.168 215.255 263.237 218.322 C 261.19 220.463 261.149 222.434 260.676 225.237 C 260.085 228.732 261.684 234.782 260.676 238.043 C 259.869 240.651 258.152 242.795 256.321 243.933 C 254.606 245 252.091 245.337 250.175 244.958 C 248.247 244.577 245.95 242.849 244.796 241.628 C 243.892 240.672 243.598 240.294 243.259 238.555 C 242.595 235.149 242.491 224.942 243.259 220.114 C 243.842 216.453 244.682 214.266 246.333 211.406 C 248.188 208.193 250.423 204.763 254.273 201.93 C 259.162 198.332 267.701 193.971 274.762 192.71 Z" style="stroke-width: 3px; stroke: rgb(97, 127, 0);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;8" begin="0s" dur="6s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1.2 1.2" begin="0s" dur="6s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_7 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="263.509" cy="236.164" r="216.715" id="gradient-0">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="177.336" cy="280.296" r="31.09" id="gradient-1">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="349.836" cy="282.775" r="31.09" id="gradient-2">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
</defs>
<g style="transform-origin: 263.509px 236.164px;">
<path d="M 373.241 392.896 L 156.627 392.896 L 154.6 371.66 C 155.721 358.236 127.06 306.19 77.213 279.342 C 11.27 243.825 65.63 170.883 116.77 165.688 C 126.244 164.726 136.2 165.399 146.321 167.5 C 160.337 116.738 207.199 79.432 262.85 79.432 C 320.074 79.432 368.006 118.877 380.488 171.837 C 391.776 169.149 402.904 168.198 413.435 169.268 C 464.575 174.463 514.869 254.068 448.263 288.326 C 410.123 307.943 375.982 337.099 373.88 376.065 L 373.241 392.896 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; fill: url("#gradient-0");"/>
<path d="M 208.426 281.004 C 208.426 342.224 205.929 391.852 202.848 391.852 C 199.767 391.852 197.27 342.224 197.27 281.004 C 197.27 219.785 143.292 168.74 146.373 168.74 C 149.453 168.74 208.426 219.785 208.426 281.004 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; fill: url("#gradient-1");"/>
<path d="M 380.926 282.078 C 380.926 221.815 378.429 172.962 375.348 172.962 C 372.267 172.962 369.77 221.815 369.77 282.078 C 369.77 342.341 315.792 392.588 318.873 392.588 C 321.953 392.588 380.926 342.341 380.926 282.078 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%; fill: url("#gradient-2");" transform="matrix(-1, 0, 0, -1, -0.000038, -0.000031)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="transform-origin: 261.008px 214.275px;">
<path d="M 242.561 194.955 C 242.561 218.642 223.611 237.844 200.236 237.844 C 177.381 237.844 158.756 219.486 157.939 196.528 C 145.42 195.181 137.351 193.062 137.351 190.68 C 137.351 188.664 163.179 188.064 189.242 188.467 C 196.981 188.371 205.248 188.619 212.904 189.124 C 229.667 189.822 242.563 190.957 242.563 192.382 C 242.563 192.876 242.217 193.332 241.558 193.754 C 242.212 194.143 242.561 194.545 242.561 194.955 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px;"/>
<path d="M 384.662 233.596 C 384.662 209.909 365.712 190.707 342.337 190.707 C 319.482 190.707 300.857 209.065 300.04 232.023 C 287.521 233.37 279.452 235.489 279.452 237.871 C 279.452 239.887 305.28 240.487 331.343 240.084 C 339.082 240.18 347.349 239.932 355.005 239.427 C 371.768 238.729 384.664 237.594 384.664 236.169 C 384.664 235.675 384.318 235.219 383.659 234.797 C 384.313 234.408 384.662 234.006 384.662 233.596 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000057, -0.000008)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -10" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_8 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="263.509" cy="236.164" r="216.715" id="gradient-0">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="177.336" cy="280.296" r="31.09" id="gradient-1">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="349.836" cy="282.775" r="31.09" id="gradient-2">
<stop offset="0" style="stop-color: rgb(70.588% 96.471% 100%)"/>
<stop offset="1" style="stop-color: rgb(31.004% 56.33% 59.679%)"/>
</radialGradient>
</defs>
<g style="transform-origin: 263.509px 236.164px;">
<path d="M 373.241 392.896 L 156.627 392.896 L 154.6 371.66 C 155.721 358.236 127.06 306.19 77.213 279.342 C 11.27 243.825 65.63 170.883 116.77 165.688 C 126.244 164.726 136.2 165.399 146.321 167.5 C 160.337 116.738 207.199 79.432 262.85 79.432 C 320.074 79.432 368.006 118.877 380.488 171.837 C 391.776 169.149 402.904 168.198 413.435 169.268 C 464.575 174.463 514.869 254.068 448.263 288.326 C 410.123 307.943 375.982 337.099 373.88 376.065 L 373.241 392.896 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; fill: url("#gradient-0");"/>
<path d="M 208.426 281.004 C 208.426 342.224 205.929 391.852 202.848 391.852 C 199.767 391.852 197.27 342.224 197.27 281.004 C 197.27 219.785 143.292 168.74 146.373 168.74 C 149.453 168.74 208.426 219.785 208.426 281.004 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; fill: url("#gradient-1");"/>
<path d="M 380.926 282.078 C 380.926 221.815 378.429 172.962 375.348 172.962 C 372.267 172.962 369.77 221.815 369.77 282.078 C 369.77 342.341 315.792 392.588 318.873 392.588 C 321.953 392.588 380.926 342.341 380.926 282.078 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%; fill: url("#gradient-2");" transform="matrix(-1, 0, 0, -1, -0.000038, -0.000031)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="transform-origin: 261.008px 214.275px;">
<path d="M 242.561 194.955 C 242.561 218.642 223.611 237.844 200.236 237.844 C 177.381 237.844 158.756 219.486 157.939 196.528 C 145.42 195.181 137.351 193.062 137.351 190.68 C 137.351 188.664 163.179 188.064 189.242 188.467 C 196.981 188.371 205.248 188.619 212.904 189.124 C 229.667 189.822 242.563 190.957 242.563 192.382 C 242.563 192.876 242.217 193.332 241.558 193.754 C 242.212 194.143 242.561 194.545 242.561 194.955 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px;"/>
<path d="M 384.662 233.596 C 384.662 209.909 365.712 190.707 342.337 190.707 C 319.482 190.707 300.857 209.065 300.04 232.023 C 287.521 233.37 279.452 235.489 279.452 237.871 C 279.452 239.887 305.28 240.487 331.343 240.084 C 339.082 240.18 347.349 239.932 355.005 239.427 C 371.768 238.729 384.664 237.594 384.664 236.169 C 384.664 235.675 384.318 235.219 383.659 234.797 C 384.313 234.408 384.662 234.006 384.662 233.596 Z" style="stroke: rgb(42, 91, 123); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000057, -0.000008)"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 1.1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -10" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const PENTAGON_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="700" xmlns:bx="https://boxy-svg.com">
<g transform="matrix(1.255971, 0, 0, 1.527577, 37.24648, 3.528937)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke: none; pointer-events: none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.255971, 0, 0, 1.527577, 37.24648, 3.528937)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke: none; pointer-events: none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g>
<path d="M 200.739 356.733 L 263.415 356.733 L 285.887 451.246 L 175.53 452.825 L 200.739 356.733 Z" style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999863, 0.016575, -0.016575, 0.999863, 0.000001, 0)"/>
<path d="M 433.333 273.401 L 468.961 303.923 L 468.961 364.966 L 433.333 395.487 L 397.705 364.966 L 397.705 303.923 Z" bx:shape="n-gon 433.333 334.444 41.14 61.043 6 0 1@d9295583" style="vector-effect: non-scaling-stroke; stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" transform="matrix(-0.01915066, 0.99981661, -0.99981662, -0.01915027, 575.71295007, -104.70092515)"/>
<path d="M 228.141 378.035 C 228.141 379.685 227.456 381.186 226.337 382.3 C 226.7 383.243 226.896 384.25 226.896 385.295 C 226.896 390.679 221.695 395.044 215.28 395.044 C 208.865 395.044 203.664 390.679 203.664 385.295 C 203.664 383.124 204.51 381.119 205.94 379.498 L 168.402 324.935 L 183.17 314.775 L 222.451 371.875 C 225.668 372.306 228.141 374.9 228.141 378.035 Z" style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" cx="166.743" cy="317.883" rx="17.838" ry="15.349"/>
<path d="M 256.349 381.354 C 256.349 386.395 251.892 390.481 246.393 390.481 C 241.104 390.481 236.778 386.7 236.456 381.926 C 233.558 381.222 231.385 378.312 231.385 374.828 C 231.385 370.818 234.264 367.568 237.815 367.568 C 238.253 367.568 238.681 367.617 239.095 367.712 L 278.232 315.261 L 291.197 324.935 L 253.715 375.169 C 255.35 376.795 256.349 378.968 256.349 381.354 Z" style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" cx="293.893" cy="316.016" rx="15.142" ry="14.312"/>
<path d="M 265.477 422.328 L 285.389 451.782 L 245.564 451.782 L 245.679 451.612 L 209.035 451.612 L 209.195 451.367 L 175.455 451.367 L 196.405 419.839 L 213.24 445.176 L 229.363 420.499 L 247.719 448.595 Z" style="stroke-width: 3px; fill: rgb(199, 162, 216); stroke: rgb(80, 19, 92);"/>
<path style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" d="M 185.655 306.459 C 192.598 314.592 239.725 292.551 235.022 286.961 C 229.46 289.047 265.49 308.827 277.337 304.384"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 6;0 0" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.500058; 1" repeatCount="indefinite"/>
</g>
<g style="" transform="matrix(1.002364, 0, 0, 0.960781, -1.001028, 11.54786)">
<path d="M 191.413 241.326 L 198.695 277.551 C 208.459 299.332 113.868 290.075 109.545 280.432 L 156.341 213.411 L 191.413 241.326 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 187.762px 272.884px;"/>
<path d="M 482.222 107.53 L 545.786 152.999 L 521.507 226.569 L 442.937 226.569 L 418.658 152.999 Z" bx:shape="n-gon 482.222 173.333 66.835 65.803 5 0 1@54403d3a" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);" transform="matrix(0.9665614, -0.25643528, 0.26516901, 0.96424429, -388.53882193, 95.26698154)"/>
<path d="M 482.222 107.53 L 545.786 152.999 L 521.507 226.569 L 442.937 226.569 L 418.658 152.999 Z" bx:shape="n-gon 482.222 173.333 66.835 65.803 5 0 1@54403d3a" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 487.326px 170.824px;" transform="matrix(-0.966562, -0.256435, -0.265169, 0.964244, -147.040822, -26.281289)"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);" cx="237.343" cy="72.875" rx="32.241" ry="29.598"/>
<path d="M 284.792 305.003 L 292.074 268.778 C 301.838 246.997 207.247 256.254 202.924 265.897 L 249.72 332.918 L 284.792 305.003 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 281.141px 273.445px;" transform="matrix(-1, 0, 0, -1, -0.000017, 0.000003)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);" cx="235.677" cy="192.44" rx="98.714" ry="102.008"/>
<path d="M 221.952 190.815 C 221.952 208.216 217.02 212.456 210.935 212.456 C 204.85 212.456 199.918 208.216 199.918 190.815 C 199.918 173.414 204.85 159.307 210.935 159.307 C 217.02 159.307 221.952 173.414 221.952 190.815 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(16, 4, 18);" cx="207.857" cy="175.538" rx="3.726" ry="8.912"/>
<path d="M 224.868 238.194 C 217.385 225.473 221.022 227.785 235.781 227.666 C 250.54 227.547 254.281 225.173 247.006 238.014 C 239.73 250.855 232.351 250.914 224.868 238.194 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<path d="M 270.232 191.293 C 270.232 208.694 265.3 212.935 259.215 212.935 C 253.13 212.935 248.198 208.694 248.198 191.293 C 248.198 173.892 253.13 159.786 259.215 159.786 C 265.3 159.786 270.232 173.892 270.232 191.293 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(16, 4, 18);" cx="256.137" cy="176.017" rx="3.726" ry="8.912"/>
<path d="M 331.077 157.674 C 335.999 181.232 331.252 171.752 270.917 151.098 C 210.581 130.445 238.319 147.757 232.787 121.511 C 232.18 118.636 232.52 115.849 232.148 113.329 C 232.015 114.375 232.024 115.46 231.941 116.58 C 230.346 138.11 239.066 140.218 201.437 149.455 C 163.807 158.691 126.296 198.431 140.429 156.03 C 154.563 113.629 190.709 88.637 223.467 88.637 C 233.339 88.637 245.676 90.28 249.734 90.28 C 280.151 90.28 326.155 134.115 331.077 157.674 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 6;0 0" dur="4s" fill="freeze" keyTimes="0; 0.490799; 1" repeatCount="indefinite"/>
</g>
</svg>`;
// NPC DATA (Phase index corresponds to MAP_SVG index)
const NPC_DATA = {
0: { char_id: 'CHAR_1_AngryBeachman', name: 'Angry Beachman', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Angry Beachman: Get off my beach! The sun is too bright!", "Angry Beachman: Just kidding. But the end is far, keep going."] },
1: { char_id: 'CHAR_2_BoredFlower', name: 'Bored Flower', svg_content: CHAR_SVG_2, initial_x: 500, dialogue: ["Bored Flower: The tides go in, the tides go out. It's so repetitive.", "Bored Flower: The wind will push you if you jump too high."] },
2: { char_id: 'CHAR_3_Bubbles', name: 'Bubbles', svg_content: CHAR_SVG_3, initial_x: 600, dialogue: ["Bubbles: Pop! Pop! Pop! Don't let the heat get to you!", "Bubbles: The deeper you go, the crazier it gets."] },
3: { char_id: 'CHAR_4_Caracol', name: 'Caracol', svg_content: CHAR_SVG_4, initial_x: 350, dialogue: ["Caracol: I'm slow, but I always make it. Speed isn't everything.", "Caracol: Follow the path of the waves, not the wind."] },
4: { char_id: 'CHAR_5_HappyBeachwoman', name: 'Happy Beachwoman', svg_content: CHAR_SVG_5, initial_x: 550, dialogue: ["Happy Beachwoman: What a beautiful day for a walk on the beach!", "Happy Beachwoman: I heard the Pentagon Fairy lives near the giant seashell."] },
5: { char_id: 'CHAR_6_HappySun', name: 'Happy Sun', svg_content: CHAR_SVG_6, initial_x: 300, dialogue: ["Happy Sun: Shine, shine, shine! I'll light your way!", "Happy Sun: Keep your eyes peeled for rare pearls in the sand!"] },
6: { char_id: 'CHAR_7_Krabs', name: 'Krabs', svg_content: CHAR_SVG_7, initial_x: 450, dialogue: ["Krabs: Money! I mean, Move on! Before the tide comes back!", "Krabs: Only two more transitions to the final shore!"] },
7: { char_id: 'CHAR_8_Pearl', name: 'Pearl', svg_content: CHAR_SVG_8, initial_x: 700, dialogue: ["Pearl: I am the rarest of gems. Go and claim your final reward!", "Pearl: The path of the Pentagon is open."] },
8: { char_id: 'PENTAGON_FAIRY', name: 'Pentagon Fairy', svg_content: PENTAGON_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Pentagon Fairy: You made it to the final shore!", "Pentagon Fairy: The beach is boundless, but your journey here is complete.", "Pentagon Fairy: Sunny Beach cleared. Adventure awaits!"] },
};
const MAX_TRANSITIONS = 8; // 8 transitions (Map 1 -> 2 -> ... -> 9). Total 9 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunny Sky Gradient -->
<linearGradient id="sunnySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Ocean Water Gradient -->
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 140, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 120, 160);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient -->
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 230, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 210, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunnySkyGradient)" />
<!-- 2. Sun (Top Right) -->
<circle cx="750" cy="50" r="80" fill="rgb(255, 255, 0)" />
<!-- 3. Clouds (Flat White Style) -->
<g fill="white" opacity="0.8">
<ellipse cx="200" cy="150" rx="70" ry="30" />
<ellipse cx="500" cy="100" rx="90" ry="35" />
<ellipse cx="650" cy="180" rx="50" ry="20" />
</g>
<!-- 4. Ocean Water -->
<rect x="0" y="250" width="800" height="200" fill="url(#oceanGradient)" />
<!-- 5. Wave Line / Horizon detail -->
<path d="M0 250 Q100 245, 200 250 T400 248 T600 250 T800 245"
fill="none"
stroke="white"
stroke-width="2"
opacity="0.6" />
<!-- 6. Sand Beach (The main platform) -->
<path d="M0 450 H800 V380 Q600 350, 400 380 Q200 410, 0 380 Z"
fill="url(#sandGradient)" />
<!-- 7. Small Waves/Foam on Sand Edge -->
<path d="M0 380 Q100 375, 200 380 M300 375 Q400 380, 500 375"
fill="none"
stroke="white"
stroke-width="1"
opacity="0.5" />
<!-- 8. Distant Sailboat Silhouette (Ocean detail) -->
<g transform="translate(300, 280) scale(0.5)" fill="white" stroke="black" stroke-width="2" opacity="0.9">
<polygon points="0,0 50,100 -50,100" fill="white" stroke="none" />
<rect x="-5" y="0" width="10" height="100" fill="rgb(100, 50, 0)" stroke="none" />
<path d="M-50 100 Q0 120, 50 100 L-50 100 Z" fill="rgb(150, 100, 50)" stroke="none" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunny Sky Gradient (Consistent) -->
<linearGradient id="sunnySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Ocean Water Gradient (Consistent) -->
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 140, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 120, 160);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Consistent) -->
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 230, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 210, 120);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunnySkyGradient)" />
<!-- 2. Sun (Top Right) -->
<circle cx="750" cy="50" r="80" fill="rgb(255, 255, 0)" />
<!-- 3. Clouds -->
<g fill="white" opacity="0.8">
<ellipse cx="200" cy="150" rx="70" ry="30" />
<ellipse cx="500" cy="100" rx="90" ry="35" />
</g>
<!-- 4. Ocean Water -->
<rect x="0" y="250" width="800" height="200" fill="url(#oceanGradient)" />
<!-- 5. Main Ground: Rocky Outcrop/Cabo -->
<!-- The main beach platform -->
<path d="M0 450 H800 V380 Q400 350, 0 380 Z" fill="url(#sandGradient)" />
<!-- Lighthouse Island/Hill -->
<path d="M500 380 C550 350, 650 350, 700 380 V450 H500 Z"
fill="rgb(100, 150, 80)" /> <!-- Green hill base -->
<!-- 6. Lighthouse (The main feature) -->
<g transform="translate(600, 200) scale(0.6)">
<!-- Base -->
<rect x="-50" y="0" width="100" height="300" fill="white" stroke="black" stroke-width="2" />
<!-- Red Stripe -->
<rect x="-50" y="100" width="100" height="50" fill="red" />
<!-- Black Stripe -->
<rect x="-50" y="200" width="100" height="50" fill="black" />
<!-- Lamp Top -->
<rect x="-60" y="-20" width="120" height="20" fill="rgb(80, 80, 80)" />
<polygon points="-70,-20 70,-20 70,0 -70,0" fill="black" />
<!-- Roof -->
<polygon points="0,-70 -30,-20 30,-20" fill="red" />
<!-- Light Effect (subtle yellow glow) -->
<path d="M0,-30 L-100,-100 L100,-100 Z" fill="yellow" opacity="0.3"/>
</g>
<!-- 7. Small Waves near shore -->
<path d="M0 380 Q100 375, 200 380 T400 375 T600 380 T800 375"
fill="none"
stroke="white"
stroke-width="1"
opacity="0.4" />
<!-- 8. Birds (Distant Detail) -->
<path d="M100 200 L110 205 L105 200 M120 210 L130 215 L125 210"
fill="none"
stroke="black"
stroke-width="2"
opacity="0.7" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunny Sky Gradient (Consistent) -->
<linearGradient id="sunnySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Deep Ocean Water Gradient (Darker blue for deeper water) -->
<linearGradient id="deepOceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 100, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 80, 120);stop-opacity:1" />
</linearGradient>
<!-- Wet Sand/Shore Gradient (Slightly darker for the tide line) -->
<linearGradient id="wetSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 190, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 170, 80);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunnySkyGradient)" />
<!-- 2. Sun -->
<circle cx="750" cy="50" r="80" fill="rgb(255, 255, 0)" />
<!-- 3. Ocean Water (Deep, covering more vertical space) -->
<rect x="0" y="200" width="800" height="300" fill="url(#deepOceanGradient)" />
<!-- 4. Water Horizon/Wave Details -->
<path d="M0 200 Q150 195, 300 200 T600 190 T800 200"
fill="none"
stroke="white"
stroke-width="2"
opacity="0.5" />
<!-- 5. Shoreline Sand (Narrower strip of sand) -->
<path d="M0 450 H800 V400 Q400 380, 0 400 Z"
fill="url(#wetSandGradient)" />
<!-- 6. Small Rock/Coral Feature (Detail in the shallower water/shore) -->
<ellipse cx="650" cy="400" rx="40" ry="20" fill="rgb(100, 120, 100)" />
<rect x="640" y="400" width="20" height="50" fill="rgb(120, 140, 120)" />
<!-- 7. Distant Island/Cove Silhouette -->
<path d="M50 200 Q100 180, 150 200 L150 250 L50 250 Z" fill="rgb(0, 100, 0)" opacity="0.6"/>
<!-- 8. Seagull Trail (Small, dynamic detail) -->
<path d="M400 150 L410 155 L405 150 M420 160 L430 165 L425 160"
fill="none"
stroke="black"
stroke-width="2"
opacity="0.7">
<animateMotion attributeName="transform" dur="10s" repeatCount="indefinite" path="M0,0 C 100,20, 150,-10, 200,0" />
</path>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunny Sky Gradient (Consistent) -->
<linearGradient id="sunnySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Ocean Water Gradient (Mid-depth blue) -->
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 140, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 120, 160);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Dry, light sand) -->
<linearGradient id="sandDryGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 240, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 220, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunnySkyGradient)" />
<!-- 2. Sun -->
<circle cx="750" cy="50" r="80" fill="rgb(255, 255, 0)" />
<!-- 3. Ocean Water (Receded, starting higher up) -->
<rect x="0" y="280" width="800" height="220" fill="url(#oceanGradient)" />
<!-- 4. Water Horizon/Wave Details -->
<path d="M0 280 Q150 275, 300 280 T600 270 T800 280"
fill="none"
stroke="white"
stroke-width="2"
opacity="0.5" />
<!-- 5. Main Ground: Extended Sand Beach (The main platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sandDryGradient)" />
<!-- 6. Tidal Pools/Wet Patches (Darker blue spots on the beach) -->
<g fill="rgb(100, 200, 255)" opacity="0.8">
<ellipse cx="150" cy="450" rx="60" ry="15" />
<ellipse cx="600" cy="450" rx="40" ry="10" />
</g>
<!-- 7. Distant Beach Towel/Umbrella (Detail on the far left) -->
<rect x="50" y="430" width="40" height="10" fill="red" />
<rect x="65" y="400" width="5" height="30" fill="brown" />
<path d="M67.5 400 L50 390 L85 390 Z" fill="yellow" />
<!-- 8. Seagulls on the ground (Static details) -->
<g fill="black" opacity="0.6">
<circle cx="350" cy="445" r="2" />
<path d="M352 445 L355 440 L358 445 Z" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunset Sky Gradient (Warm, dramatic colors) -->
<linearGradient id="sunsetSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 150, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 100, 120);stop-opacity:1" />
</linearGradient>
<!-- Ocean Water Gradient (Reflecting sunset colors) -->
<linearGradient id="sunsetOceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 80, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 60, 120);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Shadowed, golden hue) -->
<linearGradient id="sunsetSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 190, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 160, 80);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Sunset Colors) -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunsetSkyGradient)" />
<!-- 2. Setting Sun (Large, low, glowing orange) -->
<circle cx="400" cy="150" r="150" fill="rgb(255, 99, 71)" opacity="0.8" />
<circle cx="400" cy="150" r="100" fill="rgb(255, 140, 0)" opacity="0.9" />
<!-- 3. Ocean Water (Reflecting sunset light) -->
<rect x="0" y="280" width="800" height="220" fill="url(#sunsetOceanGradient)" />
<!-- 4. Water Horizon/Wave Details (Orange highlights) -->
<path d="M0 280 Q150 275, 300 280 T600 270 T800 280"
fill="none"
stroke="rgb(255, 200, 150)"
stroke-width="2"
opacity="0.6" />
<!-- 5. Main Ground: Sand Beach (Golden shadow) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sunsetSandGradient)" />
<!-- 6. Distant Headland/Island Silhouette -->
<path d="M700 280 C750 250, 800 270, 800 300 V350 H700 Z"
fill="rgb(50, 30, 0)" opacity="0.9" />
<!-- 7. Clouds/Light Streaks (Darker, elongated shadows) -->
<g fill="rgb(150, 80, 100)" opacity="0.5">
<ellipse cx="200" cy="80" rx="90" ry="20" transform="rotate(-10 200 80)"/>
<ellipse cx="600" cy="120" rx="120" ry="30" transform="rotate(15 600 120)"/>
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Night Sky Gradient (Deep Blue/Violet) -->
<linearGradient id="nightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(20, 0, 50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(50, 40, 100);stop-opacity:1" />
</linearGradient>
<!-- Night Ocean Gradient (Very Dark, reflecting moon) -->
<linearGradient id="nightOceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 30, 60);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 10, 40);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Cool, moonlight tone) -->
<linearGradient id="nightSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 120, 150);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Night Blue/Violet) -->
<rect x="0" y="0" width="800" height="500" fill="url(#nightSkyGradient)" />
<!-- 2. Moon (Top Left, Silver Glow) -->
<circle cx="150" cy="100" r="100" fill="white" opacity="0.4" />
<circle cx="150" cy="100" r="70" fill="rgb(240, 240, 255)" />
<!-- 3. Stars (Scattered white dots) -->
<g fill="white" opacity="0.7">
<circle cx="500" cy="50" r="2" />
<circle cx="750" cy="120" r="1.5" />
<circle cx="400" cy="20" r="1" />
<circle cx="600" cy="180" r="2.5" />
</g>
<!-- 4. Ocean Water (Dark) -->
<rect x="0" y="280" width="800" height="220" fill="url(#nightOceanGradient)" />
<!-- 5. Moonlight Reflection Path on Water -->
<path d="M150 100 L400 500 L-100 500 Z" fill="white" opacity="0.15" />
<!-- 6. Main Ground: Sand Beach (Cool Shadow) -->
<rect x="0" y="450" width="800" height="50" fill="url(#nightSandGradient)" />
<!-- 7. Distant Rock Silhouette (Foreground) -->
<path d="M50 450 Q70 420, 100 450 Z" fill="rgb(50, 50, 70)" />
<path d="M700 450 Q720 400, 750 450 Z" fill="rgb(40, 40, 60)" />
<!-- 8. Wave/Shore Glints (Subtle white highlights from moonlight) -->
<path d="M0 450 Q200 448, 400 450 T800 448"
fill="none"
stroke="rgb(220, 220, 255)"
stroke-width="1"
opacity="0.3" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunrise Sky Gradient (Soft Pink/Orange/Blue) -->
<linearGradient id="sunriseSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 200, 180);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(200, 180, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Ocean Water Gradient (Calm, light blue) -->
<linearGradient id="calmOceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 180, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 190, 230);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Freshly lit, soft yellow) -->
<linearGradient id="softSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 240, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 220, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Sunrise Colors) -->
<rect x="0" y="0" width="800" height="500" fill="url(#sunriseSkyGradient)" />
<!-- 2. Rising Sun (Low, soft orange disk) -->
<circle cx="400" cy="200" r="100" fill="rgb(255, 165, 0)" opacity="0.6" />
<circle cx="400" cy="200" r="70" fill="rgb(255, 190, 100)" opacity="0.8" />
<!-- 3. Clouds (Very soft, pink-tinged) -->
<g fill="rgb(255, 220, 230)" opacity="0.7">
<ellipse cx="200" cy="100" rx="60" ry="25" />
<ellipse cx="650" cy="80" rx="90" ry="30" />
</g>
<!-- 4. Ocean Water (Calm) -->
<rect x="0" y="280" width="800" height="220" fill="url(#calmOceanGradient)" />
<!-- 5. Water Horizon/Wave Details (Pink/Orange highlights) -->
<path d="M0 280 Q150 278, 300 280 T600 275 T800 280"
fill="none"
stroke="rgb(255, 220, 200)"
stroke-width="2"
opacity="0.8" />
<!-- 6. Main Ground: Sand Beach (Soft Yellow) -->
<rect x="0" y="450" width="800" height="50" fill="url(#softSandGradient)" />
<!-- 7. Foreground Wet Sand Reflection (Pink/Blue streaks near the ground) -->
<g opacity="0.3">
<rect x="50" y="450" width="100" height="5" fill="rgb(255, 180, 200)" />
<rect x="300" y="450" width="200" height="5" fill="rgb(100, 180, 255)" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (Mid-day clear blue) -->
<linearGradient id="clearSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 200, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
</linearGradient>
<!-- Shallow Water Gradient (Turquoise) -->
<linearGradient id="shallowWaterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 220, 240);stop-opacity:1" />
</linearGradient>
<!-- Sand Gradient (Light yellow/beige) -->
<linearGradient id="sandLightGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 245, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 230, 190);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#clearSkyGradient)" />
<!-- 2. Sun (Top Right) -->
<circle cx="750" cy="50" r="80" fill="rgb(255, 255, 0)" />
<!-- 3. Distant Island Silhouette -->
<path d="M0 280 C100 250, 200 260, 300 280 L300 350 L0 350 Z" fill="rgb(0, 100, 0)" opacity="0.7"/>
<!-- 4. Shallow Ocean Water (Turquoise) -->
<rect x="0" y="280" width="800" height="220" fill="url(#shallowWaterGradient)" />
<!-- 5. Water Horizon/Wave Details -->
<path d="M0 280 Q150 275, 300 280 T600 270 T800 280"
fill="none"
stroke="white"
stroke-width="2"
opacity="0.5" />
<!-- 6. Main Ground: Virgin Sand Beach (Large, light area) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sandLightGradient)" />
<!-- 7. Washed-up Driftwood / Log (Foreground Detail) -->
<rect x="50" y="430" width="150" height="20" fill="rgb(150, 100, 50)" rx="5" ry="5" stroke="rgb(100, 70, 30)" stroke-width="1" />
<!-- 8. Scattered Shells/Seaweed (Details near the sand edge) -->
<g fill="rgb(180, 255, 180)" opacity="0.8">
<path d="M600 450 V440 Q610 435, 620 440 V450 Z" />
<circle cx="700" cy="445" r="5" fill="white" />
</g>
<g fill="rgb(240, 240, 200)" opacity="0.9">
<path d="M250 440 Q260 430, 270 440 L260 445 Z" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_9 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient (Ethereal Blue/White, bright final stage) -->
<linearGradient id="finalSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 230, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 245, 255);stop-opacity:1" />
</linearGradient>
<!-- Calm Ocean Gradient (Light, reflecting sky) -->
<linearGradient id="calmFinalOceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 230, 255);stop-opacity:1" />
</linearGradient>
<!-- Sacred Sand Gradient (Pure White/Lightest tone) -->
<linearGradient id="sacredSandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 255, 250);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 240, 230);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#finalSkyGradient)" />
<!-- 2. Subtle Rainbow/Light Arc (Behind the main feature) -->
<path d="M200 300 C400 100, 600 100, 800 300" fill="none" stroke="pink" stroke-width="10" opacity="0.3"/>
<path d="M200 300 C400 110, 600 110, 800 300" fill="none" stroke="yellow" stroke-width="10" opacity="0.3"/>
<!-- 3. Calm Ocean Water -->
<rect x="0" y="300" width="800" height="200" fill="url(#calmFinalOceanGradient)" />
<!-- 4. Water Horizon/Wave Details -->
<path d="M0 300 Q150 295, 300 300 T600 298 T800 300"
fill="none"
stroke="white"
stroke-width="1"
opacity="0.7" />
<!-- 5. Main Ground: Sacred Sand Beach (Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#sacredSandGradient)" />
<!-- 6. Giant Seashell/Arrecife Platform (Where the Fairy sits) -->
<g transform="translate(450, 400)">
<!-- Main Shell Body (Oyster/Scallop shape) -->
<path d="M-150 0 C-100 -150, 100 -150, 150 0 C100 50, -100 50, -150 0 Z"
fill="rgb(255, 240, 220)"
stroke="rgb(200, 190, 180)"
stroke-width="3" />
<!-- Interior/Seat -->
<ellipse cx="0" cy="10" rx="100" ry="30" fill="rgb(240, 220, 200)" />
<!-- Small Pearl/Glow (Focus point for the fairy) -->
<circle cx="0" cy="-50" r="15" fill="white" stroke="rgb(200, 200, 255)" stroke-width="2" opacity="0.9">
<animate attributeName="opacity" values="0.9;1;0.9" dur="2s" repeatCount="indefinite" />
</circle>
</g>
<!-- 7. Foreground Ripples/Zen Garden Sand (Detail) -->
<path d="M0 450 Q200 455, 400 450 T800 455" fill="none" stroke="rgb(200, 200, 200)" stroke-width="1" opacity="0.5"/>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8, MAP_SVG_9];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #f39c12; /* Beach/Sunny Orange */
color: white;
border: 2px solid #fff;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = isFinalNPC ? NPC_WIDTH_DEFAULT : NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al mapContainer (la escena de juego) ***
mapContainer.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Sunny Beach dialogue box (bright blue/yellow theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(52, 152, 219, 0.9); /* Ocean Blue */
border: 5px solid #f1c40f; /* Sand Yellow/Gold Border */
box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Pentagon Fairy is only NPC in phase 8)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:gold; font-size:36px; text-align:center; font-family: Arial, sans-serif;">
LEVEL COMPLETE!<br>The waves of Sunny Beach brought you here.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #3498db;
color: white;
border: 4px solid #f1c40f;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(241, 196, 15, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_9)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel5 = function() {
// ==UserScript==
// @name Drawaria Game Level 5 - Toxic Forest
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 5: Toxic Forest. Navigate the dark, dangerous woods and encounter toxic creatures.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Toxic Forest";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-forest-2.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="drop-shadow-filter-0" bx:preset="drop-shadow 1 0 0 9 0.83 #fffffffe" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="9"/>
<feOffset dx="0" dy="0"/>
<feComponentTransfer result="offsetblur">
<feFuncA id="spread-ctrl" type="linear" slope="1.66"/>
</feComponentTransfer>
<feFlood flood-color="#fffffffe"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="filter-1" bx:preset="drop-shadow 1 0 0 9 0.83 #fffffffe" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="9"/>
<feOffset dx="0" dy="0"/>
<feComponentTransfer result="offsetblur">
<feFuncA id="feFuncA-1" type="linear" slope="1.66"/>
</feComponentTransfer>
<feFlood flood-color="#fffffffe"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 5 0.29 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="0.58"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<g>
<path d="M 245.783 328.06 C 245.726 332.271 229.951 335.472 210.549 335.208 C 192.951 334.969 178.413 331.962 175.904 328.261 L 175.404 328.261 L 175.404 282.376 L 202.648 282.376 L 202.647 320.049 C 205.252 319.952 207.967 319.918 210.756 319.955 C 230.159 320.219 245.841 323.848 245.783 328.06 Z" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 145, 23); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-6" begin="0s" dur="0.5s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<path d="M 193.797 330.436 C 193.74 334.648 177.965 337.848 158.563 337.584 C 140.964 337.345 126.427 334.338 123.918 330.637 L 123.418 330.638 L 123.418 284.753 L 150.662 284.753 L 150.661 322.425 C 153.266 322.328 155.981 322.294 158.77 322.332 C 178.172 322.596 193.855 326.224 193.797 330.436 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 145, 23); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;6" begin="0s" dur="0.5s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</path>
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 204, 111); filter: url("#inner-shadow-filter-0");" transform="matrix(0, 1, -1, 0, 424.188241, 98.899561)" cx="129.664" cy="268.713" rx="64.567" ry="138.508"/>
<g>
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 204, 111); filter: url("#inner-shadow-filter-0");" transform="matrix(0.036673, 0.999327, -0.999327, 0.036673, 370.997666, -119.244444)" cx="247.344" cy="132.81" rx="56.795" ry="54.862"/>
<path d="M 133.065 43.46 L 284.294 43.46 C 307.531 46.108 304.484 97.831 284.294 95.53 L 137.517 95.53 C 135.3 96.992 132.339 98.126 129.679 98.722 C 126.144 99.515 121.09 99.65 118.32 98.722 C 116.257 98.03 114.812 96.826 113.825 95.1 C 112.777 93.268 112.036 90.049 112.405 87.854 C 112.715 86.009 113.506 84.162 115.07 82.717 C 112.104 82.854 109.439 82.807 107.804 82.498 C 105.676 82.096 104.75 81.72 103.781 80.269 C 102.581 78.473 101.517 74.117 101.887 71.631 C 102.228 69.349 102.92 67.327 105.437 65.779 C 107.219 64.683 110.747 63.746 114.762 63.017 C 114.739 63.009 114.715 63 114.693 62.992 C 112.437 62.166 111.086 60.388 110.196 58.812 C 109.432 57.461 109.024 56.044 109.25 54.354 C 109.539 52.182 110.516 48.504 112.799 46.83 C 115.864 44.583 133.065 43.46 133.065 43.46 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 79, 79); filter: url("#inner-shadow-filter-0");"/>
<path d="M 261.072 127.405 C 260.134 132.507 250.065 134.929 238.581 132.817 C 227.098 130.705 218.549 124.859 219.488 119.757 C 220.426 114.656 229.581 118.627 241.065 120.739 C 252.548 122.851 262.01 122.304 261.072 127.405 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); filter: url("#inner-shadow-filter-0"); transform-origin: 239.74px 126.516px;"/>
<path d="M 267.048 126.928 C 267.986 132.03 276.408 134.756 285.859 133.018 C 295.309 131.28 302.21 125.736 301.272 120.634 C 300.334 115.533 294.653 121.485 285.202 123.223 C 275.751 124.961 266.11 121.827 267.048 126.928 Z" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255); filter: url("#inner-shadow-filter-0"); transform-origin: 284.792px 127.218px;"/>
<path d="M 313.664 152.262 C 313.664 157.729 298.358 162.162 279.476 162.162 C 260.595 162.162 245.288 157.729 245.288 152.262 C 245.288 146.794 260.595 142.362 279.476 142.362 C 298.358 142.362 313.664 146.794 313.664 152.262 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 164, 0); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999609, 0.027961, -0.027961, 0.999609, 0, 0.000001)"/>
<ellipse style="stroke: rgb(0, 0, 0); filter: url("#inner-shadow-filter-0");" transform="matrix(0.998274, 0.058722, -0.058722, 0.998274, 9.250903, -14.347265)" cx="299.745" cy="148.799" rx="13.421" ry="2.083"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 3" dur="1s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1" begin="-0.02s"/>
</g>
<ellipse style="stroke: rgb(0, 0, 0); filter: url("#inner-shadow-filter-0");" cx="65.105" cy="207.565" rx="42.54" transform="matrix(0.999984, -0.005618, 0.005618, 0.999984, -4.989578, 9.448181)" ry="2.403"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; filter: url("#inner-shadow-filter-0");" cx="65.105" cy="207.565" rx="42.54" transform="matrix(0.999984, -0.005618, 0.005618, 0.999984, -5.944858, 25.940606)" ry="2.403"/>
</g>
<ellipse style="stroke: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255); filter: url("#drop-shadow-filter-0");" cx="245.95" cy="126.848" rx="4.468" ry="6.278"/>
<ellipse style="stroke: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255); filter: url("#filter-1"); stroke-width: 1;" cx="288.277" cy="127.447" rx="4.468" ry="6.278"/>
<animateMotion path="M 0 0 L 100 0" calcMode="linear" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 249.237px 238.497px;">
<path d="M 359.889 252.699 L 310.404 271.875 L 310.404 148.038 L 191.673 148.039 L 191.673 261.917 L 143.374 243.201 L 126.214 287.484 L 191.673 312.85 L 191.673 441.302 L 310.404 441.302 L 310.404 322.808 L 377.049 296.983 L 359.889 252.699 Z" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(238, 176, 148); filter: url("#inner-shadow-filter-0");"/>
<path d="M 108.082 300.043 C 99.328 300.043 91.968 294.623 89.86 287.282 C 88.404 287.609 86.881 287.783 85.313 287.783 C 74.915 287.783 66.485 280.137 66.485 270.706 C 66.485 265.714 68.847 261.222 72.613 258.099 C 65.685 255.578 60.793 249.429 60.793 242.245 C 60.793 232.814 69.223 225.168 79.621 225.168 C 81.977 225.168 84.231 225.56 86.31 226.277 C 88.352 218.849 95.757 213.345 104.579 213.345 C 113.985 213.345 121.781 219.602 123.183 227.777 C 124.522 227.503 125.916 227.358 127.347 227.358 C 137.745 227.358 146.175 235.004 146.175 244.435 C 146.175 248.68 144.467 252.564 141.64 255.551 C 146.003 258.678 148.802 263.52 148.802 268.955 C 148.802 278.386 140.372 286.032 129.974 286.032 C 128.843 286.032 127.734 285.941 126.658 285.768 C 125.184 293.866 117.428 300.043 108.082 300.043 Z" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(104, 216, 101); filter: url("#inner-shadow-filter-0");"/>
<path d="M 396.961 310.631 C 388.207 310.631 380.847 305.211 378.739 297.87 C 377.283 298.197 375.76 298.371 374.192 298.371 C 363.794 298.371 355.364 290.725 355.364 281.294 C 355.364 276.302 357.726 271.81 361.492 268.687 C 354.564 266.166 349.672 260.017 349.672 252.833 C 349.672 243.402 358.102 235.756 368.5 235.756 C 370.856 235.756 373.11 236.148 375.189 236.865 C 377.231 229.437 384.636 223.933 393.458 223.933 C 402.864 223.933 410.66 230.19 412.062 238.365 C 413.401 238.091 414.795 237.946 416.226 237.946 C 426.624 237.946 435.054 245.592 435.054 255.023 C 435.054 259.268 433.346 263.152 430.519 266.139 C 434.882 269.266 437.681 274.108 437.681 279.543 C 437.681 288.974 429.251 296.62 418.853 296.62 C 417.722 296.62 416.613 296.529 415.537 296.356 C 414.063 304.454 406.307 310.631 396.961 310.631 Z" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(104, 216, 101); filter: url("#inner-shadow-filter-0");"/>
<path d="M -222.526 -174.889 Q -208.071 -195.99 -193.617 -174.889 L -193.617 -174.889 Q -179.163 -153.787 -208.071 -153.787 L -208.071 -153.787 Q -236.98 -153.787 -222.526 -174.889 Z" bx:shape="triangle -236.98 -195.99 57.817 42.203 0.5 0.5 1@4d5fae73" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(6, 13, 6); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.960525, -0.278193, 0.278195, -0.960525, 431.973137, 387.27612)"/>
<path d="M -222.526 -174.889 Q -208.071 -195.99 -193.617 -174.889 L -193.617 -174.889 Q -179.163 -153.787 -208.071 -153.787 L -208.071 -153.787 Q -236.98 -153.787 -222.526 -174.889 Z" bx:shape="triangle -236.98 -195.99 57.817 42.203 0.5 0.5 1@4d5fae73" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(6, 13, 6); filter: url("#inner-shadow-filter-0"); transform-origin: -208.071px -169.613px;" transform="matrix(0.960525, -0.278193, -0.278195, -0.960525, 485.694291, 387.038408)"/>
<path d="M 252.741 243.602 C 255.91 243.04 259.614 243.156 262.464 243.803 C 265.127 244.408 268.09 245.817 269.428 247.135 C 270.518 248.209 270.947 249.637 270.742 250.77 C 270.539 251.891 269.489 253.241 268.245 253.901 C 266.944 254.591 264.658 254.88 262.99 254.708 C 261.33 254.538 259.598 253.152 258.26 252.891 C 257.248 252.693 256.621 252.705 255.632 252.891 C 254.371 253.128 252.282 253.916 251.295 254.506 C 250.557 254.949 250.643 255.565 249.851 255.92 C 248.767 256.405 246.321 256.92 244.857 256.728 C 243.504 256.55 242.119 255.84 241.31 255.011 C 240.466 254.146 239.802 252.764 239.996 251.578 C 240.212 250.25 241.314 248.658 243.018 247.438 C 245.159 245.906 249.421 244.19 252.741 243.602 Z" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(6, 13, 6); filter: url("#inner-shadow-filter-0");"/>
<path d="M 320.34 180.129 C 311.586 180.129 304.226 174.709 302.118 167.368 C 300.662 167.695 299.139 167.869 297.571 167.869 C 293.265 167.869 289.297 166.558 286.125 164.352 C 282.708 167.51 277.948 169.47 272.684 169.47 C 271.553 169.47 270.444 169.379 269.368 169.206 C 267.894 177.304 260.138 183.481 250.792 183.481 C 242.038 183.481 234.678 178.061 232.57 170.72 C 231.114 171.047 229.591 171.221 228.023 171.221 C 222.199 171.221 216.992 168.822 213.539 165.055 C 210.402 167.176 206.511 168.431 202.298 168.431 C 201.167 168.431 200.058 168.34 198.982 168.167 C 197.508 176.265 189.752 182.442 180.406 182.442 C 171.652 182.442 164.292 177.022 162.184 169.681 C 160.728 170.008 159.205 170.182 157.637 170.182 C 147.239 170.182 138.809 162.536 138.809 153.105 C 138.809 148.113 141.171 143.621 144.937 140.498 C 138.009 137.977 133.117 131.828 133.117 124.644 C 133.117 115.213 141.547 107.567 151.945 107.567 C 154.301 107.567 156.555 107.959 158.634 108.676 C 159.288 106.298 160.491 104.117 162.115 102.251 C 158.002 98.813 155.345 93.367 155.345 87.238 C 155.345 77.832 161.602 70.036 169.777 68.634 C 169.503 67.295 169.358 65.901 169.358 64.47 C 169.358 54.072 177.004 45.642 186.435 45.642 C 190.68 45.642 194.564 47.35 197.551 50.177 C 200.678 45.814 205.52 43.015 210.955 43.015 C 215.268 43.015 219.208 44.778 222.214 47.687 C 223.089 47.574 223.984 47.515 224.894 47.515 C 227.25 47.515 229.504 47.907 231.583 48.624 C 233.625 41.196 241.03 35.692 249.852 35.692 C 259.258 35.692 267.054 41.949 268.456 50.124 C 269.795 49.85 271.189 49.705 272.62 49.705 C 277.367 49.705 281.704 51.299 285.016 53.928 C 287.385 46.956 294.546 41.888 303.011 41.888 C 312.417 41.888 320.213 48.145 321.615 56.32 C 322.954 56.046 324.348 55.901 325.779 55.901 C 336.177 55.901 344.607 63.547 344.607 72.978 C 344.607 77.223 342.899 81.107 340.072 84.094 C 344.435 87.221 347.234 92.063 347.234 97.498 C 347.234 101.366 345.816 104.933 343.426 107.796 C 351.992 109.398 358.433 116.278 358.433 124.521 C 358.433 128.766 356.725 132.65 353.898 135.637 C 358.261 138.764 361.06 143.606 361.06 149.041 C 361.06 158.472 352.63 166.118 342.232 166.118 C 341.101 166.118 339.992 166.027 338.916 165.854 C 337.442 173.952 329.686 180.129 320.34 180.129 Z" style="stroke: rgb(41, 134, 79); stroke-width: 3px; fill: rgb(104, 216, 101); filter: url("#inner-shadow-filter-0");"/>
<animateTransform type="skewY" additive="sum" attributeName="transform" values="0;3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;40 0" dur="9s" fill="freeze" begin="-0.02s" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<g style="filter: url("#inner-shadow-filter-0"); transform-origin: 244.817px 292.385px;">
<path d="M 176.981 125.543 C 184.464 132.327 143.964 142.984 116.068 173.755 C 88.173 204.526 66.783 233.345 59.301 226.561 C 51.818 219.778 68.366 189.334 96.261 158.563 C 124.156 127.792 169.499 118.76 176.981 125.543 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-origin: 117.05px 165.372px;"/>
<path d="M 398.415 193.352 C 405.898 186.568 365.398 175.911 337.503 145.141 C 309.607 114.369 288.218 85.55 280.735 92.334 C 273.252 99.117 289.801 129.561 317.696 160.332 C 345.591 191.103 390.933 200.135 398.415 193.352 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-origin: 355.534px 160.165px;" transform="matrix(-1, 0, 0, -1, -0.000032, 0.000009)"/>
<path d="M 287.927 377.278 C 287.927 403.974 241.827 427.95 213.152 427.95 C 184.477 427.95 184.087 403.974 184.087 377.278 C 184.087 350.582 184.332 312.941 213.007 312.941 C 241.682 312.941 287.927 350.582 287.927 377.278 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(216, 126, 126); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.010638, 0.999941, -0.999946, 0.010638, -0.000003, 0.000016)"/>
<path d="M 290.746 292.079 C 290.746 318.775 244.646 342.751 215.971 342.751 C 187.296 342.751 186.906 318.775 186.906 292.079 C 186.906 265.383 187.151 227.741 215.826 227.741 C 244.501 227.741 290.746 265.383 290.746 292.079 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(216, 126, 126); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.010638, 0.999941, -0.999946, 0.010638, -0.000006, 0.000013)"/>
<path d="M 349.376 153.987 C 327.034 186.44 265.356 232.152 246.797 245.11 C 228.238 258.068 187.174 198.71 144.218 153.987 C 101.262 109.264 371.718 121.534 349.376 153.987 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(216, 126, 126); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999475, -0.032399, 0.032399, 0.999475, 0, 0)"/>
<path d="M 223.906 178.571 C 217.515 190.807 202.201 195.433 189.704 188.904 C 177.206 182.376 172.256 167.164 178.648 154.929 C 185.039 142.694 194.273 148.2 206.771 154.728 C 219.268 161.257 230.298 166.336 223.906 178.571 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-origin: 198.547px 171.976px;"/>
<path d="M 276.962 10.175 C 270.57 -2.061 255.257 -6.687 242.759 -0.158 C 230.262 6.37 225.312 21.582 231.703 33.817 C 238.095 46.052 247.329 40.546 259.826 34.017 C 272.324 27.489 283.353 22.41 276.962 10.175 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-origin: 267.449px 94.293px;" transform="matrix(-1, 0, 0, -1, -0.000007, -0.000001)"/>
<path d="M 215.239 213.15 L 235.49 213.15 L 226.653 233.77 L 215.239 213.15 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.992661, -0.120927, 0.120928, 0.992661, 0, 0.000002)"/>
<path d="M 241.566 234.506 L 261.817 234.506 L 252.98 213.886 L 241.566 234.506 Z" style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20); transform-origin: 251.692px 224.196px;" transform="matrix(-0.992661, -0.120927, 0.120928, -0.992661, -0.000005, -0.000006)"/>
<ellipse style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20);" transform="matrix(0.909972, 0.41467, -0.41467, 0.909972, 114.882067, -43.387347)" cx="157.364" cy="242.88" rx="41.991" ry="9.315"/>
<ellipse style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20);" transform="matrix(0.815899, -0.578195, 0.578195, 0.815899, -73.956899, 228.330572)" cx="321.572" cy="230.304" rx="37.644" ry="7.402"/>
<ellipse style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20);" transform="matrix(-0.582909, 0.812538, -0.812538, -0.582909, 615.518462, 532.268006)" cx="171.148" cy="424.113" rx="41.073" ry="9.962"/>
<ellipse style="stroke: rgb(122, 0, 0); stroke-width: 3px; fill: rgb(122, 20, 20);" transform="matrix(0.645413, 0.763834, -0.763834, 0.645413, 425.127974, -79.654558)" cx="298.356" cy="418.067" rx="40.843" ry="7.592"/>
<animateMotion path="M 0 0 L 6 -33" calcMode="linear" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;7" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</g>
</svg>`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="filter: url("#inner-shadow-filter-0");">
<path d="M 63.279 167.79 Q 115.09 81.353 166.9 167.79 L 166.9 167.79 Q 218.71 254.227 115.09 254.227 L 115.09 254.227 Q 11.469 254.227 63.279 167.79 Z" bx:shape="triangle 11.469 81.353 207.241 172.874 0.5 0.5 1@ef83bda3" style="stroke-width: 3px; stroke: rgb(156, 84, 52); fill: rgb(255, 255, 255); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-40" begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<path d="M 224.698 172.217 Q 276.509 85.78 328.319 172.217 L 328.319 172.217 Q 380.129 258.654 276.509 258.654 L 276.509 258.654 Q 172.888 258.654 224.698 172.217 Z" bx:shape="triangle 172.888 85.78 207.241 172.874 0.5 0.5 1@9ae59a74" style="stroke-width: 3px; stroke: rgb(156, 84, 52); fill: rgb(255, 255, 255); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;40" begin="0s" dur="1s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</path>
<ellipse style="stroke-width: 3px; stroke: rgb(156, 84, 52); fill: rgb(211, 216, 118); transform-box: fill-box; transform-origin: 50% 50%;" cx="143.208" cy="197.471" rx="131.742" transform="matrix(0.007905, 0.999969, -0.999969, 0.007905, 55.191136, 22.914718)" ry="90.246"/>
<path style="stroke-width: 3px; stroke: rgb(156, 84, 52);" d="M 108.774 205.201 L 287.804 205.461 C 290.924 206.501 287.544 258.082 284.424 257.042 L 111.894 257.042 C 109.501 256.731 105.54 207.797 108.774 205.201 Z"/>
<path style="stroke-width: 3px; stroke: rgb(156, 84, 52);" d="M 120.859 285.796 L 276.292 285.975 C 279 286.692 258.821 322.559 256.112 321.843 L 140.813 320.715 C 138.911 320.797 126.846 302.497 120.859 285.796 Z"/>
<path d="M -199.103 -387.78 L -160.827 -339.914 L -237.38 -339.914 L -199.103 -387.78 Z" bx:shape="triangle -237.38 -387.78 76.553 47.866 0.5 0 1@b82d3bcf" style="stroke-width: 3px; stroke: rgb(156, 84, 52);" transform="matrix(-1, 0, 0, -1, 0, 0)"/>
<path d="M 241.848 163.761 C 227.783 182.195 221.754 179.052 212.5 163.761 C 208.404 156.994 206.938 151.933 208.196 148.657 C 207.905 148.138 207.738 147.54 207.738 146.903 C 207.738 144.921 209.344 143.315 211.326 143.315 L 253.312 143.315 C 255.294 143.315 256.9 144.921 256.9 146.903 C 256.899 148.884 255.293 150.49 253.312 150.49 L 247.974 150.49 C 248.864 152.884 247.133 156.834 241.848 163.761 Z M 184.776 162.782 C 175.522 178.073 169.493 181.216 155.428 162.782 C 150.143 155.855 148.412 151.905 149.302 149.511 L 143.963 149.511 C 141.981 149.511 140.375 147.905 140.375 145.923 C 140.376 143.942 141.982 142.336 143.963 142.336 L 185.949 142.336 C 187.93 142.336 189.536 143.942 189.537 145.923 C 189.537 146.56 189.371 147.158 189.08 147.677 C 190.338 150.953 188.872 156.014 184.776 162.782 Z" style="stroke-width: 3px; stroke: rgb(156, 84, 52);"/>
<path d="M 214.983 188.087 C 214.983 192.484 207.961 196.048 199.299 196.048 C 190.637 196.048 183.615 192.484 183.615 188.087 C 183.615 183.69 190.853 188.627 199.515 188.627 C 208.177 188.627 214.983 183.69 214.983 188.087 Z" style="stroke-width: 3px; stroke: rgb(156, 84, 52); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999677, 0.025415, -0.025415, 0.999677, 0, 0)"/>
<rect style="stroke-width: 3px; stroke: rgb(156, 84, 52);" height="5.25" transform="matrix(0.659055, 0.752095, -0.752095, 0.659055, 105.79278, -70.94053)" x="129.753" y="78.36" width="34.273"/>
<ellipse style="stroke-width: 3px; stroke: rgb(156, 84, 52);" transform="matrix(0.690982, 0.722872, -0.722872, 0.690982, 99.828372, -59.509016)" cx="116.068" cy="73.778" rx="12.499" ry="12.966"/>
<rect style="stroke-width: 3px; stroke: rgb(156, 84, 52);" height="5.25" transform="matrix(-0.659055, 0.752095, 0.752095, 0.659055, 238.130856, 229.102039)" x="-129.75" y="-78.36" width="34.273"/>
<ellipse style="stroke-width: 3px; stroke: rgb(156, 84, 52);" transform="matrix(-0.690982, 0.722872, 0.722872, 0.690982, 297.255682, -57.92692)" cx="116.068" cy="73.778" rx="12.499" ry="12.966"/>
<animateMotion path="M 0 0 C -8.732 30.561 103.554 100.628 127.803 15.755" calcMode="linear" begin="0.09s" dur="7.95s" fill="freeze" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_5 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 221.564px 235.618px;">
<path style="stroke: rgb(26, 72, 31); stroke-width: 3px; fill: rgb(123, 216, 94); filter: url("#inner-shadow-filter-0");" d="M 349.094 366.443 C 309.427 388.397 276.48 399.147 228.291 387.89 C 193.957 379.869 183.605 373.383 165.805 321.307 C 150.731 277.207 285.429 163.243 248.077 143.959 C 210.45 124.533 153.345 180.123 131.44 202.573 C 126.309 207.83 100.406 223.123 90.824 220.177 C 79.196 216.602 75.315 198.311 76.244 191.45 C 80.986 156.462 100.259 127.361 132.481 106.132 C 153.001 92.612 181.451 83.268 206.421 80.197 C 226.485 77.729 251.309 78.541 270.988 83.079 C 291.254 87.751 303.398 99.922 313.686 115.738 C 346.332 165.924 315.586 229.775 280.361 270.388 C 268.752 283.772 251.733 294.055 244.953 310.732 C 242.384 317.05 237.014 324.903 240.787 331.864 C 247.633 344.492 262.892 348.193 277.237 348.193 C 305.587 348.193 326.237 335.201 350.136 324.179 C 378.969 310.882 363.703 346.547 356.384 357.799 C 352.075 364.423 346.11 367.275 340.763 372.207"/>
<path d="M -78.587 138.546 Q -60.102 118.91 -41.617 138.546 L -41.617 138.546 Q -23.132 158.182 -60.102 158.182 L -60.102 158.182 Q -97.072 158.182 -78.587 138.546 Z" bx:shape="triangle -97.072 118.91 73.94 39.272 0.5 0.5 1@15e81d07" style="stroke: rgb(26, 72, 31); stroke-width: 3px; fill: rgb(20, 35, 15); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.706635, -0.707578, -0.707579, -0.706634, 186.204898, 15.028369)"/>
<animateMotion path="M 0 0 L -42.304 1.756" calcMode="linear" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;5" begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_6 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 #000" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="#000" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="inner-shadow-filter-1" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 255.505px 248.784px;">
<rect x="236.23" y="199.553" width="158.221" height="122.357" style="stroke-width: 3px; stroke: rgb(0, 0, 0);"/>
<path fill="rgb(255,0,0)" d="M 215.83 82.735 C 226.775 81.058 241.735 81.049 255.301 84.132 C 270.161 87.51 288.452 104.822 301.353 103.687 C 312.34 102.721 319.554 87.24 328.982 84.132 C 337.573 81.3 348.072 82.855 355.298 84.132 C 361.129 85.163 364.302 86.094 369.77 89.719 C 377.48 94.83 393.019 111.854 396.743 115.56 C 398.077 116.889 397.858 116.586 398.716 117.656 C 400.139 119.429 401.251 122.443 404.637 126.036 C 410.495 132.254 429.413 142.071 434.898 151.877 C 439.615 160.307 440.229 171.928 438.847 179.814 C 437.633 186.731 433.289 193.985 428.978 197.274 C 425.17 200.18 418.276 198.034 415.163 200.068 C 412.675 201.692 413.154 204.644 410.557 207.051 C 406.728 210.603 401.094 215.493 392.138 218.227 C 378.496 222.39 342.93 220.297 331.614 223.814 C 325.619 225.677 326.121 229.418 321.088 230.798 C 313.778 232.801 299.006 232.17 289.511 230.798 C 281.01 229.569 272.138 219.571 266.486 223.814 C 258.738 229.629 250.227 268.785 254.644 278.29 C 257.867 285.225 270.153 284.638 277.669 285.274 C 284.831 285.879 291.911 280.843 298.721 282.48 C 305.972 284.224 314.761 296.93 319.773 296.448 C 323.536 296.087 324.043 288.585 327.666 286.671 C 331.7 284.539 338.589 283.466 343.456 285.274 C 348.75 287.239 351.806 296.8 357.928 299.242 C 364.683 301.936 376.892 297.026 382.927 299.242 C 387.584 300.951 389.699 303.635 392.795 308.321 C 397.119 314.863 404.603 332.514 404.637 337.654 C 404.653 340.109 402.369 339.353 402.006 341.845 C 401.282 346.81 406.597 364.539 405.953 369.781 C 405.615 372.53 405.265 373.097 403.322 374.669 C 399.951 377.399 388.552 378.021 383.585 382.352 C 378.798 386.528 379.324 396.283 373.718 399.812 C 366.978 404.054 350.662 403.081 343.456 402.606 C 338.682 402.292 335.831 398.989 332.929 399.812 C 330.201 400.588 330.073 405.373 326.352 406.796 C 320.492 409.038 308.895 408.918 297.404 406.796 C 290.149 405.456 281.165 401.575 271.876 397.58 C 270.672 399.407 269.006 400.904 267.728 402.05 C 266.097 403.514 265.501 404.173 262.597 404.774 C 257.96 405.733 247.105 405.644 237.798 405.158 C 236.067 407.541 233.801 409.75 232.003 411.229 C 229.561 413.237 227.66 414.165 224.307 414.861 C 219.766 415.803 211.705 416.768 206.349 414.861 C 201.024 412.964 195.615 408.018 192.24 403.513 C 189.085 399.303 186.101 393.327 186.253 388.988 C 186.264 388.678 186.296 388.364 186.346 388.047 C 182.814 387.713 179.57 387.104 176.358 385.845 C 172.944 384.505 169.193 382.495 166.037 380.185 C 159.452 380.982 150.909 380.721 145.919 379.354 C 139.961 377.722 135.528 374.328 131.81 369.822 C 127.826 364.993 124.968 357.426 123.259 350.757 C 121.921 345.54 121.204 338.331 121.292 333.366 C 121.17 333.33 121.05 333.294 120.931 333.257 C 114.394 331.212 106.103 324.312 101.69 319.185 C 98.041 314.945 96.272 310.312 94.85 305.568 C 93.683 301.678 92.83 297.138 92.953 293.235 C 85.967 290.329 79.003 286.429 75.704 281.781 C 70.603 274.594 71.464 263.654 71.757 253.845 C 72.073 243.251 73.481 232.537 78.336 220.321 C 81.443 212.502 87.31 201.549 93.388 191.6 C 92.438 189.639 91.655 187.618 91.239 185.936 C 90.452 182.753 90.338 180.85 91.239 176.858 C 92.671 170.519 97.088 158.606 102.355 150.532 C 107.896 142.038 121.058 129.983 124.162 127.381 C 124.807 126.841 124.941 126.7 125.193 126.62 C 125.615 123.352 126.186 120.489 127.018 118.355 C 129.843 111.112 131.559 107.123 138.201 103.687 C 148.322 98.453 181.224 102.001 188.858 98.1 C 192.503 96.237 190.629 93.24 193.463 91.116 C 197.831 87.84 206.903 84.103 215.83 82.735 Z" style="fill: rgb(166, 209, 48); stroke-width: 3px; stroke: rgb(117, 136, 43); filter: url("#inner-shadow-filter-1");"/>
<ellipse style="stroke-width: 3px; stroke: rgb(117, 136, 43); fill: rgb(255, 255, 255); filter: url("#inner-shadow-filter-0");" cx="305.144" cy="257.841" rx="18.283" ry="17.932"/>
<ellipse style="stroke-width: 3px; stroke: rgb(117, 136, 43); fill: rgb(255, 255, 255); filter: url("#inner-shadow-filter-0");" cx="359.994" cy="260.302" rx="18.283" ry="18.986"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;30 0" begin="0s" dur="10s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;3" begin="0s" dur="1.5s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_7 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 271.789px 189.503px; filter: url("#inner-shadow-filter-0");">
<path d="M 89.749 184.064 L 91.393 184.064 L 158.281 55.309 L 166.849 120.417 L 203.66 35.834 L 205.176 119.423 L 252.046 18.522 L 254.01 120.017 L 284.592 30.423 L 285.584 100.189 L 323.37 16.358 L 324.828 93.989 L 350.787 41.243 L 351.915 96.232 L 382.705 33.67 L 384.332 113.015 L 412.178 60.719 L 412.178 139.287 L 451.129 99.67 L 421.005 207.555 L 463.573 179.735 L 418.602 279.858 L 466.819 252.228 L 428.305 326.294 L 459.244 327.966 L 411.84 357.956 L 410.556 360.425 L 410.014 359.707 L 410.014 361.508 L 89.749 361.508 C 74.261 378.286 70.691 204.71 89.749 184.064 Z" style="stroke-width: 3px; fill: rgb(145, 255, 172); stroke: rgb(99, 141, 81);"/>
<g>
<path stroke="rgb(255,0,0)" d="M 166.718 216.496 C 173.255 216.305 195.842 221.944 200.867 226.309 C 203.762 228.824 203.179 231.326 203.222 234.945 C 203.282 239.86 201.142 249.731 199.297 253.786 C 198.088 256.442 197.583 257.781 194.979 258.888 C 190.847 260.646 176.722 259.605 173.783 259.673 C 172.746 259.698 173.094 259.835 172.213 259.673 C 170.23 259.311 163.454 259.731 160.83 256.141 C 156.915 250.784 155.745 229.452 156.905 223.954 C 157.479 221.235 158.911 220.845 160.438 219.637 C 162.111 218.312 163.3 216.597 166.718 216.496 Z" style="stroke: rgb(129, 151, 57); stroke-width: 3px;"/>
<path d="M 220.167 221.906 C 219.609 225.719 201.575 226.24 179.887 223.069 C 158.198 219.898 141.068 214.236 141.626 210.423 C 142.183 206.609 159.334 212.131 181.022 215.302 C 202.711 218.472 220.724 218.092 220.167 221.906 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; transform-origin: 180.534px 218.641px;"/>
<path d="M 140.903 262.611 C 140.93 258.757 158.721 255.756 180.639 255.908 C 202.558 256.06 220.304 259.308 220.277 263.161 C 220.251 267.015 202.503 263.91 180.585 263.757 C 158.666 263.606 140.877 266.465 140.903 262.611 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; transform-origin: 180.608px 260.383px;"/>
<path stroke="rgb(255,0,0)" d="M 285.087 260.431 C 291.624 260.622 314.211 254.983 319.236 250.618 C 322.131 248.103 321.548 245.601 321.591 241.982 C 321.651 237.067 319.511 227.196 317.666 223.141 C 316.457 220.485 315.952 219.146 313.348 218.039 C 309.216 216.281 295.091 217.322 292.152 217.254 C 291.115 217.229 291.463 217.092 290.582 217.254 C 288.599 217.616 281.823 217.196 279.199 220.786 C 275.284 226.143 274.114 247.475 275.274 252.973 C 275.848 255.692 277.28 256.082 278.807 257.29 C 280.48 258.615 281.669 260.33 285.087 260.431 Z" style="stroke: rgb(129, 151, 57); stroke-width: 3px; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000015, -0.000009)"/>
<path d="M 337.189 215.894 C 336.631 212.081 318.597 211.56 296.909 214.731 C 275.22 217.902 258.09 223.564 258.648 227.377 C 259.205 231.191 276.356 225.669 298.044 222.498 C 319.733 219.328 337.746 219.708 337.189 215.894 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; transform-origin: 297.556px 219.159px;" transform="matrix(-1, 0, 0, -1, -0.000031, 0.000002)"/>
<path d="M 257.777 258.673 C 257.804 262.527 275.595 265.528 297.513 265.376 C 319.432 265.224 337.178 261.976 337.151 258.123 C 337.125 254.269 319.377 257.374 297.459 257.527 C 275.54 257.678 257.751 254.819 257.777 258.673 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; transform-origin: 297.482px 260.901px;" transform="matrix(-1, 0, 0, -1, 0.00001, 0.000011)"/>
</g>
<animateMotion path="M 0 0 L -18.326 34.916" calcMode="linear" begin="0s" dur="10s" fill="freeze" repeatCount="indefinite"/>
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;6" dur="1.06s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_8 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="103.634" y1="39.694" x2="103.634" y2="436.478" id="gradient-1" gradientTransform="matrix(0.00377, 0.999995, -0.296052, 0.001116, 149.729022, 137.503452)">
<stop offset="0" style="stop-color: rgb(255, 195, 144);"/>
<stop offset="1" style="stop-color: rgb(58.826% 51.922% 45.923%)"/>
</linearGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="236.251" cy="169.388" r="205.011" id="gradient-0">
<stop offset="0" style="stop-color: rgb(86.275% 100% 85.49%)"/>
<stop offset="1" style="stop-color: rgb(45.37% 57.913% 44.904%)"/>
</radialGradient>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 26 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="26"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="inner-shadow-filter-1" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 236.251px 242.77px;">
<ellipse style="stroke-width: 3px; stroke: rgb(139, 100, 45); fill: url("#gradient-1"); filter: url("#inner-shadow-filter-0");" cx="103.634" cy="238.086" rx="226.307" transform="matrix(0.013697, 0.999906, -0.999906, 0.013697, 476.186181, 135.885099)" ry="198.392"/>
<path style="stroke-width: 3px; stroke: rgb(139, 100, 45); fill: rgb(255, 235, 218); fill-opacity: 0;" d="M 42.712 255.269 C 70.551 245.989 114.95 149.326 118.735 141.755 C 119.701 139.824 127.761 117.224 129.149 116.761 C 134.634 114.933 146.243 123.495 152.06 123.01 C 164.906 121.939 172.501 126.939 185.385 126.134 C 212.58 124.434 240.86 129.965 267.657 125.093 C 286.147 121.731 302.746 117.033 319.727 113.637 C 321.811 113.22 338.094 110.134 339.514 111.554 C 340.278 112.319 340.354 118.878 340.556 119.886 C 342.017 127.193 346.973 136.402 350.97 142.797 C 371.405 175.493 399.342 241.731 438.448 241.731"/>
<path d="M 40.322 146.962 C 38.967 114.736 430.864 115.316 432.195 146.962 C 445.118 149.931 443.423 218.275 432.195 215.695 C 430.726 197.482 39.109 200.647 40.322 215.695 C 32.141 217.575 24.825 150.522 40.322 146.962 Z" style="stroke-width: 3px; stroke: rgb(139, 100, 45); fill: url("#gradient-0"); filter: url("#inner-shadow-filter-1");"/>
<path d="M -273.194 -339.506 Q -235.128 -386.09 -197.063 -339.506 L -197.063 -339.506 Q -158.997 -292.922 -235.128 -292.922 L -235.128 -292.922 Q -311.26 -292.922 -273.194 -339.506 Z" bx:shape="triangle -311.26 -386.09 152.263 93.168 0.5 0.5 1@86c4a8f9" style="stroke-width: 3px; stroke: rgb(139, 100, 45); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.951866, -0.306514, 0.306515, -0.951866, 405.42914, 622.701533)"/>
<path d="M -273.194 -339.506 Q -235.128 -386.09 -197.063 -339.506 L -197.063 -339.506 Q -158.997 -292.922 -235.128 -292.922 L -235.128 -292.922 Q -311.26 -292.922 -273.194 -339.506 Z" bx:shape="triangle -311.26 -386.09 152.263 93.168 0.5 0.5 1@86c4a8f9" style="stroke-width: 3px; stroke: rgb(139, 100, 45); transform-origin: -235.128px -327.86px;" transform="matrix(0.951866, -0.306514, -0.306515, -0.951866, 534.59692, 621.293064)"/>
<g>
<ellipse style="stroke-width: 3px; stroke: rgb(139, 100, 45);" cx="102.115" cy="325.122" rx="30.509" transform="matrix(0.999222, 0.039443, -0.039443, 0.999222, 24.937383, 11.46922)" ry="8.849"/>
<ellipse style="stroke-width: 3px; stroke: rgb(139, 100, 45);" cx="102.115" cy="325.122" rx="30.509" transform="matrix(0.999222, 0.039443, -0.039443, 0.999222, 27.344282, 43.157163)" ry="8.849"/>
</g>
<g transform="matrix(-1, 0, 0, 1, 470.978281, 3.810349)" style="">
<ellipse style="stroke-width: 3px; stroke: rgb(139, 100, 45);" cx="102.115" cy="325.122" rx="30.509" transform="matrix(0.999222, 0.039443, -0.039443, 0.999222, 24.937153, 11.468429)" ry="8.849"/>
<ellipse style="stroke-width: 3px; stroke: rgb(139, 100, 45);" cx="102.115" cy="325.122" rx="30.509" transform="matrix(0.999222, 0.039443, -0.039443, 0.999222, 27.344282, 43.157163)" ry="8.849"/>
</g>
<path d="M 292.474 400.536 C 292.474 416.39 264.678 405.213 232.991 405.213 C 201.304 405.213 177.726 416.39 177.726 400.536 C 177.726 384.682 203.413 371.83 235.1 371.83 C 266.787 371.83 292.474 384.682 292.474 400.536 Z" style="stroke-width: 3px; stroke: rgb(139, 100, 45); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.99978, 0.020974, -0.020974, 0.99978, 0, 0)"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;50 0" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;6" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_9 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<linearGradient gradientUnits="userSpaceOnUse" x1="244.177" y1="93.199" x2="244.177" y2="420.502" id="gradient-1" gradientTransform="matrix(-0.999967, -0.008141, 0.006363, -0.781802, 488.794262, 371.124711)">
<stop offset="0" style="stop-color: rgb(100% 94.118% 77.255%)"/>
<stop offset="1" style="stop-color: rgb(58.282% 53.365% 38.071%)"/>
</linearGradient>
<filter id="inner-shadow-filter-1" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 240.231px 247.979px;">
<path d="M 81.8 128.984 L 398.659 128.984 C 405.576 98.352 404.878 364.787 398.659 392.329 C 402.819 440.585 87.004 452.693 81.8 392.329 C 76.08 311.099 78.242 78.453 81.8 128.984 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); fill: rgb(255, 240, 197); filter: url("#inner-shadow-filter-0");"/>
<path d="M 121.935 111.381 L 366.269 111.381 C 368.092 122.378 400.533 170.923 366.269 366.98 C 257.902 424.649 232.182 450.845 121.935 366.98 C 100.909 276.186 101.655 23.807 121.935 111.381 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); filter: url("#inner-shadow-filter-0"); fill: url("#gradient-1");"/>
<path d="M 180.323 158.448 C 131.435 174.553 85.404 168.181 77.509 144.216 C 69.615 120.25 102.847 87.768 151.735 71.664 C 188.343 59.605 223.35 60.148 241.941 71.245 C 261.275 62.214 294.041 62.493 328.203 73.746 C 377.092 89.851 410.324 122.333 402.429 146.298 C 394.535 170.263 348.504 176.635 299.616 160.531 C 273.754 152.012 252.274 138.909 238.945 124.91 C 225.517 138.12 204.898 150.353 180.323 158.448 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); fill: rgb(255, 240, 197); filter: url("#inner-shadow-filter-0");"/>
<path d="M 72.646 148.844 C 72.646 134.581 408.517 136.861 408.517 148.844 C 418.453 148.844 413.181 208.695 408.517 208.695 C 409.405 223.799 73.634 225.493 72.646 208.695 C 65.914 209.443 62.619 149.958 72.646 148.844 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); fill: rgb(255, 197, 197); filter: url("#inner-shadow-filter-0") url("#inner-shadow-filter-1");"/>
<path d="M 171.865 352.672 C 171.434 358.444 160.525 362.335 147.497 361.363 C 134.469 360.391 124.258 354.923 124.688 349.152 C 125.119 343.38 136.029 339.489 149.057 340.461 C 162.085 341.433 172.296 346.9 171.865 352.672 Z M 168.696 321.338 C 168.266 327.11 157.356 331.001 144.328 330.029 C 131.3 329.057 121.089 323.59 121.519 317.818 C 121.95 312.046 132.86 308.155 145.888 309.127 C 158.916 310.099 169.127 315.567 168.696 321.338 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); filter: url("#inner-shadow-filter-0");"/>
<path d="M 365.678 321.513 C 365.247 315.741 354.338 311.85 341.31 312.822 C 328.282 313.794 318.071 319.262 318.501 325.033 C 318.932 330.805 329.842 334.696 342.87 333.724 C 355.898 332.752 366.109 327.285 365.678 321.513 Z M 362.509 352.847 C 362.079 347.075 351.169 343.184 338.141 344.156 C 325.113 345.128 314.902 350.595 315.332 356.367 C 315.763 362.139 326.673 366.03 339.701 365.058 C 352.729 364.086 362.94 358.618 362.509 352.847 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); filter: url("#inner-shadow-filter-0"); transform-origin: 340.505px 338.94px;" transform="matrix(-1, 0, 0, -1, -0.000032, -0.000011)"/>
<path d="M 281.357 371.331 C 281.357 379.498 264.407 376.26 242.63 376.26 C 220.853 376.26 202.495 379.498 202.495 371.331 C 202.495 363.164 220.149 356.544 241.926 356.544 C 263.703 356.544 281.357 363.164 281.357 371.331 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); filter: url("#inner-shadow-filter-0");"/>
<path d="M 247.553 274.966 C 249.613 278.468 258.543 277.277 269.652 272.589 C 266.684 277.077 265.048 283.025 265.426 289.446 C 266.204 302.667 275.224 312.893 285.574 312.283 C 295.923 311.675 303.683 300.463 302.906 287.24 C 302.189 275.07 294.49 265.438 285.198 264.459 C 300.264 255.076 310.072 244.295 307.404 239.76 C 304.585 234.968 288.902 238.963 272.374 248.685 C 255.847 258.407 244.734 270.174 247.553 274.966 Z M 208.878 247.844 C 192.351 238.122 176.668 234.126 173.848 238.918 C 171.18 243.454 180.988 254.234 196.053 263.617 C 186.763 264.598 179.064 274.229 178.348 286.398 C 177.571 299.62 185.33 310.832 195.68 311.441 C 206.029 312.05 215.05 301.826 215.828 288.602 C 216.205 282.183 214.571 276.237 211.603 271.748 C 222.711 276.437 231.639 277.627 233.699 274.125 C 236.518 269.332 225.406 257.566 208.878 247.844 Z" style="stroke-width: 3px; stroke: rgb(151, 100, 45); filter: url("#inner-shadow-filter-0");"/>
<animateMotion path="M 0 0 L 100 0" calcMode="linear" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1" keyPoints="0; 0.54"/>
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-6" begin="0s" dur="4.3s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
</svg>`; // Mapped to the same phase as CHAR_SVG_8
const HEXAGON_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" xmlns="http://www.w3.org/2000/svg" viewBox="15.108 0 484.892 607.377" width="700" xmlns:bx="https://boxy-svg.com">
<g style="">
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
</g>
<g>
<path d="M 229.042 412.165 L 305.306 412.165 L 381.57 562.292 L 146.543 557.976 L 229.042 412.165 Z" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6);"/>
<path d="M 558.889 268.77 L 607.465 306.607 L 607.465 382.281 L 558.889 420.118 L 510.313 382.281 L 510.313 306.607 Z" bx:shape="n-gon 558.889 344.444 56.091 75.674 6 0 1@3a289cbf" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.000947, 1, -1, -0.000947, -291.270454, 19.835772)"/>
<path d="M 265.015 429.262 C 265.015 432.723 262.442 435.695 258.767 436.979 C 258.776 437.203 258.78 437.428 258.78 437.655 C 258.78 446.397 252.445 453.483 244.63 453.483 C 236.815 453.483 230.48 446.397 230.48 437.655 C 230.48 435.662 230.809 433.755 231.41 431.999 L 171.005 379.619 L 185.521 362.879 L 252.598 421.043 C 253.278 420.928 253.982 420.868 254.703 420.868 C 260.398 420.868 265.015 424.626 265.015 429.262 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="180.938" cy="368.424" rx="19.155" ry="17.806"/>
<path d="M 359.505 386.357 C 359.505 382.896 356.932 379.924 353.257 378.64 C 353.266 378.416 353.27 378.191 353.27 377.964 C 353.27 369.222 346.935 362.136 339.12 362.136 C 331.305 362.136 324.97 369.222 324.97 377.964 C 324.97 379.957 325.299 381.864 325.9 383.62 L 265.495 436 L 280.011 452.74 L 347.088 394.576 C 347.768 394.691 348.472 394.751 349.193 394.751 C 354.888 394.751 359.505 390.993 359.505 386.357 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000015, -0.000032)"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="353.876" cy="366.266" rx="18.886" ry="16.727"/>
<path style="fill: rgba(216, 216, 216, 0); stroke-width: 3px; stroke: rgb(113, 6, 6);" d="M 225.849 321.714 C 244.699 311.212 274.958 366.694 270.13 375.533 C 270.679 356.269 292.931 312.428 311.131 325.699"/>
<ellipse style="stroke-width: 3px; fill: rgb(244, 226, 0); stroke: rgb(113, 6, 6);" cx="269.597" cy="340.775" rx="7.199" ry="6.83"/>
<path d="M 333.605 511.43 L 380.13 561.792 L 287.079 561.792 L 287.447 561.394 L 218.49 561.394 L 219.155 560.674 L 146.064 560.674 L 192.59 510.312 L 229.135 549.871 L 265.016 511.032 L 299.494 548.353 L 333.605 511.43 Z" style="stroke-width: 3px; fill: rgb(255, 149, 149); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999926, 0.012141, -0.012141, 0.999926, 0, 0)"/>
<animateMotion path="M 0 0 L -0.922 16.787 L -0.419 -0.652" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.425727; 1" keyPoints="0; 0.425727; 1" repeatCount="indefinite"/>
</g>
<g transform="matrix(1, 0, 0, 1, -1, 0)">
<path d="M 257.351 113.454 C 294.535 143.721 286.007 223.616 258.543 246.503 C 231.078 269.389 77.998 351.224 87.05 339.32 C 92.817 331.736 112.133 177.68 123.883 136.898 C 135.633 96.117 220.168 83.19 257.351 113.454 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 170.96px 215.66px;" transform="matrix(0.999859, 0.016815, -0.016815, 0.999859, 0, 0)"/>
<path d="M 453.793 329.374 C 490.977 299.107 482.449 219.212 454.985 196.325 C 427.52 173.439 274.44 91.604 283.492 103.508 C 289.259 111.092 308.575 265.148 320.325 305.93 C 332.075 346.711 416.61 359.638 453.793 329.374 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 367.402px 227.168px;" transform="matrix(-0.999859, 0.016815, -0.016815, -0.999859, -0.000069, 0.000015)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);" cx="272.328" cy="238.394" rx="96.099" ry="86.543"/>
<path d="M 253.41 195.871 C 219.329 213.067 96.21 224.326 112.025 212.031 C 127.84 199.736 167.873 115.935 192.776 94.298 C 214.041 75.822 246.953 83.073 267.168 95.982 C 287.432 82.027 329.28 67.783 343.281 93.156 C 363.7 130.162 426.754 207.435 425.111 213.587 C 423.468 219.739 316.728 211.925 282.647 194.729 C 277.544 192.154 272.89 189.142 268.721 185.788 C 264.206 189.603 259.086 193.007 253.41 195.871 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26);"/>
<path d="M 225.149 -245.659 Q 243.032 -273.87 260.914 -245.659 L 260.914 -245.659 Q 278.796 -217.448 243.032 -217.448 L 243.032 -217.448 Q 207.267 -217.448 225.149 -245.659 Z" bx:shape="triangle 207.267 -273.87 71.529 56.422 0.5 0.5 1@c4aab48d" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="234.022" cy="231.651" rx="7.917" ry="10.647"/>
<path d="M 284.119 -244.989 Q 302.002 -273.2 319.884 -244.989 L 319.884 -244.989 Q 337.766 -216.778 302.002 -216.778 L 302.002 -216.778 Q 266.237 -216.778 284.119 -244.989 Z" bx:shape="triangle 266.237 -273.2 71.529 56.422 0.5 0.5 1@50afb6eb" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="292.992" cy="230.974" rx="7.917" ry="10.647"/>
<path d="M 291.082 281.5 C 291.082 286.042 281.815 294.169 270.809 294.169 C 259.802 294.169 251.223 286.042 251.223 281.5 C 251.223 276.958 260.489 283.056 271.496 283.056 C 282.503 283.056 291.082 276.958 291.082 281.5 Z" style="stroke-width: 3px; stroke: rgb(0, 0, 0);"/>
<animateMotion path="M 0 0 L 0.91 17.861 L 1.01 0.028" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.486342; 1" keyPoints="0; 0.486342; 1" repeatCount="indefinite"/>
</g>
</svg>`;
// NPC DATA (Phase index corresponds to MAP_SVG index)
const NPC_DATA = {
// Phase 0: Map 1 - Two NPCs for the starting phase
0: [
{ char_id: 'CHAR_1_AngryBird', name: 'Angry Bird', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Angry Bird: CAW! Get out! This forest is not for the living!", "Angry Bird: The trees are watching you..."] },
{ char_id: 'CHAR_2_AngryTree', name: 'Angry Tree', svg_content: CHAR_SVG_2, initial_x: 550, dialogue: ["Angry Tree: GRUMBLE. Each step you take poisons the ground!", "Angry Tree: Only the Hexagon Fairy can cleanse this place."] }
],
1: { char_id: 'CHAR_3_BadAnt', name: 'Bad Ant', svg_content: CHAR_SVG_3, initial_x: 400, dialogue: ["Bad Ant: We crawl where the toxins flow. Keep up, human!", "Bad Ant: The queen is just beyond the next dark grove."] },
2: { char_id: 'CHAR_4_QueenBee', name: 'Queen Bee', svg_content: CHAR_SVG_4, initial_x: 650, dialogue: ["Queen Bee: BZZZ! My hive's honey is now poisonous!", "Queen Bee: The spider's web blocks the path to the south."] },
3: { char_id: 'CHAR_5_RageSpider', name: 'Rage Spider', svg_content: CHAR_SVG_5, initial_x: 250, dialogue: ["Rage Spider: SSSS! Tangled in my web, are you? Too bad!", "Rage Spider: The ground is thin here. Be careful when you jump."] },
4: { char_id: 'CHAR_6_ScaredGuy', name: 'Scared Guy', svg_content: CHAR_SVG_6, initial_x: 450, dialogue: ["Scared Guy: H-h-help! Everything here is hostile!", "Scared Guy: I think I saw a talking bush up ahead!"] },
5: { char_id: 'CHAR_7_StrangeArbust', name: 'Strange Arbust', svg_content: CHAR_SVG_7, initial_x: 500, dialogue: ["Strange Arbust: I am a sentient shrub, and I hate your kind!", "Strange Arbust: You are nearing the heart of the forest's corruption."] },
6: { char_id: 'CHAR_8_ToxicMan', name: 'Toxic Man', svg_content: CHAR_SVG_8, initial_x: 300, dialogue: ["Toxic Man: I embody the poison. Don't breathe too deep!", "Toxic Man: My wife is waiting at the next checkpoint, if you survive my fumes."] },
7: { char_id: 'CHAR_9_ToxicWoman', name: 'Toxic Woman', svg_content: CHAR_SVG_9, initial_x: 600, dialogue: ["Toxic Woman: Together, we rule the pollution of this wood!", "Toxic Woman: The final clearing is just a sprint away. Don't look back!"] },
8: { char_id: 'HEXAGON_FAIRY', name: 'Hexagon Fairy', svg_content: HEXAGON_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Hexagon Fairy: You have survived the perils of the Toxic Forest.", "Hexagon Fairy: Your strength is proven. This contamination will not harm you now.", "Hexagon Fairy: Toxic Forest conquered. Go forth!"] },
};
const MAX_TRANSITIONS = 8; // 8 transitions (Map 1 -> 2 -> ... -> 9). Total 9 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Toxic Sky/Air Gradient (Muted, sickly green/brown) -->
<linearGradient id="toxicSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 110, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 130, 100);stop-opacity:1" />
</linearGradient>
<!-- Toxic Ground/Dirt Gradient -->
<linearGradient id="toxicGroundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(70, 90, 70);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(90, 120, 90);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Air (Muted Green/Brown) -->
<rect x="0" y="0" width="800" height="500" fill="url(#toxicSkyGradient)" />
<!-- 2. Distant Hills/Forest (Darker silhouette) -->
<path d="M0 300 Q200 250, 400 300 T800 280 V500 H0 Z"
fill="rgb(50, 80, 50)" />
<!-- 3. Foreground Ground (Toxic Dirt Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#toxicGroundGradient)" />
<!-- 4. Dead/Contaminated Trees (Bare silhouettes) -->
<g fill="rgb(80, 50, 30)" opacity="0.8">
<!-- Tree 1 -->
<rect x="150" y="350" width="10" height="100" />
<path d="M155 350 L140 320 L170 320 Z" />
<!-- Tree 2 -->
<rect x="400" y="380" width="8" height="70" />
<path d="M404 380 L395 360 L413 360 Z" />
<!-- Tree 3 -->
<rect x="650" y="370" width="12" height="80" />
<path d="M656 370 L640 340 L672 340 Z" />
</g>
<!-- 5. Toxic Fog/Mist (Low ground green glow/effect) -->
<rect x="0" y="400" width="800" height="50" fill="rgb(46, 204, 113)" opacity="0.1" />
<!-- 6. Small Toxic Plant/Glow (Foreground detail) -->
<circle cx="100" cy="440" r="10" fill="rgb(46, 204, 113)" opacity="0.5" />
<path d="M250 450 V430 L260 440 L250 450 Z" fill="rgb(0, 150, 0)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Toxic Sky/Air Gradient (Muted, sickly green/brown - Consistent) -->
<linearGradient id="toxicSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 110, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 130, 100);stop-opacity:1" />
</linearGradient>
<!-- Toxic Ground/Dirt Gradient (More exposed dirt) -->
<linearGradient id="exposedDirtGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 90, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 110, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Air -->
<rect x="0" y="0" width="800" height="500" fill="url(#toxicSkyGradient)" />
<!-- 2. Distant Hills/Forest (Silhouette) -->
<path d="M0 300 Q200 250, 400 300 T800 280 V500 H0 Z"
fill="rgb(50, 80, 50)" />
<!-- 3. Foreground Ground (Exposed, toxic dirt) -->
<rect x="0" y="450" width="800" height="50" fill="url(#exposedDirtGradient)" />
<!-- 4. Abandoned House/Cottage (Background Feature) -->
<g transform="translate(600, 350) scale(0.6)">
<!-- Main Body -->
<rect x="-50" y="-50" width="100" height="80" fill="rgb(220, 200, 150)" stroke="rgb(150, 130, 80)" stroke-width="2" />
<!-- Roof (Thatch/Straw color) -->
<polygon points="-60,-50 60,-50 0,-100" fill="rgb(180, 160, 100)" stroke="rgb(150, 130, 80)" stroke-width="2" />
<!-- Chimney & Smoke -->
<rect x="30" y="-80" width="10" height="30" fill="rgb(100, 80, 60)" />
<circle cx="35" cy="-85" r="10" fill="rgb(180, 180, 180)" opacity="0.6" />
</g>
<!-- 5. Dead/Contaminated Trees (Scattered, less dense) -->
<g fill="rgb(80, 50, 30)" opacity="0.8">
<rect x="100" y="380" width="8" height="70" />
<rect x="250" y="360" width="10" height="90" />
<rect x="500" y="400" width="6" height="50" />
<rect x="700" y="390" width="10" height="60" />
</g>
<!-- 6. Toxic Puddle/Sludge (Low spot on the ground) -->
<ellipse cx="400" cy="450" rx="60" ry="15" fill="rgb(46, 204, 113)" opacity="0.7" />
<!-- 7. Toxic Plants (Spiky green shapes) -->
<path d="M150 450 V430 L160 440 L150 450 Z" fill="rgb(0, 150, 0)" />
<rect x="750" y="435" width="20" height="15" fill="rgb(0, 180, 0)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Dark Forest Sky/Air Gradient (Darker, more somber) -->
<linearGradient id="darkForestSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(50, 70, 50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(70, 90, 70);stop-opacity:1" />
</linearGradient>
<!-- Irregular Toxic Ground Gradient (More uneven dirt/rock) -->
<linearGradient id="irregularToxicGround" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 120, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Air -->
<rect x="0" y="0" width="800" height="500" fill="url(#darkForestSkyGradient)" />
<!-- 2. Distant Hills/Forest (Very dark, oppressive silhouette) -->
<path d="M0 350 Q200 300, 400 350 T800 320 V500 H0 Z"
fill="rgb(30, 50, 30)" />
<!-- 3. Toxic Fog Layer (Low opacity green/white layer) -->
<rect x="0" y="300" width="800" height="150" fill="rgb(46, 204, 113)" opacity="0.15" />
<!-- 4. Foreground Ground (Irregular platform shape for variation) -->
<path d="M0 450 H800 V400 Q600 420, 400 400 Q200 420, 0 400 Z"
fill="url(#irregularToxicGround)" />
<!-- 5. Very Dead/Shriveled Trees (Closer to the foreground) -->
<g fill="rgb(60, 40, 20)" opacity="0.9">
<!-- Tree 1 (Left) -->
<rect x="150" y="350" width="10" height="100" />
<path d="M155 350 Q145 320, 155 330 Q165 320, 155 350 Z" />
<!-- Tree 2 (Right) -->
<rect x="600" y="380" width="8" height="70" />
<path d="M604 380 Q595 360, 604 370 Q613 360, 604 380 Z" />
</g>
<!-- 6. Toxic Mushrooms/Fungi (Ground Detail) -->
<g transform="translate(300, 440)" fill="rgb(150, 0, 150)" opacity="0.7">
<rect x="-5" y="-10" width="10" height="10" />
<ellipse cx="0" cy="-10" rx="15" ry="5" />
</g>
<g transform="translate(500, 440)" fill="rgb(46, 204, 113)" opacity="0.9">
<rect x="-5" y="-15" width="10" height="15" />
<ellipse cx="0" cy="-15" rx="18" ry="7" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Dark Swamp Sky Gradient (Darker and more oppressive) -->
<linearGradient id="swampSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(40, 50, 40);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(60, 70, 60);stop-opacity:1" />
</linearGradient>
<!-- Swamp Water/Sludge Gradient (Dark, murky green) -->
<linearGradient id="swampWaterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(30, 60, 50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(20, 50, 40);stop-opacity:1" />
</linearGradient>
<!-- Solid Ground Platform (Rock/Dry patch) -->
<linearGradient id="dryPatchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 80, 60);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Air -->
<rect x="0" y="0" width="800" height="500" fill="url(#swampSkyGradient)" />
<!-- 2. Distant Hills/Forest (Very dark, foggy silhouette) -->
<path d="M0 350 Q200 300, 400 350 T800 320 V500 H0 Z"
fill="rgb(20, 30, 20)" />
<!-- 3. Swamp Water (The main foreground) -->
<rect x="0" y="400" width="800" height="100" fill="url(#swampWaterGradient)" />
<!-- 4. Dry Platform Patch (The jumpable platform at Y=450) -->
<rect x="100" y="430" width="600" height="20" fill="url(#dryPatchGradient)" />
<rect x="100" y="450" width="600" height="50" fill="url(#dryPatchGradient)" />
<!-- 5. Swamp Bubbles (Toxic air rising) -->
<g fill="rgb(46, 204, 113)" opacity="0.6">
<circle cx="50" cy="480" r="5">
<animate attributeName="cy" values="480;420" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.6;0.1" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="750" cy="460" r="8">
<animate attributeName="cy" values="460;380" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.6;0.1" dur="4s" repeatCount="indefinite" />
</circle>
</g>
<!-- 6. Dead Swamp Trees/Roots emerging from water -->
<g fill="rgb(80, 50, 30)" opacity="0.9">
<rect x="300" y="300" width="10" height="150" />
<rect x="500" y="350" width="15" height="100" />
<path d="M295 450 L315 450 L305 400 Z" />
<path d="M495 450 L520 450 L507 410 Z" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Canopy Shadow Sky (Very dark, little light penetrates) -->
<linearGradient id="canopySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(30, 40, 30);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(50, 60, 50);stop-opacity:1" />
</linearGradient>
<!-- Forest Floor Gradient (Dark, damp earth) -->
<linearGradient id="forestFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(70, 60, 50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(90, 80, 70);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Canopy Shadow -->
<rect x="0" y="0" width="800" height="500" fill="url(#canopySkyGradient)" />
<!-- 2. Distant Trees/Shadows (Implied background density) -->
<path d="M0 300 Q200 250, 400 300 T800 280 V500 H0 Z"
fill="rgb(10, 20, 10)" />
<!-- 3. Foreground Ground (Damp Earth Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#forestFloorGradient)" />
<!-- 4. Giant Hollow Tree/Nest Structure (Centerpiece) -->
<g transform="translate(400, 450)">
<!-- Tree Trunk (Hollow log look) -->
<rect x="-150" y="-300" width="300" height="300" fill="rgb(120, 90, 60)" stroke="rgb(80, 60, 40)" stroke-width="5" rx="20" ry="20" />
<!-- Hollow Opening/Entrance (Dark interior) -->
<ellipse cx="0" cy="-150" rx="100" ry="120" fill="rgb(20, 10, 0)" />
<!-- Moss/Fungi on the tree -->
<circle cx="-100" cy="-50" r="20" fill="rgb(40, 120, 40)" opacity="0.8" />
<circle cx="100" cy="-100" r="30" fill="rgb(46, 204, 113)" opacity="0.6" />
<!-- Rough Webbing/Nest Texture (For spider/bee theme) -->
<g stroke="white" stroke-width="1" opacity="0.4" fill="none">
<path d="M-100 -50 Q-50 -100, 0 -50 Q50 -100, 100 -50" />
<path d="M-100 -20 Q0 -70, 100 -20" />
</g>
</g>
<!-- 5. Roots/Obstacles (Small bumps on the ground) -->
<ellipse cx="100" cy="450" rx="40" ry="10" fill="rgb(80, 60, 40)" />
<ellipse cx="700" cy="450" rx="30" ry="8" fill="rgb(80, 60, 40)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cave/Underground Sky Gradient (Cool Gray/Stone) -->
<linearGradient id="caveSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 80, 90);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 100, 110);stop-opacity:1" />
</linearGradient>
<!-- Cave Floor/Rock Gradient -->
<linearGradient id="caveFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 120, 120);stop-opacity:1" />
</linearGradient>
<!-- Toxic Green Light/Glow (Source of the light in the cave) -->
<radialGradient id="toxicLight" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(46, 204, 113);stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:rgb(46, 204, 113);stop-opacity:0.1"/>
</radialGradient>
</defs>
<!-- 1. Cave Ceiling/Walls -->
<rect x="0" y="0" width="800" height="500" fill="url(#caveSkyGradient)" />
<!-- 2. Cave Opening Silhouette (Background opening) -->
<path d="M0 300 C150 200, 650 200, 800 300 V500 H0 Z"
fill="rgb(60, 60, 60)" />
<!-- 3. Toxic Light Source/Glow (Center back) -->
<circle cx="400" cy="250" r="150" fill="url(#toxicLight)" />
<!-- 4. Cave Walls (Foreground dark silhouettes) -->
<path d="M0 500 V100 C100 50, 200 150, 300 100 L300 500 Z"
fill="rgb(30, 30, 30)" />
<path d="M800 500 V150 C700 80, 600 180, 500 130 L500 500 Z"
fill="rgb(30, 30, 30)" />
<!-- 5. Foreground Cave Floor (Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#caveFloorGradient)" />
<!-- 6. Toxic Pool/Seepage (Foreground detail on the platform) -->
<ellipse cx="400" cy="460" rx="100" ry="20" fill="rgb(46, 204, 113)" opacity="0.8" />
<!-- 7. Small Toxic Crystal/Rock Formations -->
<g transform="translate(150, 450)" fill="rgb(46, 204, 113)" opacity="0.9">
<polygon points="0,0 15,-30 30,0" />
</g>
<g transform="translate(650, 450)" fill="rgb(46, 204, 113)" opacity="0.9">
<polygon points="0,0 20,-40 40,0" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Muted Sky/Glow Gradient (Glimmer of unhealthy light) -->
<linearGradient id="mutedSkyGlowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 150, 120);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 180, 150);stop-opacity:1" />
</linearGradient>
<!-- Forest Floor Gradient (Mossy/Damp) -->
<linearGradient id="mossyFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100, 120, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Air -->
<rect x="0" y="0" width="800" height="500" fill="url(#mutedSkyGlowGradient)" />
<!-- 2. Dense Tree Line/Canopy (Dark silhouette surrounding the clearing) -->
<path d="M0 300 C150 200, 650 200, 800 300 V500 H0 Z"
fill="rgb(30, 50, 30)" />
<!-- 3. Small Opening/Glimpse of sky (Fainter light) -->
<ellipse cx="400" cy="150" rx="150" ry="80" fill="rgb(200, 255, 200)" opacity="0.1" />
<!-- 4. Foreground Ground (Mossy Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#mossyFloorGradient)" />
<!-- 5. Toxic Vines/Roots (Closer details) -->
<g fill="rgb(46, 204, 113)" opacity="0.7">
<!-- Vine left -->
<path d="M100 450 Q120 400, 140 450" stroke="rgb(46, 204, 113)" stroke-width="3" fill="none" />
<!-- Vine right -->
<path d="M700 450 Q680 400, 660 450" stroke="rgb(46, 204, 113)" stroke-width="3" fill="none" />
</g>
<!-- 6. Dead Logs/Wood (Obstacle/Detail) -->
<rect x="350" y="430" width="100" height="20" fill="rgb(100, 80, 60)" rx="5" ry="5" />
<!-- 7. Toxic Gas Cloud (Low-level movement across the floor) -->
<path d="M0 450 Q200 448, 400 450 T800 448" fill="rgb(46, 204, 113)" opacity="0.15">
<animateMotion dur="15s" repeatCount="indefinite" path="M0,0 C 100,5, 100,-5, 0,0" />
</path>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky/Canopy Gradient (Deepest, most ominous violet/black) -->
<linearGradient id="deepCorruptionSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(30, 0, 30);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(50, 20, 50);stop-opacity:1" />
</linearGradient>
<!-- Toxic Water/Sludge Gradient (Murky purple/green) -->
<linearGradient id="toxicSludgeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(60, 0, 60);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(30, 50, 30);stop-opacity:1" />
</linearGradient>
<!-- Central Rock Platform (Small island in the sludge) -->
<linearGradient id="sludgeIslandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 80, 60);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky/Canopy -->
<rect x="0" y="0" width="800" height="500" fill="url(#deepCorruptionSkyGradient)" />
<!-- 2. Distant Trees (Solid black, looming silhouette) -->
<path d="M0 350 C150 250, 650 250, 800 350 V500 H0 Z"
fill="rgb(0, 0, 0)" />
<!-- 3. Toxic Sludge/Water (Main foreground level) -->
<rect x="0" y="400" width="800" height="100" fill="url(#toxicSludgeGradient)" />
<!-- 4. Central Rock Platform (The only dry ground) -->
<rect x="150" y="430" width="500" height="20" fill="url(#sludgeIslandGradient)" />
<rect x="150" y="450" width="500" height="50" fill="url(#sludgeIslandGradient)" />
<!-- 5. Toxic Gas Rising (Green glow/fog over the sludge) -->
<g fill="rgb(46, 204, 113)" opacity="0.4">
<ellipse cx="100" cy="420" rx="50" ry="10" />
<ellipse cx="700" cy="410" rx="80" ry="15" />
<circle cx="400" cy="400" r="10" fill="white">
<animate attributeName="cy" values="400;350" dur="2s" repeatCount="indefinite" />
</circle>
</g>
<!-- 6. Dead Roots/Snags in the water -->
<rect x="50" y="380" width="8" height="70" fill="rgb(80, 50, 30)" />
<rect x="750" y="360" width="10" height="90" fill="rgb(80, 50, 30)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_9 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Purification Chamber Sky Gradient (Bright Green/White Light) -->
<linearGradient id="purificationSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 255, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 255, 240);stop-opacity:1" />
</linearGradient>
<!-- Altar Stone Gradient (Clean, white/light gray stone) -->
<linearGradient id="altarStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 200, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 220, 220);stop-opacity:1" />
</linearGradient>
<!-- Hexagon Energy Glow (Bright Toxic Green) -->
<radialGradient id="hexagonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(46, 204, 113);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(46, 204, 113);stop-opacity:0.3"/>
</radialGradient>
</defs>
<!-- 1. Sky/Energy Field -->
<rect x="0" y="0" width="800" height="500" fill="url(#purificationSkyGradient)" />
<!-- 2. Distant Forest Edge (Cleaned silhouette) -->
<path d="M0 350 C150 250, 650 250, 800 350 V500 H0 Z"
fill="rgb(50, 80, 50)" />
<!-- 3. Central Altar Platform (The base for the Fairy) -->
<rect x="0" y="450" width="800" height="50" fill="url(#altarStoneGradient)" />
<!-- 4. Energy Center (Hexagon Glow) -->
<circle cx="400" cy="300" r="100" fill="url(#hexagonGlow)" opacity="0.6"/>
<circle cx="400" cy="300" r="50" fill="rgb(46, 204, 113)" opacity="0.8"/>
<!-- 5. Hexagon Symbol (The core of the magic, background detail) -->
<g transform="translate(400, 300) rotate(90)" stroke="rgb(255, 255, 255)" stroke-width="2" fill="none" opacity="0.8">
<path d="M -50 -86.6 L 50 -86.6 L 100 0 L 50 86.6 L -50 86.6 L -100 0 Z" />
</g>
<!-- 6. Side Stone Pillars (Guarding the altar) -->
<rect x="100" y="300" width="40" height="150" fill="rgb(180, 180, 180)" stroke="rgb(150, 150, 150)" stroke-width="2" />
<rect x="660" y="300" width="40" height="150" fill="rgb(180, 180, 180)" stroke="rgb(150, 150, 150)" stroke-width="2" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8, MAP_SVG_9];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #7f8c8d; /* Gray/Industrial/Toxic Color */
color: white;
border: 2px solid #2ecc71; /* Toxic Green Border */
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = isFinalNPC ? NPC_WIDTH_DEFAULT : NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al mapContainer (la escena de juego) ***
mapContainer.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Toxic Forest dialogue box (dark gray/toxic green theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(44, 62, 80, 0.9); /* Dark Forest/Asphalt */
border: 5px solid #2ecc71; /* Toxic Green Border */
box-shadow: 0 0 20px rgba(46, 204, 113, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Hexagon Fairy is only NPC in phase 8)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:#2ecc71; font-size:36px; text-align:center; font-family: Arial, sans-serif; text-shadow: 0 0 10px #2ecc71;">
LEVEL COMPLETE!<br>The Toxic Forest could not stop you.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #7f8c8d;
color: white;
border: 4px solid #2ecc71;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(46, 204, 113, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_9)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel6 = function() {
// ==UserScript==
// @name Drawaria Game Level 6 - Sky Mountains
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 6: Sky Mountains. Ascend the icy peaks and face the cold wind of the high altitude.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Sky Mountains";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-stories-mountain.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
const FLOATING_Y = 300; // Y position for floating NPCs (nicely_stars)
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<defs>
<style>
/* Estilo principal: relleno gris claro, contorno negro grueso */
.chick-element {
fill: #CCCCCC;
stroke: black;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Estilo para contornos internos (sin relleno) */
.chick-inner-outline {
fill: none;
stroke: black;
stroke-width: 3;
stroke-linejoin: miter;
}
/* Detalles del ojo */
.eye {
fill: white;
stroke: black;
stroke-width: 2;
}
.pupil {
fill: black;
}
</style>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 5 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, -14, 0)" style="filter: url("#inner-shadow-filter-0");">
<g transform="matrix(1, 0, 0, 1, 14.861, 9.303002)">
<path d="M 128.465 203.173 L 143.465 203.173 L 143.465 229.642 C 152.196 229.705 159.228 232.772 159.228 236.547 C 159.228 240.361 152.048 243.453 143.191 243.453 C 134.334 243.453 127.154 240.361 127.154 236.547 C 127.154 235.322 127.895 234.171 129.195 233.173 L 128.465 233.173 L 128.465 203.173 Z" class="chick-element" style="stroke-width: 3; stroke: rgb(107, 53, 0); fill: rgb(255, 158, 100); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-12" begin="0s" dur="1s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</path>
<path d="M 115.237 237.433 C 115.237 241.247 108.057 244.339 99.2 244.339 C 90.343 244.339 83.163 241.247 83.163 237.433 C 83.163 236.208 83.904 235.057 85.204 234.059 L 84.474 234.059 L 84.474 204.059 L 99.474 204.059 L 99.474 230.528 C 108.205 230.591 115.237 233.658 115.237 237.433 Z" style="stroke-width: 3px; stroke: rgb(107, 53, 0); fill: rgb(255, 158, 100); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;11" begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
</g>
<g transform="matrix(1, 0, 0, 1, 10, 10)">
<path d="M 16.737 163.113 L 18.516 151.738 L 8.459 150.149 L 15.775 142.136 L 8.459 134.123 L 18.516 132.534 L 16.737 121.159 L 21.61 124.119 C 32.857 93.739 73.335 71.246 121.547 71.246 C 178.456 71.246 224.59 102.586 224.59 141.246 C 224.59 179.906 178.456 211.246 121.547 211.246 C 74.101 211.246 34.144 189.462 22.168 159.814 L 16.737 163.113 Z" style="stroke-width: 3px; stroke: rgb(107, 53, 0); fill: rgb(249, 255, 233);"/>
<path d="M 204.59 141.246 C 204.59 171.622 173.25 196.246 134.59 196.246 C 103.756 196.246 77.578 180.582 68.243 158.829 L 77.818 152.446 L 64.657 143.672 C 64.613 142.874 64.59 142.071 64.59 141.265 L 77.818 132.446 L 67.48 125.554 C 76.077 102.824 102.869 86.246 134.59 86.246 C 173.25 86.246 204.59 110.87 204.59 141.246 Z" class="chick-inner-outline" style="stroke: rgb(107, 53, 0); fill: rgb(249, 255, 233);"/>
<g>
<ellipse style="stroke-width: 3; stroke: rgb(107, 53, 0); fill: rgb(255, 142, 44);" cx="256.808" cy="93.038" rx="11.749" ry="4.2"/>
<ellipse style="stroke-width: 3; stroke: rgb(107, 53, 0); fill: rgb(255, 142, 44);" cx="256.965" cy="100.807" rx="11.749" ry="4.2"/>
<circle class="chick-element" cx="214.59" cy="91.246" r="35" style="stroke: rgb(107, 53, 0); fill: rgb(249, 255, 233);"/>
<g transform="matrix(1, 0, 0, 1, 14.590079, -8.753989)" style="">
<line class="chick-inner-outline" x1="214.682" y1="85.936" x2="229.682" y2="90.936" style="stroke-width: 4; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000012, 0.000001)"/>
<circle class="eye" cx="220" cy="95" r="5"/>
<circle class="pupil" cx="221" cy="95" r="1.5"/>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;30 0" begin="0s" dur="9.35s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="173" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="165" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="filter: url("#inner-shadow-filter-0");">
<path d="M 358.729 154.31 C 358.729 157.039 359.811 162.424 359.811 162.424 L 359.811 345.277 L 102.3 345.277 L 102.3 162.424 L 102.646 162.424 C 102.417 159.745 102.301 157.039 102.301 154.31 C 102.301 93.658 159.704 44.49 230.515 44.49 C 301.326 44.49 358.729 93.658 358.729 154.31 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(138, 186, 216);"/>
<path d="M 181.052 281.831 C 187.69 196.274 361.224 214.542 356.003 281.831 L 356.003 344.773 L 181.052 344.773 L 181.052 281.831 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(255, 255, 255);"/>
<g style="transform-origin: 174.252px 356.638px;">
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(216, 186, 138);" cx="174.252" cy="356.638" rx="42.738" ry="18.935"/>
<path d="M 211.96 349.03 C 211.96 350.159 206.749 351.075 200.321 351.075 C 193.893 351.075 188.682 350.159 188.682 349.03 C 188.682 347.901 193.893 346.985 200.321 346.985 C 206.749 346.985 211.96 347.901 211.96 349.03 Z M 214.477 361.456 C 214.477 362.585 209.266 363.501 202.838 363.501 C 196.41 363.501 191.199 362.585 191.199 361.456 C 191.199 360.327 196.41 359.411 202.838 359.411 C 209.266 359.411 214.477 360.327 214.477 361.456 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;11" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="transform-origin: 296.516px 352.852px;">
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(216, 186, 138);" cx="296.516" cy="352.852" rx="39.492" ry="17.312"/>
<path d="M 331.494 344.862 C 331.494 345.991 326.283 346.907 319.855 346.907 C 313.427 346.907 308.216 345.991 308.216 344.862 C 308.216 343.733 313.427 342.817 319.855 342.817 C 326.283 342.817 331.494 343.733 331.494 344.862 Z M 334.011 357.288 C 334.011 358.417 328.8 359.333 322.372 359.333 C 315.944 359.333 310.733 358.417 310.733 357.288 C 310.733 356.159 315.944 355.243 322.372 355.243 C 328.8 355.243 334.011 356.159 334.011 357.288 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-12" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(216, 196, 138);" cx="270.11" cy="184.544" rx="26.711" ry="10.487"/>
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(216, 196, 138);" cx="270.786" cy="166.566" rx="26.711" ry="10.487"/>
<path d="M 260.56 101.575 C 260.56 107.367 249.512 101.13 234.76 101.13 C 220.008 101.13 207.138 107.367 207.138 101.575 C 207.138 95.783 219.097 91.088 233.849 91.088 C 248.601 91.088 260.56 95.783 260.56 101.575 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177);"/>
<path d="M 333.617 104.306 C 333.617 110.098 322.569 103.861 307.817 103.861 C 293.065 103.861 280.195 110.098 280.195 104.306 C 280.195 98.514 292.154 93.819 306.906 93.819 C 321.658 93.819 333.617 98.514 333.617 104.306 Z" style="stroke-width: 3px; stroke: rgb(69, 125, 177);"/>
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177);" cx="234.305" cy="133.005" rx="17.765" ry="20.498"/>
<ellipse style="stroke-width: 3px; stroke: rgb(69, 125, 177);" cx="305.366" cy="135.738" rx="16.854" ry="20.498"/>
<path style="stroke-width: 3px; stroke: rgb(69, 125, 177); fill: rgb(138, 186, 216);" d="M 157.789 243.455 L 155.056 295.384 C 155.803 320.048 193.888 318.719 193.319 299.939 L 192.408 238.9"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;39 0" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<svg height="173" inkscape:export-xdpi="96" inkscape:export-ydpi="96" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 165 173" width="165" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Animation</title>
<defs/>
<sodipodi:namedview bordercolor="#666666" borderlayer="true" inkscape:document-units="px" inkscape:pagecheckerboard="true" pagecolor="#ffffff"/>
<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/MovingImage"/>
<dc:title>Animation</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="Composition_5c2d845b6dda42d2a53183137af201f4" inkscape:groupmode="layer" inkscape:label="Animation">
<g transform="translate(-7.57849 6.88953)">
<g transform="rotate(0.0961538)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Layer_d12d6a96496342f18955574e7b0934f0" inkscape:groupmode="layer" inkscape:label="Layer" opacity="1">
<g fill="#acfff8" fill-opacity="1" id="Stroke_f1fd28c6513a4580838988184d7aeed8" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="119.863" ry="32.24599838256836" style="stroke:none;" width="116.027" x="27.402" y="16.769"/>
<rect height="119.863" ry="32.24599838256836" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" width="116.027" x="27.402" y="16.769"/>
</g>
<g transform="translate(1.79513 -4.55011)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#acfff8" fill-opacity="1" id="Stroke_61ff8ddc0190488c9e4cbde37550b088" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3">
<ellipse cx="35.307" cy="141.257" rx="16.56" ry="16.56" style="stroke:none;"/>
<ellipse cx="35.307" cy="141.257" rx="16.56" ry="16.56" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="4.200000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.436508; 0.674603" path="M 0,0 C 0,0 -13.8276,-28.9129 -13.8276,-28.9129 -13.8276,-28.9129 2.05992,-4.13718 2.05992,-4.13718" repeatCount="indefinite"/>
</g>
<g transform="translate(1.79513 -4.55011)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#acfff8" fill-opacity="1" id="Stroke_446af423fe81402c85bc9f0432a6d5d8" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3">
<ellipse cx="116.538" cy="143.277" rx="16.56" ry="16.56" style="stroke:none;"/>
<ellipse cx="116.538" cy="143.277" rx="16.56" ry="16.56" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="4.200000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.436508; 0.674603" path="M 0,0 C 0,0 -13.8276,-28.9129 -13.8276,-28.9129 -13.8276,-28.9129 2.05992,-4.13718 2.05992,-4.13718" repeatCount="indefinite"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_0da75727ff454cd3b269b182a696c678" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="56.07" cy="64.173" rx="12.617" ry="12.617" style="stroke:none;"/>
<ellipse cx="56.07" cy="64.173" rx="12.617" ry="12.617" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_f4d434e4ddef4dfb933f3832d48017d5" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 113.237,21.699 C 115.879,21.409 124.956,22.162 128.865,23.715 131.936,24.936 134.195,27.176 135.67,29.008 136.853,30.477 137.314,31.684 137.686,33.545 138.15,35.861 138.457,39.807 137.686,42.115 137.014,44.13 135.665,45.924 133.906,46.904 131.982,47.977 128.46,48.472 126.344,47.912 124.409,47.401 122.656,45.568 121.555,44.132 120.569,42.845 120.984,40.747 119.79,39.847 118.413,38.808 115.15,39.666 113.237,38.838 111.387,38.038 109.429,36.817 108.448,35.058 107.376,33.134 106.88,29.612 107.44,27.496 107.951,25.561 110.115,23.648 111.221,22.707 111.963,22.075 112.023,21.832 113.237,21.699 113.237,21.699 113.237,21.699 113.237,21.699 Z" sodipodi:nodetypes="cccccccccccccc" style="stroke:none;"/>
<path d="M 113.237,21.699 C 115.879,21.409 124.956,22.162 128.865,23.715 131.936,24.936 134.195,27.176 135.67,29.008 136.853,30.477 137.314,31.684 137.686,33.545 138.15,35.861 138.457,39.807 137.686,42.115 137.014,44.13 135.665,45.924 133.906,46.904 131.982,47.977 128.46,48.472 126.344,47.912 124.409,47.401 122.656,45.568 121.555,44.132 120.569,42.845 120.984,40.747 119.79,39.847 118.413,38.808 115.15,39.666 113.237,38.838 111.387,38.038 109.429,36.817 108.448,35.058 107.376,33.134 106.88,29.612 107.44,27.496 107.951,25.561 110.115,23.648 111.221,22.707 111.963,22.075 112.023,21.832 113.237,21.699 113.237,21.699 113.237,21.699 113.237,21.699 Z" sodipodi:nodetypes="cccccccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_fbd82cf254b84a9daa80503bf8ef3618" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="111.09" cy="48.207" rx="6.049" ry="6.049" style="stroke:none;"/>
<ellipse cx="111.09" cy="48.207" rx="6.049" ry="6.049" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_88321adfb99842ae82e5d39617c3846b" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="88.685" cy="65.215" rx="12.617" ry="12.617" style="stroke:none;"/>
<ellipse cx="88.685" cy="65.215" rx="12.617" ry="12.617" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
<g fill="#ffffff" fill-opacity="1" id="Stroke_af16b55d9cdb402b8526b303f0453888" inkscape:label="Group" opacity="1" stroke="#4db5ff" stroke-opacity="1" stroke-width="3" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 63.146,90.062 C 63.146,90.062 84.544,90.062 84.544,90.062 84.544,90.062 84.544,97.451 84.544,97.451 84.716,98.096 84.806,98.768 84.806,99.457 84.806,104.502 79.957,108.591 73.976,108.591 67.995,108.591 63.146,104.502 63.146,99.457 63.146,99.014 63.183,98.578 63.256,98.152 63.256,98.152 63.146,98.152 63.146,98.152 63.146,98.152 63.146,90.062 63.146,90.062 63.146,90.062 63.146,90.062 63.146,90.062 Z" sodipodi:nodetypes="ccccccccc" style="stroke:none;"/>
<path d="M 63.146,90.062 C 63.146,90.062 84.544,90.062 84.544,90.062 84.544,90.062 84.544,97.451 84.544,97.451 84.716,98.096 84.806,98.768 84.806,99.457 84.806,104.502 79.957,108.591 73.976,108.591 67.995,108.591 63.146,104.502 63.146,99.457 63.146,99.014 63.183,98.578 63.256,98.152 63.256,98.152 63.146,98.152 63.146,98.152 63.146,98.152 63.146,90.062 63.146,90.062 63.146,90.062 63.146,90.062 63.146,90.062 Z" sodipodi:nodetypes="ccccccccc" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="4.200000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.428571; 0.666667" path="M 0,0 C 0,0 22.7355,2.06686 22.7355,2.06686 22.7355,2.06686 -2.06686,1.42109e-14 -2.06686,1.42109e-14" repeatCount="indefinite"/>
</g>
</g>
</svg>
`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="165" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="165" xmlns:bx="https://boxy-svg.com">
<g style="transform-origin: 152.011px 228.855px;">
<path d="M 152.011 116.762 L 194.817 177.526 L 261.95 202.393 L 221.273 264.815 L 219.957 340.948 L 152.011 318.763 L 84.065 340.948 L 82.749 264.815 L 42.072 202.393 L 109.205 177.526 Z" bx:shape="star 152.011 240.689 115.597 123.927 0.63 5 1@f2bc02f2" style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 241, 61);"/>
<path style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);" d="M 128.058 252.884 L 186.383 252.884 C 187.226 299.735 128.963 303.208 128.058 252.884 Z"/>
<ellipse style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);" cx="124.414" cy="213.832" rx="15.101" ry="15.1"/>
<ellipse style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);" cx="183.254" cy="216.435" rx="15.101" ry="15.1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;20 40" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;3" begin="0s" dur="1.89s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
<g style="transform-origin: 358.212px 134.986px;">
<path d="M 358.212 33.449 L 403.213 89.754 L 459.23 134.986 L 403.213 180.218 L 358.212 236.523 L 313.211 180.218 L 257.194 134.986 L 313.211 89.754 Z" bx:shape="star 358.212 134.986 101.018 101.537 0.63 4 1@0f61cc12" style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 241, 61);"/>
<path style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);" d="M 337.643 148.003 L 383.007 148.003 C 383.663 184.083 338.347 186.758 337.643 148.003 Z"/>
<path d="M 346.554 117.928 C 346.554 124.351 341.296 114.657 334.809 114.657 C 328.322 114.657 323.064 124.351 323.064 117.928 C 323.064 111.505 328.322 106.299 334.809 106.299 C 341.296 106.299 346.554 111.505 346.554 117.928 Z" style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);"/>
<path d="M 392.319 119.932 C 392.319 126.355 387.061 116.661 380.574 116.661 C 374.087 116.661 368.829 126.355 368.829 119.932 C 368.829 113.509 374.087 108.303 380.574 108.303 C 387.061 108.303 392.319 113.509 392.319 119.932 Z" style="stroke-width: 3px; stroke: rgb(121, 82, 33); fill: rgb(255, 255, 255);"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-40 -20" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-3" begin="0s" dur="1.63s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CUBE_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" width="700" xmlns="http://www.w3.org/2000/svg">
<title/>
<g id="Composition_445b829fca0b4132b3d29b0a3ad1fc42">
<g id="Layer_624346cd05d646f7a3f94e5fac2a1f6e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_62250bd6ab7a4da19142a88de5b1f690" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_289871e692ec49548e910714011b29d5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_605d6403a529440bad1ca6279a6fbffb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0faf33997edd4f84a47e7fc145bdca2a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0d1afe9409b44391bc4da60c4c40410a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_f3b30ec9f300423eb47305caf9da22b9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_578939f9ef5948a99969d70000425c72" opacity="1">
<g id="Group_3546f761a4bc4a4fa3f2648a6ec0dab9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4931839c20154578afe4254fa9a3f272" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_57e8a96570064a13b5821bf70e0482cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d263dd0743449e1bbed711b422bece5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_60f642c4c27c4987866e82f8de63a28d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b7876e756884ac28a05d4830f8e2767" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd0ceb27508e4ef7b40ed67c059ec48a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d0f537ddf8c2492592085fc466e5c589" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0910e13e62a3425ca744f9366b75b1ff" opacity="1" transform="matrix(-0.177927, 0.984044, -0.984044, -0.177927, 232.909, 58.6668)">
<g id="Group_70b6aa5054fa418bb18a8a530275ab8a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6aad8811b5a34308b46c779638ca5883" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ada09a9e3957429ea8ad2b2e4863a825" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_afe42cc27815441b9b1b80fb9c05599f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_407c2d8105634716b3cf87b6c1d19586" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_92c3038cb3ce4b7d87316d9bbc969208" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_37337e3c3da24a1c9cebe7ba9dfb7877" opacity="1" transform="matrix(0.177927, 0.984044, -0.984044, 0.177927, 444.508, -116.305)">
<g id="Group_ca67085633b44936bad142cac42e003f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cce31530b92141fcafa11267756a6346" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ad2c1fe7d3c446fd8d11f2ed1e2887dc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_9f262dc44b3e491b82062f66875c4d3f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4bec6e9f6bfc45dfbcb9d017286e41c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2a4fd8529faa4ee8bbcfe77c5f352e23" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(416.363 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(-1.04032 1)">
<g transform="translate(0 0)">
<g id="Group_af8442450fe743d0881a014d1638901a" opacity="1">
<g id="Group_5314e37a1b974609bbf566cf63070c37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6e702614cd9042ba81102e880afef873" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e0a2a5017a714cb9b03fea6ce45f81dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_12768e2885b945e0918396d7b18ca741" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c2ada61ce854298b97d297e069de3df" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b8b9b2d35195470bb581bac9ced98a15" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_565e2f10da9948ed8f59e069558ab6b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_072c2b9ab3b74bb0b0cf52af0644fc16" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_eadcc05ee44f4a9ea6d3dbd958fd8a18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe4af599a66a4a49a0281a0f413b480d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d5b8a87626d046c891143992f8dbeb35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7bf696f18809465a934fe9d1eda181ba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f353b22e446b483ebce3366134bca565" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_efaf09ce5ac64c13b78f1960bd9ee744" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_0aeb68a87203407e9d20d3c488ae7464" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
<g id="Group_34668add9f7d408f8551b29402fd266e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd3b65c846714f1d9791a4f6c0bb0424" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_93132806e00e4c7198417ffc4cb6212b" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.856 -0.816 C 1.856 -0.816 1.631 16.315 1.631 16.315 C 1.631 16.315 1.937 -10.299 1.937 -10.299 C 1.937 -10.299 1.897 -6.9 1.897 -6.9 C 1.897 -6.9 1.651 5.975 1.651 5.975" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -5.24651)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_d67fd13048d54b26a92523e6fe67bb13" opacity="1">
<g id="Group_21f50d7af90f499c9dc2b7bc415d97bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_74e397143f07412cbce0eebd64898cde" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a3762da37fe6420f991b60b055ca6dfe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3f990a1c9e7438294c6bc3daff3c536" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3333000d975344ceac3d127aea89d5b6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c488e718a0c4663931da30fb2691cee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c754bc8df1954ac4a916915b9cc4b7d6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_29b60323f74b47a387fd64cb8590ebcd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a48dab89b7334706a2c54982808c8197" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7f63df9daa78450cb4ac1f6b6774ce7d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3530e59116a74432806fb1ba123a3285" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_27d16373aea74ab1b8f2809567766dc3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_94103e30fa964c94bc4a13e720e2a802" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_abb249dbca604c519c8004252594ad84" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_525022d7e07f41e2a1141072136b57ed" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_a0f94389490e42eca766562e07da8970" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3023467dd9734fba8fd5873fe124f4c1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fd5a78335da84dfd855583a22a71f17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_1120be8b5a8d4514aab460416f20c7e2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
<g id="Group_6623dd2ea3b94f15b55a98f52c7a49e0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9ae687bd935a4795aebfe24827c12131" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_a7f4031c54bf428d87ad39b9c43447ea" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_58f02105999346ffa661722acce66b32" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9271c5f202714724b85b4c7b54a80324" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1e37efe1f748432496121f11c575dfc8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f6ef2aa16b114ecab82bd726f6138676" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
<g id="Group_2a742b4c68b843d99c5ba6e5a3c9120d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779268157858473cadd4d6dad7b87a2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2fab7e398ab54dabbf7f731d97e6dc87" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_c152098ce4ea4170bb3d0561a3aa30a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd47e2b04ce5435a8e472817cb2cf756" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_22c50ae32992475c8e98eea626334e24" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_2d0478506d91449187b26e68f60f2960" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
<g id="Group_4dc75f562f0f44afb654dc039c587cba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b1f10a474051419692ff940fee23dd2c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_cf5303a5bb574f50afa3825adad9cafa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
</g>
<g id="Group_01dc3c3d42744ca4ba0d85637dbe8376" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3c61d0bbc86f4c64af10fe69a878df02" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a7c005ccc54d4d84a4fbdbfb4caa5803" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_082a86ce7eb844519e2202dc875e7613" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
<g id="Group_a35aaf40939746b3aa59203b775f279a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6fcc44c99614402699246237c321e4a1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6942bc714e494dd69af43173bdb0a952" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.161111; 0.355556; 0.666667" path="M 0,-5.24651 C 0,-5.24651 0,4.19721 0,4.19721 0,4.19721 0,-2.0986 0,-2.0986 0,-2.0986 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_fea3ae62132741188596da54dce89ef2" opacity="1">
<g id="Group_ae46728d8ede4f0891f79e5ae1d9fe60" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_895fdefe1d8d4898baed53e0e0effc14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_946f9b61e52749e1955b1e98946ab893" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f9905f6dfa72444f96e86e9ed95f4f63" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_df22397efc3349b68397472c6af5f7f2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94e16cb3c3604988be33b3f048a4edb3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3cebc3bf87c46bd9b23f509465c9671" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_848f66f0333b4f80adb1dcf2184da5c3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_16e607232e40425285f33a660febf23d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b0c789323dd4d868a6ca258481c3692" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5c975c22c5be43908dcd08317c9c6a5b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_52b9e3ff5c0744ffaba9129802aeac78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9eb061b8adb146cf82edbccf56d19095" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_802dcfe8e719448794dd64699c5ddb52" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_fc624ae2c6a14ca0af745e2024110e37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_bbb436121f1c4edb9d0cbdbb57ab5975" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_96937179d9c64f739c28e922ad427e0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_fc7db8580e784591a9d17af18d39e642" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.326 -0.551 C 1.326 -0.551 1.631 16.315 1.631 16.315 C 1.631 16.315 1.406 -10.564 1.406 -10.564 C 1.406 -10.564 1.101 -6.37 1.101 -6.37 C 1.101 -6.37 1.386 5.71 1.386 5.71" repeatCount="indefinite"/>
</g>
<g id="Group_31139b44f4a54ed0b254b48ed355b107" opacity="1" transform="matrix(1, 0, 0, 0.950946, 0.990442, 10.583)">
<g id="Group_085f214f43ca45db9264a50cca82398e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_179563955cc0441aa13c0b61e4d4cbdb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c411480c5474c8cbf7f9e2d3412d17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_428d0a047dd04673a092df58788dd44e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f8fea14bc733433084925f346e69ec31" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4310ff126a45430dbf89f8459cc6103e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4c834c0193aa4a108b7d31be1504e976" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c221ce162d44051955593b04e951f35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ed41a6e8573c457080d161ed4f4751bd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d9b96792d4bf4db9b8d041636aaa9a0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3019e453bde64354b02b5acbd9811f74" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_912aeef445ee4df2900c1962603c2e6a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
<g id="Group_b70cd452dde64b03a53a475ec1d40823" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_07d616537785432fb5953807910067e1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9198d846b8044b20988871940c043045" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="Group_07bf950fb5b744c08da1b602acce90f0" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 103.462, 0.097262)">
<g id="Group_773ac49d227d47aca3363b5015667a78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_679d8fb26cd04228ae1dccf28c8d6003" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_bd3d28adbd8547dcac86548851a4f98d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
<g id="Group_acc78697a70d4a40a8b549253bfbb45a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b11e86ddd07d437f90a0c5ec7abbfda5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ed4ad324e01742af9949383f6b8445f4" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_257af3be2db5451a98050fb0d6feaf39" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 161.795, -0.014585)">
<g id="Group_25ecec9c5ecc445c823a47a76d6224c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94ba71a35feb4cda85d74446fd7116cd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_af6483015cc9479790b8c22131f2ea72" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_9bb47d7862b54caa93b83c41537c9635" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d921cba171054c84a3f1808b8e459fe7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2ea52e9465d54c08a559910df8d5abfa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_b16201a6547b45e99fd4c4d8b5ee9e56" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 135.47, 0.061733)">
<g id="Group_bf83fc0b3341442984cd6cce2dcecd19" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3d6e18a5df041aca29a49d721224e64" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_56798b44691145f8a59f513c48ac8413" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_409836a08cb5459aa9d0d0f643fd5c12" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c92d7d97dcb44812875c1b846fa1aca4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_da13152381f2499eb2f8f2e7bdbf0686" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_cc623433226b40ddaef69231521dab81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7fd751bd13754d8f8cdb763d0491408a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_437c13ca93864f71b80723f533099a8d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#fee8d2" fill-opacity="1" id="Fill_937828450c04405cb5b24002364ceada" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f3fe49167d6f40448822a68c2beee7a8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b4db3b4ce592487facef052e458c8c0b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_afee68700f384c14957243cd80d4c469" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_55e95fb7ee614601b8d9d6bc77ecc4aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3f93614f02324a56858a83b53f20ec18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3b8018d9e2545cc9c493fdfe7c6fe81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_66757b8e97d242d9bb17f261a9dc6a9c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_96d7c61b65ea4e9e82eebc58d985b225" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a5c951f1776548a5b3ee96d6bf98f312" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_75459dbecf6e461da0939c2b91942f35" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_1cc2d6febaa64442ad9f57f6d2316ae8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d932349903a04ba2a57176818cb9c5cb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e8ade258977946b3a941a0279fe49ff2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_fcd55e49f8f543b485fe53795012c916" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f29853f1642e466b8786f5df0921b7c6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0d04e2332d414ec98d3789f06b274a2e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c8b1b874176d440ebe70a0b4b29ddb2f" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_d712d75c75a546cc8cf8db4ff449423e" opacity="1" transform="matrix(-1, 0, 0, -1, 474.685, 531.463)">
<g id="Group_1c294b6e5c184912a4e38108286a79a9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2cb5d67cf44b471f96f1ed2cd1e15bdf" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_206e73005765431584268d3c903abd1d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_904216b925194138a71af571dd411cdc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6195333e77e3445a98657d886705e38d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_909d034755aa457996c394978b26a020" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_c47d0f843ffe43aaa964d3ba067fd74d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe713c29db1b4f4ab5bdc86700a247be" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_051bcc3c9a8145b7b064c28b06c3ad13" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_e352b4de5a2e4474b2252585fda10ef6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_656efa98c79c4305b3ead9d5d74df8a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7594c2aad9954880b586ce0eef9433fe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_4cb973583a15459299f98566bc1358fe" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_aca6ca588cc64afdbfbd62a7268426e3" opacity="1">
<g id="Group_ed2913ea75cb48e4b41ee3e0ee7b6c85" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3651a3aa951404a8fb7390f69f687db" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_59a87ad457764c49bd6a00f98764c656" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779954feb6df4fb68620f8c4ff42cc3e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_11f057441cd74c6dbabf36a6ec3c12bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c4aebfc2b014b59a0add11371e215aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e1f194d04ca4432d9664c27ab790b148" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f4a36f8fbc174fee9445738549544d46" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ce197513a8cc494c93869e1d6299062b" opacity="1" transform="matrix(0.392565, 0.919724, -0.919724, 0.392565, 31.2082, 39.0615)">
<g id="Group_e8350cd87e87432c991a81dca1493f5e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_66a432833f7444dca55cb2a8bebeb323" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_93cb0c00a0df448f9c457787b18ccd2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_da683ce285dc443f8fe408e0f484d72b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3409296c0f7452d97449901f46c19f1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_1fd6de85a5c14f219ea3f54d0822ae32" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_241374713016444fa46e7d5b10ad6e9c" opacity="1" transform="matrix(-0.392565, 0.919724, -0.919724, -0.392565, 449.288, -81.2542)">
<g id="Group_7b4884754f61449b94eae24ac6025192" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e7f3fb64be42403387eb602d3da14e34" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_f16dd6039b214f8983ce4ca7911dd9c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_6600cd45f7cd4857956cfde6336b2322" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f99e58d12d27428c97965400365bc683" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ae14d61fcfda4f7e962eb7abc1ca43a8" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
<g transform="translate(-5.68434e-14 1.71918)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_c1da6565ad7a44b7937e52ece78e73a7" opacity="1">
<g id="Group_e05da2ce9e2141d58669cc9dff991497" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_bba8dfa44cc04d8190f0d00939be16ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c531c675587458394e5098b286b4a51" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_caf5454d5ae04e8780788490d52a1e95" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1b27ef5587dd4de197f5f350d043422c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_781b8505367c42a3857f234570eace38" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e94c594dd0354662a84f034fae37aac7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_c97b2af9c9c34f0ebe788810caf4e9ab" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_5f715f838b3944b7a3da530f38b50a25" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1508c9dbd6fa46aaa56d30844c6c486d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_57410754afa04a8397fcb572b6132546" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_69526d6ad2644b0582714865bd660c90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fee0271290da441f8626210b71d6b96a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c731d322ff364143b71a5a798af8bdf7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_f43b0980669249a6966233b37cf3c8cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_29c1c68302a045ab99b09b0aa9b09afc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e6b7536fa3cb48a5b6df62a0c28f2417" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9257e3ac72b04b10b821c75be0d620ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_6d802c88b86f43a4bccbe3ed0399f3b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_645f362498b84c9db32ee5332fba1042" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e919f5e73d4b410cb87d940368242035" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_4e1603b8462841f1a51c6eb3b893da90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_ae12bc5f84564d398f5479e2ee744666" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_671c90609d414f64bc4a9dda4bdc5fee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_51fe2c4a88e14a3983a44bbf31489932" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_988df225ba86472b95857e71cc009bb0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6eb2bf7373eb491295094e25c051f329" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c94c0958917c4d249b046d44ff9d76ab" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_036c24f9d8214f3cbce54c0f2b5511a7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7ed8b3a36a9245718e21c6c601dd18f7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f6128c42fef74189a7adb193b8531b0d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_38c19d56776d42d39e8da1ee55141f47" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_0b299d727c594def8ff19d475edfa090" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_413d579327514781a85f892f0fd029ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_48d91b1135ef4bcc9e3e2e87f76d31b6" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_94b3b2d1ecc54bcb83bd2af4287e7335" opacity="1" transform="matrix(0.997575, -0.069598, 0.069598, 0.997575, -10.3555, 15.7956)">
<g id="Group_3e6cf58a22df41aeaecab2dffde923dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dbe4deef0d064ae886720333f6afbd29" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_d2238b0204ca4073a7abe17a764a293d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
<g id="Group_5881f2eb8f67401da829c500b2b0bef2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_419ec196b3cd4d43922ded9c4369feca" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_24722db5bec74d26b6f083f6271deeb5" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
</g>
<g id="Group_be0995bd67f34e859e3987fb53d1f410" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cbd635acea7e4bbbbfc25f27e4b617c9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3bb3174017554936a6e30ea1d6a28eba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f93e3b5ff8514aa4aec3a042071413a2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_ad973a3955f147cd867bdfbaf4c01185" opacity="1" transform="matrix(-0.997575, -0.0695981, -0.0695981, 0.997575, 420.995, 16.5246)">
<g id="Group_828b524ee6c943179d1481ec334f9b88" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_acc6c697956f4ad3bfb057ec0b803172" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_09d00d4c2fa8494b897f5622bf04a927" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
<g id="Group_2cba7d963f4f42fa80de15bd729b1ef4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dcfb0bad6ae440b7bfaff639c94c46ee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f8d0d55c1cf74b408b1ef2d6283329cc" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
</g>
<g id="Group_721b904a63554f419a7989a670d34dc0" opacity="1" transform="matrix(0.980581, 0.196116, -0.196116, 0.980581, 36.1716, -29.591)">
<g id="Group_dcd06f12613d4191aa93ac82285bb333" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d9fd996419d4ca38abefdb622e76fd2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_8c4db01f8a294b86a25ca48da3a82df5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
<g id="Group_d31ed3f59dcc4eb0b5b032b76af01b5f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1efad0479d884cd7b83b05b14626b607" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f570a013b87b4b99a5733740cc6bec08" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
</g>
<g id="Group_0c0eec48be45438095795d32aacdabdd" opacity="1" transform="matrix(-0.980581, 0.196116, 0.196116, 0.980581, 375.074, -29.3765)">
<g id="Group_85cbc12fbb49406698b0039ac613a554" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4dd71c4562c44ee7833fccd1c2fd5727" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_e86e56d7af1b40518583d0250ca9541d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
<g id="Group_25e6d3f3edff4f1fbd57b1371bb58f5a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_aa3250f8fef44c74b2e3e7974148a2c7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_12f1561499c8471f9ecbc4e3a571abc7" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
</g>
<g id="Group_f2c24a9da86e4b62ad7b6c34b7c60b14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5e9aa5ad63a04e5a977827a22736c105" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b5cccfe98d4f421cbc4386f369f9700a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_117872a1e50742c0971fe225f32e6a20" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_1c847fc6e7774d5c8750f96064b3a547" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_04d00887dda24f73946be18da7ca9025" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6e4183e42f644a41b75e2cd222a9e2ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.411111; 0.700000" path="M -5.68434e-14,1.71918 C -5.68434e-14,1.71918 0.671553,5.7485 0.671553,5.7485 0.671553,5.7485 0.671553,1.04763 0.671553,1.04763 0.671553,1.04763 0.671553,3.73384 0.671553,3.73384" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`; // Final NPC for this level
// NPC DATA (Phase index corresponds to MAP_SVG index)
const NPC_DATA = {
0: [
{ char_id: 'CHAR_1_Chicken', name: 'Crazy Chicken', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Crazy Chicken: Bawk! Too high! I can't fly anymore!", "Crazy Chicken: The wind will try to push you back, climb carefully!"] },
{ char_id: 'CHAR_2_Penguin', name: 'Good Penguin', svg_content: CHAR_SVG_2, initial_x: 550, dialogue: ["Good Penguin: Welcome to the high altitude. It's slippery here.", "Good Penguin: Just a few more peaks to the summit!"] }
],
1: [
{ char_id: 'CHAR_3_IceCube', name: 'Ice Cube', svg_content: CHAR_SVG_3, initial_x: 200, dialogue: ["Ice Cube: Don't you dare melt me!", "Ice Cube: The stars up here are incredible..."] },
{ char_id: 'CHAR_4_Stars', name: 'Nicely Stars', svg_content: CHAR_SVG_4, initial_x: 550, initial_y: FLOATING_Y, is_floating: true, dialogue: ["Nicely Stars: I drift on the high winds. Don't worry about falling!", "Nicely Stars: The air is thin, but your spirit is boundless."] }
],
2: [
{ char_id: 'CHAR_1_Chicken_R2', name: 'Crazy Chicken', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Crazy Chicken: Still Bawk-ing! We're halfway there!", "Crazy Chicken: Look out for the snow..."] },
{ char_id: 'CHAR_2_Penguin_R2', name: 'Good Penguin', svg_content: CHAR_SVG_2, initial_x: 550, dialogue: ["Good Penguin: Don't give up! Slide if you must, but keep moving.", "Good Penguin: The summit is calling!"] }
],
3: [
{ char_id: 'CHAR_3_IceCube_R2', name: 'Ice Cube', svg_content: CHAR_SVG_3, initial_x: 200, dialogue: ["Ice Cube: Coldest peak yet! Don't look down.", "Ice Cube: Only the faintest light can reach us here."] },
{ char_id: 'CHAR_4_Stars_R2', name: 'Nicely Stars', svg_content: CHAR_SVG_4, initial_x: 550, initial_y: FLOATING_Y, is_floating: true, dialogue: ["Nicely Stars: The next mountain is the final one before the fairy.", "Nicely Stars: Feel the wind lift you up!"] }
],
4: [
{ char_id: 'CHAR_1_Chicken_R3', name: 'Crazy Chicken', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Crazy Chicken: Squawk! I see the end, but it's steep!", "Crazy Chicken: Only the very motivated make it this high."] },
{ char_id: 'CHAR_4_Stars_R3', name: 'Nicely Stars', svg_content: CHAR_SVG_4, initial_x: 550, initial_y: FLOATING_Y, is_floating: true, dialogue: ["Nicely Stars: The air is almost electric here. You're close.", "Nicely Stars: The final fairy awaits your arrival!"] }
],
5: [
{ char_id: 'CHAR_2_Penguin_R3', name: 'Good Penguin', svg_content: CHAR_SVG_2, initial_x: 200, dialogue: ["Good Penguin: Final climb! Remember all you've learned.", "Good Penguin: Go on, brave traveler!"] },
{ char_id: 'CHAR_3_IceCube_R3', name: 'Ice Cube', svg_content: CHAR_SVG_3, initial_x: 550, dialogue: ["Ice Cube: Go! Before I turn into slush from all this climbing.", "Ice Cube: Good luck!"] }
],
6: { char_id: 'CUBE_FAIRY', name: 'Cube Fairy', svg_content: CUBE_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Cube Fairy: Welcome back, my friend. You've reached the highest point of Drawaria.", "Cube Fairy: You have mastered all the lands: Cold, Springs, Desert, Beach, and Forest.", "Cube Fairy: Sky Mountains conquered. Your adventure is complete!"] },
};
const MAX_TRANSITIONS = 6; // 6 transitions (Map 1 -> 2 -> ... -> 7). Total 7 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cold Sky Gradient (Muted Blue/Gray) -->
<linearGradient id="coldSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 150, 170);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 170, 190);stop-opacity:1" />
</linearGradient>
<!-- Mountain Stone/Shadow Gradient -->
<linearGradient id="mountainShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(70, 90, 110);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(90, 110, 130);stop-opacity:1" />
</linearGradient>
<!-- Foreground Earth/Stone (Dark Base) -->
<linearGradient id="foregroundStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(40, 45, 55);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(60, 65, 75);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Cold Blue/Gray) -->
<rect x="0" y="0" width="800" height="500" fill="url(#coldSkyGradient)" />
<!-- 2. Distant Clouds/Mist (High Altitude) -->
<g fill="white" opacity="0.5">
<ellipse cx="250" cy="180" rx="50" ry="10" />
<ellipse cx="550" cy="150" rx="60" ry="15" />
</g>
<!-- 3. Central Snow Peak (Layer 1 - Furthest back) -->
<polygon points="100,450 400,100 700,450" fill="url(#mountainShadowGradient)" />
<!-- Snow Cap Detail -->
<path d="M400 100 L300 280 L400 200 L500 280 L400 100 Z" fill="white" />
<!-- 4. Midground Peaks (Layer 2 - Left and Right) -->
<polygon points="0,450 300,250 500,450" fill="rgb(80, 100, 120)" />
<polygon points="500,450 800,200 800,450 Z" fill="rgb(80, 100, 120)" />
<!-- 5. Foreground Cliffs/Ground (Dark, defining the platform at Y=450) -->
<path d="M0 450 L350 350 L800 450 V500 H0 Z"
fill="url(#foregroundStoneGradient)" />
<!-- 6. Foreground Texture/Dirt (Brownish detail on the dark base) -->
<path d="M0 450 Q200 440, 400 450 T800 440" fill="rgb(100, 80, 60)" opacity="0.5" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Dramatic Sky Gradient (Darker on top, brighter near mountains) -->
<linearGradient id="dramaticSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 100, 120);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 180, 200);stop-opacity:1" />
</linearGradient>
<!-- Heavy Snow/Ice Gradient -->
<linearGradient id="heavySnowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
<!-- Mountain Stone/Shadow Gradient (Consistent for distance) -->
<linearGradient id="mountainShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(70, 90, 110);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(90, 110, 130);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Dramatic) -->
<rect x="0" y="0" width="800" height="500" fill="url(#dramaticSkyGradient)" />
<!-- 2. Central Peak (Higher up, more snow) -->
<polygon points="150,450 400,50 650,450" fill="url(#mountainShadowGradient)" />
<!-- Heavy Snow Cap -->
<path d="M400 50 L300 200 L400 150 L500 200 L400 50 Z" fill="white" />
<!-- Icy Face Detail -->
<path d="M400 150 L450 250 L400 300 Z" fill="rgb(180, 220, 255)" opacity="0.8" />
<!-- 3. Midground Snowy Peaks -->
<polygon points="0,450 200,300 400,450" fill="rgb(180, 200, 220)" />
<polygon points="600,450 800,350 800,450 Z" fill="rgb(180, 200, 220)" />
<!-- 4. Foreground Platform (Heavy Snow) -->
<path d="M0 450 Q200 430, 400 450 T800 430 V500 H0 Z"
fill="url(#heavySnowGradient)" />
<!-- 5. Snow Drifts/Texture (Foreground detail) -->
<path d="M50 450 C80 440, 120 440, 150 450" fill="rgb(200, 220, 255)" opacity="0.6"/>
<path d="M700 450 C720 435, 760 435, 790 450" fill="rgb(200, 220, 255)" opacity="0.6"/>
<!-- 6. Wind Effect Lines (Movement hint) -->
<path d="M0 100 L50 110" stroke="white" stroke-width="2" opacity="0.5" />
<path d="M800 200 L750 205" stroke="white" stroke-width="2" opacity="0.5" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Icy Sky Gradient (Bright but cold blue) -->
<linearGradient id="icySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(160, 200, 230);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 230, 255);stop-opacity:1" />
</linearGradient>
<!-- Glacier Ice/Rock Gradient -->
<linearGradient id="glacierGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(140, 180, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 220, 240);stop-opacity:1" />
</linearGradient>
<!-- Foreground Ice Platform Gradient (Reflective White/Blue) -->
<linearGradient id="icePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Icy Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#icySkyGradient)" />
<!-- 2. Distant Peaks (Layer 1) -->
<polygon points="0,450 400,200 800,450" fill="rgb(100, 140, 170)" />
<!-- Snow/Ice Cap -->
<path d="M400 200 L300 350 L500 350 Z" fill="rgb(220, 240, 255)" />
<!-- 3. Central Glacier/Ice Mass (Layer 2) -->
<polygon points="100,450 450,250 700,450" fill="url(#glacierGradient)" />
<!-- Crevasses/Cracks (Dark Blue Lines) -->
<g stroke="rgb(0, 100, 150)" stroke-width="3" opacity="0.8" fill="none">
<path d="M400 300 L450 350 L420 380" />
<path d="M550 350 L580 400" />
</g>
<!-- 4. Foreground Platform (Flat Ice) -->
<rect x="0" y="450" width="800" height="50" fill="url(#icePlatformGradient)" />
<!-- 5. Ice Shard Detail (Foreground reflection) -->
<g fill="rgb(200, 230, 255)" opacity="0.7">
<polygon points="50,450 60,430 70,450 Z" />
<polygon points="700,450 710,420 720,450 Z" />
</g>
<!-- 6. Wind and Snow Particles (Simple white dots) -->
<g fill="white" opacity="0.6">
<circle cx="100" cy="400" r="1.5" />
<circle cx="700" cy="350" r="1" />
<circle cx="400" cy="420" r="2" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Foggy Sky Gradient (Muted, near white) -->
<linearGradient id="foggySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
<!-- Mountain Shadow/Muted Rock Gradient -->
<linearGradient id="mutedRockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 140, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 170, 190);stop-opacity:1" />
</linearGradient>
<!-- Foreground Slope Platform (Gray/Brown Stone) -->
<linearGradient id="slopePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 130);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Foggy/Misty) -->
<rect x="0" y="0" width="800" height="500" fill="url(#foggySkyGradient)" />
<!-- 2. Dense Fog/Clouds Layer (Low visibility mid-ground) -->
<rect x="0" y="200" width="800" height="150" fill="white" opacity="0.4" />
<!-- 3. Distant, Obscured Peaks (Layer 1 - Muted color) -->
<polygon points="50,450 400,250 750,450" fill="url(#mutedRockGradient)" opacity="0.6" />
<!-- Snow detail on peaks -->
<path d="M400 250 L350 350 L450 350 Z" fill="white" opacity="0.5" />
<!-- 4. Foreground Slope Platform (Slanted rock platform) -->
<path d="M0 450 L800 420 L800 500 L0 500 Z"
fill="url(#slopePlatformGradient)" />
<!-- 5. Small Cracks/Obstacles (Ground detail) -->
<g stroke="rgb(50, 50, 50)" stroke-width="2" opacity="0.7" fill="none">
<path d="M200 445 L250 435" />
<path d="M600 430 L630 425" />
</g>
<!-- 6. Wind Gust effect (Horizontal lines) -->
<g stroke="white" stroke-width="1" opacity="0.7">
<path d="M100 100 L150 100" />
<path d="M700 150 L650 150" />
</g>
<!-- NOTE: The level progression logic expects a flat Y=450 for the avatar's ground collision.
The visual slope here is only for aesthetic. The avatar still stops at Y=450. -->
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Deep Night Sky Gradient (Dark Blue/Black) -->
<linearGradient id="deepNightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(20, 20, 40);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(50, 50, 80);stop-opacity:1" />
</linearGradient>
<!-- Shadowed Snow Gradient -->
<linearGradient id="shadowedSnowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 140, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 170, 190);stop-opacity:1" />
</linearGradient>
<!-- Foreground Night Rock Gradient -->
<linearGradient id="nightRockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(60, 60, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 80, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Deep Night) -->
<rect x="0" y="0" width="800" height="500" fill="url(#deepNightSkyGradient)" />
<!-- 2. Stars (Scattered white and blue dots) -->
<g fill="white" opacity="0.8">
<circle cx="100" cy="50" r="2.5" fill="rgb(255, 255, 200)" />
<circle cx="700" cy="80" r="1.5" />
<circle cx="400" cy="20" r="3" fill="rgb(200, 200, 255)" />
<circle cx="550" cy="150" r="1" />
<circle cx="250" cy="180" r="2" />
</g>
<!-- 3. Full Mountain Silhouette (Faintly visible) -->
<polygon points="0,450 400,100 800,450" fill="rgb(40, 40, 60)" />
<!-- Snow Cap (Shadowed) -->
<path d="M400 100 L300 280 L400 200 L500 280 L400 100 Z" fill="url(#shadowedSnowGradient)" />
<!-- 4. Foreground Platform (Night Rock/Stone) -->
<rect x="0" y="450" width="800" height="50" fill="url(#nightRockGradient)" />
<!-- 5. Moonlight Reflection (Faint glow on the ground) -->
<path d="M0 450 Q200 448, 400 450 T800 448"
fill="none"
stroke="rgb(200, 200, 255)"
stroke-width="1"
opacity="0.3" />
<!-- 6. Small Snow Patches (Ground detail) -->
<g fill="rgb(150, 170, 190)" opacity="0.6">
<ellipse cx="150" cy="445" rx="20" ry="5" />
<ellipse cx="650" cy="440" rx="30" ry="8" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Icy Sky Gradient (Consistent cold blue) -->
<linearGradient id="icySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(160, 200, 230);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 230, 255);stop-opacity:1" />
</linearGradient>
<!-- Deep Abyss/Valley Shadow Gradient -->
<linearGradient id="abyssShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(60, 80, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(30, 40, 50);stop-opacity:1" />
</linearGradient>
<!-- Foreground Cornice Ice/Rock Gradient (The precarious platform) -->
<linearGradient id="cornicePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#icySkyGradient)" />
<!-- 2. Distant Peaks (Layer 1) -->
<polygon points="0,450 400,200 800,450" fill="rgb(100, 140, 170)" />
<!-- Snow Cap -->
<path d="M400 200 L300 350 L500 350 Z" fill="rgb(220, 240, 255)" />
<!-- 3. Abyss/Valley Shadow (Below the current platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#abyssShadowGradient)" />
<!-- 4. Foreground Cornice Platform (The thin platform at Y=450) -->
<rect x="0" y="440" width="800" height="10" fill="url(#cornicePlatformGradient)" />
<rect x="0" y="450" width="800" height="5" fill="rgb(200, 200, 200)" />
<!-- 5. Dramatic Drop-off Effect (Shadow extending downwards from the platform) -->
<path d="M0 450 L100 500 L0 500 Z" fill="rgb(30, 40, 50)" />
<path d="M800 450 L700 500 L800 500 Z" fill="rgb(30, 40, 50)" />
<!-- 6. Wind effect (Strong horizontal streaks) -->
<g stroke="white" stroke-width="2" opacity="0.6">
<path d="M0 150 L200 155" />
<path d="M800 200 L650 200" />
<path d="M0 250 L150 255" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Ethereal Summit Sky Gradient (Very light blue/white) -->
<linearGradient id="summitSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 230, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 250, 255);stop-opacity:1" />
</linearGradient>
<!-- Summit Altar Stone Gradient -->
<linearGradient id="altarSummitGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 180, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 220);stop-opacity:1" />
</linearGradient>
<!-- Cube Fairy's Blue Glow -->
<radialGradient id="cubeGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(169, 204, 227);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(169, 204, 227);stop-opacity:0.3"/>
</radialGradient>
</defs>
<!-- 1. Sky (Bright Summit) -->
<rect x="0" y="0" width="800" height="500" fill="url(#summitSkyGradient)" />
<!-- 2. Distant Peaks (Very faint, below the clouds) -->
<polygon points="0,450 400,250 800,450" fill="rgb(150, 170, 190)" opacity="0.4" />
<!-- 3. Foreground Summit Platform (Small, flat area) -->
<rect x="0" y="450" width="800" height="50" fill="url(#altarSummitGradient)" />
<!-- 4. Central Stone Altar/Pedestal (Where the Fairy sits) -->
<g transform="translate(400, 350)">
<rect x="-100" y="0" width="200" height="100" fill="rgb(160, 160, 180)" stroke="rgb(120, 120, 140)" stroke-width="3" />
<rect x="-80" y="100" width="160" height="50" fill="rgb(140, 140, 160)" />
<!-- Light/Glow effect around the center -->
<circle cx="0" cy="50" r="100" fill="url(#cubeGlow)" opacity="0.4" />
</g>
<!-- 5. Ethereal Wind/Energy Lines (Vertical movement) -->
<g stroke="white" stroke-width="1" opacity="0.7">
<path d="M200 0 L200 500" />
<path d="M600 0 L600 500" />
<animate attributeName="opacity" values="0.7;0.3;0.7" dur="5s" repeatCount="indefinite" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #5d6d7e; /* Mountain/Stone color */
color: white;
border: 2px solid #a9cce3; /* Cold/Sky Blue Border */
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(169, 204, 227, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = isFinalNPC ? NPC_WIDTH_DEFAULT : NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al mapContainer (la escena de juego) ***
mapContainer.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Sky Mountains dialogue box (white/blue/icy theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(169, 204, 227, 0.9); /* Icy Blue */
border: 5px solid #fff; /* Snow White Border */
box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Cube Fairy is only NPC in phase 6)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:36px; text-align:center; font-family: Arial, sans-serif; text-shadow: 0 0 10px #a9cce7;">
LEVEL COMPLETE!<br>The Sky Mountains are conquered.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #5d6d7e;
color: white;
border: 4px solid #a9cce3;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(169, 204, 227, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
const WIND_FORCE = 0.1; // Gentle constant wind force to the left
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
// Apply constant gravity and wind
avatarVY += GRAVITY;
// Avatar is constantly pushed slightly left by wind
avatarVX -= WIND_FORCE;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.8, MAX_SPEED); // Increased acceleration to fight wind
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_7)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel7 = function() {
// ==UserScript==
// @name Drawaria Game Level 7 - Cold Passages
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 7: Cold Passages. Traverse the freezing icy caverns, meeting unique, multiplying characters.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Cold Passages";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-cold.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100" xmlns:bx="https://boxy-svg.com">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="243.428" y1="128.946" x2="243.428" y2="488.232" id="gradient-0" gradientTransform="matrix(-0.999202, 0.039959, -0.011187, -0.279745, 488.10427, 368.307736)">
<stop offset="0" style="stop-color: rgb(84.706% 82.745% 58.039%)"/>
<stop offset="1" style="stop-color: rgb(48.849% 47.669% 24.914%)"/>
</linearGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="433.518" cy="435.826" r="32.791" id="gradient-3" gradientTransform="matrix(3.843631, 0.079564, -0.053167, 2.568434, -1209.593106, -718.056588)">
<stop offset="0" style="stop-color: rgb(84.706% 82.745% 58.039%)"/>
<stop offset="1" style="stop-color: rgb(48.849% 47.669% 24.914%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="68.393" cy="435.09" r="32.791" id="gradient-4" gradientTransform="matrix(6.077309, -0.091903, 0.040046, 2.648098, -364.675869, -710.785376)">
<stop offset="0" style="stop-color: rgb(84.706% 82.745% 58.039%)"/>
<stop offset="1" style="stop-color: rgb(48.849% 47.669% 24.914%)"/>
</radialGradient>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="filter: url("#inner-shadow-filter-0"); transform-origin: 248.664px 269.065px;" transform="matrix(1, 0, 0, 1, 0, -0.06)">
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-0");" cx="243.428" cy="308.589" rx="158.295" ry="179.643"/>
<path d="M -70.976 213.08 L 2.712 351.969 L -70.976 351.969 L -70.976 213.08 Z" bx:shape="triangle -70.976 213.08 73.688 138.889 0 0 1@3a6989c7" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(216, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.86785, 0.496827, 0.505002, -0.86317, 158.93172, -150.959687)"/>
<path d="M 127.712 51.86 C 148.936 31.601 396.058 174.454 374.054 195.458 L 109.718 192.759 L 127.712 51.86 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(216, 0, 0);"/>
<path d="M 140.852 245.418 C 127.753 245.975 116.585 237.563 114.66 226.208 C 104.353 224.503 96.357 216.322 95.925 206.156 C 95.424 194.389 105.243 184.413 117.864 183.854 C 121.216 175.117 129.366 168.773 139.139 168.358 C 147.896 167.985 155.758 172.465 160.235 179.46 C 164.394 173.863 170.875 170.135 178.289 169.82 C 185.371 169.519 191.867 172.39 196.461 177.2 C 201.145 171.078 208.579 166.969 217.096 166.606 C 226.923 166.189 235.734 170.863 240.758 178.19 C 244.892 172.256 251.571 168.267 259.252 167.941 C 267.449 167.592 274.863 171.496 279.449 177.734 C 283.975 173.511 290.069 170.8 296.865 170.511 C 306.575 170.098 315.281 174.733 320.228 181.99 C 324.368 176.123 331.008 172.186 338.637 171.862 C 350.708 171.349 361.079 180.056 363.224 191.858 C 364.232 191.687 365.263 191.577 366.314 191.532 C 378.957 190.994 389.611 200.108 390.112 211.888 C 390.613 223.669 380.771 233.654 368.128 234.191 C 366.463 234.262 364.832 234.165 363.255 233.917 C 359.742 242.311 350.92 248.473 340.35 248.923 C 331.665 249.292 323.829 245.718 318.973 239.958 C 314.534 244.314 308.256 247.161 301.2 247.461 C 291.945 247.854 283.653 243.77 278.905 237.334 C 274.457 241.783 268.11 244.698 260.965 245.002 C 252.28 245.371 244.444 241.797 239.588 236.037 C 235.149 240.393 228.871 243.239 221.814 243.539 C 213.51 243.892 205.981 240.64 201.092 235.318 C 196.845 241.91 189.066 246.495 180.003 246.881 C 171.317 247.25 163.481 243.676 158.625 237.916 C 154.186 242.272 147.909 245.118 140.852 245.418 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(255, 255, 255);"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(255, 255, 255);" cx="52.181" cy="179.03" rx="21.001" ry="21.37"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-4");" cx="68.393" cy="435.09" rx="32.791" ry="31.686">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;40 -30" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</ellipse>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-3");" cx="433.518" cy="435.826" rx="32.791" ry="31.686">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-40 -30" dur="5s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</ellipse>
<path d="M 156.817 318.662 Q 184.451 272.975 212.084 318.662 L 212.084 318.662 Q 239.717 364.348 184.45 364.348 L 184.45 364.348 Q 129.184 364.348 156.817 318.662 Z" bx:shape="triangle 129.184 272.975 110.533 91.373 0.5 0.5 1@add76a3b" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<path d="M 257.035 317.557 Q 284.669 271.87 312.302 317.557 L 312.302 317.557 Q 339.935 363.243 284.669 363.243 L 284.669 363.243 Q 229.402 363.243 257.035 317.557 Z" bx:shape="triangle 229.402 271.87 110.533 91.373 0.5 0.5 1@8cd4b924" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<path d="M 288.353 395.737 C 288.353 409.981 284.584 425.212 242.666 425.212 C 200.748 425.212 190.347 405.559 190.347 391.315 C 190.347 377.071 200.748 396.473 242.666 396.473 C 284.584 396.473 288.353 381.493 288.353 395.737 Z" style="stroke: rgb(0, 0, 0); stroke-width: 3px;"/>
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 3px;" d="M 87.183 281.52 C 98.726 273.227 111.748 264.808 124.54 259.294 C 131.616 256.244 138.609 251.309 143.474 248.688 C 146.754 246.92 157.665 242.023 157.665 239.237"/>
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 3px;" d="M 345.092 248.36 C 353.485 256.956 361.175 265.445 370.604 273.721 C 381.038 282.88 393.984 289.983 400.617 296.775"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -30" begin="0s" dur="5s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-4" begin="0.02s" dur="5s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="transform-origin: 209.672px 279.901px;">
<path style="stroke: rgb(171, 43, 185); stroke-width: 3px; fill: rgb(207, 126, 216); filter: url("#inner-shadow-filter-0"); transform-origin: 209.672px 321.34px;" d="M 177.795 240.51 C 167.979 243.781 156.445 239.392 145.867 241.507 C 132.204 244.24 118.327 251.688 111.943 264.455 C 110.962 266.417 106.398 274.875 108.95 277.426 C 115.931 284.407 132.244 287.953 142.873 284.41 C 149.497 282.202 162.399 279.56 165.822 286.406 C 168.049 290.86 164.254 304.079 162.828 308.356 C 160.48 315.4 162.638 324.084 160.833 331.304 C 156.692 347.869 153.691 384.027 165.822 396.158 C 182.157 412.492 197.692 376.289 203.736 367.223 C 205.318 364.851 214.975 355.514 217.705 358.243 C 220.066 360.605 222.675 362.196 224.689 366.225 C 228.431 373.708 229.855 408.541 244.644 401.146 C 265.135 390.901 270.475 351.813 264.599 328.311 C 262.976 321.818 259.295 303.999 262.604 297.381 C 265.375 291.838 275.012 295.906 279.566 294.388 C 290.805 290.641 304.698 290.019 310.496 278.424 C 315.555 268.305 290.221 258.904 285.23 256.408 C 278.92 253.253 250.767 252.491 246.703 248.427 C 243.983 245.707 193.212 241.121 177.086 241.121"/>
<ellipse style="stroke: rgb(171, 43, 185); stroke-width: 3px; fill: rgb(207, 126, 216); filter: url("#inner-shadow-filter-0");" cx="221.43" cy="207.101" rx="51.03" ry="49.468"/>
<path d="M 256.031 218.14 C 256.031 229.376 243.183 238.483 227.332 238.483 C 211.482 238.483 198.633 229.376 198.633 218.14 C 198.633 206.904 211.482 221.878 227.332 221.878 C 243.183 221.878 256.031 206.904 256.031 218.14 Z" style="stroke: rgb(171, 43, 185); stroke-width: 3px; fill: rgb(207, 126, 216); filter: url("#inner-shadow-filter-0");"/>
<ellipse style="stroke: rgb(171, 43, 185); stroke-width: 3px; filter: url("#inner-shadow-filter-0");" cx="211.412" cy="197.845" rx="10.265" ry="10.055"/>
<ellipse style="stroke: rgb(171, 43, 185); stroke-width: 3px; filter: url("#inner-shadow-filter-0");" cx="245.138" cy="196.168" rx="10.265" ry="10.055"/>
<path d="M 248.699 224.132 C 248.699 228.649 239.602 232.31 228.379 232.31 C 217.156 232.31 208.059 228.649 208.059 224.132 C 208.059 219.614 217.156 225.634 228.379 225.634 C 239.602 225.634 248.699 219.614 248.699 224.132 Z" style="stroke: rgb(171, 43, 185); stroke-width: 3px; filter: url("#inner-shadow-filter-0");"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;80 0" begin="0s" dur="9s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;3" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20.458 15.31 498.529 558.926" width="129px" height="117px" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="filter-1" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g style="filter: url("#inner-shadow-filter-0"); transform-origin: 271.069px 295.436px;" transform="matrix(0.965926, -0.258818, 0.25882, 0.965926, 0.000002, -0.000004)">
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="275.765" cy="172.969" rx="84.893" ry="80.737"/>
<path d="M 324.048 296.481 C 325.709 296.613 327.786 296.438 330.468 295.313 C 334.617 293.573 342.699 284.193 346.809 284.808 C 350.305 285.332 351.794 293.526 354.396 295.313 C 356.303 296.623 358.313 296.842 360.233 296.481 C 362.305 296.091 365.113 294.717 366.361 292.687 C 367.782 290.374 368.303 285.779 367.528 282.766 C 366.751 279.747 360 278.391 361.692 274.595 C 365.654 265.7 425.727 239.089 433.477 230.24 C 436.465 226.829 435.636 224.889 435.228 222.653 C 434.844 220.545 433.296 218.243 431.435 217.109 C 429.414 215.877 427.881 214.623 423.264 215.941 C 411.7 219.242 366.493 259.021 352.937 257.962 C 344.824 257.328 343.277 242.382 339.222 239.87 C 336.685 238.298 334.246 238.703 332.219 239.286 C 330.285 239.843 328.3 241.221 327.258 243.08 C 326.061 245.214 325.301 248.528 326.091 251.834 C 327.136 256.212 336.338 262.529 335.429 267.008 C 334.468 271.739 322.008 275.109 319.087 279.264 C 316.925 282.339 316.314 285.855 316.753 288.602 C 317.161 291.155 319.697 294.067 321.13 295.313 C 322.115 296.171 322.808 296.382 324.048 296.481 Z" style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122); transform-origin: 376.135px 256.008px;" transform="matrix(-1, 0, 0, -1, -0.000048, 0.000011)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="273.39" cy="304.761" rx="92.017" ry="83.112"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="279.326" cy="446.644" rx="112.202" ry="105.077"/>
<path d="M 113.917 201.137 C 115.578 201.005 117.655 201.18 120.337 202.305 C 124.486 204.045 132.568 213.425 136.678 212.81 C 140.174 212.286 141.663 204.092 144.265 202.305 C 146.172 200.995 148.182 200.776 150.102 201.137 C 152.174 201.527 154.982 202.901 156.23 204.931 C 157.651 207.244 158.172 211.839 157.397 214.852 C 156.62 217.871 149.869 219.227 151.561 223.023 C 155.523 231.918 215.596 258.529 223.346 267.378 C 226.334 270.789 225.505 272.729 225.097 274.965 C 224.713 277.073 223.165 279.375 221.304 280.509 C 219.283 281.741 217.75 282.995 213.133 281.677 C 201.569 278.376 156.362 238.597 142.806 239.656 C 134.693 240.29 133.146 255.236 129.091 257.748 C 126.554 259.32 124.115 258.915 122.088 258.332 C 120.154 257.775 118.169 256.397 117.127 254.538 C 115.93 252.404 115.17 249.09 115.96 245.784 C 117.005 241.406 126.207 235.089 125.298 230.61 C 124.337 225.879 111.877 222.509 108.956 218.354 C 106.794 215.279 106.183 211.763 106.622 209.016 C 107.03 206.463 109.566 203.551 110.999 202.305 C 111.984 201.447 112.677 201.236 113.917 201.137 Z" style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122);"/>
<path d="M 267.021 185.814 C 269.048 185.783 273.858 186.884 276.65 189.024 C 279.812 191.446 281.832 198.832 284.529 200.404 C 286.439 201.518 288.662 201.04 290.366 200.404 C 292.065 199.771 293.427 198.166 294.743 196.611 C 296.178 194.914 296.632 191.711 298.536 190.483 C 300.547 189.186 304.524 188.808 306.707 189.316 C 308.553 189.745 310.067 190.86 311.084 192.526 C 312.326 194.558 313.557 198.203 312.835 201.28 C 311.955 205.032 307.646 210.33 304.373 213.244 C 301.431 215.863 298.266 217.575 294.451 218.497 C 290.214 219.52 284.53 220.191 279.86 218.497 C 274.66 216.61 268.242 211.003 264.978 206.532 C 262.123 202.622 260.005 197.137 260.309 193.693 C 260.554 190.91 263.374 188.225 264.686 186.981 C 265.524 186.187 265.843 185.832 267.021 185.814 Z M 261.768 126.804 C 264.543 126.488 270.783 127.556 273.149 129.138 C 274.935 130.333 275.444 131.836 276.067 134.099 C 276.926 137.22 277.493 143.423 276.65 146.939 C 275.937 149.92 274.333 152.836 272.273 154.234 C 270.297 155.575 267.168 155.935 264.686 155.401 C 262.005 154.824 258.52 152.984 256.807 150.44 C 254.917 147.633 254.311 142.422 254.473 138.768 C 254.624 135.351 255.869 131.107 257.391 129.138 C 258.538 127.655 259.794 127.028 261.768 126.804 Z M 310.533 125.507 C 312.169 125.083 316.541 124.731 318.704 125.507 C 320.589 126.183 322.043 127.026 323.081 129.3 C 324.742 132.94 325.45 144.108 324.832 147.976 C 324.469 150.248 323.926 151.266 322.497 152.353 C 320.703 153.719 316.521 155.11 314.035 154.688 C 311.696 154.291 309.498 152.243 307.907 150.311 C 306.248 148.296 305.009 145.522 304.405 142.724 C 303.758 139.726 303.546 135.568 304.405 132.802 C 305.175 130.325 307.628 127.845 308.782 126.674 C 309.476 125.971 309.582 125.753 310.533 125.507 Z" style="stroke-width: 3px; stroke: rgb(122, 122, 122);"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122);" cx="320.692" cy="170.715" rx="33.396" ry="9.079"/>
<path d="M 175.893 120.977 L 196.771 105.851 L 167.977 61.462 C 158.666 37.309 184.779 33.463 190.946 46.564 L 218.971 89.768 L 239.443 74.936 L 252.927 93.548 L 189.377 139.589 L 175.893 120.977 Z" style="stroke-width: 3px; stroke: rgb(122, 122, 122);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;30" begin="0s" dur="2s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
<animate attributeName="display" values="inline;none" begin="0s" dur="4s" fill="freeze" calcMode="discrete" keyTimes="0; 0.5" repeatCount="indefinite"/>
</g>
<g style="filter: url("#filter-1"); transform-origin: 271.069px 295.436px;" transform="matrix(-0.965926, -0.258818, -0.25882, 0.965926, -1.347125, -0.663277)">
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="275.765" cy="172.969" rx="84.893" ry="80.737"/>
<path d="M 324.048 296.481 C 325.709 296.613 327.786 296.438 330.468 295.313 C 334.617 293.573 342.699 284.193 346.809 284.808 C 350.305 285.332 351.794 293.526 354.396 295.313 C 356.303 296.623 358.313 296.842 360.233 296.481 C 362.305 296.091 365.113 294.717 366.361 292.687 C 367.782 290.374 368.303 285.779 367.528 282.766 C 366.751 279.747 360 278.391 361.692 274.595 C 365.654 265.7 425.727 239.089 433.477 230.24 C 436.465 226.829 435.636 224.889 435.228 222.653 C 434.844 220.545 433.296 218.243 431.435 217.109 C 429.414 215.877 427.881 214.623 423.264 215.941 C 411.7 219.242 366.493 259.021 352.937 257.962 C 344.824 257.328 343.277 242.382 339.222 239.87 C 336.685 238.298 334.246 238.703 332.219 239.286 C 330.285 239.843 328.3 241.221 327.258 243.08 C 326.061 245.214 325.301 248.528 326.091 251.834 C 327.136 256.212 336.338 262.529 335.429 267.008 C 334.468 271.739 322.008 275.109 319.087 279.264 C 316.925 282.339 316.314 285.855 316.753 288.602 C 317.161 291.155 319.697 294.067 321.13 295.313 C 322.115 296.171 322.808 296.382 324.048 296.481 Z" style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122); transform-origin: 376.135px 256.008px;" transform="matrix(-1, 0, 0, -1, -0.000048, 0.000011)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="273.39" cy="304.761" rx="92.017" ry="83.112"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 255, 255); stroke: rgb(122, 122, 122);" cx="279.326" cy="446.644" rx="112.202" ry="105.077"/>
<path d="M 113.917 201.137 C 115.578 201.005 117.655 201.18 120.337 202.305 C 124.486 204.045 132.568 213.425 136.678 212.81 C 140.174 212.286 141.663 204.092 144.265 202.305 C 146.172 200.995 148.182 200.776 150.102 201.137 C 152.174 201.527 154.982 202.901 156.23 204.931 C 157.651 207.244 158.172 211.839 157.397 214.852 C 156.62 217.871 149.869 219.227 151.561 223.023 C 155.523 231.918 215.596 258.529 223.346 267.378 C 226.334 270.789 225.505 272.729 225.097 274.965 C 224.713 277.073 223.165 279.375 221.304 280.509 C 219.283 281.741 217.75 282.995 213.133 281.677 C 201.569 278.376 156.362 238.597 142.806 239.656 C 134.693 240.29 133.146 255.236 129.091 257.748 C 126.554 259.32 124.115 258.915 122.088 258.332 C 120.154 257.775 118.169 256.397 117.127 254.538 C 115.93 252.404 115.17 249.09 115.96 245.784 C 117.005 241.406 126.207 235.089 125.298 230.61 C 124.337 225.879 111.877 222.509 108.956 218.354 C 106.794 215.279 106.183 211.763 106.622 209.016 C 107.03 206.463 109.566 203.551 110.999 202.305 C 111.984 201.447 112.677 201.236 113.917 201.137 Z" style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122);"/>
<path d="M 267.021 185.814 C 269.048 185.783 273.858 186.884 276.65 189.024 C 279.812 191.446 281.832 198.832 284.529 200.404 C 286.439 201.518 288.662 201.04 290.366 200.404 C 292.065 199.771 293.427 198.166 294.743 196.611 C 296.178 194.914 296.632 191.711 298.536 190.483 C 300.547 189.186 304.524 188.808 306.707 189.316 C 308.553 189.745 310.067 190.86 311.084 192.526 C 312.326 194.558 313.557 198.203 312.835 201.28 C 311.955 205.032 307.646 210.33 304.373 213.244 C 301.431 215.863 298.266 217.575 294.451 218.497 C 290.214 219.52 284.53 220.191 279.86 218.497 C 274.66 216.61 268.242 211.003 264.978 206.532 C 262.123 202.622 260.005 197.137 260.309 193.693 C 260.554 190.91 263.374 188.225 264.686 186.981 C 265.524 186.187 265.843 185.832 267.021 185.814 Z M 261.768 126.804 C 264.543 126.488 270.783 127.556 273.149 129.138 C 274.935 130.333 275.444 131.836 276.067 134.099 C 276.926 137.22 277.493 143.423 276.65 146.939 C 275.937 149.92 274.333 152.836 272.273 154.234 C 270.297 155.575 267.168 155.935 264.686 155.401 C 262.005 154.824 258.52 152.984 256.807 150.44 C 254.917 147.633 254.311 142.422 254.473 138.768 C 254.624 135.351 255.869 131.107 257.391 129.138 C 258.538 127.655 259.794 127.028 261.768 126.804 Z M 310.533 125.507 C 312.169 125.083 316.541 124.731 318.704 125.507 C 320.589 126.183 322.043 127.026 323.081 129.3 C 324.742 132.94 325.45 144.108 324.832 147.976 C 324.469 150.248 323.926 151.266 322.497 152.353 C 320.703 153.719 316.521 155.11 314.035 154.688 C 311.696 154.291 309.498 152.243 307.907 150.311 C 306.248 148.296 305.009 145.522 304.405 142.724 C 303.758 139.726 303.546 135.568 304.405 132.802 C 305.175 130.325 307.628 127.845 308.782 126.674 C 309.476 125.971 309.582 125.753 310.533 125.507 Z" style="stroke-width: 3px; stroke: rgb(122, 122, 122);"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 183, 49); stroke: rgb(122, 122, 122);" cx="320.692" cy="170.715" rx="33.396" ry="9.079"/>
<path d="M 175.893 120.977 L 196.771 105.851 L 167.977 61.462 C 158.666 37.309 184.779 33.463 190.946 46.564 L 218.971 89.768 L 239.443 74.936 L 252.927 93.548 L 189.377 139.589 L 175.893 120.977 Z" style="stroke-width: 3px; stroke: rgb(122, 122, 122);"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;30" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animate attributeName="display" values="none;inline" begin="0s" dur="4s" fill="freeze" calcMode="discrete" keyTimes="0; 0.5" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(-1, 0, 0, 1, 447.887979, 2)" style="filter: url("#inner-shadow-filter-0");">
<g>
<path d="M 277.685 44.117 C 263.761 24.574 237.454 26.756 221.938 44.984 C 206.554 25.793 179.509 23.151 165.321 43.064 C 157.384 54.205 155.79 69.936 161.138 84.333 C 171.714 112.799 202.717 122.529 220.967 105.389 C 239.049 123.961 271.082 114.418 281.867 85.386 C 287.216 70.99 285.622 55.258 277.685 44.117 Z M 249.161 88.327 C 238.283 90.993 230.16 79.591 234.539 67.803 C 236.571 62.333 240.934 58.2 245.983 56.963 C 256.86 54.297 264.984 65.699 260.604 77.487 C 258.572 82.958 254.21 87.09 249.161 88.327 Z M 182.401 76.434 C 178.022 64.647 186.146 53.244 197.023 55.91 C 202.072 57.148 206.434 61.28 208.466 66.751 C 212.846 78.538 204.722 89.939 193.844 87.274 C 188.795 86.036 184.433 81.905 182.401 76.434 Z" style="stroke-width: 3px; stroke: rgb(98, 31, 31); fill: rgb(216, 207, 0);"/>
<path d="M 151.074 419.356 m -38.167 0 a 38.167 65.924 0 1 0 76.334 0 a 38.167 65.924 0 1 0 -76.334 0 Z M 151.074 419.356 m -14.503 0 a 14.503 25.051 0 0 1 29.006 0 a 14.503 25.051 0 0 1 -29.006 0 Z" bx:shape="ring 151.074 419.356 14.503 25.051 38.167 65.924 1@31c22b16" style="stroke-width: 3px; stroke: rgb(98, 31, 31); fill: rgb(216, 207, 0); transform-origin: 151.074px 419.356px;" transform="matrix(0.679393, 0.733774, -0.733781, 0.679386, 131.968569, 2.233899)">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -20" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<path d="M 151.074 419.356 m -40.851 0 a 40.851 68.41 0 1 0 81.702 0 a 40.851 68.41 0 1 0 -81.702 0 Z M 151.074 419.356 m -15.523 0 a 15.523 25.995 0 0 1 31.046 0 a 15.523 25.995 0 0 1 -31.046 0 Z" bx:shape="ring 151.074 419.356 15.523 25.995 40.851 68.41 1@0cc8bb04" style="stroke-width: 3px; stroke: rgb(98, 31, 31); fill: rgb(216, 207, 0); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.679393, 0.733774, -0.733781, 0.679386, -7.304904, -5.482489)">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 -10" begin="0.04s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<rect x="69.819" y="92.751" width="312.264" height="293.264" style="stroke-width: 3px; stroke: rgb(98, 31, 31); fill: rgb(216, 0, 0);"/>
<path d="M 188.384 92.377 H 263.22 V 204.269 H 381.708 V 274.937 H 263.22 V 386.829 H 188.384 V 274.937 H 69.896 V 204.269 H 188.384 Z" bx:shape="cross 69.896 92.377 311.812 294.452 70.668 74.836 0.5 1@044ab183" style="stroke-width: 3px; stroke: rgb(98, 31, 31); fill: rgb(255, 255, 255);"/>
<path d="M 150.617 -207.158 Q 178.056 -252.89 205.496 -207.158 L 205.496 -207.158 Q 232.935 -161.426 178.056 -161.426 L 178.056 -161.426 Q 123.177 -161.426 150.617 -207.158 Z" bx:shape="triangle 123.177 -252.89 109.758 91.464 0.5 0.5 1@137bed66" style="stroke-width: 3px; stroke: rgb(98, 31, 31);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 251.228 -205.788 Q 278.667 -251.52 306.107 -205.788 L 306.107 -205.788 Q 333.546 -160.056 278.667 -160.056 L 278.667 -160.056 Q 223.788 -160.056 251.228 -205.788 Z" bx:shape="triangle 223.788 -251.52 109.758 91.464 0.5 0.5 1@0347f103" style="stroke-width: 3px; stroke: rgb(98, 31, 31);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-40 0" begin="0s" dur="9.09s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_5 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<g transform="matrix(1, 0, 0, 1, -21, 0)">
<g style="filter: url("#inner-shadow-filter-0");">
<g>
<path style="stroke: rgb(101, 101, 101); stroke-width: 3px; fill: rgb(255, 255, 255);" d="M 436.522 359.497 C 429.135 363.19 153.47 369.901 90.237 359.363 C 64.222 355.027 18.175 355.735 25.558 318.817 C 28.57 303.757 36.924 290.491 51.679 285.573 C 66.389 280.67 86.332 285.352 95.61 276.074 C 105.509 266.175 111.542 237.282 115.795 220.271 C 119.226 206.546 132.517 194.966 143.103 187.026 C 155.661 177.608 177.679 174.038 191.783 181.09 C 194.759 182.578 213.824 189.919 216.717 187.026 C 238.856 164.887 237.847 121.609 267.771 99.166 C 294.266 79.295 350.585 84.62 373.443 107.477 C 399.297 133.331 396.581 178.051 403.126 210.773 C 404.599 218.138 405.386 239.154 410.25 244.017 C 421.731 255.499 440.688 266.522 451.806 283.198 C 456.25 289.865 456.946 301.384 458.93 309.319 C 464.496 331.585 454.471 350.73 437.558 359.186"/>
<path d="M 337.888 241.799 C 353.797 264.86 369.707 264.86 385.616 241.799 C 400.073 220.842 394.823 209.408 369.864 207.496 L 388.181 201.208 L 384.846 191.491 L 326.172 211.633 L 329.507 221.349 L 330.003 221.179 C 329.461 226.52 332.09 233.394 337.888 241.799 Z M 239.62 200.75 L 261.201 207.749 C 239.739 210.564 235.83 221.861 249.474 241.639 C 265.383 264.7 281.293 264.7 297.202 241.639 C 303.335 232.749 305.921 225.573 304.962 220.11 L 308.279 209.882 L 243.475 188.864 L 239.62 200.75 Z" style="stroke: rgb(101, 101, 101); stroke-width: 3px; fill: rgb(3, 3, 3); transform-box: fill-box; transform-origin: 50% 50%;">
<animateTransform type="skewY" additive="sum" attributeName="transform" values="0;-5" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<g>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 4px; stroke: rgb(101, 101, 101);" d="M 151.155 223.293 C 149.466 224.419 146.918 227.382 146.417 229.384 C 144.878 235.542 142.171 241.67 149.125 246.305 C 156.349 251.122 180.936 248.715 180.936 238.86"/>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke: rgb(101, 101, 101);" d="M 180.657 289.1 C 179.188 290.285 176.972 293.406 176.537 295.515 C 175.199 302 172.844 308.454 178.891 313.337 C 185.175 318.411 206.557 315.875 206.557 305.495"/>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke: rgb(101, 101, 101);" d="M 87.762 308.052 C 85.727 309.447 82.657 313.12 82.054 315.603 C 80.2 323.235 76.938 330.832 85.315 336.579 C 94.021 342.552 123.644 339.567 123.644 327.349"/>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke: rgb(101, 101, 101); transform-box: fill-box; transform-origin: 50% 50%;" d="M 304.05 303.314 C 302.266 304.649 299.576 308.164 299.047 310.541 C 297.423 317.844 294.564 325.115 301.905 330.615 C 309.535 336.331 335.495 333.474 335.495 321.781"/>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 6.56648; stroke: rgb(101, 101, 101); vector-effect: non-scaling-stroke; transform-origin: 315.29px 135.643px;" d="M 302.386 120.568 C 300.508 121.903 297.676 125.418 297.119 127.795 C 295.409 135.098 292.399 142.369 300.128 147.869 C 308.162 153.585 335.495 150.728 335.495 139.035"/>
<path style="fill: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke: rgb(101, 101, 101); transform-origin: 415.124px 296.392px;" d="M 403.301 276.917 C 401.579 278.642 398.985 283.183 398.474 286.254 C 396.908 295.687 394.149 305.08 401.232 312.186 C 408.592 319.57 433.636 315.879 433.636 300.773"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-6 6" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</g>
</g>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;43 0" begin="0s" dur="5.35s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const CIRCLE_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="700" xmlns:bx="https://boxy-svg.com">
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g>
<path d="M 357.456 474.35 L 169.798 474.35 L 179.994 427.741 C 173.843 418.353 170.367 407.684 170.367 396.37 C 170.367 358.775 208.751 328.298 256.101 328.298 C 303.451 328.298 341.835 358.775 341.835 396.37 C 341.835 406.348 339.131 415.824 334.274 424.363 L 357.456 474.35 Z" style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="249.111" cy="309.165" rx="61.449" ry="50.042"/>
<path style="stroke-width: 3px; fill: rgb(140, 216, 46); stroke: rgb(7, 54, 30);" d="M 208.923 273.185 C 204.353 262.775 286.958 260.31 293.765 275.814 C 295.137 303.531 210.725 309.586 208.923 273.185 Z"/>
<path d="M 244.194 386.264 C 244.194 392.202 239.27 397.014 233.195 397.014 C 227.121 397.014 222.196 392.202 222.196 386.264 C 222.196 385.411 222.298 384.579 222.49 383.783 L 152.338 314.933 L 164.934 296.769 L 236.175 366.687 C 236.991 366.353 237.887 366.168 238.826 366.168 C 242.658 366.168 245.766 369.238 245.766 373.024 C 245.766 375.839 244.045 378.261 241.585 379.314 C 243.212 381.189 244.194 383.614 244.194 386.264 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="163.009" cy="299.337" rx="26.861" ry="22.813"/>
<path d="M 340.7 310.81 C 340.7 304.745 336.086 299.829 330.394 299.829 C 324.702 299.829 320.087 304.745 320.087 310.81 C 320.087 311.683 320.183 312.532 320.364 313.346 L 254.628 383.684 L 266.431 402.241 L 333.186 330.811 C 333.951 331.152 334.79 331.34 335.67 331.34 C 339.261 331.34 342.173 328.205 342.173 324.338 C 342.173 321.461 340.561 318.987 338.255 317.911 C 339.78 315.996 340.7 313.517 340.7 310.81 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.00007, -0.000019)"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="329.693" cy="300.073" rx="24.285" ry="23.549"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 229.596 274.003 L 224.955 293.497 L 229.596 274.003 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 252.958 276.788 L 252.803 298.138 L 252.958 276.788 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" d="M 278.175 293.497 L 273.534 274.003 L 278.175 293.497 Z" transform="matrix(-1, 0, 0, -1, -0.000038, 0.000026)"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 175.614 451.586 L 346.777 452.031"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 195.518 473.502 L 196.186 451.689"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 239.403 473.946 L 238.838 451.895"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 323.659 473.947 L 322.991 452.134"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 277.891 473.605 L 278.559 451.792"/>
<animateMotion path="M 0 0 L -0.279 12.176 L 0.313 0" calcMode="linear" dur="4s" fill="freeze" keyTimes="0; 0.486169; 1" keyPoints="0; 0.486169; 1" repeatCount="indefinite"/>
</g>
<g>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="144.462" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="356.516" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);" cx="252.912" cy="203.076" rx="91.621" ry="73.223"/>
<path d="M 396.229 158.035 C 405.719 177.944 346.805 178.014 303.884 167.892 C 286.095 163.697 262.807 158.838 248.78 148.841 C 235.384 161.203 209.02 169.799 198.586 172.453 C 156.702 183.108 97.623 177.112 106.164 152.458 C 114.705 127.804 159.162 71.113 198.586 71.113 C 218.155 71.113 235.885 76.796 248.78 85.999 C 263.204 76.796 283.037 71.113 304.926 71.113 C 349.024 71.113 386.739 138.126 396.229 158.035 Z" style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);"/>
<path d="M 204.525 -212.249 Q 220.532 -237.27 236.538 -212.249 L 236.538 -212.249 Q 252.544 -187.228 220.532 -187.228 L 220.532 -187.228 Q 188.519 -187.228 204.525 -212.249 Z" bx:shape="triangle 188.519 -237.27 64.025 50.042 0.5 0.5 1@3efc720f" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 268.182 -212.619 Q 284.189 -237.64 300.195 -212.619 L 300.195 -212.619 Q 316.201 -187.598 284.189 -187.598 L 284.189 -187.598 Q 252.176 -187.598 268.182 -212.619 Z" bx:shape="triangle 252.176 -237.64 64.025 50.042 0.5 0.5 1@c050bfcc" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 269.47 240.574 C 269.47 245.248 274.733 251.245 252.176 251.245 C 229.619 251.245 231.203 244.512 231.203 239.838 C 231.203 235.164 230.355 241.678 252.912 241.678 C 275.469 241.678 269.47 235.9 269.47 240.574 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="213.419" cy="199.581" rx="8.095" ry="9.199"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="278.18" cy="200.685" rx="8.095" ry="9.199"/>
<path d="M 239.08 172.175 C 239.08 174.613 230.998 172.75 220.634 172.75 C 210.27 172.75 201.548 174.613 201.548 172.175 C 201.548 169.737 209.95 167.76 220.314 167.76 C 230.678 167.76 239.08 169.737 239.08 172.175 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<path d="M 304.209 172.911 C 304.209 175.349 296.127 173.486 285.763 173.486 C 275.399 173.486 266.677 175.349 266.677 172.911 C 266.677 170.473 275.079 168.496 285.443 168.496 C 295.807 168.496 304.209 170.473 304.209 172.911 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<animateMotion path="M 0 0 L -0.205 20.066 L -0.001 -0.497" calcMode="linear" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.488361; 1" keyPoints="0; 0.488361; 1" repeatCount="indefinite"/>
</g>
</svg>`; // Final NPC for this level
// NPC DATA (Phase index corresponds to MAP_SVG index)
// Multiplicación/Repetición de personajes para llenar 7 fases (0-6)
const NPC_DATA = {
0: [
{ char_id: 'CHAR_1_Cboy', name: 'Christmas Boy', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Christmas Boy: Brrr! It's freezing in these passages!", "Christmas Boy: The walls are slick with ice, be careful!"] },
{ char_id: 'CHAR_2_Cookie', name: 'Cookie Man', svg_content: CHAR_SVG_2, initial_x: 550, dialogue: ["Cookie Man: Don't eat the floor, it's not gingerbread!", "Cookie Man: The deeper you go, the colder the reception."] }
],
1: [
{ char_id: 'CHAR_3_Cooper', name: 'Cooper Man', svg_content: CHAR_SVG_3, initial_x: 350, dialogue: ["Cooper Man: Only the brave dare pass here. Or the foolish.", "Cooper Man: I've seen ice monsters lurking in the shadows..."] },
{ char_id: 'CHAR_4_Elderly', name: 'Elderly Gif', svg_content: CHAR_SVG_4, initial_x: 600, dialogue: ["Elderly Gif: Ho ho ho! This cold is good for the soul!", "Elderly Gif: Hurry, before the next ice storm hits!"] }
],
2: [
{ char_id: 'CHAR_5_Monster', name: 'Ice Monster', svg_content: CHAR_SVG_5, initial_x: 450, dialogue: ["Ice Monster: RRRR! I guard this passage! Why disturb my sleep?", "Ice Monster: The path ahead is slippery, prepare to slide!"] }
],
3: [
{ char_id: 'CHAR_1_Cboy_R2', name: 'Christmas Boy', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Christmas Boy: Still here! This level is huge!", "Christmas Boy: The light is faint now, almost there!"] },
{ char_id: 'CHAR_3_Cooper_R2', name: 'Cooper Man', svg_content: CHAR_SVG_3, initial_x: 550, dialogue: ["Cooper Man: The temperature is dropping again. Move fast!", "Cooper Man: The tunnels are endless, but the end is near."] }
],
4: [
{ char_id: 'CHAR_2_Cookie_R2', name: 'Cookie Man', svg_content: CHAR_SVG_2, initial_x: 300, dialogue: ["Cookie Man: I'm starting to get brittle from the cold!", "Cookie Man: The Circle Fairy is the key to escaping the freeze!"] },
{ char_id: 'CHAR_5_Monster_R2', name: 'Ice Monster', svg_content: CHAR_SVG_5, initial_x: 650, dialogue: ["Ice Monster: A second challenge! You are persistent!", "Ice Monster: I'll let you pass if you promise to warm up my passage."] }
],
5: [
{ char_id: 'CHAR_4_Elderly_R2', name: 'Elderly Gif', svg_content: CHAR_SVG_4, initial_x: 400, dialogue: ["Elderly Gif: The cold never bothered me anyway!", "Elderly Gif: You're close, I can feel the change in the air!"] }
],
6: [
{ char_id: 'CHAR_1_Cboy_R3', name: 'Christmas Boy', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Christmas Boy: Look! The final exit!", "Christmas Boy: Go meet the fairy, she's waiting!"] },
{ char_id: 'CHAR_5_Monster_R3', name: 'Ice Monster', svg_content: CHAR_SVG_5, initial_x: 550, dialogue: ["Ice Monster: I'm too frozen to fight. Go. Just go.", "Ice Monster: Be free!"] }
],
7: { char_id: 'CIRCLE_FAIRY', name: 'Circle Fairy', svg_content: CIRCLE_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Circle Fairy: You navigated the most treacherous cold of Drawaria.", "Circle Fairy: Your journey through the elemental levels is complete!", "Circle Fairy: Cold Passages finished. You are truly a master explorer!"] },
};
const MAX_TRANSITIONS = 7; // 7 transitions (Map 1 -> 2 -> ... -> 8). Total 8 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cold Sky Gradient (Teal/Blue-Green) -->
<linearGradient id="coldSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(140, 190, 190);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(160, 210, 210);stop-opacity:1" />
</linearGradient>
<!-- Snow Ground Gradient (Pure White/Light Blue) -->
<linearGradient id="snowGroundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Cold Teal) -->
<rect x="0" y="0" width="800" height="500" fill="url(#coldSkyGradient)" />
<!-- 2. Falling Snow Effect (Static white dots) -->
<g fill="white" opacity="0.8">
<circle cx="50" cy="50" r="2" />
<circle cx="150" cy="120" r="1.5" />
<circle cx="250" cy="50" r="1" />
<circle cx="350" cy="150" r="2.5" />
<circle cx="450" cy="80" r="1.5" />
<circle cx="550" cy="180" r="2" />
<circle cx="650" cy="100" r="1" />
<circle cx="750" cy="30" r="2.5" />
</g>
<!-- 3. Distant Snowy Hills/Trees (Muted background) -->
<path d="M0 350 Q200 320, 400 350 T800 320 V500 H0 Z"
fill="rgb(180, 220, 220)" />
<!-- 4. Foreground Ground (Heavy Snow Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#snowGroundGradient)" />
<!-- 5. Snowy Cottages (Red houses with white roofs) -->
<g transform="translate(150, 400)">
<!-- House 1 -->
<rect x="-50" y="-50" width="100" height="100" fill="red" />
<rect x="-30" y="10" width="20" height="20" fill="white" stroke="black" stroke-width="1" />
<!-- Roof Snow -->
<polygon points="-70,-50 70,-50 0,-100" fill="white" stroke="rgb(220, 220, 220)" stroke-width="2" />
<rect x="-70" y="-50" width="140" height="10" fill="white" />
</g>
<g transform="translate(600, 400)">
<!-- House 2 -->
<rect x="-50" y="-50" width="100" height="100" fill="red" />
<rect x="10" y="10" width="20" height="20" fill="white" stroke="black" stroke-width="1" />
<!-- Roof Snow -->
<polygon points="-70,-50 70,-50 0,-100" fill="white" stroke="rgb(220, 220, 220)" stroke-width="2" />
<rect x="-70" y="-50" width="140" height="10" fill="white" />
</g>
<!-- 6. Snowy Trees (Bare branches with snow) -->
<g fill="rgb(100, 50, 20)" opacity="0.8">
<rect x="400" y="300" width="10" height="150" />
<path d="M405 300 Q400 250, 450 300 M405 300 Q410 250, 350 300" fill="none" stroke="rgb(100, 50, 20)" stroke-width="3" />
<circle cx="405" cy="300" r="50" fill="white" />
</g>
<!-- 7. Small Snow Path/Ripples on ground -->
<path d="M0 450 Q200 448, 400 450 T800 448" fill="none" stroke="rgb(220, 240, 255)" stroke-width="3" opacity="0.8" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Storm Sky Gradient (Muted Gray/Blue, low light) -->
<linearGradient id="stormSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 120, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 140, 160);stop-opacity:1" />
</linearGradient>
<!-- Snow Ground Gradient (Colder, shadowed tone) -->
<linearGradient id="shadowedSnowGroundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Stormy Gray-Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#stormSkyGradient)" />
<!-- 2. Strong Wind/Snow Lines (Visual effect for the storm) -->
<g stroke="white" stroke-width="2" opacity="0.6">
<path d="M0 100 L200 110" />
<path d="M0 250 L300 265" />
<path d="M800 150 L600 160" />
<path d="M800 300 L500 315" />
</g>
<!-- 3. Obscured Distant Forest (Dark, hidden silhouette) -->
<path d="M0 350 Q200 320, 400 350 T800 320 V500 H0 Z"
fill="rgb(60, 80, 100)" />
<!-- 4. Foreground Ground (Shadowed Snow Platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#shadowedSnowGroundGradient)" />
<!-- 5. Snow Drifts/Banks (Irregular foreground obstacles) -->
<g fill="white" stroke="rgb(200, 200, 200)" stroke-width="1" opacity="0.9">
<path d="M50 450 C100 420, 150 430, 200 450 L200 500 L50 500 Z" />
<path d="M500 450 C550 410, 650 430, 700 450 L700 500 L500 500 Z" />
</g>
<!-- 6. Distant Chimney/Structure Silhouettes (Faintly visible) -->
<rect x="100" y="300" width="10" height="50" fill="rgb(40, 60, 80)" />
<rect x="700" y="320" width="10" height="40" fill="rgb(40, 60, 80)" />
<!-- 7. Small Icicles/Ice Shards (Detail hanging near the ground) -->
<g fill="rgb(200, 230, 255)" opacity="0.9">
<polygon points="400,450 405,440 410,450 Z" />
<polygon points="550,450 555,435 560,450 Z" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Ice Cave Interior Gradient (Deep cold blue) -->
<linearGradient id="iceCaveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 150, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 180, 220);stop-opacity:1" />
</linearGradient>
<!-- Foreground Ice/Crystal Platform Gradient -->
<linearGradient id="crystalIcePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 230, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 250, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Cave Interior/Sky (Deep Blue Ice) -->
<rect x="0" y="0" width="800" height="500" fill="url(#iceCaveGradient)" />
<!-- 2. Ice Walls/Cavern Structure (Left and Right pillars/walls) -->
<path d="M0 500 V0 C100 50, 200 0, 300 50 L300 500 Z"
fill="rgb(100, 160, 210)" opacity="0.8" />
<path d="M800 500 V0 C700 50, 600 0, 500 50 L500 500 Z"
fill="rgb(100, 160, 210)" opacity="0.8" />
<!-- 3. Foreground Platform (Crystal Ice) -->
<rect x="0" y="450" width="800" height="50" fill="url(#crystalIcePlatformGradient)" />
<!-- 4. Ice Cracks/Reflections (Detail on the floor) -->
<g stroke="rgb(100, 180, 255)" stroke-width="2" opacity="0.6" fill="none">
<path d="M50 450 L100 480" />
<path d="M750 450 L700 480" />
<path d="M300 460 Q400 450, 500 460" />
</g>
<!-- 5. Hanging Icicles (From the cavern roof) -->
<g fill="white" opacity="0.9">
<polygon points="400,0 410,50 390,50 Z" />
<polygon points="150,0 160,30 140,30 Z" />
<polygon points="650,0 660,40 640,40 Z" />
</g>
<!-- 6. Soft Blue Light Glow (Atmospheric effect) -->
<circle cx="400" cy="250" r="100" fill="rgb(200, 230, 255)" opacity="0.2" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Dark Tunnel Interior Gradient (Very dark and cold) -->
<linearGradient id="darkTunnelGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(40, 60, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(60, 80, 100);stop-opacity:1" />
</linearGradient>
<!-- Foreground Ice/Stone Platform Gradient (Shadowed) -->
<linearGradient id="shadowedIcePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 170, 190);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 200, 220);stop-opacity:1" />
</linearGradient>
<!-- Faint Light Source (From the end of the tunnel) -->
<radialGradient id="faintLight" cx="90%" cy="50%" r="50%" fx="90%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:rgb(60, 80, 100);stop-opacity:0.1"/>
</radialGradient>
</defs>
<!-- 1. Tunnel Interior/Sky (Dark Cold) -->
<rect x="0" y="0" width="800" height="500" fill="url(#darkTunnelGradient)" />
<!-- 2. Faint Light Source (From the distant tunnel end) -->
<rect x="0" y="0" width="800" height="500" fill="url(#faintLight)" />
<!-- 3. Tunnel Walls/Ceiling (Closer, dark rock/ice) -->
<path d="M0 0 L100 0 L150 500 L0 500 Z"
fill="rgb(30, 40, 50)" />
<path d="M800 0 L700 0 L650 500 L800 500 Z"
fill="rgb(30, 40, 50)" />
<rect x="0" y="0" width="800" height="80" fill="rgb(30, 40, 50)" />
<!-- 4. Foreground Platform (Shadowed Ice) -->
<rect x="0" y="450" width="800" height="50" fill="url(#shadowedIcePlatformGradient)" />
<!-- 5. Water/Ice Pool in the middle of the path (Obstacle/Detail) -->
<ellipse cx="400" cy="460" rx="150" ry="25" fill="rgb(0, 100, 150)" opacity="0.7" />
<!-- 6. Dripping Water/Ice Shards (Vertical lines) -->
<g fill="white" opacity="0.3">
<rect x="250" y="80" width="2" height="10" />
<rect x="550" y="80" width="2" height="15" />
<rect x="400" y="80" width="3" height="12" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Crystal Chamber Interior Gradient (Bright, light blue) -->
<linearGradient id="crystalChamberGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 220, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
<!-- Foreground Crystal Ice Platform Gradient (Reflective) -->
<linearGradient id="reflectiveIcePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 230, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
<!-- Crystal Detail Color (Deep icy blue) -->
<stop id="crystalBlue" stop-color="rgb(0, 150, 255)" />
</defs>
<!-- 1. Chamber Interior/Sky (Bright Ice Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#crystalChamberGradient)" />
<!-- 2. Crystal Wall Details (Reflecting blue light) -->
<g fill="rgb(150, 200, 255)" stroke="rgb(100, 180, 255)" stroke-width="1" opacity="0.7">
<!-- Left Wall Crystals -->
<polygon points="0,450 50,400 100,450" />
<polygon points="150,300 180,250 210,300" />
<!-- Right Wall Crystals -->
<polygon points="800,450 750,400 700,450" />
<polygon points="650,300 620,250 590,300" />
</g>
<!-- 3. Foreground Platform (Reflective Ice) -->
<rect x="0" y="450" width="800" height="50" fill="url(#reflectiveIcePlatformGradient)" />
<!-- 4. Large Crystal Formations (Jutting out of the ground) -->
<g transform="translate(400, 450)" fill="rgb(0, 100, 150)" stroke="rgb(0, 150, 255)" stroke-width="2" opacity="0.8">
<polygon points="-50,0 50,0 0,-100 Z" />
<polygon points="100,0 150,-50 200,0 Z" />
</g>
<!-- 5. Scattered Crystal Shards on the ground -->
<g fill="white" opacity="0.9">
<polygon points="50,450 55,440 60,450 Z" />
<polygon points="750,450 755,435 760,450 Z" />
</g>
<!-- 6. Gentle Light Rays (Vertical white streaks) -->
<g stroke="white" stroke-width="1" opacity="0.3">
<path d="M400 0 L400 500" />
<path d="M200 0 L200 500" />
<path d="M600 0 L600 500" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Wind-Swept Sky Gradient (Gray/White) -->
<linearGradient id="windSweptSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 170, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 210, 220);stop-opacity:1" />
</linearGradient>
<!-- Compacted Snow Dune Gradient -->
<linearGradient id="snowDuneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Wind-Swept Gray-Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#windSweptSkyGradient)" />
<!-- 2. Distant Snow Peaks (Faint, low visibility) -->
<polygon points="0,450 400,250 800,450" fill="rgb(120, 140, 160)" opacity="0.6" />
<!-- 3. Blowing Snow/Blizzard Effect (Horizontal white streaks) -->
<g stroke="white" stroke-width="2" opacity="0.7">
<path d="M0 100 L200 105" />
<path d="M800 250 L600 255" />
<path d="M0 350 L150 352" />
</g>
<g fill="white" opacity="0.5">
<rect x="0" y="0" width="800" height="500" />
</g>
<!-- 4. Foreground Platform (Compacted Snow Dunes) -->
<path d="M0 450 Q200 420, 400 450 T800 420 V500 H0 Z"
fill="url(#snowDuneGradient)" />
<!-- 5. Snow Drift Texture (Shadow detail on the dunes) -->
<g fill="rgb(200, 220, 240)" opacity="0.7">
<path d="M0 450 Q100 435, 200 450 L200 500 L0 500 Z" />
<path d="M400 450 Q500 430, 600 450 L600 500 L400 500 Z" />
</g>
<!-- 6. Single Frozen Tree Silhouette (Detail) -->
<rect x="700" y="350" width="10" height="100" fill="rgb(80, 50, 20)" opacity="0.8" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Icy Sky Gradient (Cold Blue/Gray) -->
<linearGradient id="icySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(160, 200, 230);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 230, 255);stop-opacity:1" />
</linearGradient>
<!-- Foreground Icy Platform Gradient (Slick, reflective ice) -->
<linearGradient id="slickIcePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
<!-- Deep Crevasse Shadow -->
<stop id="crevasseShadow" stop-color="rgb(0, 50, 100)" />
</defs>
<!-- 1. Sky (Icy Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#icySkyGradient)" />
<!-- 2. Distant Peaks/Cavern Walls (Simple, shadowed background) -->
<polygon points="0,450 400,250 800,450" fill="rgb(100, 140, 170)" opacity="0.7" />
<!-- 3. Foreground Crevasse/Drop-off (The visual danger below the platform) -->
<rect x="0" y="450" width="800" height="50" fill="url(#crevasseShadow)" />
<!-- 4. Main Platform (Narrow Icy Path - Sits right at the visual edge) -->
<path d="M0 450 Q400 440, 800 450 L800 460 L0 460 Z"
fill="url(#slickIcePlatformGradient)"
stroke="rgb(150, 180, 220)"
stroke-width="2" />
<!-- 5. Grietas/Cracks en la plataforma (Blue lines) -->
<g stroke="rgb(0, 100, 150)" stroke-width="1" opacity="0.8" fill="none">
<path d="M150 450 L180 445 L200 450" />
<path d="M500 455 Q550 450, 600 455" />
</g>
<!-- 6. Small Ice Shards/Obstacles (Detail) -->
<g fill="white" opacity="0.9">
<polygon points="400,430 405,420 410,430 Z" />
<polygon points="250,435 255,425 260,435 Z" />
</g>
<!-- 7. Fog/Mist rising from the crevasse -->
<rect x="0" y="400" width="800" height="50" fill="white" opacity="0.1" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Warm Portal Light Gradient (White/Yellow-Orange) -->
<radialGradient id="portalGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255, 255, 200);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255, 200, 150);stop-opacity:0.5"/>
</radialGradient>
<!-- Final Ice Platform Gradient (Light and Pure) -->
<linearGradient id="finalIcePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240, 250, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 255, 255);stop-opacity:1" />
</linearGradient>
<!-- Background Ice/Rock -->
<linearGradient id="backgroundIceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 140, 170);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 160, 190);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Ice/Rock -->
<rect x="0" y="0" width="800" height="500" fill="url(#backgroundIceGradient)" />
<!-- 2. Central Warm Portal/Light Source (Contrast to the cold) -->
<circle cx="400" cy="250" r="250" fill="url(#portalGlow)" />
<!-- 3. Portal Frame/Archway (Where the Circle Fairy sits/appears) -->
<g transform="translate(400, 450)">
<!-- Archway Pillars -->
<rect x="-200" y="-200" width="20" height="200" fill="rgb(200, 200, 220)" stroke="rgb(150, 150, 170)" stroke-width="3" />
<rect x="180" y="-200" width="20" height="200" fill="rgb(200, 200, 220)" stroke="rgb(150, 150, 170)" stroke-width="3" />
<!-- Top Arch (Open space) -->
<path d="M-200 -200 A200 200 0 0 1 200 -200 L180 -200 A180 180 0 0 0 -180 -200 Z"
fill="rgb(255, 255, 200)" opacity="0.6" />
</g>
<!-- 4. Foreground Platform (Final Pure Ice) -->
<rect x="0" y="450" width="800" height="50" fill="url(#finalIcePlatformGradient)" />
<!-- 5. Warm Light Reflection on Floor -->
<ellipse cx="400" cy="460" rx="300" ry="30" fill="rgb(255, 200, 100)" opacity="0.3" />
<!-- 6. Small Icy Altar/Pedestal (For the Circle Fairy) -->
<rect x="350" y="400" width="100" height="50" fill="rgb(200, 230, 255)" stroke="rgb(150, 180, 220)" stroke-width="2" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #3498db; /* Icy Blue */
color: white;
border: 2px solid #ecf0f1; /* White/Ice Border */
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(52, 152, 219, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al mapContainer (la escena de juego) ***
// Usar document.body.appendChild(clickArea) para que el NPC no sea removido al cambiar el mapContainer.innerHTML
document.body.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Cold Passages dialogue box (icy blue/dark theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(41, 128, 185, 0.9); /* Darker Icy Blue */
border: 5px solid #ecf0f1; /* White/Ice Border */
box-shadow: 0 0 20px rgba(236, 240, 241, 0.7);
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Circle Fairy is only NPC in phase 7)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:#ecf0f1; font-size:36px; text-align:center; font-family: Arial, sans-serif; text-shadow: 0 0 10px #ecf0f1;">
LEVEL COMPLETE!<br>The Cold Passages are now behind you.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #3498db;
color: white;
border: 4px solid #ecf0f1;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: Arial, sans-serif;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(236, 240, 241, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics (Normal Gravity, No Wind)
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_8)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel8 = function() {
// ==UserScript==
// @name Drawaria Game Level 8 - Castle Lands
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 8: Castle Lands. Navigate the futuristic, metallic fortress and survive the robotic defenders.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Castle Lands";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-castle-lands.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
// Y position where the bottom of the avatar rests (simulating the ground)
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220; // Trigger for advancing the level
const LEVEL_START_X = 50; // Starting X coordinate
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100; // Default size for simpler NPC collision
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders
const CHAR_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="200" style="filter: url("#inner-shadow-filter-0");" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="229.661" cy="196.95" rx="86.437" ry="28.118"/>
<path d="M 123.437 44.321 C 142.524 77.723 343.568 59.686 340.225 41.761 L 326.512 110.971 L 131.768 110.971 L 123.437 44.321 Z" style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);"/>
<path d="M 130.727 109.93 C 130.727 85.998 331.719 80.052 331.719 109.93 L 331.719 177.621 C 331.719 186.824 324.259 194.284 315.056 194.284 C 317.357 180.477 150.61 174.962 147.39 194.284 C 138.187 194.284 130.727 186.824 130.727 177.621 L 130.727 109.93 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64);"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="147.317" cy="113.921" rx="5.247" ry="6.44"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="149.702" cy="175.935" rx="4.293" ry="6.44"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-314.04" cy="111.297" rx="5.247" ry="6.44" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-311.65" cy="173.311" rx="4.293" ry="6.44" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<g style="transform-origin: 299.114px 407.214px;" transform="matrix(1, 0, 0, 1, -102.00001, 0)">
<path d="M 303.14 435.297 C 305.001 435.36 306.448 435.548 307.976 434.951 C 309.629 434.306 311.623 433.063 312.639 431.324 C 313.79 429.355 314.592 426.666 314.021 423.379 C 313.194 418.617 307.636 411.645 305.04 405.072 C 302.292 398.115 299.064 388.267 298.131 382.619 C 297.496 378.774 298.902 376.164 298.131 373.637 C 297.435 371.357 296.515 369.388 294.159 367.938 C 290.82 365.884 282.507 364.014 277.923 364.484 C 274.05 364.881 269.909 367.479 268.079 369.147 C 266.87 370.249 266.648 371.325 266.351 372.601 C 266.037 373.957 266.018 374.638 266.351 377.092 C 267.055 382.271 269.06 396.504 272.915 405.417 C 276.864 414.55 285.88 426.906 290.013 431.151 C 292.165 433.362 293.167 433.567 295.195 434.26 C 297.466 435.036 300.864 435.219 303.14 435.297 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000011, 0.000001)"/>
<rect x="-332.12" y="425.069" width="55.653" height="24.948" style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" rx="7.292" ry="7.292" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-290.8" cy="400.526" rx="4.159" ry="5.891" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-320.26" cy="437.039" rx="2.426" ry="4.284" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-30" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;20 -10" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g>
<path d="M 369.736 314.728 L 392.707 304.396 L 379.311 268.906 C 383.708 276.833 347.855 297.515 342.794 288.39 L 369.736 314.728 Z" style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 370.709px 293.344px;" transform="matrix(-1, 0, 0, -1, -0.000025, 0)"/>
<path d="M 372.807 288.261 C 374.444 287.372 375.786 286.801 376.801 285.511 C 377.899 284.118 378.988 282.035 378.982 280.021 C 378.976 277.741 378.304 275.016 376.146 272.472 C 373.019 268.786 364.694 265.594 359.125 261.244 C 353.23 256.639 345.455 249.786 341.788 245.391 C 339.292 242.398 339.181 239.436 337.235 237.648 C 335.48 236.035 333.689 234.804 330.923 234.749 C 327.003 234.671 318.889 237.272 315.176 240.001 C 312.039 242.306 309.786 246.645 309.054 249.01 C 308.57 250.573 308.924 251.613 309.315 252.864 C 309.732 254.192 310.061 254.788 311.592 256.735 C 314.824 260.843 323.766 272.095 331.607 277.824 C 339.641 283.696 353.676 289.777 359.39 291.341 C 362.366 292.156 363.334 291.825 365.433 291.394 C 367.784 290.912 370.806 289.347 372.807 288.261 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64); transform-origin: 343.672px 264.322px;" transform="matrix(-1, 0, 0, -1, -0.000002, 0.000006)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 98.445px 269.8px;" cx="97.802" cy="270.433" rx="4.159" ry="5.891" transform="matrix(-0.862017, 0.50688, 0.506882, 0.862016, 231.652927, -15.575514)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 98.445px 269.8px;" cx="97.802" cy="270.433" rx="4.159" ry="5.891" transform="matrix(-0.862017, 0.50688, 0.506882, 0.862016, 254.560612, 1.012792)"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 20" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g>
<path d="M 73.461 270.285 L 96.432 280.617 L 83.036 316.107 C 87.433 308.18 51.58 287.498 46.519 296.623 L 73.461 270.285 Z" style="stroke-width: 3; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 74.434px 291.669px;"/>
<path d="M 130.607 238.708 C 132.244 239.597 133.586 240.168 134.601 241.458 C 135.699 242.851 136.788 244.934 136.782 246.948 C 136.776 249.228 136.104 251.953 133.946 254.497 C 130.819 258.183 122.494 261.375 116.925 265.725 C 111.03 270.33 103.255 277.183 99.588 281.578 C 97.092 284.571 96.981 287.533 95.035 289.321 C 93.28 290.934 91.489 292.165 88.723 292.22 C 84.803 292.298 76.689 289.697 72.976 286.968 C 69.839 284.663 67.586 280.324 66.854 277.959 C 66.37 276.396 66.724 275.356 67.115 274.105 C 67.532 272.777 67.861 272.181 69.392 270.234 C 72.624 266.126 81.566 254.874 89.407 249.145 C 97.441 243.273 111.476 237.192 117.19 235.628 C 120.166 234.813 121.134 235.144 123.233 235.575 C 125.584 236.057 128.606 237.622 130.607 238.708 Z" style="stroke-width: 3; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64); transform-origin: 101.472px 262.647px;"/>
<ellipse style="stroke-width: 3; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 98.445px 269.8px;" cx="97.802" cy="270.433" rx="4.159" ry="5.891" transform="matrix(0.862017, 0.50688, -0.506882, 0.862016, 16.601387, -17.250556)"/>
<ellipse style="stroke-width: 3; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55); transform-origin: 98.445px 269.8px;" cx="97.802" cy="270.433" rx="4.159" ry="5.891" transform="matrix(0.862017, 0.50688, -0.506882, 0.862016, -6.306358, -0.662242)"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 20" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g transform="matrix(-1, 0, 0, 1, 406.34205, 0)" style="">
<g style="transform-origin: 144.671px 407.869px;">
<g style="transform-origin: 144.671px 407.869px;">
<path d="M 166.609 365.144 C 168.47 365.081 169.917 364.893 171.445 365.49 C 173.098 366.135 175.092 367.378 176.108 369.117 C 177.259 371.086 178.061 373.775 177.49 377.062 C 176.663 381.824 171.105 388.796 168.509 395.369 C 165.761 402.326 162.533 412.174 161.6 417.822 C 160.965 421.667 162.371 424.277 161.6 426.804 C 160.904 429.084 159.984 431.053 157.628 432.503 C 154.289 434.557 145.976 436.427 141.392 435.957 C 137.519 435.56 133.378 432.962 131.548 431.294 C 130.339 430.192 130.117 429.116 129.82 427.84 C 129.506 426.484 129.487 425.803 129.82 423.349 C 130.524 418.17 132.529 403.937 136.384 395.024 C 140.333 385.891 149.349 373.535 153.482 369.29 C 155.634 367.079 156.636 366.874 158.664 366.181 C 160.935 365.405 164.333 365.222 166.609 365.144 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64);"/>
<rect x="111.663" y="425.724" width="55.653" height="24.948" style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" rx="7.292" ry="7.292"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="152.985" cy="401.181" rx="4.159" ry="5.891"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 0" dur="2s" fill="freeze"/>
</g>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="123.529" cy="437.694" rx="2.426" ry="4.284"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;41" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-20 -10" begin="0s" dur="2s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
</g>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="221.17" cy="296.022" rx="102.084" ry="96.837"/>
<path d="M 190.164 331.51 L 250.269 331.51 C 240.754 335.835 257.268 385.312 261.241 383.506 C 262.884 393.914 181.011 397.174 178.853 383.506 C 182.862 387.456 199.665 339.924 190.164 331.51 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64);"/>
<path d="M 124.81 266.634 L 317.53 266.634 L 319.53 271.881 L 122.81 271.881 L 124.81 266.634 Z" style="stroke-width: 3px; stroke: rgb(26, 26, 26); fill: rgb(64, 64, 64);"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="202.888" cy="344.348" rx="4.159" ry="5.198"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="200.462" cy="377.616" rx="3.812" ry="4.505"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-237.08" cy="344.289" rx="4.159" ry="5.198" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3px; fill: rgb(144, 144, 144); stroke: rgb(55, 55, 55);" cx="-239.5" cy="377.557" rx="3.812" ry="4.505" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<ellipse style="stroke-width: 3px; stroke: rgb(55, 55, 55); fill: rgb(46, 46, 46);" cx="177.936" cy="233.107" rx="6.238" ry="7.624"/>
<ellipse style="stroke-width: 3px; stroke: rgb(55, 55, 55); fill: rgb(46, 46, 46);" cx="270.6" cy="232.988" rx="6.503" ry="7.277"/>
<ellipse style="stroke-width: 3px; stroke: rgb(55, 55, 55); fill: rgb(46, 46, 46);" cx="295.416" cy="289.782" rx="5.891" ry="7.624"/>
<ellipse style="stroke-width: 3px; stroke: rgb(55, 55, 55); fill: rgb(46, 46, 46);" cx="154.451" cy="288.059" rx="6.931" ry="8.664"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;30 0" dur="9.19s" fill="freeze" keyTimes="0; 1" begin="-0.04s" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.185 709.389" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="drop-shadow-filter-0" bx:preset="drop-shadow 1 0 0 6 0.86 #719b9fd3" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6"/>
<feOffset dx="0" dy="0"/>
<feComponentTransfer result="offsetblur">
<feFuncA id="spread-ctrl" type="linear" slope="1.72"/>
</feComponentTransfer>
<feFlood flood-color="#719b9fd3"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g style="filter: url("#inner-shadow-filter-0");">
<rect x="149.573" y="95.126" width="169.787" height="160.287" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" rx="13.654" ry="13.654"/>
<g transform="matrix(1, -0.004712, 0, 1, 0, -9.000002)" style="transform-origin: 231.802px 554.332px;">
<path d="M 233.165 519.618 L 233.165 605.717 L 166.64 605.717 L 166.64 478.486 L 233.165 478.486 L 233.165 478.788 L 233.71 478.788 L 233.71 478.485 L 300.235 478.485 L 300.235 605.716 L 233.71 605.716 L 233.71 519.618 L 233.165 519.618 Z" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);"/>
<path d="M 163.096 600.782 Q 197.722 571.866 232.347 600.782 L 232.347 600.782 Q 266.973 629.698 197.722 629.698 L 197.722 629.698 Q 128.47 629.698 163.096 600.782 Z" bx:shape="triangle 128.47 571.866 138.503 57.832 0.5 0.5 1@9d318b85" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(136, 208, 206);"/>
<path d="M 231.257 601.264 Q 265.883 572.348 300.508 601.264 L 300.508 601.264 Q 335.134 630.18 265.883 630.18 L 265.883 630.18 Q 196.631 630.18 231.257 601.264 Z" bx:shape="triangle 196.631 572.348 138.503 57.832 0.5 0.5 1@24dde6bf" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(136, 208, 206);"/>
<animateTransform type="skewY" additive="sum" attributeName="transform" values="0;-9" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<rect x="190.363" y="253.064" width="131.96" height="193.738" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(167, 255, 252);" transform="matrix(0.999999, 0.001252, 0, 1.000001, -22.633467, 32.941918)"/>
<path d="M 318.173 252.236 C 318.173 267.194 279.243 313.592 232.686 313.592 C 186.128 313.592 149.573 267.194 149.573 252.236 C 149.573 237.277 187.315 225.15 233.873 225.15 C 280.431 225.15 318.173 237.277 318.173 252.236 Z" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(114, 174, 172);"/>
<path d="M 175.694 71.011 L 290.864 72.198 C 302.292 69.864 335.213 78.674 331.233 94.758 L 331.233 131.563 C 331.233 140.744 323.791 148.186 314.61 148.186 L 153.135 148.186 C 143.954 148.186 136.512 140.744 136.512 131.563 L 136.512 94.758 C 132.25 84.968 150.156 68.674 175.694 71.011 Z" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(114, 174, 172);"/>
<path d="M 186.965 -200.442 Q 236.888 -238.84 286.812 -200.442 L 286.812 -200.442 Q 336.735 -162.043 236.888 -162.043 L 236.888 -162.043 Q 137.041 -162.043 186.965 -200.442 Z" bx:shape="triangle 137.041 -238.84 199.694 76.797 0.5 0.5 1@e9c72f41" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(189, 233, 255); filter: url("#drop-shadow-filter-0");" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="156.825" cy="129.887" rx="8.725" ry="7.634"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="160.642" cy="91.717" rx="8.179" ry="6.543"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="304.053" cy="87.9" rx="8.725" ry="7.089"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="308.415" cy="135.885" rx="8.725" ry="5.998"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="180.817" cy="247.123" rx="7.634" ry="5.998"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="206.446" cy="284.202" rx="9.27" ry="5.998"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="282.241" cy="250.394" rx="8.725" ry="5.998"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" cx="260.429" cy="285.292" rx="8.725" ry="5.998"/>
<g>
<rect x="104.477" y="308.849" width="50.167" height="151.589" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123); transform-box: fill-box; transform-origin: 50% 50%;" rx="9.815" ry="9.815" transform="matrix(0.987925, 0.154936, -0.154939, 0.987924, -11.996437, -1.090665)"/>
<path d="M 107.203 -314.152 Q 138.285 -359.41 169.366 -314.152 L 169.366 -314.152 Q 200.448 -268.893 138.285 -268.893 L 138.285 -268.893 Q 76.122 -268.893 107.203 -314.152 Z" bx:shape="triangle 76.122 -359.41 124.326 90.517 0.5 0.5 1@10eff422" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(136, 208, 206);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<rect x="104.48" y="308.85" width="50.167" height="151.589" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123); transform-origin: 129.566px 384.645px;" rx="9.815" ry="9.815" transform="matrix(-0.908961, 0.416881, 0.416888, 0.908958, 239.920544, -8.18138)"/>
<path d="M 299.145 -311.011 Q 330.226 -356.27 361.308 -311.011 L 361.308 -311.011 Q 392.389 -265.753 330.226 -265.753 L 330.226 -265.753 Q 268.063 -265.753 299.145 -311.011 Z" bx:shape="triangle 268.063 -356.27 124.326 90.517 0.5 0.5 1@7b86bcd9" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(136, 208, 206);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(167, 255, 252);" cx="101.751" cy="476.087" rx="37.625" ry="34.898"/>
<rect x="48.771" y="418.8" width="33.808" height="320.62" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(82, 124, 123);" transform="matrix(0.999999, 0.001417, 0, 1.000001, 328.895606, -227.91361)" rx="8.725" ry="8.725"/>
<path d="M 394.592 140.919 Q 396.751 136.273 398.91 140.919 L 430.581 209.057 Q 432.74 213.703 428.421 213.703 L 365.081 213.703 Q 360.762 213.703 362.921 209.057 Z" bx:shape="triangle 360.762 136.273 71.978 77.43 0.5 0.06 1@03500566" style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(167, 255, 252);"/>
<ellipse style="stroke-width: 3px; stroke: rgb(46, 77, 85); fill: rgb(167, 255, 252);" cx="418.018" cy="439.008" rx="31.081" ry="31.626"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 10" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;20 0" dur="6.56s" fill="freeze" begin="-0.07s" keyTimes="0; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<pattern x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100" id="pattern-0">
<rect x="0" y="0" width="50" height="100" style="fill: black;"/>
</pattern>
<pattern id="pattern-0-0" href="#pattern-0" patternTransform="matrix(1, 0, 0, 1, 172.029179, -247.981569)"/>
<pattern id="pattern-0-1" href="#pattern-0" patternTransform="matrix(1, 0, 0, 1, 172.029287, -247.981859)"/>
<pattern id="pattern-0-2" href="#pattern-0" patternTransform="matrix(1, 0, 0, 1, 213.974, 179.457007)"/>
<pattern id="pattern-0-3" href="#pattern-0" patternTransform="matrix(1, 0, 0, 1, 292.984992, 185.182994)"/>
<linearGradient gradientUnits="userSpaceOnUse" x1="260.413" y1="172.237" x2="260.413" y2="338.459" id="gradient-0">
<stop offset="0" style="stop-color: rgb(56.471% 56.471% 56.471%)"/>
<stop offset="1" style="stop-color: rgb(33.08% 33.08% 33.08%)"/>
</linearGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="394.444" cy="216.666" r="62.348" id="gradient-1">
<stop offset="0" style="stop-color: rgb(56.471% 56.471% 56.471%)"/>
<stop offset="1" style="stop-color: rgb(33.08% 33.08% 33.08%)"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="727.222" cy="501.667" r="68.159" id="gradient-2">
<stop offset="0" style="stop-color: rgb(56.471% 56.471% 56.471%)"/>
<stop offset="1" style="stop-color: rgb(33.08% 33.08% 33.08%)"/>
</radialGradient>
</defs>
<g>
<g>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 186.517 233.522 C 186.517 221.637 204.569 202.444 194.828 205.027 C 191.282 205.967 142.785 152.839 159.209 137.35 C 160.411 136.217 150.556 141.083 148.523 142.099 C 137.855 147.433 127.48 155.375 121.215 159.909 C 111.261 167.113 152.245 244.281 191.266 235.897"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67); transform-box: fill-box; transform-origin: 50% 50%;" d="M 378.725 349.664 C 378.725 337.779 396.777 318.586 387.036 321.169 C 383.49 322.109 334.993 268.981 351.417 253.492 C 352.619 252.359 342.764 257.225 340.731 258.241 C 330.063 263.575 319.688 271.517 313.423 276.051 C 303.469 283.255 344.453 360.423 383.474 352.039" transform="matrix(-1, 0, 0, -1, -0.000006, -0.00001)"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3.35473px; fill: url("#gradient-1"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.893502, 0, 0, 0.895017, -270.781439, -84.573847)" d="M 394.444 151.111 L 394.444 151.111 L 406.599 179.258 A 39.333 39.333 0 0 1 406.599 179.258 L 432.977 163.631 L 432.977 163.631 L 426.266 193.547 A 39.333 39.333 0 0 1 426.266 193.547 L 456.792 196.409 L 456.792 196.409 L 433.778 216.667 A 39.333 39.333 0 0 1 433.778 216.667 L 456.792 236.924 L 456.792 236.924 L 426.266 239.786 A 39.333 39.333 0 0 1 426.266 239.786 L 432.977 269.702 L 432.977 269.702 L 406.599 254.075 A 39.333 39.333 0 0 1 406.599 254.075 L 394.444 282.222 L 394.444 282.222 L 382.29 254.075 A 39.333 39.333 0 0 1 382.29 254.075 L 355.912 269.702 L 355.912 269.702 L 362.623 239.786 A 39.333 39.333 0 0 1 362.623 239.786 L 332.097 236.924 L 332.097 236.924 L 355.111 216.667 A 39.333 39.333 0 0 1 355.111 216.667 L 332.097 196.409 L 332.097 196.409 L 362.623 193.547 A 39.333 39.333 0 0 1 362.623 193.547 L 355.912 163.631 L 355.912 163.631 L 382.29 179.258 A 39.333 39.333 0 0 1 382.29 179.258 Z M 394.444 201.589 A 15.078 15.078 0 0 0 394.444 231.744 A 15.078 15.078 0 0 0 394.444 201.589" bx:shape="cog 394.444 216.667 15.078 39.333 65.556 1 10 1@5b3da3e4">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-180" begin="0s" dur="1.04s" fill="freeze" keyTimes="0; 1" repeatCount="indefinite"/>
</path>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 358.873 270.739 C 366.227 280.985 336.291 303.697 327.159 296.779 C 335.025 303.543 365.891 283.163 358.873 270.739 Z"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 377.793 295.489 C 385.147 305.735 355.211 328.447 346.079 321.529 C 353.945 328.293 384.811 307.913 377.793 295.489 Z"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3.77709px; fill: url("#gradient-2"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.788157, 0, 0, 0.800368, -354.852058, -139.555759)" d="M 727.222 430 L 727.222 430 L 740.953 459.408 A 44.433 44.433 0 0 1 740.953 459.408 L 769.347 443.687 L 769.347 443.687 L 763.17 475.549 A 44.433 44.433 0 0 1 763.17 475.549 L 795.381 479.52 L 795.381 479.52 L 771.656 501.667 A 44.433 44.433 0 0 1 771.656 501.667 L 795.381 523.813 L 795.381 523.813 L 763.17 527.784 A 44.433 44.433 0 0 1 763.17 527.784 L 769.347 559.646 L 769.347 559.646 L 740.953 543.925 A 44.433 44.433 0 0 1 740.953 543.925 L 727.222 573.333 L 727.222 573.333 L 713.492 543.925 A 44.433 44.433 0 0 1 713.492 543.925 L 685.098 559.646 L 685.098 559.646 L 691.275 527.784 A 44.433 44.433 0 0 1 691.275 527.784 L 659.063 523.813 L 659.063 523.813 L 682.789 501.667 A 44.433 44.433 0 0 1 682.789 501.667 L 659.063 479.52 L 659.063 479.52 L 691.275 475.549 A 44.433 44.433 0 0 1 691.275 475.549 L 685.098 443.687 L 685.098 443.687 L 713.492 459.408 A 44.433 44.433 0 0 1 713.492 459.408 Z M 727.222 484.467 A 17.2 17.2 0 0 0 727.222 518.867 A 17.2 17.2 0 0 0 727.222 484.467" bx:shape="cog 727.222 501.667 17.2 44.433 71.667 1 10 1@5b54acff">
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;180" begin="0s" dur="0.93s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</path>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 161.646 164.764 C 169 175.01 139.064 197.722 129.932 190.804 C 137.798 197.568 168.664 177.188 161.646 164.764 Z"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 179.147 189.365 C 186.501 199.611 156.565 222.323 147.433 215.405 C 155.299 222.169 186.165 201.789 179.147 189.365 Z"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 30" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<g style="">
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#gradient-0");" cx="260.413" cy="255.348" rx="81.331" ry="83.111"/>
<path d="M 167.015 -242.925 Q 184.529 -272.7 202.044 -242.925 L 202.044 -242.925 Q 219.558 -213.151 184.529 -213.151 L 184.529 -213.151 Q 149.5 -213.151 167.015 -242.925 Z" bx:shape="triangle 149.5 -272.7 70.058 59.549 0.5 0.5 1@b6bddd82" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#pattern-0-0"); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.89629, 0.443469, 0.443476, -0.896286, 42.027033, 505.991111)"/>
<path d="M 167.015 -242.925 Q 184.529 -272.7 202.044 -242.925 L 202.044 -242.925 Q 219.558 -213.151 184.529 -213.151 L 184.529 -213.151 Q 149.5 -213.151 167.015 -242.925 Z" bx:shape="triangle 149.5 -272.7 70.058 59.549 0.5 0.5 1@b6bddd82" style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#pattern-0-1"); transform-origin: 184.529px -235.482px;" transform="matrix(-0.89629, 0.443469, -0.443476, -0.896286, 112.965547, 504.683973)"/>
<path style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: rgb(67, 67, 67);" d="M 192.087 210.399 C 192.087 228.314 330.965 238.378 330.965 213.308 C 324.835 168.041 210.892 149.03 192.087 210.399 Z"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#pattern-0-2");" cx="226.474" cy="191.957" rx="6.584" ry="6.012"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 3px; fill: url("#pattern-0-3");" cx="305.485" cy="197.683" rx="6.012" ry="4.867"/>
</g>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;20 -30" begin="0.06s" dur="6.33s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const CHAR_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<g style="transform-origin: 238.723px 114.096px;" transform="matrix(-1, 0, 0, 1, 13.935252, 0)">
<rect x="124.833" y="43.033" width="151.89" height="164.842" style="filter: url("#inner-shadow-filter-0"); stroke-width: 3px; stroke: rgb(67, 127, 22); fill: rgb(188, 216, 190); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.748313, 0.663346, -0.699443, 0.716314, 42.397454, -11.35749)"/>
<path d="M 131.519 120.914 C 154.973 98.223 178.427 98.223 201.88 120.914 C 225.334 143.605 213.607 145.372 166.7 145.372 C 119.792 145.372 108.065 143.605 131.519 120.914 Z" style="filter: url("#inner-shadow-filter-0"); stroke-width: 3px; stroke: rgb(67, 127, 22); paint-order: fill; fill: rgb(101, 216, 197); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000012, -0.000002)"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-12" begin="0s" dur="5.28s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
<rect x="-142.59" y="-48.626" width="173.502" height="186.266" style="filter: url("#inner-shadow-filter-0"); stroke-width: 3px; stroke: rgb(67, 127, 22); fill: rgb(188, 216, 190); transform-origin: -55.844px 44.507px;" transform="matrix(-0.748313, 0.663346, 0.699443, 0.716314, 301.534698, 313.806433)"/>
<rect x="-71.26" y="-15.521" width="86.706" height="59.454" style="filter: url("#inner-shadow-filter-0"); stroke-width: 3px; stroke: rgb(67, 127, 22); fill: rgb(188, 216, 190); transform-origin: -27.908px 14.206px;" transform="matrix(-0.748313, 0.663346, 0.699443, 0.716314, 211.265433, 285.64984)"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 10" begin="0s" dur="5.31s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.11 0.84 0.83 0.25" repeatCount="indefinite"/>
</g>
</svg>`;
const CHAR_SVG_5 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com" style="filter: url("#inner-shadow-filter-0");">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 11 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="11"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="inner-shadow-filter-1" bx:preset="inner-shadow 1 0 0 10 0.5 rgba(0,0,0,0.7)" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</defs>
<g>
<path style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 127, 127);" d="M 154.451 243.913 L 299.304 243.913 C 337.24 453.668 140.717 643.914 154.451 243.913 Z"/>
<rect x="128.33" y="72.881" width="203.032" height="174.534" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 127, 127);"/>
<rect x="197.194" y="310.402" width="59.366" height="56.991" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 23, 23); filter: url("#inner-shadow-filter-1");"/>
<rect x="193.667" y="207.013" width="67.961" height="40.202" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 23, 23); filter: url("#inner-shadow-filter-1");"/>
<path d="M 249.187 340.161 C 245.071 346.739 248.021 322.197 244.431 321.917 C 240.841 321.637 221.012 314.787 240.376 312.943 C 259.74 311.099 253.303 333.583 249.187 340.161 Z" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 179, 179); transform-origin: 237.621px 325.728px;"/>
<ellipse style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 179, 179);" cx="215.305" cy="343.934" rx="6.12" ry="5.743"/>
<ellipse style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(54, 45, 45);" cx="212.332" cy="224.286" rx="3.35" ry="11.486"/>
<ellipse style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(54, 45, 45);" cx="246.916" cy="224.349" rx="4.307" ry="11.008"/>
<g>
<path d="M 177.54 -157.757 Q 193.151 -187.23 208.762 -157.757 L 208.762 -157.757 Q 224.373 -128.284 193.151 -128.284 L 193.151 -128.284 Q 161.929 -128.284 177.54 -157.757 Z" bx:shape="triangle 161.929 -187.23 62.444 58.946 0.5 0.5 1@afbfc7b2" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 23, 23);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 196.023 -140.778 Q 201.643 -149.27 207.263 -140.778 L 207.263 -140.778 Q 212.883 -132.285 201.643 -132.285 L 201.643 -132.285 Q 190.403 -132.285 196.023 -140.778 Z" bx:shape="triangle 190.403 -149.27 22.48 16.985 0.5 0.5 1@484f22e2" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 74, 74);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
</g>
<g transform="matrix(1, 0, 0, 1, 66.939493, 0.499545)">
<path d="M 177.54 -157.757 Q 193.151 -187.23 208.762 -157.757 L 208.762 -157.757 Q 224.373 -128.284 193.151 -128.284 L 193.151 -128.284 Q 161.929 -128.284 177.54 -157.757 Z" bx:shape="triangle 161.929 -187.23 62.444 58.946 0.5 0.5 1@afbfc7b2" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 23, 23);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 196.023 -140.778 Q 201.643 -149.27 207.263 -140.778 L 207.263 -140.778 Q 212.883 -132.285 201.643 -132.285 L 201.643 -132.285 Q 190.403 -132.285 196.023 -140.778 Z" bx:shape="triangle 190.403 -149.27 22.48 16.985 0.5 0.5 1@484f22e2" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(111, 80, 80);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
</g>
<path d="M 155.41 24.233 Q 157.184 20.58 158.958 24.233 L 180.747 69.115 Q 182.521 72.768 178.974 72.768 L 135.394 72.768 Q 131.847 72.768 133.621 69.115 Z" bx:shape="triangle 131.847 20.58 50.674 52.188 0.5 0.07 1@b32e368e" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 127, 127);"/>
<path d="M 294.284 24.233 Q 296.058 20.58 297.832 24.233 L 319.621 69.115 Q 321.395 72.768 317.848 72.768 L 274.268 72.768 Q 270.721 72.768 272.495 69.115 Z" bx:shape="triangle 270.721 20.58 50.674 52.188 0.5 0.07 1@8e839491" style="stroke: rgb(90, 0, 0); stroke-width: 3px; fill: rgb(216, 127, 127);"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;30 0" begin="0.06s" dur="9.3s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 10" begin="-0.93s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
</g>
</svg>`;
const HEXAGON_FAIRY_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="700" xmlns="http://www.w3.org/2000/svg" viewBox="15.108 0 484.892 607.377" width="700" xmlns:bx="https://boxy-svg.com">
<g style="">
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
</g>
<g>
<path d="M 229.042 412.165 L 305.306 412.165 L 381.57 562.292 L 146.543 557.976 L 229.042 412.165 Z" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6);"/>
<path d="M 558.889 268.77 L 607.465 306.607 L 607.465 382.281 L 558.889 420.118 L 510.313 382.281 L 510.313 306.607 Z" bx:shape="n-gon 558.889 344.444 56.091 75.674 6 0 1@3a289cbf" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.000947, 1, -1, -0.000947, -291.270454, 19.835772)"/>
<path d="M 265.015 429.262 C 265.015 432.723 262.442 435.695 258.767 436.979 C 258.776 437.203 258.78 437.428 258.78 437.655 C 258.78 446.397 252.445 453.483 244.63 453.483 C 236.815 453.483 230.48 446.397 230.48 437.655 C 230.48 435.662 230.809 433.755 231.41 431.999 L 171.005 379.619 L 185.521 362.879 L 252.598 421.043 C 253.278 420.928 253.982 420.868 254.703 420.868 C 260.398 420.868 265.015 424.626 265.015 429.262 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="180.938" cy="368.424" rx="19.155" ry="17.806"/>
<path d="M 359.505 386.357 C 359.505 382.896 356.932 379.924 353.257 378.64 C 353.266 378.416 353.27 378.191 353.27 377.964 C 353.27 369.222 346.935 362.136 339.12 362.136 C 331.305 362.136 324.97 369.222 324.97 377.964 C 324.97 379.957 325.299 381.864 325.9 383.62 L 265.495 436 L 280.011 452.74 L 347.088 394.576 C 347.768 394.691 348.472 394.751 349.193 394.751 C 354.888 394.751 359.505 390.993 359.505 386.357 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000015, -0.000032)"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="353.876" cy="366.266" rx="18.886" ry="16.727"/>
<path style="fill: rgba(216, 216, 216, 0); stroke-width: 3px; stroke: rgb(113, 6, 6);" d="M 225.849 321.714 C 244.699 311.212 274.958 366.694 270.13 375.533 C 270.679 356.269 292.931 312.428 311.131 325.699"/>
<ellipse style="stroke-width: 3px; fill: rgb(244, 226, 0); stroke: rgb(113, 6, 6);" cx="269.597" cy="340.775" rx="7.199" ry="6.83"/>
<path d="M 333.605 511.43 L 380.13 561.792 L 287.079 561.792 L 287.447 561.394 L 218.49 561.394 L 219.155 560.674 L 146.064 560.674 L 192.59 510.312 L 229.135 549.871 L 265.016 511.032 L 299.494 548.353 L 333.605 511.43 Z" style="stroke-width: 3px; fill: rgb(255, 149, 149); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999926, 0.012141, -0.012141, 0.999926, 0, 0)"/>
<animateMotion path="M 0 0 L -0.922 16.787 L -0.419 -0.652" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.425727; 1" keyPoints="0; 0.425727; 1" repeatCount="indefinite"/>
</g>
<g transform="matrix(1, 0, 0, 1, -1, 0)">
<path d="M 257.351 113.454 C 294.535 143.721 286.007 223.616 258.543 246.503 C 231.078 269.389 77.998 351.224 87.05 339.32 C 92.817 331.736 112.133 177.68 123.883 136.898 C 135.633 96.117 220.168 83.19 257.351 113.454 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 170.96px 215.66px;" transform="matrix(0.999859, 0.016815, -0.016815, 0.999859, 0, 0)"/>
<path d="M 453.793 329.374 C 490.977 299.107 482.449 219.212 454.985 196.325 C 427.52 173.439 274.44 91.604 283.492 103.508 C 289.259 111.092 308.575 265.148 320.325 305.93 C 332.075 346.711 416.61 359.638 453.793 329.374 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 367.402px 227.168px;" transform="matrix(-0.999859, 0.016815, -0.016815, -0.999859, -0.000069, 0.000015)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);" cx="272.328" cy="238.394" rx="96.099" ry="86.543"/>
<path d="M 253.41 195.871 C 219.329 213.067 96.21 224.326 112.025 212.031 C 127.84 199.736 167.873 115.935 192.776 94.298 C 214.041 75.822 246.953 83.073 267.168 95.982 C 287.432 82.027 329.28 67.783 343.281 93.156 C 363.7 130.162 426.754 207.435 425.111 213.587 C 423.468 219.739 316.728 211.925 282.647 194.729 C 277.544 192.154 272.89 189.142 268.721 185.788 C 264.206 189.603 259.086 193.007 253.41 195.871 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26);"/>
<path d="M 225.149 -245.659 Q 243.032 -273.87 260.914 -245.659 L 260.914 -245.659 Q 278.796 -217.448 243.032 -217.448 L 243.032 -217.448 Q 207.267 -217.448 225.149 -245.659 Z" bx:shape="triangle 207.267 -273.87 71.529 56.422 0.5 0.5 1@c4aab48d" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="234.022" cy="231.651" rx="7.917" ry="10.647"/>
<path d="M 284.119 -244.989 Q 302.002 -273.2 319.884 -244.989 L 319.884 -244.989 Q 337.766 -216.778 302.002 -216.778 L 302.002 -216.778 Q 266.237 -216.778 284.119 -244.989 Z" bx:shape="triangle 266.237 -273.2 71.529 56.422 0.5 0.5 1@50afb6eb" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="292.992" cy="230.974" rx="7.917" ry="10.647"/>
<path d="M 291.082 281.5 C 291.082 286.042 281.815 294.169 270.809 294.169 C 259.802 294.169 251.223 286.042 251.223 281.5 C 251.223 276.958 260.489 283.056 271.496 283.056 C 282.503 283.056 291.082 276.958 291.082 281.5 Z" style="stroke-width: 3px; stroke: rgb(0, 0, 0);"/>
<animateMotion path="M 0 0 L 0.91 17.861 L 1.01 0.028" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.486342; 1" keyPoints="0; 0.486342; 1" repeatCount="indefinite"/>
</g>
</svg>`; // Final NPC for this level
// NPC DATA (Phase index corresponds to MAP_SVG index)
// Multiplicación/Repetición de personajes para llenar 7 fases (0-6)
const NPC_DATA = {
0: [
{ char_id: 'CHAR_1_BigBot', name: 'Big Bot', svg_content: CHAR_SVG_1, initial_x: 200, dialogue: ["Big Bot: ACCESS DENIED. INITIATE DEFENSE PROTOCOL.", "Big Bot: All intruders must be contained and dismantled."] },
{ char_id: 'CHAR_2_Guardian', name: 'Guardian', svg_content: CHAR_SVG_2, initial_x: 550, dialogue: ["Guardian: Sector 1 is secured. Proceed only if authorized.", "Guardian: The Castle's defenses are layered and complex."] }
],
1: [
{ char_id: 'CHAR_3_SawMan', name: 'Saw Man', svg_content: CHAR_SVG_3, initial_x: 400, dialogue: ["Saw Man: *Whirring saw sounds*. Unauthorized presence detected.", "Saw Man: I am programmed for demolition. Prepare to be optimized."] },
{ char_id: 'CHAR_4_TeleBot', name: 'TeleBot', svg_content: CHAR_SVG_4, initial_x: 600, dialogue: ["TeleBot: Beep-boop. Spatial coordinates scrambled. You are lost.", "TeleBot: Escape velocity calculated at 0.0% probability."] }
],
2: [
{ char_id: 'CHAR_5_Vigilant', name: 'Vigilant Bot', svg_content: CHAR_SVG_5, initial_x: 250, dialogue: ["Vigilant Bot: Scanning area. Energy signature matches a low-threat organic.", "Vigilant Bot: Remain still. Resistance is mechanically illogical."] }
],
3: [
{ char_id: 'CHAR_2_Guardian_R2', name: 'Guardian', svg_content: CHAR_SVG_2, initial_x: 500, dialogue: ["Guardian: Alert! Reinforcements deployed. You cannot bypass this sector.", "Guardian: We protect the Hexagon Core!"] },
{ char_id: 'CHAR_1_BigBot_R2', name: 'Big Bot', svg_content: CHAR_SVG_1, initial_x: 150, dialogue: ["Big Bot: ERROR. TARGET ACQUISITION LOST. RECALIBRATING.", "Big Bot: The Castle's security cannot fail. Resistance is futile."] }
],
4: [
{ char_id: 'CHAR_4_TeleBot_R2', name: 'TeleBot', svg_content: CHAR_SVG_4, initial_x: 350, dialogue: ["TeleBot: Warning: Security level elevated to critical.", "TeleBot: The next passage leads directly to the core chamber."] },
{ char_id: 'CHAR_3_SawMan_R2', name: 'Saw Man', svg_content: CHAR_SVG_3, initial_x: 650, dialogue: ["Saw Man: *Loud grating noise*. Final warning. Turn back now.", "Saw Man: My final maintenance check indicates... I must stop you."] }
],
5: [
{ char_id: 'CHAR_5_Vigilant_R2', name: 'Vigilant Bot', svg_content: CHAR_SVG_5, initial_x: 450, dialogue: ["Vigilant Bot: Only one checkpoint remains. You are almost at the Hexagon.", "Vigilant Bot: Proceed with caution. The final defense is autonomous."] }
],
6: [
{ char_id: 'CHAR_2_Guardian_R3', name: 'Guardian', svg_content: CHAR_SVG_2, initial_x: 200, dialogue: ["Guardian: Final defense layer breached. Only the Hexagon Fairy remains.", "Guardian: Farewell, intruder. I must now self-destruct."] },
{ char_id: 'CHAR_5_Vigilant_R3', name: 'Vigilant Bot', svg_content: CHAR_SVG_5, initial_x: 600, dialogue: ["Vigilant Bot: Scanning... You are... inevitable.", "Vigilant Bot: The Castle Lands are yours."] }
],
7: { char_id: 'HEXAGON_FAIRY', name: 'Hexagon Fairy', svg_content: HEXAGON_FAIRY_SVG_CONTENT, x: 650, y: 250, scale: 0.3, final_npc: true, dialogue: ["Hexagon Fairy: You have surpassed the final robotic defenses.", "Hexagon Fairy: The Castle Lands accept your dominance over the machine.", "Hexagon Fairy: Castle Lands victory! Your adventure in Drawaria is complete!"] },
};
const MAX_TRANSITIONS = 7; // 7 transitions (Map 1 -> 2 -> ... -> 8). Total 8 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Castle Sky Gradient (Overcast Gray/Futuristic Dusk) -->
<linearGradient id="castleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Castle Stone/Wall Gradient (Weathered Gray) -->
<linearGradient id="stoneWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 130);stop-opacity:1" />
</linearGradient>
<!-- Foreground Battlements/Platform -->
<linearGradient id="battlementPlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 80, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(110, 110, 110);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Overcast Gray) -->
<rect x="0" y="0" width="800" height="500" fill="url(#castleSkyGradient)" />
<!-- 2. Distant Castle Walls/Towers (Main Background) -->
<g fill="url(#stoneWallGradient)" stroke="rgb(70, 70, 70)" stroke-width="1" opacity="0.8">
<!-- Main Wall -->
<rect x="100" y="200" width="600" height="200" />
<!-- Tower 1 (Left) -->
<rect x="100" y="100" width="80" height="100" />
<!-- Tower 2 (Right) -->
<rect x="620" y="150" width="80" height="50" />
<!-- Battlements Detail -->
<rect x="100" y="200" width="600" height="20" fill="rgb(150, 150, 150)" />
</g>
<!-- 3. Foreground Wall/Platform (The player's immediate area) -->
<rect x="0" y="400" width="800" height="50" fill="url(#battlementPlatformGradient)" />
<rect x="0" y="450" width="800" height="50" fill="rgb(90, 90, 90)" />
<!-- 4. Foreground Battlements (Simulating the top edge from the reference image) -->
<g fill="rgb(70, 70, 70)">
<rect x="50" y="400" width="20" height="50" />
<rect x="100" y="400" width="20" height="50" />
<rect x="700" y="400" width="20" height="50" />
<rect x="750" y="400" width="20" height="50" />
</g>
<!-- 5. Windows/Openings (Small dark details) -->
<g fill="rgb(50, 50, 50)" opacity="0.7">
<rect x="120" y="250" width="30" height="40" />
<rect x="650" y="280" width="20" height="30" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Castle Sky Gradient (Consistent) -->
<linearGradient id="castleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Castle Stone/Wall Gradient (Consistent) -->
<linearGradient id="stoneWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 130);stop-opacity:1" />
</linearGradient>
<!-- Moat/Energy Field Color -->
<linearGradient id="moatEnergyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 50, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 20, 50);stop-opacity:1" />
</linearGradient>
<!-- Foreground Metal Platform -->
<linearGradient id="metalPlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(130, 130, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#castleSkyGradient)" />
<!-- 2. Distant Castle Walls (Consistent) -->
<g fill="url(#stoneWallGradient)" stroke="rgb(70, 70, 70)" stroke-width="1" opacity="0.8">
<rect x="100" y="200" width="600" height="200" />
<rect x="100" y="100" width="80" height="100" />
<rect x="620" y="150" width="80" height="50" />
<rect x="100" y="200" width="600" height="20" fill="rgb(150, 150, 150)" />
</g>
<!-- 3. Bridge/Moat Opening -->
<rect x="300" y="450" width="200" height="50" fill="url(#moatEnergyGradient)" />
<rect x="300" y="400" width="200" height="50" fill="url(#moatEnergyGradient)" />
<!-- 4. Foreground Platform (Divided by the moat) -->
<rect x="0" y="450" width="300" height="50" fill="url(#metalPlatformGradient)" />
<rect x="500" y="450" width="300" height="50" fill="url(#metalPlatformGradient)" />
<!-- 5. Moat Energy Glow -->
<rect x="300" y="440" width="200" height="10" fill="rgb(0, 200, 255)" opacity="0.5" />
<!-- 6. Chains/Suspension Wires (Visual detail for the bridge opening) -->
<g stroke="rgb(100, 100, 100)" stroke-width="3" opacity="0.7" fill="none">
<line x1="320" y1="400" x2="350" y2="200" />
<line x1="480" y1="400" x2="450" y2="200" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Castle Sky Gradient (Consistent) -->
<linearGradient id="castleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Distant Ground/Shadow (Deep void below the platform) -->
<stop id="voidShadow" stop-color="rgb(20, 20, 30)" />
<!-- Foreground Grate/Metal Platform Gradient -->
<linearGradient id="gratePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(170, 170, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(190, 190, 200);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#castleSkyGradient)" />
<!-- 2. Distant Castle Walls (Far below and in the distance) -->
<rect x="50" y="400" width="700" height="100" fill="rgb(100, 100, 100)" opacity="0.6"/>
<!-- 3. Deep Void/Drop-off (Implied endless drop below the player) -->
<rect x="0" y="450" width="800" height="50" fill="url(#voidShadow)" />
<!-- 4. Foreground Platform (Elevated Metallic Grate/Walkway) -->
<rect x="0" y="400" width="800" height="50" fill="url(#gratePlatformGradient)" />
<!-- 5. Grate Texture (Dark lines on the floor) -->
<g stroke="rgb(130, 130, 140)" stroke-width="2" opacity="0.8">
<line x1="0" y1="410" x2="800" y2="410" />
<line x1="0" y1="430" x2="800" y2="430" />
<line x1="50" y1="400" x2="50" y2="450" />
<line x1="150" y1="400" x2="150" y2="450" />
<line x1="750" y1="400" x2="750" y2="450" />
</g>
<!-- 6. Support Beams/Columns (Extending into the void) -->
<g fill="rgb(110, 110, 120)">
<rect x="100" y="450" width="20" height="50" />
<rect x="700" y="450" width="20" height="50" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 (Now the bottom of the visible platform) -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Chamber Gradient (Muted, industrial gray) -->
<linearGradient id="chamberSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 110);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 140);stop-opacity:1" />
</linearGradient>
<!-- Industrial Floor Gradient (Darker metallic platform) -->
<linearGradient id="industrialFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(60, 60, 70);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 80, 90);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Chamber Interior/Sky (Industrial Gray) -->
<rect x="0" y="0" width="800" height="500" fill="url(#chamberSkyGradient)" />
<!-- 2. Gears/Saw Blades (Background detail, rotating effect) -->
<g transform="translate(150, 300) rotate(0)">
<circle cx="0" cy="0" r="80" fill="rgb(150, 150, 150)" stroke="rgb(100, 100, 100)" stroke-width="5" />
<rect x="-10" y="-80" width="20" height="160" fill="rgb(100, 100, 100)" />
<rect x="-80" y="-10" width="160" height="20" fill="rgb(100, 100, 100)" />
<!-- Rotation Animation -->
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="8s" repeatCount="indefinite" />
</g>
<g transform="translate(650, 200) rotate(0) scale(0.7)">
<circle cx="0" cy="0" r="70" fill="rgb(180, 180, 180)" stroke="rgb(100, 100, 100)" stroke-width="5" />
<rect x="-70" y="-10" width="140" height="20" fill="rgb(100, 100, 100)" />
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="5s" repeatCount="indefinite" />
</g>
<!-- 3. Foreground Platform (Industrial Metal) -->
<rect x="0" y="450" width="800" height="50" fill="url(#industrialFloorGradient)" />
<!-- 4. Warning Lights/Energy Beams (Red/Blue details) -->
<g fill="rgb(255, 0, 0)" opacity="0.6">
<rect x="0" y="440" width="20" height="10" />
<rect x="780" y="440" width="20" height="10" />
</g>
<!-- 5. Ventilation/Pipework (Top detail) -->
<rect x="0" y="100" width="800" height="30" fill="rgb(80, 80, 90)" />
<rect x="50" y="130" width="10" height="20" fill="rgb(150, 150, 160)" />
<rect x="740" y="130" width="10" height="20" fill="rgb(150, 150, 160)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Chamber Gradient (Soft blue/white futuristic glow) -->
<linearGradient id="teleportChamberGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(180, 200, 220);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
<!-- Data Grid Floor Gradient (Bright, clean metal) -->
<linearGradient id="dataGridFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(190, 210, 230);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Chamber Interior/Sky (Futuristic Glow) -->
<rect x="0" y="0" width="800" height="500" fill="url(#teleportChamberGradient)" />
<!-- 2. Data/Control Panel (Background structure) -->
<rect x="100" y="150" width="600" height="200" fill="rgb(100, 150, 200)" stroke="rgb(50, 100, 150)" stroke-width="5" />
<g fill="rgb(0, 255, 255)" opacity="0.6">
<rect x="150" y="180" width="100" height="140" />
<rect x="550" y="180" width="100" height="140" />
</g>
<!-- 3. Foreground Platform (Data Grid Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#dataGridFloorGradient)" />
<!-- 4. Grid Lines (Floor detail) -->
<g stroke="rgb(150, 170, 190)" stroke-width="2" opacity="0.7" fill="none">
<line x1="0" y1="460" x2="800" y2="460" />
<line x1="0" y1="480" x2="800" y2="480" />
<line x1="200" y1="450" x2="200" y2="500" />
<line x1="600" y1="450" x2="600" y2="500" />
</g>
<!-- 5. Teleport Pad/Zone (Center floor glow) -->
<ellipse cx="400" cy="460" rx="100" ry="20" fill="rgb(0, 255, 255)" opacity="0.4" />
<!-- 6. Overhead Lights (Ceiling detail) -->
<g fill="rgb(0, 200, 200)" opacity="0.8">
<rect x="10" y="10" width="50" height="10" />
<rect x="740" y="10" width="50" height="10" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Castle Sky Gradient (Overcast Gray) -->
<linearGradient id="castleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Foreground Wall/Metal Gradient -->
<linearGradient id="metalWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 130);stop-opacity:1" />
</linearGradient>
<!-- Distant Castle Stone -->
<linearGradient id="distantCastleStone" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 120, 130);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 140, 150);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky -->
<rect x="0" y="0" width="800" height="500" fill="url(#castleSkyGradient)" />
<!-- 2. Distant Castle Walls/Grounds (Simplified view) -->
<rect x="0" y="300" width="800" height="150" fill="rgb(100, 100, 100)" opacity="0.6"/>
<!-- 3. Grand Surveillance Tower (Right Background) -->
<g transform="translate(650, 450)">
<!-- Tower Base -->
<rect x="-70" y="-300" width="140" height="300" fill="url(#distantCastleStone)" stroke="rgb(80, 80, 80)" stroke-width="2" />
<!-- Turret Top -->
<rect x="-70" y="-300" width="140" height="20" fill="rgb(80, 80, 80)" />
<!-- Surveillance Pod (Blue/Cyan Light) -->
<circle cx="0" cy="-250" r="40" fill="rgb(0, 200, 255)" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.5;0.7" dur="3s" repeatCount="indefinite" />
</circle>
</g>
<!-- 4. Foreground Platform (Wall Exterior) -->
<rect x="0" y="450" width="800" height="50" fill="url(#metalWallGradient)" />
<!-- 5. Railings/Grate Texture (Metal details on the platform) -->
<g stroke="rgb(60, 60, 60)" stroke-width="3" fill="none">
<line x1="0" y1="450" x2="800" y2="450" />
<line x1="0" y1="450" x2="0" y2="400" />
<line x1="800" y1="450" x2="800" y2="400" />
</g>
<!-- 6. Searchlight/Laser Effect (Coming from the tower) -->
<path d="M650 150 L300 450 L350 450 Z" fill="rgb(255, 255, 0)" opacity="0.15" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Hall Gradient (Rich, dark metallic) -->
<linearGradient id="hallInteriorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(50, 50, 70);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(70, 70, 90);stop-opacity:1" />
</linearGradient>
<!-- Polished Floor Gradient (Reflective Black/Dark Gray) -->
<linearGradient id="polishedFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(40, 40, 50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(60, 60, 70);stop-opacity:1" />
</linearGradient>
<!-- Pedestal Stone/Metal -->
<stop id="pedestalMetal" stop-color="rgb(130, 130, 150)" />
</defs>
<!-- 1. Interior Hall Walls/Ceiling -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallInteriorGradient)" />
<!-- 2. Display Niches/Recesses (Background detail) -->
<g fill="rgb(30, 30, 40)" opacity="0.9">
<rect x="150" y="100" width="150" height="300" rx="10" ry="10" />
<rect x="500" y="100" width="150" height="300" rx="10" ry="10" />
</g>
<!-- 3. Foreground Platform (Polished Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#polishedFloorGradient)" />
<!-- 4. Pedestals/Display Bases (Obstacles/NPC spots) -->
<g fill="url(#pedestalMetal)" stroke="rgb(90, 90, 100)" stroke-width="2">
<rect x="50" y="400" width="100" height="50" />
<rect x="650" y="400" width="100" height="50" />
</g>
<!-- 5. Weapon Display Silhouettes (Small detail inside the niches) -->
<g fill="rgb(180, 180, 180)" opacity="0.6">
<rect x="200" y="250" width="10" height="50" transform="rotate(15 205 275)" />
<rect x="590" y="200" width="10" height="70" transform="rotate(-10 595 235)" />
</g>
<!-- 6. Floor Reflection (Subtle white line on the polished floor) -->
<path d="M0 450 Q400 448, 800 450" stroke="white" stroke-width="1" opacity="0.2" fill="none" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Castle Sky Gradient (Overcast Gray/Futuristic Dusk) -->
<linearGradient id="castleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Castle Stone/Wall Gradient (Weathered Gray) -->
<linearGradient id="stoneWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 100);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 130);stop-opacity:1" />
</linearGradient>
<!-- Foreground Battlements/Platform -->
<linearGradient id="battlementPlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 80, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(110, 110, 110);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Sky (Overcast Gray) -->
<rect x="0" y="0" width="800" height="500" fill="url(#castleSkyGradient)" />
<!-- 2. Distant Castle Walls/Towers (Main Background) -->
<g fill="url(#stoneWallGradient)" stroke="rgb(70, 70, 70)" stroke-width="1" opacity="0.8">
<!-- Main Wall -->
<rect x="100" y="200" width="600" height="200" />
<!-- Tower 1 (Left) -->
<rect x="100" y="100" width="80" height="100" />
<!-- Tower 2 (Right) -->
<rect x="620" y="150" width="80" height="50" />
<!-- Battlements Detail -->
<rect x="100" y="200" width="600" height="20" fill="rgb(150, 150, 150)" />
</g>
<!-- 3. Foreground Wall/Platform (The player's immediate area) -->
<rect x="0" y="400" width="800" height="50" fill="url(#battlementPlatformGradient)" />
<rect x="0" y="450" width="800" height="50" fill="rgb(90, 90, 90)" />
<!-- 4. Foreground Battlements (Simulating the top edge from the reference image) -->
<g fill="rgb(70, 70, 70)">
<rect x="50" y="400" width="20" height="50" />
<rect x="100" y="400" width="20" height="50" />
<rect x="700" y="400" width="20" height="50" />
<rect x="750" y="400" width="20" height="50" />
</g>
<!-- 5. Windows/Openings (Small dark details) -->
<g fill="rgb(50, 50, 50)" opacity="0.7">
<rect x="120" y="250" width="30" height="40" />
<rect x="650" y="280" width="20" height="30" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #7f8c8d; /* Metal/Robot Gray */
color: white;
border: 2px solid #ecf0f1; /* White/Clean Border */
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(236, 240, 241, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA (de la solicitud anterior) ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al document.body ***
document.body.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Castle Lands dialogue box (metallic/futuristic theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(44, 62, 80, 0.9); /* Dark Blue/Metal */
border: 5px solid #bdc3c7; /* Polished Silver Border */
box-shadow: 0 0 20px rgba(189, 195, 199, 0.7);
border-radius: 10px;
font-family: 'Courier New', monospace;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Hexagon Fairy is only NPC in phase 7)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:#bdc3c7; font-size:36px; text-align:center; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #bdc3c7;">
LEVEL COMPLETE!<br>The Castle Lands are under your command.
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #34495e;
color: white;
border: 4px solid #bdc3c7;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(189, 195, 199, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics (Robotic Precision)
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_8)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel9 = function() {
// ==UserScript==
// @name Drawaria Game Level 9 - Inside the Halls
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 9: Inside the Halls. A reflective journey through the castle, meeting the Fairies and preparing for the final ascent.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "Inside the Halls";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-inside-halls.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220;
const LEVEL_START_X = 50;
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100;
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Character SVG Placeholders
const FAIRY_SVG_1 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 12.246603, -80.738275)" style="pointer-events: none;">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g>
<path d="M 357.456 474.35 L 169.798 474.35 L 179.994 427.741 C 173.843 418.353 170.367 407.684 170.367 396.37 C 170.367 358.775 208.751 328.298 256.101 328.298 C 303.451 328.298 341.835 358.775 341.835 396.37 C 341.835 406.348 339.131 415.824 334.274 424.363 L 357.456 474.35 Z" style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="249.111" cy="309.165" rx="61.449" ry="50.042"/>
<path style="stroke-width: 3px; fill: rgb(140, 216, 46); stroke: rgb(7, 54, 30);" d="M 208.923 273.185 C 204.353 262.775 286.958 260.31 293.765 275.814 C 295.137 303.531 210.725 309.586 208.923 273.185 Z"/>
<path d="M 244.194 386.264 C 244.194 392.202 239.27 397.014 233.195 397.014 C 227.121 397.014 222.196 392.202 222.196 386.264 C 222.196 385.411 222.298 384.579 222.49 383.783 L 152.338 314.933 L 164.934 296.769 L 236.175 366.687 C 236.991 366.353 237.887 366.168 238.826 366.168 C 242.658 366.168 245.766 369.238 245.766 373.024 C 245.766 375.839 244.045 378.261 241.585 379.314 C 243.212 381.189 244.194 383.614 244.194 386.264 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="163.009" cy="299.337" rx="26.861" ry="22.813"/>
<path d="M 340.7 310.81 C 340.7 304.745 336.086 299.829 330.394 299.829 C 324.702 299.829 320.087 304.745 320.087 310.81 C 320.087 311.683 320.183 312.532 320.364 313.346 L 254.628 383.684 L 266.431 402.241 L 333.186 330.811 C 333.951 331.152 334.79 331.34 335.67 331.34 C 339.261 331.34 342.173 328.205 342.173 324.338 C 342.173 321.461 340.561 318.987 338.255 317.911 C 339.78 315.996 340.7 313.517 340.7 310.81 Z" style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.00007, -0.000019)"/>
<ellipse style="stroke-width: 3px; fill: rgb(145, 216, 129); stroke: rgb(7, 54, 30);" cx="329.693" cy="300.073" rx="24.285" ry="23.549"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 229.596 274.003 L 224.955 293.497 L 229.596 274.003 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 252.958 276.788 L 252.803 298.138 L 252.958 276.788 Z"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30); transform-box: fill-box; transform-origin: 50% 50%;" d="M 278.175 293.497 L 273.534 274.003 L 278.175 293.497 Z" transform="matrix(-1, 0, 0, -1, -0.000038, 0.000026)"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 175.614 451.586 L 346.777 452.031"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 195.518 473.502 L 196.186 451.689"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 239.403 473.946 L 238.838 451.895"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 323.659 473.947 L 322.991 452.134"/>
<path style="fill: rgb(216, 216, 216); stroke-width: 3px; stroke: rgb(7, 54, 30);" d="M 277.891 473.605 L 278.559 451.792"/>
<animateMotion path="M 0 0 L -0.279 12.176 L 0.313 0" calcMode="linear" dur="4s" fill="freeze" keyTimes="0; 0.486169; 1" keyPoints="0; 0.486169; 1" repeatCount="indefinite"/>
</g>
<g>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="144.462" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);" cx="356.516" cy="155.856" rx="104.931" ry="104.403"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 244, 235); stroke: rgb(7, 54, 30);" cx="252.912" cy="203.076" rx="91.621" ry="73.223"/>
<path d="M 396.229 158.035 C 405.719 177.944 346.805 178.014 303.884 167.892 C 286.095 163.697 262.807 158.838 248.78 148.841 C 235.384 161.203 209.02 169.799 198.586 172.453 C 156.702 183.108 97.623 177.112 106.164 152.458 C 114.705 127.804 159.162 71.113 198.586 71.113 C 218.155 71.113 235.885 76.796 248.78 85.999 C 263.204 76.796 283.037 71.113 304.926 71.113 C 349.024 71.113 386.739 138.126 396.229 158.035 Z" style="stroke-width: 3px; fill: rgb(57, 216, 136); stroke: rgb(7, 54, 30);"/>
<path d="M 204.525 -212.249 Q 220.532 -237.27 236.538 -212.249 L 236.538 -212.249 Q 252.544 -187.228 220.532 -187.228 L 220.532 -187.228 Q 188.519 -187.228 204.525 -212.249 Z" bx:shape="triangle 188.519 -237.27 64.025 50.042 0.5 0.5 1@3efc720f" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 268.182 -212.619 Q 284.189 -237.64 300.195 -212.619 L 300.195 -212.619 Q 316.201 -187.598 284.189 -187.598 L 284.189 -187.598 Q 252.176 -187.598 268.182 -212.619 Z" bx:shape="triangle 252.176 -237.64 64.025 50.042 0.5 0.5 1@c050bfcc" style="stroke-width: 3px; stroke: rgb(7, 54, 30);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 269.47 240.574 C 269.47 245.248 274.733 251.245 252.176 251.245 C 229.619 251.245 231.203 244.512 231.203 239.838 C 231.203 235.164 230.355 241.678 252.912 241.678 C 275.469 241.678 269.47 235.9 269.47 240.574 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="213.419" cy="199.581" rx="8.095" ry="9.199"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(7, 54, 30);" cx="278.18" cy="200.685" rx="8.095" ry="9.199"/>
<path d="M 239.08 172.175 C 239.08 174.613 230.998 172.75 220.634 172.75 C 210.27 172.75 201.548 174.613 201.548 172.175 C 201.548 169.737 209.95 167.76 220.314 167.76 C 230.678 167.76 239.08 169.737 239.08 172.175 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<path d="M 304.209 172.911 C 304.209 175.349 296.127 173.486 285.763 173.486 C 275.399 173.486 266.677 175.349 266.677 172.911 C 266.677 170.473 275.079 168.496 285.443 168.496 C 295.807 168.496 304.209 170.473 304.209 172.911 Z" style="stroke-width: 3px; stroke: rgb(7, 54, 30);"/>
<animateMotion path="M 0 0 L -0.205 20.066 L -0.001 -0.497" calcMode="linear" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.488361; 1" keyPoints="0; 0.488361; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const FAIRY_SVG_2 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<title/>
<g id="Composition_445b829fca0b4132b3d29b0a3ad1fc42">
<g id="Layer_624346cd05d646f7a3f94e5fac2a1f6e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_62250bd6ab7a4da19142a88de5b1f690" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_289871e692ec49548e910714011b29d5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_605d6403a529440bad1ca6279a6fbffb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0faf33997edd4f84a47e7fc145bdca2a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_0d1afe9409b44391bc4da60c4c40410a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Layer_f3b30ec9f300423eb47305caf9da22b9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_578939f9ef5948a99969d70000425c72" opacity="1">
<g id="Group_3546f761a4bc4a4fa3f2648a6ec0dab9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4931839c20154578afe4254fa9a3f272" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_57e8a96570064a13b5821bf70e0482cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d263dd0743449e1bbed711b422bece5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_60f642c4c27c4987866e82f8de63a28d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b7876e756884ac28a05d4830f8e2767" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd0ceb27508e4ef7b40ed67c059ec48a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d0f537ddf8c2492592085fc466e5c589" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0910e13e62a3425ca744f9366b75b1ff" opacity="1" transform="matrix(-0.177927, 0.984044, -0.984044, -0.177927, 232.909, 58.6668)">
<g id="Group_70b6aa5054fa418bb18a8a530275ab8a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6aad8811b5a34308b46c779638ca5883" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ada09a9e3957429ea8ad2b2e4863a825" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_afe42cc27815441b9b1b80fb9c05599f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_407c2d8105634716b3cf87b6c1d19586" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_92c3038cb3ce4b7d87316d9bbc969208" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 91.949,36.212 C 91.949,36.212 234.759,30.017 234.759,30.017 234.759,30.017 238.941,146.341 238.941,146.341 244.172,136.214 96.782,121.014 92.078,130.119 92.078,130.119 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 91.949,36.212 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_37337e3c3da24a1c9cebe7ba9dfb7877" opacity="1" transform="matrix(0.177927, 0.984044, -0.984044, 0.177927, 444.508, -116.305)">
<g id="Group_ca67085633b44936bad142cac42e003f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cce31530b92141fcafa11267756a6346" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_ad2c1fe7d3c446fd8d11f2ed1e2887dc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_9f262dc44b3e491b82062f66875c4d3f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4bec6e9f6bfc45dfbcb9d017286e41c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2a4fd8529faa4ee8bbcfe77c5f352e23" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.969,261.288 C 216.969,261.288 359.779,267.483 359.779,267.483 359.779,267.483 363.961,151.159 363.961,151.159 369.192,161.286 221.802,176.486 217.098,167.381 217.098,167.381 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 216.969,261.288 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(416.363 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(-1.04032 1)">
<g transform="translate(0 0)">
<g id="Group_af8442450fe743d0881a014d1638901a" opacity="1">
<g id="Group_5314e37a1b974609bbf566cf63070c37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6e702614cd9042ba81102e880afef873" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e0a2a5017a714cb9b03fea6ce45f81dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_12768e2885b945e0918396d7b18ca741" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c2ada61ce854298b97d297e069de3df" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b8b9b2d35195470bb581bac9ced98a15" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_565e2f10da9948ed8f59e069558ab6b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_072c2b9ab3b74bb0b0cf52af0644fc16" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_eadcc05ee44f4a9ea6d3dbd958fd8a18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe4af599a66a4a49a0281a0f413b480d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d5b8a87626d046c891143992f8dbeb35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7bf696f18809465a934fe9d1eda181ba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f353b22e446b483ebce3366134bca565" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_efaf09ce5ac64c13b78f1960bd9ee744" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_0aeb68a87203407e9d20d3c488ae7464" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
<g id="Group_34668add9f7d408f8551b29402fd266e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd3b65c846714f1d9791a4f6c0bb0424" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_93132806e00e4c7198417ffc4cb6212b" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 1.96048px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.856 -0.816 C 1.856 -0.816 1.631 16.315 1.631 16.315 C 1.631 16.315 1.937 -10.299 1.937 -10.299 C 1.937 -10.299 1.897 -6.9 1.897 -6.9 C 1.897 -6.9 1.651 5.975 1.651 5.975" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -5.24651)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_d67fd13048d54b26a92523e6fe67bb13" opacity="1">
<g id="Group_21f50d7af90f499c9dc2b7bc415d97bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_74e397143f07412cbce0eebd64898cde" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a3762da37fe6420f991b60b055ca6dfe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3f990a1c9e7438294c6bc3daff3c536" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3333000d975344ceac3d127aea89d5b6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c488e718a0c4663931da30fb2691cee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c754bc8df1954ac4a916915b9cc4b7d6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_29b60323f74b47a387fd64cb8590ebcd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a48dab89b7334706a2c54982808c8197" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7f63df9daa78450cb4ac1f6b6774ce7d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3530e59116a74432806fb1ba123a3285" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_27d16373aea74ab1b8f2809567766dc3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_94103e30fa964c94bc4a13e720e2a802" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_abb249dbca604c519c8004252594ad84" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_525022d7e07f41e2a1141072136b57ed" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 264.496,318.382 C 264.496,318.382 265.05,377.193 265.05,377.193 265.05,377.193 142.904,377.193 142.904,377.193 142.904,377.193 142.351,322.953 142.351,320.625 142.351,292.572 169.707,269.83 203.453,269.83 236.295,269.83 263.085,291.37 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 264.496,318.382 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_a0f94389490e42eca766562e07da8970" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3023467dd9734fba8fd5873fe124f4c1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fd5a78335da84dfd855583a22a71f17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_1120be8b5a8d4514aab460416f20c7e2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
<g id="Group_6623dd2ea3b94f15b55a98f52c7a49e0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9ae687bd935a4795aebfe24827c12131" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_a7f4031c54bf428d87ad39b9c43447ea" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="142.927" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_58f02105999346ffa661722acce66b32" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9271c5f202714724b85b4c7b54a80324" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1e37efe1f748432496121f11c575dfc8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f6ef2aa16b114ecab82bd726f6138676" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
<g id="Group_2a742b4c68b843d99c5ba6e5a3c9120d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779268157858473cadd4d6dad7b87a2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2fab7e398ab54dabbf7f731d97e6dc87" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="175.488" y="351.634"/>
</g>
</g>
</g>
</g>
<g id="Group_c152098ce4ea4170bb3d0561a3aa30a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dd47e2b04ce5435a8e472817cb2cf756" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_22c50ae32992475c8e98eea626334e24" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_2d0478506d91449187b26e68f60f2960" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
<g id="Group_4dc75f562f0f44afb654dc039c587cba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b1f10a474051419692ff940fee23dd2c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_cf5303a5bb574f50afa3825adad9cafa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="38.862" x="203.059" y="351.633"/>
</g>
</g>
</g>
</g>
<g id="Group_01dc3c3d42744ca4ba0d85637dbe8376" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3c61d0bbc86f4c64af10fe69a878df02" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a7c005ccc54d4d84a4fbdbfb4caa5803" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_082a86ce7eb844519e2202dc875e7613" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
<g id="Group_a35aaf40939746b3aa59203b775f279a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6fcc44c99614402699246237c321e4a1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6942bc714e494dd69af43173bdb0a952" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="25.208" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="34.923" x="230.105" y="351.632"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.161111; 0.355556; 0.666667" path="M 0,-5.24651 C 0,-5.24651 0,4.19721 0,4.19721 0,4.19721 0,-2.0986 0,-2.0986 0,-2.0986 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 -0.815729)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_fea3ae62132741188596da54dce89ef2" opacity="1">
<g id="Group_ae46728d8ede4f0891f79e5ae1d9fe60" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_895fdefe1d8d4898baed53e0e0effc14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_946f9b61e52749e1955b1e98946ab893" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f9905f6dfa72444f96e86e9ed95f4f63" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_df22397efc3349b68397472c6af5f7f2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94e16cb3c3604988be33b3f048a4edb3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3cebc3bf87c46bd9b23f509465c9671" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_848f66f0333b4f80adb1dcf2184da5c3" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_16e607232e40425285f33a660febf23d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4b0c789323dd4d868a6ca258481c3692" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5c975c22c5be43908dcd08317c9c6a5b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_52b9e3ff5c0744ffaba9129802aeac78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_9eb061b8adb146cf82edbccf56d19095" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_802dcfe8e719448794dd64699c5ddb52" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_fc624ae2c6a14ca0af745e2024110e37" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_bbb436121f1c4edb9d0cbdbb57ab5975" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_96937179d9c64f739c28e922ad427e0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_fc7db8580e784591a9d17af18d39e642" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 175.942,265.148 C 175.942,265.148 171.245,275.724 163.373,275.724 156.718,275.726 145.424,271.674 142.393,267.402 138.792,272.694 132.102,276.25 124.447,276.249 118.501,276.249 113.139,274.106 109.355,270.669 104.703,277.071 96.641,281.305 87.475,281.305 73.068,281.305 61.391,270.848 61.391,257.949 61.391,252.961 70.002,225.442 70.002,225.442 70.002,225.442 179.907,245.669 179.907,245.669 179.907,245.669 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 175.942,265.148 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.388889; 0.700000; 0.705556" path="M 1.326 -0.551 C 1.326 -0.551 1.631 16.315 1.631 16.315 C 1.631 16.315 1.406 -10.564 1.406 -10.564 C 1.406 -10.564 1.101 -6.37 1.101 -6.37 C 1.101 -6.37 1.386 5.71 1.386 5.71" repeatCount="indefinite"/>
</g>
<g id="Group_31139b44f4a54ed0b254b48ed355b107" opacity="1" transform="matrix(1, 0, 0, 0.950946, 0.990442, 10.583)">
<g id="Group_085f214f43ca45db9264a50cca82398e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_179563955cc0441aa13c0b61e4d4cbdb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c411480c5474c8cbf7f9e2d3412d17d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_428d0a047dd04673a092df58788dd44e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f8fea14bc733433084925f346e69ec31" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4310ff126a45430dbf89f8459cc6103e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4c834c0193aa4a108b7d31be1504e976" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7c221ce162d44051955593b04e951f35" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ed41a6e8573c457080d161ed4f4751bd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d9b96792d4bf4db9b8d041636aaa9a0f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3019e453bde64354b02b5acbd9811f74" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_912aeef445ee4df2900c1962603c2e6a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
<g id="Group_b70cd452dde64b03a53a475ec1d40823" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_07d616537785432fb5953807910067e1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9198d846b8044b20988871940c043045" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 161.924,225.837 C 161.924,225.837 244.626,225.837 244.626,225.837 244.626,225.837 244.836,288.287 244.836,288.287 245.397,308.646 161.643,307.761 161.082,287.402 161.082,287.402 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 161.924,225.837 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2.05029px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="Group_07bf950fb5b744c08da1b602acce90f0" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 103.462, 0.097262)">
<g id="Group_773ac49d227d47aca3363b5015667a78" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_679d8fb26cd04228ae1dccf28c8d6003" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_bd3d28adbd8547dcac86548851a4f98d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
<g id="Group_acc78697a70d4a40a8b549253bfbb45a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b11e86ddd07d437f90a0c5ec7abbfda5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ed4ad324e01742af9949383f6b8445f4" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="29.325" x="57.947" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_257af3be2db5451a98050fb0d6feaf39" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 161.795, -0.014585)">
<g id="Group_25ecec9c5ecc445c823a47a76d6224c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_94ba71a35feb4cda85d74446fd7116cd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_af6483015cc9479790b8c22131f2ea72" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_9bb47d7862b54caa93b83c41537c9635" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d921cba171054c84a3f1808b8e459fe7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_2ea52e9465d54c08a559910df8d5abfa" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_b16201a6547b45e99fd4c4d8b5ee9e56" opacity="1" transform="matrix(0.999984, -0.005602, 0.005602, 0.999984, 135.47, 0.061733)">
<g id="Group_bf83fc0b3341442984cd6cce2dcecd19" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c3d6e18a5df041aca29a49d721224e64" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_56798b44691145f8a59f513c48ac8413" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
<g id="Group_409836a08cb5459aa9d0d0f643fd5c12" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c92d7d97dcb44812875c1b846fa1aca4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_da13152381f2499eb2f8f2e7bdbf0686" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="18.664" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;" width="27.709" x="54.753" y="225.535"/>
</g>
</g>
</g>
</g>
<g id="Group_cc623433226b40ddaef69231521dab81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7fd751bd13754d8f8cdb763d0491408a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_437c13ca93864f71b80723f533099a8d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#fee8d2" fill-opacity="1" id="Fill_937828450c04405cb5b24002364ceada" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f3fe49167d6f40448822a68c2beee7a8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b4db3b4ce592487facef052e458c8c0b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_afee68700f384c14957243cd80d4c469" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="207.088" cy="182.481" rx="57.198" ry="57.693" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_55e95fb7ee614601b8d9d6bc77ecc4aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3f93614f02324a56858a83b53f20ec18" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3b8018d9e2545cc9c493fdfe7c6fe81" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_66757b8e97d242d9bb17f261a9dc6a9c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_96d7c61b65ea4e9e82eebc58d985b225" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_a5c951f1776548a5b3ee96d6bf98f312" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_75459dbecf6e461da0939c2b91942f35" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 146.529,237.848 C 146.529,237.848 191.781,277.463 191.781,277.463 192.259,277.239 196.868,282.444 196.868,285.094 196.868,287.687 195.095,289.8 192.878,289.889 192.637,294.15 190.07,297.502 186.941,297.502 183.676,297.501 181.025,293.854 180.986,289.33 180.986,289.33 137.307,247.471 137.307,247.471 137.307,247.471 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 146.529,237.848 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_1cc2d6febaa64442ad9f57f6d2316ae8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_d932349903a04ba2a57176818cb9c5cb" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e8ade258977946b3a941a0279fe49ff2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_fcd55e49f8f543b485fe53795012c916" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_f29853f1642e466b8786f5df0921b7c6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0d04e2332d414ec98d3789f06b274a2e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c8b1b874176d440ebe70a0b4b29ddb2f" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 131.942,218.969 C 131.942,218.969 164.628,218.969 164.628,218.969 164.628,218.969 164.628,248.121 164.628,248.121 164.628,248.121 131.942,248.121 131.942,248.121 131.942,248.121 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 131.942,218.969 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_d712d75c75a546cc8cf8db4ff449423e" opacity="1" transform="matrix(-1, 0, 0, -1, 474.685, 531.463)">
<g id="Group_1c294b6e5c184912a4e38108286a79a9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2cb5d67cf44b471f96f1ed2cd1e15bdf" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_206e73005765431584268d3c903abd1d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_904216b925194138a71af571dd411cdc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6195333e77e3445a98657d886705e38d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_909d034755aa457996c394978b26a020" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 216.263,296.587 C 216.263,296.587 261.515,256.972 261.515,256.972 261.993,257.196 266.602,251.991 266.602,249.341 266.602,246.748 264.829,244.635 262.612,244.546 262.371,240.285 259.804,236.933 256.675,236.933 253.41,236.934 250.759,240.581 250.72,245.105 250.72,245.105 207.041,286.964 207.041,286.964 207.041,286.964 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 216.263,296.587 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_c47d0f843ffe43aaa964d3ba067fd74d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fe713c29db1b4f4ab5bdc86700a247be" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_051bcc3c9a8145b7b064c28b06c3ad13" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#58b0ff" fill-opacity="1" id="Fill_e352b4de5a2e4474b2252585fda10ef6" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_656efa98c79c4305b3ead9d5d74df8a4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7594c2aad9954880b586ce0eef9433fe" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_4cb973583a15459299f98566bc1358fe" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 245.259,219.853 C 245.259,219.853 276.472,219.853 276.472,219.853 276.472,219.853 276.472,248.416 276.472,248.416 276.472,248.416 245.259,248.416 245.259,248.416 245.259,248.416 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 245.259,219.853 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_aca6ca588cc64afdbfbd62a7268426e3" opacity="1">
<g id="Group_ed2913ea75cb48e4b41ee3e0ee7b6c85" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e3651a3aa951404a8fb7390f69f687db" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_59a87ad457764c49bd6a00f98764c656" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_779954feb6df4fb68620f8c4ff42cc3e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_11f057441cd74c6dbabf36a6ec3c12bc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_2c4aebfc2b014b59a0add11371e215aa" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e1f194d04ca4432d9664c27ab790b148" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f4a36f8fbc174fee9445738549544d46" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_ce197513a8cc494c93869e1d6299062b" opacity="1" transform="matrix(0.392565, 0.919724, -0.919724, 0.392565, 31.2082, 39.0615)">
<g id="Group_e8350cd87e87432c991a81dca1493f5e" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_66a432833f7444dca55cb2a8bebeb323" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_93cb0c00a0df448f9c457787b18ccd2b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_da683ce285dc443f8fe408e0f484d72b" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f3409296c0f7452d97449901f46c19f1" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_1fd6de85a5c14f219ea3f54d0822ae32" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 59.52,-164.524 C 59.52,-164.524 151.348,-124.31 151.348,-124.31 151.348,-124.31 167.611,-27.8 167.611,-27.8 167.611,-27.8 70.12,-13.574 70.12,-13.574 70.12,-13.574 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 59.52,-164.524 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_241374713016444fa46e7d5b10ad6e9c" opacity="1" transform="matrix(-0.392565, 0.919724, -0.919724, -0.392565, 449.288, -81.2542)">
<g id="Group_7b4884754f61449b94eae24ac6025192" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e7f3fb64be42403387eb602d3da14e34" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#447bf9" fill-opacity="1" id="Fill_f16dd6039b214f8983ce4ca7911dd9c8" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_6600cd45f7cd4857956cfde6336b2322" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f99e58d12d27428c97965400365bc683" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_ae14d61fcfda4f7e962eb7abc1ca43a8" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 196.91,181.35 C 196.91,181.35 289.152,143.45 289.152,143.45 289.152,143.45 305.415,46.94 305.415,46.94 305.415,46.94 207.924,32.714 207.924,32.714 207.924,32.714 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 196.91,181.35 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(0, 17, 71); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.166667; 0.427778; 0.733333" path="M 0,0 C 0,0 0,5.24651 0,5.24651 0,5.24651 0,-1.0493 0,-1.0493 0,-1.0493 0,3.14791 0,3.14791" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
<g transform="translate(-5.68434e-14 1.71918)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_c1da6565ad7a44b7937e52ece78e73a7" opacity="1">
<g id="Group_e05da2ce9e2141d58669cc9dff991497" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_bba8dfa44cc04d8190f0d00939be16ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_0c531c675587458394e5098b286b4a51" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_caf5454d5ae04e8780788490d52a1e95" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1b27ef5587dd4de197f5f350d043422c" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_781b8505367c42a3857f234570eace38" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e94c594dd0354662a84f034fae37aac7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_c97b2af9c9c34f0ebe788810caf4e9ab" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_5f715f838b3944b7a3da530f38b50a25" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1508c9dbd6fa46aaa56d30844c6c486d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_57410754afa04a8397fcb572b6132546" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 199.908,174.904 C 199.908,185.434 195.141,193.97 189.261,193.97 183.381,193.97 178.614,185.434 178.614,174.904 178.614,164.374 183.876,164.257 189.756,164.257 195.636,164.257 199.908,164.374 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 199.908,174.904 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_69526d6ad2644b0582714865bd660c90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_fee0271290da441f8626210b71d6b96a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_c731d322ff364143b71a5a798af8bdf7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_f43b0980669249a6966233b37cf3c8cc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_29c1c68302a045ab99b09b0aa9b09afc" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e6b7536fa3cb48a5b6df62a0c28f2417" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_9257e3ac72b04b10b821c75be0d620ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 234.325,174.903 C 234.325,185.433 229.558,193.969 223.678,193.969 217.798,193.969 213.031,185.433 213.031,174.903 213.031,164.373 218.293,164.256 224.173,164.256 230.053,164.256 234.325,164.373 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 234.325,174.903 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_6d802c88b86f43a4bccbe3ed0399f3b4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_645f362498b84c9db32ee5332fba1042" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_e919f5e73d4b410cb87d940368242035" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_4e1603b8462841f1a51c6eb3b893da90" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_ae12bc5f84564d398f5479e2ee744666" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_671c90609d414f64bc4a9dda4bdc5fee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_51fe2c4a88e14a3983a44bbf31489932" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<path d="M 223.678,213.284 C 223.678,216.292 216.361,218.731 207.336,218.731 198.311,218.731 191.489,215.302 191.489,212.294 191.489,209.286 197.32,213.284 206.346,213.284 215.371,213.284 223.678,210.276 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 223.678,213.284 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_988df225ba86472b95857e71cc009bb0" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_6eb2bf7373eb491295094e25c051f329" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_c94c0958917c4d249b046d44ff9d76ab" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_036c24f9d8214f3cbce54c0f2b5511a7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_7ed8b3a36a9245718e21c6c601dd18f7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_f6128c42fef74189a7adb193b8531b0d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_38c19d56776d42d39e8da1ee55141f47" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_0b299d727c594def8ff19d475edfa090" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_413d579327514781a85f892f0fd029ef" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_48d91b1135ef4bcc9e3e2e87f76d31b6" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_94b3b2d1ecc54bcb83bd2af4287e7335" opacity="1" transform="matrix(0.997575, -0.069598, 0.069598, 0.997575, -10.3555, 15.7956)">
<g id="Group_3e6cf58a22df41aeaecab2dffde923dd" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dbe4deef0d064ae886720333f6afbd29" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_d2238b0204ca4073a7abe17a764a293d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
<g id="Group_5881f2eb8f67401da829c500b2b0bef2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_419ec196b3cd4d43922ded9c4369feca" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_24722db5bec74d26b6f083f6271deeb5" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.108" y="147.914"/>
</g>
</g>
</g>
</g>
<g id="Group_be0995bd67f34e859e3987fb53d1f410" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_cbd635acea7e4bbbbfc25f27e4b617c9" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_3bb3174017554936a6e30ea1d6a28eba" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_f93e3b5ff8514aa4aec3a042071413a2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="183.276" cy="172.709" rx="2.724" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<g id="Group_ad973a3955f147cd867bdfbaf4c01185" opacity="1" transform="matrix(-0.997575, -0.0695981, -0.0695981, 0.997575, 420.995, 16.5246)">
<g id="Group_828b524ee6c943179d1481ec334f9b88" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_acc6c697956f4ad3bfb057ec0b803172" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_09d00d4c2fa8494b897f5622bf04a927" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="stroke: none; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
<g id="Group_2cba7d963f4f42fa80de15bd729b1ef4" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_dcfb0bad6ae440b7bfaff639c94c46ee" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f8d0d55c1cf74b408b1ef2d6283329cc" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="5.009" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="21.346" x="179.11" y="147.91"/>
</g>
</g>
</g>
</g>
<g id="Group_721b904a63554f419a7989a670d34dc0" opacity="1" transform="matrix(0.980581, 0.196116, -0.196116, 0.980581, 36.1716, -29.591)">
<g id="Group_dcd06f12613d4191aa93ac82285bb333" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4d9fd996419d4ca38abefdb622e76fd2" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_8c4db01f8a294b86a25ca48da3a82df5" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
<g id="Group_d31ed3f59dcc4eb0b5b032b76af01b5f" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_1efad0479d884cd7b83b05b14626b607" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_f570a013b87b4b99a5733740cc6bec08" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.506" y="167.853"/>
</g>
</g>
</g>
</g>
<g id="Group_0c0eec48be45438095795d32aacdabdd" opacity="1" transform="matrix(-0.980581, 0.196116, 0.196116, 0.980581, 375.074, -29.3765)">
<g id="Group_85cbc12fbb49406698b0039ac613a554" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_4dd71c4562c44ee7833fccd1c2fd5727" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#000000" fill-opacity="1" id="Fill_e86e56d7af1b40518583d0250ca9541d" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="stroke: none; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
<g id="Group_25e6d3f3edff4f1fbd57b1371bb58f5a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_aa3250f8fef44c74b2e3e7974148a2c7" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_12f1561499c8471f9ecbc4e3a571abc7" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect height="2.515" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;" width="11.444" x="167.51" y="167.85"/>
</g>
</g>
</g>
</g>
<g id="Group_f2c24a9da86e4b62ad7b6c34b7c60b14" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_5e9aa5ad63a04e5a977827a22736c105" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_b5cccfe98d4f421cbc4386f369f9700a" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g fill="#ffffff" fill-opacity="1" id="Fill_117872a1e50742c0971fe225f32e6a20" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="stroke: none; stroke-width: 2px;"/>
</g>
</g>
</g>
<g id="Group_1c847fc6e7774d5c8750f96064b3a547" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Group_04d00887dda24f73946be18da7ca9025" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Stroke_6e4183e42f644a41b75e2cd222a9e2ae" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<ellipse cx="217.198" cy="172.645" rx="2.971" ry="7.181" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.194444; 0.411111; 0.700000" path="M -5.68434e-14,1.71918 C -5.68434e-14,1.71918 0.671553,5.7485 0.671553,5.7485 0.671553,5.7485 0.671553,1.04763 0.671553,1.04763 0.671553,1.04763 0.671553,3.73384 0.671553,3.73384" repeatCount="indefinite"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`;
const FAIRY_SVG_3 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="15.108 0 484.892 607.377" xmlns:bx="https://boxy-svg.com">
<g style="">
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke:none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.579664, 0, 0, 1.894767, 27.836423, -26.943587)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke:none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
</g>
<g>
<path d="M 229.042 412.165 L 305.306 412.165 L 381.57 562.292 L 146.543 557.976 L 229.042 412.165 Z" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6);"/>
<path d="M 558.889 268.77 L 607.465 306.607 L 607.465 382.281 L 558.889 420.118 L 510.313 382.281 L 510.313 306.607 Z" bx:shape="n-gon 558.889 344.444 56.091 75.674 6 0 1@3a289cbf" style="stroke-width: 3px; fill: rgb(255, 47, 47); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.000947, 1, -1, -0.000947, -291.270454, 19.835772)"/>
<path d="M 265.015 429.262 C 265.015 432.723 262.442 435.695 258.767 436.979 C 258.776 437.203 258.78 437.428 258.78 437.655 C 258.78 446.397 252.445 453.483 244.63 453.483 C 236.815 453.483 230.48 446.397 230.48 437.655 C 230.48 435.662 230.809 433.755 231.41 431.999 L 171.005 379.619 L 185.521 362.879 L 252.598 421.043 C 253.278 420.928 253.982 420.868 254.703 420.868 C 260.398 420.868 265.015 424.626 265.015 429.262 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="180.938" cy="368.424" rx="19.155" ry="17.806"/>
<path d="M 359.505 386.357 C 359.505 382.896 356.932 379.924 353.257 378.64 C 353.266 378.416 353.27 378.191 353.27 377.964 C 353.27 369.222 346.935 362.136 339.12 362.136 C 331.305 362.136 324.97 369.222 324.97 377.964 C 324.97 379.957 325.299 381.864 325.9 383.62 L 265.495 436 L 280.011 452.74 L 347.088 394.576 C 347.768 394.691 348.472 394.751 349.193 394.751 C 354.888 394.751 359.505 390.993 359.505 386.357 Z" style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0.000015, -0.000032)"/>
<ellipse style="stroke-width: 3px; fill: rgb(216, 75, 75); stroke: rgb(113, 6, 6);" cx="353.876" cy="366.266" rx="18.886" ry="16.727"/>
<path style="fill: rgba(216, 216, 216, 0); stroke-width: 3px; stroke: rgb(113, 6, 6);" d="M 225.849 321.714 C 244.699 311.212 274.958 366.694 270.13 375.533 C 270.679 356.269 292.931 312.428 311.131 325.699"/>
<ellipse style="stroke-width: 3px; fill: rgb(244, 226, 0); stroke: rgb(113, 6, 6);" cx="269.597" cy="340.775" rx="7.199" ry="6.83"/>
<path d="M 333.605 511.43 L 380.13 561.792 L 287.079 561.792 L 287.447 561.394 L 218.49 561.394 L 219.155 560.674 L 146.064 560.674 L 192.59 510.312 L 229.135 549.871 L 265.016 511.032 L 299.494 548.353 L 333.605 511.43 Z" style="stroke-width: 3px; fill: rgb(255, 149, 149); stroke: rgb(113, 6, 6); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999926, 0.012141, -0.012141, 0.999926, 0, 0)"/>
<animateMotion path="M 0 0 L -0.922 16.787 L -0.419 -0.652" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.425727; 1" keyPoints="0; 0.425727; 1" repeatCount="indefinite"/>
</g>
<g transform="matrix(1, 0, 0, 1, -1, 0)">
<path d="M 257.351 113.454 C 294.535 143.721 286.007 223.616 258.543 246.503 C 231.078 269.389 77.998 351.224 87.05 339.32 C 92.817 331.736 112.133 177.68 123.883 136.898 C 135.633 96.117 220.168 83.19 257.351 113.454 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 170.96px 215.66px;" transform="matrix(0.999859, 0.016815, -0.016815, 0.999859, 0, 0)"/>
<path d="M 453.793 329.374 C 490.977 299.107 482.449 219.212 454.985 196.325 C 427.52 173.439 274.44 91.604 283.492 103.508 C 289.259 111.092 308.575 265.148 320.325 305.93 C 332.075 346.711 416.61 359.638 453.793 329.374 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26); transform-origin: 367.402px 227.168px;" transform="matrix(-0.999859, 0.016815, -0.016815, -0.999859, -0.000069, 0.000015)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 240, 223); stroke: rgb(113, 6, 6);" cx="272.328" cy="238.394" rx="96.099" ry="86.543"/>
<path d="M 253.41 195.871 C 219.329 213.067 96.21 224.326 112.025 212.031 C 127.84 199.736 167.873 115.935 192.776 94.298 C 214.041 75.822 246.953 83.073 267.168 95.982 C 287.432 82.027 329.28 67.783 343.281 93.156 C 363.7 130.162 426.754 207.435 425.111 213.587 C 423.468 219.739 316.728 211.925 282.647 194.729 C 277.544 192.154 272.89 189.142 268.721 185.788 C 264.206 189.603 259.086 193.007 253.41 195.871 Z" style="stroke-width: 3px; stroke: rgb(113, 6, 6); fill: rgb(255, 26, 26);"/>
<path d="M 225.149 -245.659 Q 243.032 -273.87 260.914 -245.659 L 260.914 -245.659 Q 278.796 -217.448 243.032 -217.448 L 243.032 -217.448 Q 207.267 -217.448 225.149 -245.659 Z" bx:shape="triangle 207.267 -273.87 71.529 56.422 0.5 0.5 1@c4aab48d" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="234.022" cy="231.651" rx="7.917" ry="10.647"/>
<path d="M 284.119 -244.989 Q 302.002 -273.2 319.884 -244.989 L 319.884 -244.989 Q 337.766 -216.778 302.002 -216.778 L 302.002 -216.778 Q 266.237 -216.778 284.119 -244.989 Z" bx:shape="triangle 266.237 -273.2 71.529 56.422 0.5 0.5 1@50afb6eb" style="stroke-width: 3px; stroke: rgb(0, 0, 0);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(0, 0, 0);" cx="292.992" cy="230.974" rx="7.917" ry="10.647"/>
<path d="M 291.082 281.5 C 291.082 286.042 281.815 294.169 270.809 294.169 C 259.802 294.169 251.223 286.042 251.223 281.5 C 251.223 276.958 260.489 283.056 271.496 283.056 C 282.503 283.056 291.082 276.958 291.082 281.5 Z" style="stroke-width: 3px; stroke: rgb(0, 0, 0);"/>
<animateMotion path="M 0 0 L 0.91 17.861 L 1.01 0.028" calcMode="linear" begin="0s" dur="3s" fill="freeze" keyTimes="0; 0.486342; 1" keyPoints="0; 0.486342; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const FAIRY_SVG_4 = `<?xml version="1.0" encoding="utf-8"?>
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:bx="https://boxy-svg.com">
<g transform="matrix(1.255971, 0, 0, 1.527577, 37.24648, 3.528937)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke: none; pointer-events: none;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="matrix(1.255971, 0, 0, 1.527577, 37.24648, 3.528937)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke: none; pointer-events: none;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g>
<path d="M 200.739 356.733 L 263.415 356.733 L 285.887 451.246 L 175.53 452.825 L 200.739 356.733 Z" style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.999863, 0.016575, -0.016575, 0.999863, 0.000001, 0)"/>
<path d="M 433.333 273.401 L 468.961 303.923 L 468.961 364.966 L 433.333 395.487 L 397.705 364.966 L 397.705 303.923 Z" bx:shape="n-gon 433.333 334.444 41.14 61.043 6 0 1@d9295583" style="vector-effect: non-scaling-stroke; stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" transform="matrix(-0.01915066, 0.99981661, -0.99981662, -0.01915027, 575.71295007, -104.70092515)"/>
<path d="M 228.141 378.035 C 228.141 379.685 227.456 381.186 226.337 382.3 C 226.7 383.243 226.896 384.25 226.896 385.295 C 226.896 390.679 221.695 395.044 215.28 395.044 C 208.865 395.044 203.664 390.679 203.664 385.295 C 203.664 383.124 204.51 381.119 205.94 379.498 L 168.402 324.935 L 183.17 314.775 L 222.451 371.875 C 225.668 372.306 228.141 374.9 228.141 378.035 Z" style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" cx="166.743" cy="317.883" rx="17.838" ry="15.349"/>
<path d="M 256.349 381.354 C 256.349 386.395 251.892 390.481 246.393 390.481 C 241.104 390.481 236.778 386.7 236.456 381.926 C 233.558 381.222 231.385 378.312 231.385 374.828 C 231.385 370.818 234.264 367.568 237.815 367.568 C 238.253 367.568 238.681 367.617 239.095 367.712 L 278.232 315.261 L 291.197 324.935 L 253.715 375.169 C 255.35 376.795 256.349 378.968 256.349 381.354 Z" style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" cx="293.893" cy="316.016" rx="15.142" ry="14.312"/>
<path d="M 265.477 422.328 L 285.389 451.782 L 245.564 451.782 L 245.679 451.612 L 209.035 451.612 L 209.195 451.367 L 175.455 451.367 L 196.405 419.839 L 213.24 445.176 L 229.363 420.499 L 247.719 448.595 Z" style="stroke-width: 3px; fill: rgb(199, 162, 216); stroke: rgb(80, 19, 92);"/>
<path style="stroke-width: 3px; fill: rgb(194, 113, 216); stroke: rgb(80, 19, 92);" d="M 185.655 306.459 C 192.598 314.592 239.725 292.551 235.022 286.961 C 229.46 289.047 265.49 308.827 277.337 304.384"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 6;0 0" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.500058; 1" repeatCount="indefinite"/>
</g>
<g style="" transform="matrix(1.002364, 0, 0, 0.960781, -1.001028, 11.54786)">
<path d="M 191.413 241.326 L 198.695 277.551 C 208.459 299.332 113.868 290.075 109.545 280.432 L 156.341 213.411 L 191.413 241.326 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 187.762px 272.884px;"/>
<path d="M 482.222 107.53 L 545.786 152.999 L 521.507 226.569 L 442.937 226.569 L 418.658 152.999 Z" bx:shape="n-gon 482.222 173.333 66.835 65.803 5 0 1@54403d3a" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);" transform="matrix(0.9665614, -0.25643528, 0.26516901, 0.96424429, -388.53882193, 95.26698154)"/>
<path d="M 482.222 107.53 L 545.786 152.999 L 521.507 226.569 L 442.937 226.569 L 418.658 152.999 Z" bx:shape="n-gon 482.222 173.333 66.835 65.803 5 0 1@54403d3a" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 487.326px 170.824px;" transform="matrix(-0.966562, -0.256435, -0.265169, 0.964244, -147.040822, -26.281289)"/>
<ellipse style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);" cx="237.343" cy="72.875" rx="32.241" ry="29.598"/>
<path d="M 284.792 305.003 L 292.074 268.778 C 301.838 246.997 207.247 256.254 202.924 265.897 L 249.72 332.918 L 284.792 305.003 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92); transform-origin: 281.141px 273.445px;" transform="matrix(-1, 0, 0, -1, -0.000017, 0.000003)"/>
<ellipse style="stroke-width: 3px; fill: rgb(255, 254, 248); stroke: rgb(80, 19, 92);" cx="235.677" cy="192.44" rx="98.714" ry="102.008"/>
<path d="M 221.952 190.815 C 221.952 208.216 217.02 212.456 210.935 212.456 C 204.85 212.456 199.918 208.216 199.918 190.815 C 199.918 173.414 204.85 159.307 210.935 159.307 C 217.02 159.307 221.952 173.414 221.952 190.815 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(16, 4, 18);" cx="207.857" cy="175.538" rx="3.726" ry="8.912"/>
<path d="M 224.868 238.194 C 217.385 225.473 221.022 227.785 235.781 227.666 C 250.54 227.547 254.281 225.173 247.006 238.014 C 239.73 250.855 232.351 250.914 224.868 238.194 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<path d="M 270.232 191.293 C 270.232 208.694 265.3 212.935 259.215 212.935 C 253.13 212.935 248.198 208.694 248.198 191.293 C 248.198 173.892 253.13 159.786 259.215 159.786 C 265.3 159.786 270.232 173.892 270.232 191.293 Z" style="stroke-width: 3px; stroke: rgb(16, 4, 18);"/>
<ellipse style="fill: rgb(255, 255, 255); stroke-width: 3px; stroke: rgb(16, 4, 18);" cx="256.137" cy="176.017" rx="3.726" ry="8.912"/>
<path d="M 331.077 157.674 C 335.999 181.232 331.252 171.752 270.917 151.098 C 210.581 130.445 238.319 147.757 232.787 121.511 C 232.18 118.636 232.52 115.849 232.148 113.329 C 232.015 114.375 232.024 115.46 231.941 116.58 C 230.346 138.11 239.066 140.218 201.437 149.455 C 163.807 158.691 126.296 198.431 140.429 156.03 C 154.563 113.629 190.709 88.637 223.467 88.637 C 233.339 88.637 245.676 90.28 249.734 90.28 C 280.151 90.28 326.155 134.115 331.077 157.674 Z" style="stroke-width: 3px; fill: rgb(194, 48, 216); stroke: rgb(80, 19, 92);"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 6;0 0" dur="4s" fill="freeze" keyTimes="0; 0.490799; 1" repeatCount="indefinite"/>
</g>
</svg>`;
const FAIRY_SVG_FINAL = `<?xml version="1.0" encoding="utf-8"?>
<svg height="800" width="800" style="fill:none;stroke:none;" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<title/>
<g id="Composition_237f8cc0cf064b83bd9184e9a0d70fd2">
<g id="Layer_6fcc2b7d79124000a55163479d062c32" opacity="1" transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_1621dde92081436eaad105ac9bbdd3c0" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="stroke: none; stroke-width: 2px;"/>
<path d="M 120.216,226.438 C 115.36,226.438 111.055,224.112 108.392,220.53 104.645,226.83 96.86,231.161 87.864,231.161 81.511,231.161 75.762,229.001 71.613,225.513 66.547,229.591 59.615,232.105 51.971,232.105 36.451,232.105 23.87,221.744 23.87,208.963 23.87,203.873 31.426,181.571 31.426,181.571 31.426,181.571 138.86,198.566 138.86,198.566 138.86,198.566 136.524,213.334 136.524,213.334 136.524,213.334 134.82,213.064 134.82,213.064 134.283,220.539 127.95,226.438 120.216,226.438 120.216,226.438 120.216,226.438 120.216,226.438 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_0ef027a138354a3a914cb5c264e3f75d" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 200.262,259.119 C 200.262,259.119 201.187,306.377 201.187,306.377 201.187,306.377 115.315,307.281 115.315,307.281 115.315,307.281 114.565,256.501 114.565,256.501 115.662,233.749 134.726,219.155 157.625,219.156 180.222,219.156 198.724,236.79 200.262,259.119 200.262,259.119 200.262,259.119 200.262,259.119 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 200.262,259.119 C 200.262,259.119 201.187,306.377 201.187,306.377 201.187,306.377 115.315,307.281 115.315,307.281 115.315,307.281 114.565,256.501 114.565,256.501 115.662,233.749 134.726,219.155 157.625,219.156 180.222,219.156 198.724,236.79 200.262,259.119 200.262,259.119 200.262,259.119 200.262,259.119 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.200000; 0.394444; 0.616667; 0.861111" path="M 0,0 C 0,0 0,-8.39442 0,-8.39442 0,-8.39442 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-6.29581 -1.0493,-6.29581 -1.0493,-6.29581 -2.0986,-2.0986 -2.0986,-2.0986" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="Stroke_2e6c824d2de64fedad20638f9ad4f5cb" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 2 0 C 2 0 2 9.234 2 9.234 C 2 9.234 1.896 3.358 1.896 3.358 C 1.896 3.358 2.056 10.913 2.056 10.913 C 2.056 10.913 1.679 2.518 1.679 2.518" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_4d999fc5476b486eacb44fb99a752478" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="stroke: none; stroke-width: 2px;"/>
<path d="M 190.201,224.931 C 195.057,224.931 199.36,222.605 202.024,219.024 205.771,225.324 213.556,229.654 222.551,229.654 228.906,229.654 234.656,227.493 238.806,224.003 243.872,228.083 250.805,230.598 258.451,230.598 273.971,230.598 286.552,220.237 286.552,207.456 286.552,202.364 278.993,180.068 278.993,180.068 278.993,180.068 171.559,197.063 171.559,197.063 171.559,197.063 173.895,211.831 173.895,211.831 173.895,211.831 182.469,224.931 190.201,224.931 190.201,224.931 190.201,224.931 190.201,224.931 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.155556; 0.350000; 0.583333; 0.811111" path="M 0,0 C 0,0 0,16.7888 0,16.7888 0,16.7888 0,-4.19721 0,-4.19721 0,-4.19721 0,11.5423 0,11.5423 0,11.5423 -1.0493,-3.14791 -1.0493,-3.14791" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_d5df62baaec7485d8e61bed9917b663d" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="157.861" cy="197.478" rx="31.17" ry="28.337" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="157.861" cy="197.478" rx="31.17" ry="28.337" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_2c49a36ac0514ecdbee6c6f6d1add8fc" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 135.773,184.525 C 133.912,182.097 136.987,176.444 141.725,172.812 145.722,169.75 155.881,168.385 158.179,168.385 160.615,168.385 171.05,170.412 174.248,172.356 179.267,175.409 181.623,180.756 180.059,183.384 178.786,185.525 175.007,185.695 170.938,184.034 169,188.19 164.019,191.146 158.179,191.147 152.282,191.147 147.26,188.131 145.364,183.911 141.325,186.205 137.329,186.555 135.773,184.525 135.773,184.525 135.773,184.525 135.773,184.525 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 135.773,184.525 C 133.912,182.097 136.987,176.444 141.725,172.812 145.722,169.75 155.881,168.385 158.179,168.385 160.615,168.385 171.05,170.412 174.248,172.356 179.267,175.409 181.623,180.756 180.059,183.384 178.786,185.525 175.007,185.695 170.938,184.034 169,188.19 164.019,191.146 158.179,191.147 152.282,191.147 147.26,188.131 145.364,183.911 141.325,186.205 137.329,186.555 135.773,184.525 135.773,184.525 135.773,184.525 135.773,184.525 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ebebeb" fill-opacity="1" id="Stroke_eacac69c39cb433b827dd0857a77afac" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="158.223" cy="126.244" rx="53.217" ry="47.126" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="158.223" cy="126.244" rx="53.217" ry="47.126" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 2 0 C 2 0 2 9.234 2 9.234 C 2 9.234 2.358 3.358 2.358 3.358 C 2.358 3.358 2.518 10.913 2.518 10.913 C 2.518 10.913 1.679 2.518 1.679 2.518" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g id="Group_740fd26847b144998faaab5e38cb4d8a" opacity="1">
<g fill="#ffffff" fill-opacity="1" id="Fill_32ea43da47724c7c88a983535e7acdc8" style="stroke:none;">
<path d="M 170.448,247.508 C 170.58,247.498 170.714,247.493 170.849,247.493 170.976,247.493 171.102,247.497 171.227,247.506 171.227,247.506 170.272,246.92 170.272,246.92 170.34,247.11 170.399,247.307 170.448,247.508 170.448,247.508 170.448,247.508 170.448,247.508 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 161.639,248.91 C 161.639,246.041 163.648,243.715 166.126,243.715 167.723,243.715 169.126,244.682 169.921,246.137 169.921,246.137 198.95,198.848 198.95,198.848 198.95,198.848 206.201,203.299 206.201,203.299 206.201,203.299 176.919,251 176.919,251 176.919,251 175.829,250.331 175.829,250.331 176.703,251.624 177.225,253.265 177.225,255.05 177.225,259.224 174.37,262.607 170.849,262.607 167.328,262.607 164.473,259.224 164.473,255.05 164.473,254.618 164.504,254.194 164.563,253.781 162.855,253.046 161.639,251.142 161.639,248.91 161.639,248.91 161.639,248.91 161.639,248.91 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 154.555,248.201 C 154.555,250.373 152.93,252.185 150.772,252.599 150.775,252.707 150.777,252.815 150.777,252.924 150.777,257.749 147.711,261.661 143.929,261.661 140.147,261.661 137.081,257.749 137.081,252.924 137.081,250.52 137.842,248.343 139.074,246.763 139.074,246.763 108.271,201.209 108.271,201.209 108.271,201.209 116.182,195.859 116.182,195.859 116.182,195.859 148.639,243.858 148.639,243.858 149.02,243.764 149.42,243.714 149.832,243.714 152.44,243.714 154.555,245.723 154.555,248.201 154.555,248.201 154.555,248.201 154.555,248.201 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
<g id="Stroke_d47ef98376be4de991212e94d163c6af" stroke="#000000" stroke-opacity="1" stroke-width="1" style="fill:none;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;">
<path d="M 170.448,247.508 C 170.58,247.498 170.714,247.493 170.849,247.493 170.976,247.493 171.102,247.497 171.227,247.506 171.227,247.506 170.272,246.92 170.272,246.92 170.34,247.11 170.399,247.307 170.448,247.508 170.448,247.508 170.448,247.508 170.448,247.508 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
<path d="M 161.639,248.91 C 161.639,246.041 163.648,243.715 166.126,243.715 167.723,243.715 169.126,244.682 169.921,246.137 169.921,246.137 198.95,198.848 198.95,198.848 198.95,198.848 206.201,203.299 206.201,203.299 206.201,203.299 176.919,251 176.919,251 176.919,251 175.829,250.331 175.829,250.331 176.703,251.624 177.225,253.265 177.225,255.05 177.225,259.224 174.37,262.607 170.849,262.607 167.328,262.607 164.473,259.224 164.473,255.05 164.473,254.618 164.504,254.194 164.563,253.781 162.855,253.046 161.639,251.142 161.639,248.91 161.639,248.91 161.639,248.91 161.639,248.91 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
<path d="M 154.555,248.201 C 154.555,250.373 152.93,252.185 150.772,252.599 150.775,252.707 150.777,252.815 150.777,252.924 150.777,257.749 147.711,261.661 143.929,261.661 140.147,261.661 137.081,257.749 137.081,252.924 137.081,250.52 137.842,248.343 139.074,246.763 139.074,246.763 108.271,201.209 108.271,201.209 108.271,201.209 116.182,195.859 116.182,195.859 116.182,195.859 148.639,243.858 148.639,243.858 149.02,243.764 149.42,243.714 149.832,243.714 152.44,243.714 154.555,245.723 154.555,248.201 154.555,248.201 154.555,248.201 154.555,248.201 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px; fill: rgb(255, 255, 255);"/>
</g>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.422222; 0.700000; 0.877778" path="M 0,0 C 0,0 0,-4.19721 0,-4.19721 0,-4.19721 0,-2.84217e-14 0,-2.84217e-14 0,-2.84217e-14 0,-5.24651 0,-5.24651 0,-5.24651 0,0 0,0" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_1561cdddf09f4b539b28885a2039a8d2" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="113.466" cy="192.755" rx="18.419" ry="16.53" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="113.466" cy="192.755" rx="18.419" ry="16.53" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff9005" fill-opacity="1" id="Stroke_eb651ccec2c0425a807ed944a28b1a40" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="198.477" cy="195.77" rx="16.058" ry="15.349" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<ellipse cx="198.477" cy="195.77" rx="16.058" ry="15.349" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.205556; 0.372222; 0.583333; 0.794444" path="M 0,0 C 0,0 0,4.19721 0,4.19721 0,4.19721 0,0 0,0 0,0 0,5.24651 0,5.24651 0,5.24651 0,1.0493 0,1.0493" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_bd8ef478d88f44eda400d980ffd8e3a6" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="144.637" cy="120" rx="6.612" ry="17.711" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="144.637" cy="120" rx="6.612" ry="17.711" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_29199cc523374aeab7ce36d757c9883a" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="171.321" cy="120.945" rx="6.848" ry="17.238" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="171.321" cy="120.945" rx="6.848" ry="17.238" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_6a3878f1a27545c4bff592bee9249b86" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="143.22" cy="111.263" rx="2.834" ry="7.557" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="143.22" cy="111.263" rx="2.834" ry="7.557" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_196d22dd532145b9b5158aa3881b44b1" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<ellipse cx="169.113" cy="111.943" rx="2.389" ry="6.514" style="stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
<ellipse cx="169.113" cy="111.943" rx="2.389" ry="6.514" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#000000" fill-opacity="1" id="Stroke_a6468358403c43b893f3c87c920799ff" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 171.557,149.565 C 171.557,152.043 165.791,159.247 158.097,159.247 150.403,159.247 145.582,152.043 145.582,149.565 145.582,147.087 150.403,155.94 158.097,155.94 165.791,155.94 171.557,147.087 171.557,149.565 171.557,149.565 171.557,149.565 171.557,149.565 Z" style="stroke-width: 2px;"/>
<path d="M 171.557,149.565 C 171.557,152.043 165.791,159.247 158.097,159.247 150.403,159.247 145.582,152.043 145.582,149.565 145.582,147.087 150.403,155.94 158.097,155.94 165.791,155.94 171.557,147.087 171.557,149.565 171.557,149.565 171.557,149.565 171.557,149.565 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="Stroke_84828ffbec7247aeaa4d1e1c6a882ca4" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 208.427,92.512 C 215.961,99.508 164.028,102.19 159.548,98.03 167.62,98.03 165.881,87.153 161.081,87.153 171.442,96.363 107.965,102.99 103.101,98.666 130.62,88.799 161.166,62.625 158.52,65.318 158.52,65.318 165.685,78.628 165.685,78.628 165.685,78.628 188.052,66.746 188.052,66.746 188.052,66.746 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 208.427,92.512 C 215.961,99.508 164.028,102.19 159.548,98.03 167.62,98.03 165.881,87.153 161.081,87.153 171.442,96.363 107.965,102.99 103.101,98.666 130.62,88.799 161.166,62.625 158.52,65.318 158.52,65.318 165.685,78.628 165.685,78.628 165.685,78.628 188.052,66.746 188.052,66.746 188.052,66.746 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 208.427,92.512 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
<g transform="translate(0 0)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ffffff" fill-opacity="1" id="Stroke_3e521e50883f45bd8a6ed95e9c0282d8" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 201.012,293.275 C 201.012,293.275 201.212,308.035 201.212,308.035 201.212,308.035 115.217,308.035 115.217,308.035 115.217,308.035 115.217,292.778 115.217,292.778 115.217,292.778 115.244,292.778 115.244,292.778 115.72,285.913 119.287,281.132 127.5,281.132 135.713,281.132 136.796,287.404 142.573,293.938 142.573,293.938 150.607,280.163 157.399,281.463 169.561,283.79 171.984,297.404 174.038,293.945 190.864,265.605 199.463,295.377 201.012,293.275 201.012,293.275 201.012,293.275 201.012,293.275 Z" style="stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
<path d="M 201.012,293.275 C 201.012,293.275 201.212,308.035 201.212,308.035 201.212,308.035 115.217,308.035 115.217,308.035 115.217,308.035 115.217,292.778 115.217,292.778 115.217,292.778 115.244,292.778 115.244,292.778 115.72,285.913 119.287,281.132 127.5,281.132 135.713,281.132 136.796,287.404 142.573,293.938 142.573,293.938 150.607,280.163 157.399,281.463 169.561,283.79 171.984,297.404 174.038,293.945 190.864,265.605 199.463,295.377 201.012,293.275 201.012,293.275 201.012,293.275 201.012,293.275 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgb(117, 32, 0); stroke-width: 2px;"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.200000; 0.394444; 0.616667; 0.861111" path="M 0,0 C 0,0 0,-8.39442 0,-8.39442 0,-8.39442 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-4.19721 -1.0493,-6.29581 -1.0493,-6.29581 -1.0493,-6.29581 -2.0986,-2.0986 -2.0986,-2.0986" repeatCount="indefinite"/>
</g>
<g fill="#ff3f09" fill-opacity="1" id="Stroke_ee476db24f844fcf9a63f57d622c6e6e" opacity="1" stroke="#00000000" stroke-opacity="1" stroke-width="0" transform="matrix(1, 0, 0, 1.21925, 0.859588, -20.1128)">
<rect height="27.077" ry="0" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke: rgba(117, 32, 0, 0); stroke-width: 1.80241px;" width="123.351" x="101.501" y="64.4753"/>
</g>
<g transform="matrix(-0.758634, 0, 0, -0.311579, 258.288305, 92.002054)" style="">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="translate(0 0)">
<g fill="#ff3f09" fill-opacity="1" id="group-1" opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1">
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="stroke-width: 2px; stroke: rgba(117, 32, 0, 0);"/>
<path d="M 161.688,21.2381 C 177.71,33.0612 243.079,18.3774 248.584,22.882 248.584,22.882 233.112,30.971 233.112,30.971 251.836,37.576 272.578,59.211 268.474,81.479 267.098,88.942 271.225,103.256 274.575,109.16 292.643,141 269.665,175.852 246.891,179.417 224.116,182.982 202.385,164.596 196.441,128.693 195.536,123.228 195.084,117.852 195.051,112.655 191.664,109.088 188.769,104.967 186.493,100.425 183.492,100.601 180.441,100.691 177.348,100.691 164.525,100.691 152.402,99.144 141.638,96.393 136.246,102.498 129.318,107.474 121.374,110.863 122.125,118.449 121.887,126.533 120.517,134.809 114.572,170.712 96.9428,181.189 68.674,179.807 41.0494,178.739 20.6378,133.305 42.7634,91.0991 44.5357,85.4012 50.2954,83.0588 45.6714,73.0235 29.3874,51.9235 57.1607,20.3318 80.2112,22.7888 80.2112,22.7888 161.688,21.2381 161.688,21.2381 Z" style="fill: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-width: 2px; stroke: rgba(117, 32, 0, 0);"/>
</g>
</g>
</g>
</g>
<animateMotion attributeName="transform" begin="0.000000" calcMode="spline" dur="3.000000" keySplines="0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000; 0.000000 0.000000 1.000000 1.000000" keyTimes="0.000000; 0.188889; 0.416667; 0.633333; 0.822222" path="M 0,0 C 0,0 0,9.23386 0,9.23386 0,9.23386 3.35777,3.35777 3.35777,3.35777 3.35777,3.35777 2.51833,10.9127 2.51833,10.9127 2.51833,10.9127 1.67888,2.51833 1.67888,2.51833" repeatCount="indefinite"/>
</g>
</g>
</g>
</svg>`;
// Fairy Central Position for dialogue maps
const FAIRY_X = 400 - NPC_WIDTH_DEFAULT/2;
const FAIRY_Y = 300;
const FAIRY_SCALE = 0.3;
// NPC DATA (Phase index corresponds to MAP_SVG index)
const NPC_DATA = {
// Map 2 (Index 1)
1: { char_id: 'FAIRY_Circle', name: 'Circle Fairy', svg_content: FAIRY_SVG_1, x: FAIRY_X, y: FAIRY_Y, scale: FAIRY_SCALE, dialogue: ["Circle Fairy: Hello again! I am the spirit of the Springs and the Passages.", "Circle Fairy: We represent the elements you mastered. Your journey has been immense!"] },
// Map 4 (Index 3)
3: { char_id: 'FAIRY_Cube', name: 'Cube Fairy', svg_content: FAIRY_SVG_2, x: FAIRY_X, y: FAIRY_Y, scale: FAIRY_SCALE, dialogue: ["Cube Fairy: I am the spirit of the Ice and the Start. We are the foundation.", "Cube Fairy: These halls contain the memory of every challenge you overcame."] },
// Map 6 (Index 5)
5: { char_id: 'FAIRY_Hexagon', name: 'Hexagon Fairy', svg_content: FAIRY_SVG_3, x: FAIRY_X, y: FAIRY_Y, scale: FAIRY_SCALE, dialogue: ["Hexagon Fairy: I am the spirit of the Forest and the Logic. The forest tried to stop you.", "Hexagon Fairy: But order prevails. The King and Queen await your final audience."] },
// Map 8 (Index 7)
7: { char_id: 'FAIRY_Pentagon', name: 'Pentagon Fairy', svg_content: FAIRY_SVG_4, x: FAIRY_X, y: FAIRY_Y, scale: FAIRY_SCALE, dialogue: ["Pentagon Fairy: I am the spirit of the Beach and the Sea's persistence.", "Pentagon Fairy: You are worthy, little traveler. The final secret of the castle is close."] },
// Map 10 (Index 9) - Final NPC
9: { char_id: 'FAIRY_Triangle', name: 'Triangle Fairy', svg_content: FAIRY_SVG_FINAL, x: FAIRY_X, y: FAIRY_Y, scale: FAIRY_SCALE, final_npc: true, dialogue: ["Triangle Fairy: Welcome to the very heart of Drawaria Castle, brave one.", "Triangle Fairy: You have consulted all the spirits and proven your might. I am the final guide.", "Triangle Fairy: Your quest is not quite over. Go to the highest spire: Queen Diamond awaits your challenge."] },
};
const MAX_TRANSITIONS = 9; // 9 transitions (Map 1 -> 2 -> ... -> 10). Total 10 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Light/Stone Gradient (Warm Gray/Beige) -->
<linearGradient id="hallStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 220, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Perspective) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Wall/Ceiling (Stone Texture) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradient)" />
<!-- 2. Perspective Floor (Platform at Y=450) -->
<path d="M0 450 L800 450 L600 500 L200 500 Z" fill="url(#floorTileGradient)" />
<!-- 3. Perspective Hallway Walls (Darker side stone) -->
<path d="M0 450 L0 0 L200 100 L200 500 L0 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<path d="M800 450 L800 0 L600 100 L600 500 L800 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<!-- 4. Arched Ceiling/Vaulting (Curved lines from the image) -->
<path d="M200 100 Q400 0, 600 100" stroke="rgb(150, 150, 140)" stroke-width="5" fill="none" />
<path d="M250 150 Q400 50, 550 150" stroke="rgb(150, 150, 140)" stroke-width="3" fill="none" />
<!-- 5. Back Window/Light Source (Faint glow at the end of the hall) -->
<rect x="350" y="100" width="100" height="150" fill="white" opacity="0.5" />
<!-- 6. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(160, 160, 150)" />
<!-- 7. Foreground Floor Tiles (Simple grid detail) -->
<g stroke="rgb(130, 130, 120)" stroke-width="1" opacity="0.7">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="400" y1="450" x2="400" y2="500" />
<line x1="200" y1="450" x2="200" y2="500" />
<line x1="600" y1="450" x2="600" y2="500" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Light/Stone Gradient (Slightly darker for contrast) -->
<linearGradient id="hallStoneGradientDark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Perspective) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Wall/Ceiling (Stone Texture) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradientDark)" />
<!-- 2. Perspective Floor (Platform at Y=450) -->
<path d="M0 450 L800 450 L600 500 L200 500 Z" fill="url(#floorTileGradient)" />
<!-- 3. Perspective Hallway Walls (Darker side stone) -->
<path d="M0 450 L0 0 L200 100 L200 500 L0 500 Z" fill="rgb(160, 160, 150)" opacity="0.9" />
<path d="M800 450 L800 0 L600 100 L600 500 L800 500 Z" fill="rgb(160, 160, 150)" opacity="0.9" />
<!-- 4. Arched Ceiling/Vaulting -->
<path d="M200 100 Q400 0, 600 100" stroke="rgb(150, 150, 140)" stroke-width="5" fill="none" />
<path d="M250 150 Q400 50, 550 150" stroke="rgb(150, 150, 140)" stroke-width="3" fill="none" />
<!-- 5. Central Altar/Pedestal Glow (For the Fairy) -->
<circle cx="400" cy="400" r="100" fill="rgb(0, 200, 255)" opacity="0.2" />
<!-- 6. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(140, 140, 130)" />
<!-- 7. Foreground Floor Tiles (Simple grid detail) -->
<g stroke="rgb(110, 110, 100)" stroke-width="1" opacity="0.8">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="400" y1="450" x2="400" y2="500" />
</g>
<!-- 8. Perspective Seating/Pews (Detail from reference image) -->
<g fill="rgb(100, 70, 40)" opacity="0.7">
<rect x="250" y="380" width="300" height="20" />
<rect x="250" y="420" width="300" height="20" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Light/Stone Gradient (Neutral, bright stone) -->
<linearGradient id="hallStoneGradientNeutral" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 220, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Perspective) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Wall/Ceiling (Stone Texture) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradientNeutral)" />
<!-- 2. Perspective Floor (Platform at Y=450) -->
<path d="M0 450 L800 450 L600 500 L200 500 Z" fill="url(#floorTileGradient)" />
<!-- 3. Perspective Hallway Walls (Side stone) -->
<path d="M0 450 L0 0 L200 100 L200 500 L0 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<path d="M800 450 L800 0 L600 100 L600 500 L800 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<!-- 4. Arched Ceiling/Vaulting -->
<path d="M200 100 Q400 0, 600 100" stroke="rgb(150, 150, 140)" stroke-width="5" fill="none" />
<path d="M250 150 Q400 50, 550 150" stroke="rgb(150, 150, 140)" stroke-width="3" fill="none" />
<!-- 5. Back Window/Light Source (Faint glow at the end of the hall) -->
<rect x="350" y="100" width="100" height="150" fill="white" opacity="0.5" />
<!-- 6. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(160, 160, 150)" />
<!-- 7. Foreground Floor Tiles (Simple grid detail) -->
<g stroke="rgb(130, 130, 120)" stroke-width="1" opacity="0.7">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="400" y1="450" x2="400" y2="500" />
<line x1="200" y1="450" x2="200" y2="500" />
<line x1="600" y1="450" x2="600" y2="500" />
</g>
<!-- 8. Perspective Seating/Pews (Detail from reference image) -->
<g fill="rgb(100, 70, 40)" opacity="0.7">
<rect x="250" y="380" width="300" height="20" />
<rect x="250" y="420" width="300" height="20" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Light/Stone Gradient (Neutral, bright stone) -->
<linearGradient id="hallStoneGradientNeutral" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 220, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Perspective) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
<!-- Cube Fairy Glow (Icy Blue/White) -->
<radialGradient id="cubeGlow" cx="50%" cy="80%" r="40%" fx="50%" fy="80%">
<stop offset="0%" style="stop-color:rgb(200, 230, 255);stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:rgb(200, 230, 255);stop-opacity:0.0"/>
</radialGradient>
</defs>
<!-- 1. Background Wall/Ceiling (Stone Texture) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradientNeutral)" />
<!-- 2. Perspective Floor (Platform at Y=450) -->
<path d="M0 450 L800 450 L600 500 L200 500 Z" fill="url(#floorTileGradient)" />
<!-- 3. Central Glow for Cube Fairy (The visual effect) -->
<rect x="0" y="0" width="800" height="500" fill="url(#cubeGlow)" />
<!-- 4. Perspective Hallway Walls (Side stone) -->
<path d="M0 450 L0 0 L200 100 L200 500 L0 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<path d="M800 450 L800 0 L600 100 L600 500 L800 500 Z" fill="rgb(180, 180, 170)" opacity="0.8" />
<!-- 5. Arched Ceiling/Vaulting -->
<path d="M200 100 Q400 0, 600 100" stroke="rgb(150, 150, 140)" stroke-width="5" fill="none" />
<path d="M250 150 Q400 50, 550 150" stroke="rgb(150, 150, 140)" stroke-width="3" fill="none" />
<!-- 6. Back Window/Light Source (Faint glow at the end of the hall) -->
<rect x="350" y="100" width="100" height="150" fill="white" opacity="0.5" />
<!-- 7. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(160, 160, 150)" />
<!-- 8. Foreground Floor Tiles (Simple grid detail) -->
<g stroke="rgb(130, 130, 120)" stroke-width="1" opacity="0.7">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="400" y1="450" x2="400" y2="500" />
<line x1="200" y1="450" x2="200" y2="500" />
<line x1="600" y1="450" x2="600" y2="500" />
</g>
<!-- 9. Perspective Seating/Pews (Detail from reference image) -->
<g fill="rgb(100, 70, 40)" opacity="0.7">
<rect x="250" y="380" width="300" height="20" />
<rect x="250" y="420" width="300" height="20" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Stone Gradient (Neutral, bright stone) -->
<linearGradient id="hallStoneGradientNeutral" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 220, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Simple, straight lines) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
<!-- Outer Sky Light (From windows) -->
<stop id="outerSky" stop-color="rgb(200, 230, 255)" />
</defs>
<!-- 1. Background Wall (Far side) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradientNeutral)" />
<!-- 2. Arched Windows (Perspective on the right wall) -->
<g transform="translate(600, 0)">
<!-- Window 1 -->
<path d="M50 100 C70 50, 130 50, 150 100 L150 350 L50 350 Z" fill="url(#outerSky)" stroke="rgb(150, 150, 140)" stroke-width="5" />
<!-- Window 2 (Further back) -->
<path d="M-100 150 C-80 120, -20 120, 0 150 L0 350 L-100 350 Z" fill="url(#outerSky)" stroke="rgb(150, 150, 140)" stroke-width="5" opacity="0.7" />
</g>
<!-- 3. Foreground Wall/Pillar (Solid stone on the left) -->
<rect x="0" y="0" width="200" height="450" fill="rgb(180, 180, 170)" stroke="rgb(150, 150, 140)" stroke-width="5" />
<!-- 4. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(160, 160, 150)" />
<!-- 5. Floor Tiles (Simple parallel lines) -->
<g stroke="rgb(130, 130, 120)" stroke-width="1" opacity="0.7">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="0" y1="490" x2="800" y2="490" />
<line x1="250" y1="450" x2="250" y2="500" />
<line x1="550" y1="450" x2="550" y2="500" />
</g>
<!-- 6. Archway into the Hall (Detail on the left) -->
<path d="M200 200 C250 150, 350 150, 400 200 L400 450 L200 450 Z"
fill="rgb(140, 140, 130)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_6 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Stone Gradient (Neutral, bright stone) -->
<linearGradient id="hallStoneGradientNeutral" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 220, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(200, 200, 190);stop-opacity:1" />
</linearGradient>
<!-- Floor Tile Gradient (Simple, straight lines) -->
<linearGradient id="floorTileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 140);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 170);stop-opacity:1" />
</linearGradient>
<!-- Outer Sky Light (From windows) -->
<stop id="outerSky" stop-color="rgb(200, 230, 255)" />
</defs>
<!-- 1. Background Wall (Far side) -->
<rect x="0" y="0" width="800" height="500" fill="url(#hallStoneGradientNeutral)" />
<!-- 2. Arched Windows (Perspective on the right wall) -->
<g transform="translate(600, 0)">
<!-- Window 1 -->
<path d="M50 100 C70 50, 130 50, 150 100 L150 350 L50 350 Z" fill="url(#outerSky)" stroke="rgb(150, 150, 140)" stroke-width="5" />
<!-- Window 2 (Further back) -->
<path d="M-100 150 C-80 120, -20 120, 0 150 L0 350 L-100 350 Z" fill="url(#outerSky)" stroke="rgb(150, 150, 140)" stroke-width="5" opacity="0.7" />
</g>
<!-- 3. Central Glow for Hexagon Fairy -->
<rect x="0" y="0" width="800" height="500" fill="url(#hexagonGlow)" />
<!-- 4. Foreground Wall/Pillar (Solid stone on the left) -->
<rect x="0" y="0" width="200" height="450" fill="rgb(180, 180, 170)" stroke="rgb(150, 150, 140)" stroke-width="5" />
<!-- 5. Foreground Platform (The main player area at Y=450) -->
<rect x="0" y="450" width="800" height="50" fill="rgb(160, 160, 150)" />
<!-- 6. Floor Tiles (Simple parallel lines) -->
<g stroke="rgb(130, 130, 120)" stroke-width="1" opacity="0.7">
<line x1="0" y1="470" x2="800" y2="470" />
<line x1="0" y1="490" x2="800" y2="490" />
<line x1="250" y1="450" x2="250" y2="500" />
<line x1="550" y1="450" x2="550" y2="500" />
</g>
<!-- 7. Archway into the Hall (Detail on the left) -->
<path d="M200 200 C250 150, 350 150, 400 200 L400 450 L200 450 Z"
fill="rgb(140, 140, 130)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_7 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Tapestry/Wood Gradient (Darker, richer tone) -->
<linearGradient id="tapestryHallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 80, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 60, 60);stop-opacity:1" />
</linearGradient>
<!-- Ornate Floor Pattern Color -->
<linearGradient id="ornateFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 120, 100);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Walls/Ceiling (Dark, rich color) -->
<rect x="0" y="0" width="800" height="500" fill="url(#tapestryHallGradient)" />
<!-- 2. Tapestries (Hanging cloth details) -->
<g fill="rgb(150, 40, 40)" opacity="0.8">
<rect x="100" y="50" width="100" height="350" />
<rect x="600" y="50" width="100" height="350" />
<!-- Faint Gold Trim -->
<rect x="195" y="50" width="5" height="350" fill="gold" opacity="0.5" />
<rect x="595" y="50" width="5" height="350" fill="gold" opacity="0.5" />
</g>
<!-- 3. Foreground Platform (Ornate Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#ornateFloorGradient)" />
<!-- 4. Ornate Floor Pattern (Simple geometric carpet/tiling) -->
<g stroke="rgb(180, 160, 140)" stroke-width="2" opacity="0.7" fill="none">
<!-- Diagonal lines -->
<path d="M0 450 L800 500" />
<path d="M800 450 L0 500" />
<!-- Center Point -->
<circle cx="400" cy="475" r="10" fill="gold" stroke="none" opacity="0.9" />
</g>
<!-- 5. Archway/Pillar Silhouettes (Foreground frame) -->
<g fill="rgb(50, 40, 40)" opacity="0.9">
<rect x="0" y="0" width="50" height="450" />
<rect x="750" y="0" width="50" height="450" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_8 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Tapestry/Wood Gradient (Darker, richer tone) -->
<linearGradient id="tapestryHallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 80, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 60, 60);stop-opacity:1" />
</linearGradient>
<!-- Ornate Floor Pattern Color -->
<linearGradient id="ornateFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 100, 80);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(140, 120, 100);stop-opacity:1" />
</linearGradient>
<!-- Pentagon Fairy Glow (Pink/Magenta) -->
<radialGradient id="pentagonGlow" cx="50%" cy="80%" r="40%" fx="50%" fy="80%">
<stop offset="0%" style="stop-color:rgb(255, 100, 180);stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:rgb(255, 100, 180);stop-opacity:0.0"/>
</radialGradient>
</defs>
<!-- 1. Background Walls/Ceiling (Dark, rich color) -->
<rect x="0" y="0" width="800" height="500" fill="url(#tapestryHallGradient)" />
<!-- 2. Tapestries (Hanging cloth details) -->
<g fill="rgb(150, 40, 40)" opacity="0.8">
<rect x="100" y="50" width="100" height="350" />
<rect x="600" y="50" width="100" height="350" />
<!-- Faint Gold Trim -->
<rect x="195" y="50" width="5" height="350" fill="gold" opacity="0.5" />
<rect x="595" y="50" width="5" height="350" fill="gold" opacity="0.5" />
</g>
<!-- 3. Central Glow for Pentagon Fairy -->
<rect x="0" y="0" width="800" height="500" fill="url(#pentagonGlow)" />
<!-- 4. Foreground Platform (Ornate Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#ornateFloorGradient)" />
<!-- 5. Ornate Floor Pattern (Simple geometric carpet/tiling) -->
<g stroke="rgb(180, 160, 140)" stroke-width="2" opacity="0.7" fill="none">
<!-- Diagonal lines -->
<path d="M0 450 L800 500" />
<path d="M800 450 L0 500" />
<!-- Center Point -->
<circle cx="400" cy="475" r="10" fill="gold" stroke="none" opacity="0.9" />
</g>
<!-- 6. Archway/Pillar Silhouettes (Foreground frame) -->
<g fill="rgb(50, 40, 40)" opacity="0.9">
<rect x="0" y="0" width="50" height="450" />
<rect x="750" y="0" width="50" height="450" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_9 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Armory Stone Gradient (Rougher, utilitarian gray) -->
<linearGradient id="armoryStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(120, 120, 120);stop-opacity:1" />
</linearGradient>
<!-- Metal Floor Plate Gradient -->
<linearGradient id="metalFloorPlateGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 100, 110);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(130, 130, 140);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Walls/Ceiling (Rough Stone) -->
<rect x="0" y="0" width="800" height="500" fill="url(#armoryStoneGradient)" />
<!-- 2. Weapon Racks/Shelving (Side details) -->
<g fill="rgb(80, 80, 90)">
<!-- Shelf 1 Left -->
<rect x="50" y="200" width="200" height="10" />
<rect x="50" y="300" width="200" height="10" />
<!-- Shelf 2 Right -->
<rect x="550" y="200" width="200" height="10" />
<rect x="550" y="300" width="200" height="10" />
</g>
<!-- 3. Foreground Platform (Metal Floor Plate) -->
<rect x="0" y="450" width="800" height="50" fill="url(#metalFloorPlateGradient)" />
<!-- 4. Floor Plates/Bolts (Grid detail) -->
<g stroke="rgb(180, 180, 180)" stroke-width="1" opacity="0.6">
<line x1="0" y1="475" x2="800" y2="475" />
<line x1="200" y1="450" x2="200" y2="500" />
<line x1="600" y1="450" x2="600" y2="500" />
<!-- Bolts -->
<circle cx="10" cy="455" r="2" fill="rgb(180, 180, 180)" />
<circle cx="790" cy="455" r="2" fill="rgb(180, 180, 180)" />
</g>
<!-- 5. Archway/Doorway (Far background, darker) -->
<rect x="350" y="100" width="100" height="350" fill="rgb(80, 80, 80)" />
<rect x="360" y="110" width="80" height="340" fill="rgb(40, 40, 40)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const MAP_SVG_10 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Throne Room/Ascension Sky Gradient (Majestic Violet/Gold) -->
<linearGradient id="ascensionSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(100, 50, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 100, 200);stop-opacity:1" />
</linearGradient>
<!-- Golden Light Source (From the final destination) -->
<radialGradient id="finalGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255, 215, 0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255, 215, 0);stop-opacity:0.0"/>
</radialGradient>
<!-- Foreground Marble/Gold Platform -->
<linearGradient id="marblePlatformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 200, 180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 220, 200);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Background Walls/Ceiling (Majestic Violet) -->
<rect x="0" y="0" width="800" height="500" fill="url(#ascensionSkyGradient)" />
<!-- 2. Final Doorway/Portal (The access to Queen Diamond) -->
<rect x="300" y="50" width="200" height="400" fill="rgb(200, 180, 160)" stroke="gold" stroke-width="5" />
<rect x="320" y="70" width="160" height="360" fill="black" opacity="0.8" />
<!-- 3. Golden Light from the doorway (The final reward glow) -->
<rect x="0" y="0" width="800" height="500" fill="url(#finalGlow)" opacity="0.4" />
<!-- 4. Foreground Platform (Marble Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#marblePlatformGradient)" />
<!-- 5. Ascending Stairs/Steps (Detail on the final door platform) -->
<g fill="rgb(180, 160, 140)" stroke="rgb(150, 130, 110)" stroke-width="1">
<rect x="250" y="430" width="300" height="20" />
<rect x="200" y="410" width="400" height="20" />
</g>
<!-- 6. Triangle Fairy Altar/Pedestal (Center stage) -->
<rect x="375" y="380" width="50" height="50" fill="rgb(255, 215, 0)" stroke="rgb(200, 160, 0)" stroke-width="3" />
<!-- 7. Archway/Columns (Frame the view) -->
<g fill="rgb(180, 160, 140)">
<rect x="0" y="0" width="50" height="450" />
<rect x="750" y="0" width="50" height="450" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`;
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5, MAP_SVG_6, MAP_SVG_7, MAP_SVG_8, MAP_SVG_9, MAP_SVG_10];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #7f8c8d;
color: white;
border: 2px solid #bdc3c7;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(189, 195, 199, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// --- FUNCIÓN CORREGIDA (de la solicitud anterior) ---
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
// Asegura que currentNPCData sea un array para la iteración
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
// La escala para el tamaño solo se aplica al NPC final (Fairy),
// para los demás, se usa el tamaño por defecto.
const size = NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
// Container for the clickable area
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
// Calculate scale and position for the generic container
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
// SVG Container for the graphic
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
// Adjust SVG display within the container (important for the fairy's scaling)
// La escala de la hada se aplica al contenedor SVG interno para mantener el área de clic
// con el tamaño por defecto si fuera necesario.
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
// *** FIX 1: Añadir el SVG al área de clic ***
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
// *** FIX 2: Añadir el área de clic al document.body ***
document.body.appendChild(clickArea);
});
}
// --- FIN DE LA FUNCIÓN CORREGIDA ---
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the Halls dialogue box (metallic/stone theme)
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
min-height: 80px;
padding: 15px 25px;
background: rgba(100, 100, 110, 0.9); /* Stone/Metal Gray */
border: 5px solid #bdc3c7; /* Polished Silver Border */
box-shadow: 0 0 20px rgba(189, 195, 199, 0.7);
border-radius: 10px;
font-family: 'Courier New', monospace;
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Triangle Fairy is only NPC in phase 9)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- VICTORY SCREEN SETUP (Includes final instruction) ---
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); color:#bdc3c7; font-size:36px; text-align:center; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #bdc3c7;">
LEVEL COMPLETE: INSIDE THE HALLS!<br>
${NPC_DATA[9].dialogue[2].split(':')[1].trim().toUpperCase()}
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "BACK TO LEVELS";
button.style.cssText = `
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #34495e;
color: white;
border: 4px solid #bdc3c7;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(189, 195, 199, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_10)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
window.startGameLevel10 = function() {
// ==UserScript==
// @name Drawaria Game Level 10 - The Top of the Castle
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Level 10: The Final Level. Ascend to the highest spire, face the Diamond Queen, and complete the adventure.
// @author YouTubeDrawaria
// @match https://drawaria.online/
// @match https://*.drawaria.online/*
// @match https://drawaria.online/test
// @match https://drawaria.online/room/*
// @grant none
// @license MIT
// @icon https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// ==/UserScript==
(function() {
'use strict';
// --- 1. LEVEL METADATA AND CONSTANTS ---
const LEVEL_TITLE = "The Top of the Castle";
const BACKGROUND_MUSIC_URL = "https://www.myinstants.com/media/sounds/drawaria-top-castle.mp3";
const VIEWBOX_WIDTH = 800;
const VIEWBOX_HEIGHT = 500;
const AVATAR_HEIGHT_PX = 64;
const GROUND_LEVEL_Y = 450;
const AVATAR_GROUND_Y = GROUND_LEVEL_Y - AVATAR_HEIGHT_PX;
const LEVEL_END_X = VIEWBOX_WIDTH + 220;
const LEVEL_START_X = 50;
const DIALOGUE_BOX_ID = 'centered-dialogue-box';
const NPC_WIDTH_DEFAULT = 100;
// --- 2. NPC DATA AND DIALOGUE CONFIGURATION ---
// Final Boss Character SVG Placeholder
const QUEEN_DIAMOND_SVG_CONTENT = `<?xml version="1.0" encoding="utf-8"?>
<svg height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="-16.622 0 516.622 754.084" xmlns:bx="https://boxy-svg.com">
<defs>
<filter id="inner-shadow-filter-0" bx:preset="inner-shadow 1 0 0 5 0.5 #fff" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="0"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in="SourceGraphic"/>
<feComponentTransfer result="choke">
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
<feFlood flood-color="#fff" result="color"/>
<feComposite operator="in" in="color" in2="choke" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<filter id="drop-shadow-filter-0" bx:preset="drop-shadow 1 10 -20 11 0.13 #fff688" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="11"/>
<feOffset dx="10" dy="-20"/>
<feComponentTransfer result="offsetblur">
<feFuncA id="spread-ctrl" type="linear" slope="0.26"/>
</feComponentTransfer>
<feFlood flood-color="#fff688"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g style="transform-origin: 232.425px 276.437px;">
<path d="M 268.499 74.175 C 270.457 75.467 272.289 76.836 273.981 78.274 C 273.981 86.47 354.518 138.88 354.518 138.486 C 353.008 136.976 291.387 133.419 295.978 138.01 C 287.165 148.292 347.686 281.633 358.177 269.394 C 354.419 271.388 313.534 271.528 319.671 271.525 C 297.965 279.418 352.339 401.166 365.639 396.33 C 365.029 401.985 302.604 372.556 304.988 390.351 C 291.075 408.901 332.321 486.083 336.626 480.343 C 333.48 509.795 199.961 478.2 203.155 447.423 C 203.155 447.423 189.669 451.926 175.934 445.338 C 82.431 400.487 110.816 382.487 121.145 319.918 C 124.342 300.553 131.949 287.337 141.686 277.126 C 144.073 267.002 147.018 255.506 149.091 241.93 C 154.05 209.458 171.568 194.058 190.78 181.127 C 191.126 178.687 191.437 176.147 191.69 173.496 C 192.844 161.413 196.863 152.567 202.426 145.484 C 172.459 140.888 150.221 123.948 150.221 103.752 C 150.221 80.025 180.915 60.791 218.777 60.791 C 236.528 60.791 268.499 74.175 268.499 74.175 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(185, 232, 225); filter: url("#inner-shadow-filter-0"); transform-box: fill-box; transform-origin: 50% 50%;"/>
<path d="M -179.13 51.07 L -135.254 96.316 L -179.13 96.316 L -179.13 51.07 Z" bx:shape="triangle -179.13 51.07 43.876 45.246 0 0 1@497701cd" style="stroke-width: 3px; fill: rgb(185, 232, 225); filter: none; stroke: rgb(141, 180, 189); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-0.954316, -0.2988, -0.298805, 0.954314, 290.098407, 36.576554)"/>
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;3;0" begin="0s" dur="4.04s" fill="freeze" keyTimes="0; 0.490532; 1" repeatCount="indefinite"/>
</g>
<rect style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 255, 231); filter: none;" height="35.762" transform="matrix(0, 1, -1, 0, 334.03141, 72.155206)" x="175.479" y="169.444" width="49.199"/>
<path d="M 236.928 164.234 C 254.665 197.943 199.978 250.295 139.442 252.855 C 78.906 255.414 90.491 249.911 112.536 179.436 C 134.58 108.961 143.416 102.393 176.484 100.792 C 209.552 99.191 219.191 130.526 236.928 164.234 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 255, 231); filter: none;"/>
<g style="transform-origin: 154.298px 163.845px;">
<g transform="matrix(0.77912, 0, 0, 0.906355, 39.182687, 3.125705)" style="filter: none;">
<path d="M 205.651 -107 Q 218.021 -125.39 230.392 -107 L 230.392 -107 Q 242.762 -88.609 218.021 -88.609 L 218.021 -88.609 Q 193.28 -88.609 205.651 -107 Z" bx:shape="triangle 193.28 -125.39 49.482 36.781 0.5 0.5 1@25bd427e" style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(64, 117, 128); stroke-width: 3.56079px; fill: rgb(255, 255, 255);" transform="matrix(0.989466, -0.144768, -0.275758, -0.970301, -42.077915, 280.992269)"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55983px; fill: rgb(255, 255, 255);" d="M 153.018 169.463 L 196.894 159.865"/>
<path style="transform-origin: 182.119px 193.09px; stroke: rgb(64, 117, 128); stroke-width: 3.55983px; fill: rgb(255, 255, 255);" d="M 168.536 194.174 L 195.702 192.006"/>
</g>
<g transform="matrix(0.840475, 0, 0, 0.933733, 26.199267, -0.159217)" style="filter: none;">
<path d="M 194.748 -101.4 Q 206.463 -118.83 218.178 -101.4 L 218.178 -101.4 Q 229.892 -83.971 206.463 -83.971 L 206.463 -83.971 Q 183.034 -83.971 194.748 -101.4 Z" bx:shape="triangle 183.034 -118.83 46.858 34.859 0.5 0.5 1@e5cf8636" style="transform-origin: 206.463px -97.044px; stroke: rgb(64, 117, 128); stroke-width: 3.38221px; fill: rgb(255, 255, 255);" transform="matrix(-0.989466, -0.144768, 0.275758, -0.970301, -79.159255, 274.692213)"/>
<path style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(64, 117, 128); stroke-width: 3.38179px; fill: rgb(255, 255, 255);" d="M 106.857 160.093 L 150.733 169.691" transform="matrix(-1, 0, 0, -1, 0.000024, 0.000003)"/>
<path style="transform-origin: 122.928px 190.854px; stroke: rgb(64, 117, 128); stroke-width: 3.38179px; fill: rgb(255, 255, 255);" d="M 109.345 189.77 L 136.511 191.938" transform="matrix(-1, 0, 0, -1, -0.000011, -0.000012)"/>
</g>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1" begin="18.78s" dur="2s" fill="freeze"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1" begin="18.78s" dur="2s" fill="freeze"/>
<animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;1 0.9;1 1" begin="0s" dur="4s" fill="freeze" keyTimes="0; 0.490799; 1" repeatCount="indefinite"/>
</g>
<path style="fill: rgb(216, 216, 216); stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none;" d="M 147.12 179.712 C 147.12 184.509 145.786 189.402 144.583 193.966 C 144.213 195.367 143.849 199.227 142.771 200.343"/>
<path style="fill: rgb(216, 216, 216); stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none;" d="M 142.771 200.343 C 145.605 201.18 158.716 204.651 158.716 199.967"/>
<path style="fill: rgb(216, 216, 216); stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none;" d="M 152.069 223.425 L 175.129 215.24 L 173.208 215.612"/>
<path fill="rgb(255,0,0)" d="M 143.937 87.398 C 145.599 86.833 148.027 86.613 149.932 87.068 C 151.892 87.535 154.031 89.163 155.519 90.263 C 156.76 91.183 156.809 92.105 158.46 93.093 C 161.232 94.749 167.32 96.94 172.443 98.44 C 178.075 100.091 185.135 101.661 191.019 102.371 C 196.444 103.027 202.364 102 206.512 102.815 C 209.781 103.457 212.309 104.266 214.427 105.985 C 216.569 107.724 217.503 109.596 219.255 113.241 C 222.092 119.146 225.878 133.619 228.882 140.614 C 231.098 145.769 244.409 180.146 247.887 185.858 C 249.299 188.176 249.294 188.529 249.281 190.158 C 249.264 192.091 248.69 195.065 247.208 196.787 C 245.609 198.645 242.17 200.451 239.645 200.66 C 237.223 200.858 235.509 200.684 232.366 198.274 C 225.992 193.39 212.683 151.782 209.776 145.056 C 206.673 137.871 205.745 125.142 201.495 121.764 C 198.333 119.252 194.439 122.067 189.541 121.502 C 182.924 120.736 172.206 119.068 164.687 116.583 C 157.695 114.274 150.09 110.381 145.692 107.46 C 142.586 105.399 140.539 103.38 139.266 101.455 C 138.289 99.977 137.835 98.817 137.874 97.156 C 137.922 95.113 139.104 91.652 140.296 89.995 C 141.261 88.654 142.457 87.902 143.937 87.398 Z" style="fill: rgb(166, 209, 48); transform-origin: 201.101px 143.644px; stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none;"/>
<g style="transform-origin: 64.388px 58.948px; filter: url("#drop-shadow-filter-0");" transform="matrix(0.959098, 0.283073, -0.283079, 0.959098, 173.440937, -7.380397)">
<path d="M 15.667 42.259 L 47.628 65.986 L 66.623 17.603 L 86.009 69.267 L 112.64 41.848 L 112.64 100.2 L 91.795 100.2 L 92.922 103.898 L 40.323 103.898 L 41.325 100.611 L 15.667 100.611 L 15.667 42.259 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 246, 136);"/>
<path d="M 113.469 101.486 C 113.469 110.337 91.586 105.275 64.592 105.275 C 37.598 105.275 15.715 110.337 15.715 101.486 C 15.715 92.635 37.598 85.46 64.592 85.46 C 91.586 85.46 113.469 92.635 113.469 101.486 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 246, 136);"/>
<ellipse style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 246, 136);" cx="15.972" cy="42.24" rx="9.045" ry="9.843"/>
<ellipse style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 246, 136);" cx="67.177" cy="23.151" rx="9.577" ry="11.971"/>
<ellipse style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(255, 246, 136);" cx="112.804" cy="44.102" rx="9.045" ry="10.109"/>
</g>
<path d="M 117.654 559.517 L 201.17 597.469 C 201.321 606.421 118.718 605.526 118.506 592.998 L 117.654 559.517 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none; fill: rgb(99, 255, 201);" transform="matrix(-0.925676, 0.378316, -0.378316, -0.925676, 452.545115, 1097.090721)"/>
<path d="M 125.347 605.126 L 80.739 596.473 L 110.438 443.363 L 144.182 449.908 L 183.234 442.333 L 212.932 595.444 L 168.324 604.096 L 146.935 493.826 L 125.347 605.126 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;"/>
<rect rx="8" ry="8" style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" height="79.291" transform="matrix(0.005025, 0.999987, -0.999987, 0.005025, 400.806161, 172.549991)" x="114.909" y="214.555" width="162.909"/>
<g>
<path d="M 86.679 465.085 L 113.738 465.085 L 113.738 343.323 C 119.531 340.283 123.461 334.376 123.461 327.587 C 123.461 317.691 115.111 309.668 104.81 309.668 C 94.992 309.668 86.945 316.957 86.213 326.21 C 79.377 326.875 74.092 331.331 74.092 336.729 C 74.092 342.249 79.618 346.784 86.679 347.287 L 86.679 465.085 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none; fill: rgb(255, 255, 255); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000047, 0.000036)"/>
<ellipse style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" cx="101.402" cy="301.856" rx="24.15" ry="25.377"/>
<path d="M 213.973 440.4 C 213.973 450.296 205.623 458.319 195.322 458.319 C 185.504 458.319 177.457 451.03 176.725 441.777 C 169.889 441.112 164.604 436.656 164.604 431.258 C 164.604 425.592 170.426 420.964 177.754 420.668 L 177.754 316.268 L 205.473 316.268 L 205.473 425.365 C 210.589 428.56 213.973 434.101 213.973 440.4 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3px; filter: none; fill: rgb(255, 255, 255);"/>
<ellipse style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" cx="190.632" cy="301.447" rx="27.424" ry="27.424"/>
<animateMotion path="M 0 0 L 0.415 9.487 C 0.173 10.996 0.542 8.415 0.041 0" calcMode="linear" begin="0s" dur="4.48s" fill="freeze" repeatCount="indefinite"/>
</g>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" d="M 100.283 500.13 C 109.083 507.17 145.381 459.653 136.581 452.613"/>
<path style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" d="M 156.072 452.005 C 164.872 444.965 201.17 492.482 192.37 499.522" transform="matrix(-1, 0, 0, -1, 0.000023, -0.000033)"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" d="M 101.385 491.741 C 107.733 497.751 133.915 457.186 127.567 451.176"/>
<path style="transform-box: fill-box; transform-origin: 50% 50%; stroke: rgb(64, 117, 128); stroke-width: 3px; fill: rgb(22, 56, 216); filter: none;" d="M 165.713 452.118 C 172.061 446.108 198.243 486.673 191.895 492.683" transform="matrix(-1, 0, 0, -1, 0.000034, -0.000038)"/>
<g transform="matrix(0.933786, 0, 0, 0.752685, 115.037242, 64.715715)" style="filter: none;">
<g>
<path d="M 33 -417.01 L 60.174 -353.495 L 5.825 -353.495 L 33 -417.01 Z" bx:shape="triangle 5.825 -417.01 54.349 63.515 0.5 0 1@5e4957fa" style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" transform="matrix(1, 0, 0, -1, 0, 0)"/>
<path d="M 14.02 341.981 L 52.039 341.981 L 60.197 353.702 L 5.908 353.702 L 14.02 341.981 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3.55773px; fill: rgb(64, 255, 247); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.99999, -0.005618, 0.00365, 0.99999, 0, 0)"/>
</g>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 19.794 342.428 L 19.494 353.892"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 32.908 342.578 L 32.608 353.075"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 46.047 341.769 L 45.747 353.959"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 19.561 353.225 L 32.458 415.612"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 32.458 353.525 L 33.358 416.512"/>
<path style="stroke: rgb(64, 117, 128); stroke-width: 3.55772px; fill: rgb(64, 255, 247);" d="M 45.955 353.525 L 33.358 415.912"/>
</g>
<path d="M 228.135 627.164 L 136.469 623.629 C 132.942 615.399 209.744 584.978 214.68 596.493 L 228.135 627.164 Z" style="stroke: rgb(64, 117, 128); stroke-width: 3; filter: none; fill: rgb(99, 255, 201); transform-origin: 180.177px 622.644px;"/>
</svg>`;
// Final Boss Central Position
const QUEEN_X = 400 - NPC_WIDTH_DEFAULT/2;
const QUEEN_Y = 300;
const QUEEN_SCALE = 0.4;
// NPC DATA - Only Queen Diamond appears in the final phase
const NPC_DATA = {
4: { char_id: 'QUEEN_DIAMOND', name: 'Queen Diamond', svg_content: QUEEN_DIAMOND_SVG_CONTENT, x: QUEEN_X, y: QUEEN_Y, scale: QUEEN_SCALE, final_npc: true, dialogue: [
"Queen Diamond: So, you finally stand before me. The culmination of all my trials.",
"Queen Diamond: You have walked through the memories of Drawaria: the Foundation, the Wilderness, the Scars, the Serenity, and the Machinery.",
"Queen Diamond: But the greatest challenge is not the journey you undertook, but the question you face now.",
"Queen Diamond: Who are you, traveler? Are you merely a player in this world, or the true artist of your destiny?",
"Queen Diamond: I am the Queen, the pure essence of all shapes. My existence is defined by perfection and order.",
"Queen Diamond: Yet, your journey—full of unpredictable, imperfect motion—is what gives my world meaning.",
"Queen Diamond: Your answer is reflected in your completion of all the trials. You are the Architect.",
"Queen Diamond: With that, I yield my final secret."
] },
};
const MAX_TRANSITIONS = 4; // 4 transitions (Map 1 -> 2 -> 3 -> 4 -> 5). Total 5 phases/maps.
// --- 2. SVG ASSETS PLACEHOLDERS ---
const MAP_SVG_1 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky/Ceiling Gradient (High-Altitude Pale Blue/White) -->
<linearGradient id="paleSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(240, 250, 255);stop-opacity:1" />
</linearGradient>
<!-- Marble Floor Gradient (Cool, reflective white/gray) -->
<linearGradient id="marbleFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 200, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(230, 230, 240);stop-opacity:1" />
</linearGradient>
<!-- Accent Blue (Diamond/Aqua Color) -->
<stop id="diamondAqua" stop-color="rgb(0, 255, 255)" />
</defs>
<!-- 1. Ceiling/Walls (High, Pale Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#paleSkyGradient)" />
<!-- 2. Grand Staircase (Perspective view, going up/right) -->
<g fill="rgb(240, 240, 250)" stroke="rgb(180, 180, 190)" stroke-width="2">
<!-- Step 1 -->
<rect x="100" y="400" width="700" height="50" />
<!-- Step 2 -->
<rect x="200" y="350" width="600" height="50" />
<!-- Step 3 -->
<rect x="300" y="300" width="500" height="50" />
</g>
<!-- 3. Foreground Platform (Final Step of the Staircase) -->
<rect x="0" y="450" width="800" height="50" fill="url(#marbleFloorGradient)" />
<!-- 4. Diamond/Jewel Accents (Scattered sparkle) -->
<g fill="rgb(0, 255, 255)" opacity="0.8">
<!-- Blue Diamonds on steps -->
<polygon points="150,440 160,420 170,440 160,450 Z" />
<polygon points="350,390 360,370 370,390 360,400 Z" />
<!-- Aqua Gems on the wall -->
<circle cx="50" cy="100" r="8" fill="rgb(0, 200, 200)" />
<circle cx="750" cy="50" r="10" fill="rgb(0, 200, 200)" />
</g>
<!-- 5. Railing/Guard Detail (Top of the wall/platform) -->
<rect x="0" y="440" width="800" height="10" fill="rgb(100, 150, 200)" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`; // Grand Staircase
const MAP_SVG_2 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Wall Gradient (Opulent, polished stone) -->
<linearGradient id="opulentStoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 200, 210);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(230, 230, 240);stop-opacity:1" />
</linearGradient>
<!-- Reflective Floor Gradient (Mirror-like reflection) -->
<linearGradient id="reflectiveFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(180, 180, 190);stop-opacity:1" />
</linearGradient>
<!-- Accent Aqua/Blue (Crystal Color) -->
<stop id="crystalBlue" stop-color="rgb(0, 200, 255)" />
</defs>
<!-- 1. Walls/Ceiling (Opulent Stone) -->
<rect x="0" y="0" width="800" height="500" fill="url(#opulentStoneGradient)" />
<!-- 2. Arched Windows/Alcoves (Perspective along the walls) -->
<g fill="rgb(180, 220, 255)" stroke="rgb(100, 150, 200)" stroke-width="3" opacity="0.8">
<!-- Left Alcoves -->
<rect x="50" y="150" width="100" height="250" />
<rect x="250" y="200" width="80" height="200" />
<!-- Right Alcoves -->
<rect x="650" y="150" width="100" height="250" />
<rect x="470" y="200" width="80" height="200" />
</g>
<!-- 3. Foreground Platform (Reflective Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#reflectiveFloorGradient)" />
<!-- 4. Chandelier/Crystal Detail (From the ceiling) -->
<g transform="translate(400, 50)" fill="white" stroke="url(#crystalBlue)" stroke-width="2">
<path d="M0 0 L-20 40 L20 40 Z" />
<path d="M0 0 L-30 60 L-10 60 Z" />
<path d="M0 0 L30 60 L10 60 Z" />
<circle cx="0" cy="0" r="10" fill="rgb(0, 255, 255)" />
</g>
<!-- 5. Diamond Accents (Scattered sparkle on walls) -->
<g fill="rgb(0, 255, 255)" opacity="0.9">
<polygon points="10,400 20,380 30,400 20,410 Z" />
<polygon points="770,400 780,380 790,400 780,410 Z" />
</g>
<!-- 6. Floor Reflection Line (Indicates mirror quality) -->
<path d="M0 450 Q400 445, 800 450" stroke="white" stroke-width="2" opacity="0.3" fill="none" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`; // Diamond Gallery
const MAP_SVG_3 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Wall Gradient (Security Gray/Metal) -->
<linearGradient id="securityWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(120, 120, 130);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(150, 150, 160);stop-opacity:1" />
</linearGradient>
<!-- Metal Grate Floor Gradient -->
<linearGradient id="metalGrateFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(80, 80, 90);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(110, 110, 120);stop-opacity:1" />
</linearGradient>
<!-- Accent Red (Security Warning) -->
<stop id="securityRed" stop-color="rgb(255, 0, 0)" />
</defs>
<!-- 1. Walls/Ceiling (Security Gray) -->
<rect x="0" y="0" width="800" height="500" fill="url(#securityWallGradient)" />
<!-- 2. Security Grates/Bars (Background detail) -->
<g stroke="rgb(90, 90, 100)" stroke-width="5" opacity="0.9">
<!-- Vertical Bars -->
<line x1="50" y1="0" x2="50" y2="450" />
<line x1="750" y1="0" x2="750" y2="450" />
<!-- Horizontal Bars -->
<line x1="0" y1="200" x2="800" y2="200" />
</g>
<!-- 3. Foreground Platform (Metal Grate Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#metalGrateFloorGradient)" />
<!-- 4. Warning Lights/Panels (Red security details) -->
<g fill="url(#securityRed)" opacity="0.7">
<rect x="100" y="400" width="50" height="50" />
<rect x="650" y="400" width="50" height="50" />
<rect x="400" y="10" width="10" height="20" />
</g>
<!-- 5. Floor Grid/Plates (Detail on the floor) -->
<g stroke="rgb(150, 150, 160)" stroke-width="1" opacity="0.8">
<line x1="0" y1="475" x2="800" y2="475" />
<line x1="300" y1="450" x2="300" y2="500" />
<line x1="500" y1="450" x2="500" y2="500" />
</g>
<!-- 6. Faint Blue Diamond Glow (Reminder of the goal) -->
<circle cx="400" cy="250" r="200" fill="rgb(0, 200, 255)" opacity="0.05" />
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`; // Throne Ante-Chamber
const MAP_SVG_4 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Interior Wall Gradient (Vibrant, high-energy blue) -->
<linearGradient id="vibrantBlueGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(50, 100, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80, 130, 230);stop-opacity:1" />
</linearGradient>
<!-- Energy Floor Gradient (White/Aqua) -->
<linearGradient id="energyFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(150, 220, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 240, 255);stop-opacity:1" />
</linearGradient>
<!-- Diamond Energy Focus (Intense Aqua/White) -->
<radialGradient id="diamondFocusGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0, 255, 255);stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:0.1"/>
</radialGradient>
</defs>
<!-- 1. Walls/Ceiling (Vibrant Blue) -->
<rect x="0" y="0" width="800" height="500" fill="url(#vibrantBlueGradient)" />
<!-- 2. Energy Focus Glow (Center) -->
<rect x="0" y="0" width="800" height="500" fill="url(#diamondFocusGlow)" />
<!-- 3. Foreground Platform (Energy Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#energyFloorGradient)" />
<!-- 4. Energy Lines (Converging toward the center-top) -->
<g stroke="white" stroke-width="2" opacity="0.8">
<line x1="0" y1="450" x2="400" y2="100" />
<line x1="800" y1="450" x2="400" y2="100" />
<line x1="200" y1="450" x2="400" y2="200" />
<line x1="600" y1="450" x2="400" y2="200" />
</g>
<!-- 5. Diamond Crystalline Pillars (Foreground frame) -->
<g fill="rgb(0, 200, 200)" stroke="white" stroke-width="2">
<rect x="0" y="150" width="30" height="300" />
<rect x="770" y="150" width="30" height="300" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`; // Final Ascent
const MAP_SVG_5 = `<svg width="100%" height="100%" viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Throne Room Wall Gradient (Warm Gold/Yellow) -->
<linearGradient id="throneWallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240, 220, 150);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 240, 180);stop-opacity:1" />
</linearGradient>
<!-- Throne Room Floor Gradient (Polished Marble/Gold inlay) -->
<linearGradient id="throneFloorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200, 200, 200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(220, 220, 220);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 1. Walls/Ceiling (Warm Gold/Yellow) -->
<rect x="0" y="0" width="800" height="500" fill="url(#throneWallGradient)" />
<!-- 2. Distant Colonnade/Windows (Perspective detail, using gold lines) -->
<g stroke="rgb(218, 165, 32)" stroke-width="3" opacity="0.7" fill="none">
<line x1="100" y1="0" x2="100" y2="450" />
<line x1="700" y1="0" x2="700" y2="450" />
<line x1="200" y1="0" x2="200" y2="450" />
<line x1="600" y1="0" x2="600" y2="450" />
</g>
<!-- 3. Throne Altar/Pedestal (Central feature for the Queen) -->
<g transform="translate(400, 450)">
<!-- Main Pedestal Box (Inspired by the white/metal box) -->
<rect x="-150" y="-150" width="300" height="150" fill="rgb(240, 240, 240)" stroke="rgb(180, 180, 180)" stroke-width="2" />
<!-- Gold Trim/Railing -->
<rect x="-160" y="-160" width="320" height="10" fill="gold" />
<!-- Throne Chair Silhouette (Red/Gold detail) -->
<g transform="translate(0, -150) scale(0.8)">
<rect x="-100" y="-150" width="200" height="200" fill="red" />
<rect x="-80" y="-130" width="160" height="180" fill="rgb(150, 0, 0)" />
<path d="M-100 50 Q0 -100, 100 50" fill="rgb(255, 215, 0)" stroke="rgb(218, 165, 32)" stroke-width="3" />
</g>
</g>
<!-- 4. Foreground Platform (Throne Floor) -->
<rect x="0" y="450" width="800" height="50" fill="url(#throneFloorGradient)" />
<!-- 5. Royal Carpet (Red path detail) -->
<rect x="350" y="450" width="100" height="50" fill="red" />
<!-- 6. Diamond/Crystal Chandelier Shadow (Small dots of light on the floor) -->
<g fill="rgb(0, 255, 255)" opacity="0.5">
<circle cx="250" cy="460" r="3" />
<circle cx="550" cy="480" r="4" />
</g>
<!-- This horizontal line represents the absolute ground level at Y=450 -->
<!-- <line x1="0" y1="450" x2="800" y2="450" stroke="red" stroke-width="2" /> -->
</svg>`; // Throne Room
const BACKGROUND_SVGS = [MAP_SVG_1, MAP_SVG_2, MAP_SVG_3, MAP_SVG_4, MAP_SVG_5];
// All other NPC SVG placeholders are defined inside NPC_DATA above.
// --- 3. STATE AND GAME VARIABLES ---
let mapContainer = null;
let backgroundMusic = null;
let musicButton = null;
let currentMapIndex = 0;
let phasesCompleted = 0;
// Avatar state
let avatarX = LEVEL_START_X;
let avatarY = AVATAR_GROUND_Y;
let avatarVX = 0;
let avatarVY = 0;
let isJumping = false;
let isLevelComplete = false;
let selfAvatarImage = null;
let keys = {};
// Dialogue state
let isDialogueActive = false;
let currentDialogueIndex = 0;
let dialogueBox = null;
let dialogueName = null;
let dialogueText = null;
let activeNPCDialogue = null;
// --- 4. ENVIRONMENT AND SETUP ---
function setupEnvironment() {
const originalBody = document.body;
selfAvatarImage = document.querySelector('#selfavatarimage');
if (!selfAvatarImage) {
setTimeout(setupEnvironment, 100);
return;
}
// 1. Setup the Map Container and clear body
mapContainer = document.createElement('div');
mapContainer.id = 'map-container';
mapContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
overflow: hidden;
background-color: #000000;
`;
originalBody.innerHTML = '';
originalBody.style.background = 'none';
originalBody.appendChild(mapContainer);
// 2. Add Avatar
originalBody.appendChild(selfAvatarImage);
selfAvatarImage.style.position = 'absolute';
selfAvatarImage.style.zIndex = '1000';
selfAvatarImage.style.pointerEvents = 'none';
selfAvatarImage.style.display = 'block';
selfAvatarImage.style.width = AVATAR_HEIGHT_PX + 'px';
selfAvatarImage.style.height = AVATAR_HEIGHT_PX + 'px';
// 3. Inject Dialogue Box
createDialogueBox();
// 4. Load initial map (Map 1)
updateMapSVG();
// 5. Setup Music (initialization only) and Button
initializeMusic();
createMusicButton();
// 6. Start game loop
updateAvatar();
}
function initializeMusic() {
backgroundMusic = new Audio(BACKGROUND_MUSIC_URL);
backgroundMusic.loop = true;
backgroundMusic.volume = 0.5;
}
function createMusicButton() {
musicButton = document.createElement('button');
musicButton.textContent = LEVEL_TITLE + " Music";
musicButton.style.cssText = `
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
background-color: #34495e;
color: #ecf0f1;
border: 2px solid #bdc3c7;
border-radius: 5px;
cursor: pointer;
z-index: 10002;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(189, 195, 199, 0.7);
`;
musicButton.addEventListener('click', startMusic);
document.body.appendChild(musicButton);
}
function startMusic() {
if (backgroundMusic) {
backgroundMusic.play()
.then(() => {
musicButton.style.display = 'none';
musicButton.removeEventListener('click', startMusic);
})
.catch(e => {
console.error("Failed to play music on click:", e);
musicButton.textContent = "Music Error (Click to retry)";
});
}
}
function updateMapSVG() {
if (currentMapIndex < BACKGROUND_SVGS.length) {
mapContainer.innerHTML = BACKGROUND_SVGS[currentMapIndex];
}
// Inject NPCs relevant to the current map phase
injectNPCs();
}
function removeAllNPCs() {
document.querySelectorAll('.npc-clickarea').forEach(npc => npc.remove());
}
// Injects NPCs based on the phase (same corrected function as before)
function injectNPCs() {
removeAllNPCs();
const currentNPCData = NPC_DATA[currentMapIndex];
if (!currentNPCData) return;
const npcs = Array.isArray(currentNPCData) ? currentNPCData : [currentNPCData];
npcs.forEach(npcData => {
const isFinalNPC = npcData.final_npc;
const size = NPC_WIDTH_DEFAULT;
const x = npcData.initial_x || npcData.x;
const y = npcData.initial_y || npcData.y || AVATAR_GROUND_Y;
const clickArea = document.createElement('div');
clickArea.id = `${npcData.char_id}-clickarea`;
clickArea.className = 'npc-clickarea';
clickArea.style.cssText = `
position: absolute;
top: ${y}px;
left: ${x}px;
width: ${size}px;
height: ${size}px;
z-index: 999;
cursor: pointer;
display: block;
`;
const svgContainer = document.createElement('div');
svgContainer.id = npcData.char_id;
svgContainer.innerHTML = npcData.svg_content;
svgContainer.style.cssText = `
width: 100%;
height: 100%;
${isFinalNPC && npcData.scale ? `transform: scale(${npcData.scale}); transform-origin: top left;` : ''}
`;
clickArea.appendChild(svgContainer);
clickArea.addEventListener('click', () => startDialogue(npcData));
document.body.appendChild(clickArea);
});
}
// --- 5. NPC AND DIALOGUE LOGIC ---
function createDialogueBox() {
const box = document.createElement('div');
box.id = DIALOGUE_BOX_ID;
dialogueName = document.createElement('div');
dialogueName.style.cssText = `
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
color: #f1c40f; /* Gold for The Top */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
dialogueText = document.createElement('div');
dialogueText.style.cssText = `
font-size: 18px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
`;
box.appendChild(dialogueName);
box.appendChild(dialogueText);
document.body.appendChild(box);
dialogueBox = box;
// Custom style for the final, regal dialogue box
box.style.cssText += `
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 650px; /* Slightly wider for the serious dialogue */
min-height: 80px;
padding: 15px 25px;
background: rgba(20, 20, 30, 0.95); /* Deep Black/Blue Velvet */
border: 5px solid #ffd700; /* True Gold Border */
box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); /* Strong Gold Glow */
border-radius: 10px;
font-family: 'Times New Roman', serif; /* Royal Font */
z-index: 10001;
display: none;
cursor: pointer;
`;
}
function startDialogue(npcData) {
if (isDialogueActive || isLevelComplete) return;
isDialogueActive = true;
currentDialogueIndex = 0;
activeNPCDialogue = npcData.dialogue;
dialogueBox.style.display = 'block';
dialogueBox.style.pointerEvents = 'auto';
// Reset listeners
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.removeEventListener('click', endDialogue);
processDialogue();
dialogueBox.addEventListener('click', processDialogue);
}
function processDialogue() {
if (!isDialogueActive || !activeNPCDialogue) return;
if (currentDialogueIndex >= activeNPCDialogue.length) {
endDialogue();
return;
}
const line = activeNPCDialogue[currentDialogueIndex];
const parts = line.split(':');
const name = parts[0];
const text = parts.slice(1).join(':').trim();
dialogueName.textContent = `${name}:`;
dialogueText.textContent = text;
currentDialogueIndex++;
// If this is the last line, change the listener to end the dialogue/level
if (currentDialogueIndex >= activeNPCDialogue.length) {
dialogueBox.removeEventListener('click', processDialogue);
dialogueBox.addEventListener('click', endDialogue);
}
}
function endDialogue() {
isDialogueActive = false;
dialogueBox.style.display = 'none';
currentDialogueIndex = 0;
dialogueBox.style.pointerEvents = 'none';
// Final Level Completion Check (Queen Diamond is only NPC in phase 4)
if (currentMapIndex === BACKGROUND_SVGS.length - 1) {
isLevelComplete = true;
// --- GRAND FINALE VICTORY SCREEN ---
const finalMessageLine = NPC_DATA[4].dialogue[7]; // "Your answer is reflected... Go, and draw your future."
const finalMessage = "DRAWARIA.ONLINE STORIES IS COMPLETE!";
const subMessage = finalMessageLine.split(':')[1].trim().toUpperCase();
mapContainer.innerHTML = `
<div id="victory-message" style="position:absolute; top:30%; left:50%; transform:translate(-50%, -50%); color:#ffd700; font-size:48px; text-align:center; font-family: 'Times New Roman', serif; text-shadow: 0 0 20px #ffd700;">
${finalMessage}<br>
<span style="font-size: 28px; color: white;">"${subMessage}"</span>
</div>
`;
createBackToLevelsButton();
// ---------------------------
if (backgroundMusic) {
backgroundMusic.pause();
}
if (musicButton) {
musicButton.style.display = 'none';
}
removeAllNPCs();
// Disable movement
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}
function createBackToLevelsButton() {
const button = document.createElement('button');
button.textContent = "Play Again";
button.style.cssText = `
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
padding: 15px 25px;
background-color: #34495e;
color: #ffd700;
border: 4px solid #ffd700;
border-radius: 8px;
cursor: pointer;
z-index: 10003;
font-size: 24px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
`;
button.addEventListener('click', () => {
window.location.reload();
});
document.body.appendChild(button);
}
// --- 6. GAME LOOP AND MOVEMENT LOGIC ---
function advanceMap() {
// Increment phase/map
phasesCompleted++;
if (currentMapIndex < BACKGROUND_SVGS.length - 1) {
currentMapIndex++;
updateMapSVG();
}
}
function updateAvatar() {
if (isLevelComplete) return;
// Standard Platformer Physics
const GRAVITY = 0.5;
const JUMP_HEIGHT = 15;
const MAX_SPEED = 10;
const FRICTION = 0.9;
// Stop movement during dialogue
if (isDialogueActive) {
avatarVX = 0;
avatarVY = 0;
isJumping = false;
} else {
avatarVY += GRAVITY;
if (keys['ArrowRight']) {
avatarVX = Math.min(avatarVX + 0.5, MAX_SPEED);
} else if (keys['ArrowLeft']) {
avatarVX = Math.max(avatarVX - 0.5, -MAX_SPEED);
} else {
avatarVX *= FRICTION;
}
// Normal Platformer Jump
if (keys['ArrowUp'] && !isJumping) {
avatarVY = -JUMP_HEIGHT;
isJumping = true;
}
}
avatarX += avatarVX;
avatarY += avatarVY;
// Ground collision
if (avatarY > AVATAR_GROUND_Y) {
avatarY = AVATAR_GROUND_Y;
avatarVY = 0;
isJumping = false;
}
// LEVEL PROGRESSION LOGIC (Teleport to start and advance map)
if (avatarX > LEVEL_END_X) {
avatarX = LEVEL_START_X; // Teleport to start
// Advance map if there are more phases
if (phasesCompleted < MAX_TRANSITIONS) {
advanceMap();
} else if (currentMapIndex === BACKGROUND_SVGS.length - 2) {
// Final transition to the last map (MAP_SVG_5)
currentMapIndex++;
updateMapSVG();
}
}
// Keep avatar within left boundary
if (avatarX < 0) {
avatarX = 0;
avatarVX = 0;
}
// Update the visual representation of the avatar
drawAvatar(avatarX, avatarY);
requestAnimationFrame(updateAvatar);
}
function handleKeyDown(event) {
keys[event.key] = true;
}
function handleKeyUp(event) {
keys[event.key] = false;
}
function drawAvatar(x, y) {
if (selfAvatarImage) {
// Apply scale/translation for the in-game coordinates
selfAvatarImage.style.transform = `translate(${x}px, ${y}px) scale(1)`;
selfAvatarImage.style.border = 'none';
selfAvatarImage.style.boxShadow = 'none';
}
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
// Initial script start with a delay to ensure Drawaria elements are loaded
setTimeout(setupEnvironment, 0);
})();
};
// =====================================================================
// === FIN DE LA SECCIÓN DE DEFINICIÓN DE NIVELES GLOBALES ===
// =====================================================================
// --- CONFIGURACIÓN DE RECURSOS Y TIEMPOS ---
const RESOURCES = {
BACKGROUND_INTRO: 'https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bm9jaGV8ZW58MHx8MHx8fDA%3D&fm=jpg&q=60&w=3000',
LOGO: 'https://i.ibb.co/b58WsJ6X/00000001.png',
PLAY_BUTTON: 'https://i.ibb.co/DDqP20Y1/00000001.png',
OPENING_SONG: 'https://www.myinstants.com/media/sounds/drawaria-stories-opening.mp3',
CLICK_SFX: 'https://www.myinstants.com/media/sounds/pisseim-mund-online-audio-converter.mp3',
BACKGROUND_SELECT: 'https://images.unsplash.com/photo-1595178302776-fa04e6d45879?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Y2llbG8lMjBhenVsJTIwZGUlMjBsYSUyMG5vY2hlfGVufDB8fDB8fHww&fm=jpg&q=100&w=3000',
STORY_CARD_BG: 'https://i.ibb.co/5XC582GK/00000001.png',
MAIN_CARD_BG: 'https://i.ibb.co/sprKQVpb/00000001.png',
TITLE_IMAGE: 'https://i.ibb.co/1Y2hsYGB/00000001.png',
};
const STORIES = [
"Start point", "Drawaria Springs", "Grand Desert", "Sunny Beach",
"Toxic Forest", "Sky Mountains", "Cold Passages", "Castle Lands",
"Inside the Halls", "The Top of the Castle"
];
const STORY_THUMBNAILS = [
'https://i.ibb.co/HpzdY53K/Ds-start.png',
'https://i.ibb.co/TJS3CxG/Ds-springs.jpg',
'https://i.ibb.co/wZmqGLF7/Ds-desert.jpg',
'https://i.ibb.co/JRZ01nHn/Ds-beach.jpg',
'https://i.ibb.co/8D9JyVvR/Ds-forest.jpg',
'https://i.ibb.co/zhtQTjFm/Ds-mountain.jpg',
'https://i.ibb.co/k65Sz1K5/Ds-cold.jpg',
'https://i.ibb.co/JWHvsQ03/Ds-castle.jpg',
'https://i.ibb.co/PzjjkBgH/Ds-halls.jpg',
'https://i.ibb.co/43fw7xb/Ds-topcastle.jpg'
];
// Nombres de las funciones que DEBEN ser llamadas
const STORY_LAUNCH_FUNCTION_NAMES = {
"Start point": "startGameLevel1",
"Drawaria Springs": "startGameLevel2",
"Grand Desert": "startGameLevel3",
"Sunny Beach": "startGameLevel4",
"Toxic Forest": "startGameLevel5",
"Sky Mountains": "startGameLevel6",
"Cold Passages": "startGameLevel7",
"Castle Lands": "startGameLevel8",
"Inside the Halls": "startGameLevel9",
"The Top of the Castle": "startGameLevel10"
};
const TIMINGS = {
FADE_TO_BLACK: 2000,
SPLIT_REVEAL: 3000,
LOGO_POPUP: 500,
PLAY_BUTTON_FADE: 3000,
BUTTON_DELAY: 500,
TRANSITION_DURATION: 1000
};
// --- VARIABLES GLOBALES DE CONTROL ---
let songAudio, sfxAudio;
let mainContainer;
let canvasOverlay;
let animationLoopID;
let preStartOverlay;
// --- FUNCIONES DE AUDIO ---
function setupAudio() {
songAudio = new Audio(RESOURCES.OPENING_SONG);
songAudio.loop = true;
songAudio.volume = 0.5;
sfxAudio = new Audio(RESOURCES.CLICK_SFX);
sfxAudio.volume = 0.8;
}
function playSong() {
if (songAudio) {
songAudio.play().catch(e => console.error("No se pudo reproducir la canción automáticamente:", e));
}
}
function playSfx() {
if (sfxAudio) {
sfxAudio.currentTime = 0;
sfxAudio.play();
}
}
// --- LÓGICA DE ESTRELLAS (CANVAS) ---
const sparkles = [];
const magicOrbs = [];
let ctx;
function resizeCanvas() {
if (canvasOverlay) {
canvasOverlay.width = window.innerWidth;
canvasOverlay.height = window.innerHeight;
}
}
function drawSparkles(canvas) {
if (!ctx) return;
if (Math.random() < 0.5) {
sparkles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: 1 + Math.random() * 2,
opacity: 1,
fadeSpeed: 0.02 + Math.random() * 0.03
});
}
sparkles.forEach((sparkle, index) => {
ctx.fillStyle = `rgba(255, 255, 255, ${sparkle.opacity})`;
ctx.beginPath();
ctx.arc(sparkle.x, sparkle.y, sparkle.size, 0, Math.PI * 2);
ctx.fill();
sparkle.opacity -= sparkle.fadeSpeed;
if (sparkle.opacity <= 0) sparkles.splice(index, 1);
});
}
function drawMagicOrbs(canvas) {
if (!ctx) return;
if (Math.random() < 0.1) {
magicOrbs.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: 5 + Math.random() * 5,
color: `hsl(${Math.random() * 360}, 100%, 50%)`,
vx: (Math.random() - 0.5) * 2,
vy: (Math.random() - 0.5) * 2,
opacity: 0.7 + Math.random() * 0.3
});
}
magicOrbs.forEach((orb, index) => {
ctx.globalAlpha = orb.opacity;
ctx.fillStyle = orb.color;
ctx.beginPath();
ctx.arc(orb.x, orb.y, orb.size, 0, Math.PI * 2);
ctx.fill();
orb.x += orb.vx;
orb.y += orb.vy;
orb.size *= 0.99;
if (orb.x < 0 || orb.x > canvas.width ||
orb.y < 0 || orb.y > canvas.height ||
orb.size < 1) {
magicOrbs.splice(index, 1);
}
});
ctx.globalAlpha = 1;
}
function animateStars() {
if (!ctx || !canvasOverlay) return;
ctx.clearRect(0, 0, canvasOverlay.width, canvasOverlay.height);
drawSparkles(canvasOverlay);
drawMagicOrbs(canvasOverlay);
animationLoopID = requestAnimationFrame(animateStars);
}
// --- FUNCIÓN PRINCIPAL DE ANIMACIÓN (OPENING) ---
function startIntro() {
playSong();
if (preStartOverlay) {
preStartOverlay.remove();
preStartOverlay = null;
}
const curtainTop = document.getElementById('curtain-top');
const curtainBottom = document.getElementById('curtain-bottom');
const logo = document.getElementById('story-logo');
const playButton = document.getElementById('play-button');
mainContainer.style.pointerEvents = 'auto';
setTimeout(() => {
curtainTop.style.transform = 'translateY(-100%)';
curtainBottom.style.transform = 'translateY(100%)';
setTimeout(() => {
logo.classList.add('bounce');
logo.style.opacity = '1';
logo.style.transform = 'scale(1)';
animateStars();
setTimeout(() => {
playButton.style.opacity = '1';
playButton.style.transform = 'scale(1)';
}, TIMINGS.LOGO_POPUP + TIMINGS.BUTTON_DELAY);
}, TIMINGS.SPLIT_REVEAL);
}, TIMINGS.FADE_TO_BLACK);
}
// --- FUNCIÓN DE LIMPIEZA Y TRANSICIÓN HORIZONTAL ---
function cleanup() {
playSfx();
songAudio.pause();
cancelAnimationFrame(animationLoopID);
// Eliminación INSTANTÁNEA de la escena de apertura y elementos
if (mainContainer) mainContainer.remove();
if (canvasOverlay) canvasOverlay.remove();
// 🚀 INICIA LA TRANSICIÓN HORIZONTAL
startSelectTransition();
}
function startSelectTransition() {
// 1. Mostrar la pantalla de selección DETRÁS de las cortinas
showSelectScreen(false);
// 2. Crear las cortinas negras de transición instantáneamente
const transitionCurtainLeft = document.createElement('div');
transitionCurtainLeft.id = 'transition-curtain-left';
transitionCurtainLeft.classList.add('transition-curtain');
document.body.appendChild(transitionCurtainLeft);
const transitionCurtainRight = document.createElement('div');
transitionCurtainRight.id = 'transition-curtain-right';
transitionCurtainRight.classList.add('transition-curtain');
document.body.appendChild(transitionCurtainRight);
// 3. Iniciar la apertura horizontal después de un breve momento
setTimeout(() => {
transitionCurtainLeft.style.transform = 'translateX(-100%)';
transitionCurtainRight.style.transform = 'translateX(100%)';
// 4. Limpiar las cortinas de transición y hacer fade-in del contenido de la selección
setTimeout(() => {
transitionCurtainLeft.remove();
transitionCurtainRight.remove();
const selectScreen = document.getElementById('select-screen');
if(selectScreen) selectScreen.style.opacity = '1';
// Reanuda la canción
playSong();
}, TIMINGS.TRANSITION_DURATION);
}, 50);
}
// --- FUNCIÓN DE LANZAMIENTO DEL NIVEL ---
function launchLevel(storyName) {
const functionName = STORY_LAUNCH_FUNCTION_NAMES[storyName];
// 1. Limpieza de la pantalla de selección
playSfx();
songAudio.pause();
const selectScreen = document.getElementById('select-screen');
if (selectScreen) selectScreen.remove();
// 2. Ejecutar la función global de inicio de nivel
if (typeof window[functionName] === 'function') {
window[functionName]();
} else {
alert(`Error: El código para el nivel "${storyName}" no se cargó correctamente en 'window.${functionName}'. Asegúrate de pegar el código completo dentro de la función de definición.`);
}
}
// --- FUNCIÓN DE LA PANTALLA DE SELECCIÓN ---
function showSelectScreen(doFadeIn = true) {
const selectScreen = document.createElement('div');
selectScreen.id = 'select-screen';
selectScreen.style.opacity = doFadeIn ? '0' : '1';
document.body.appendChild(selectScreen);
// --- TÍTULO ---
const titleContainer = document.createElement('div');
titleContainer.id = 'select-title-container';
const titleImage = document.createElement('img');
titleImage.src = RESOURCES.TITLE_IMAGE;
titleImage.alt = 'Choose your story';
titleContainer.appendChild(titleImage);
// --- CONTENEDOR PRINCIPAL AZUL/TEAL (Ahora invisible) ---
const mainCardContainer = document.createElement('div');
mainCardContainer.id = 'main-card-container-select';
// --- CUADRÍCULA DE HISTORIAS ---
const storiesGrid = document.createElement('div');
storiesGrid.id = 'stories-grid';
STORIES.forEach((storyName, index) => {
const storyDiv = document.createElement('div');
storyDiv.classList.add('story-card');
storyDiv.dataset.storyName = storyName;
storyDiv.addEventListener('click', () => launchLevel(storyName)); // Añadir el listener aquí
// Contenedor de la Imagen (marco dorado)
const imgContainer = document.createElement('div');
imgContainer.classList.add('story-img-container');
// Insertar la URL correcta del thumbnail
const thumbnailURL = STORY_THUMBNAILS[index];
const thumbnailImg = document.createElement('img');
thumbnailImg.src = thumbnailURL;
thumbnailImg.alt = storyName + ' thumbnail';
thumbnailImg.classList.add('placeholder-img'); // Mantener la clase para el estilo
imgContainer.appendChild(thumbnailImg);
// Nombre del Mundo
const nameP = document.createElement('p');
nameP.classList.add('story-name');
nameP.textContent = storyName;
storyDiv.appendChild(imgContainer);
storyDiv.appendChild(nameP);
storiesGrid.appendChild(storyDiv);
});
mainCardContainer.appendChild(storiesGrid);
selectScreen.appendChild(titleContainer);
selectScreen.appendChild(mainCardContainer);
}
// --- INYECCIÓN DE ESTILOS CSS ---
function injectCSS() {
GM_addStyle(`
/* ---------------------------------------------------------------------- */
/* ESTILOS DE LA PANTALLA DE APERTURA (OPENING) */
/* ---------------------------------------------------------------------- */
@keyframes bounce {
0% { transform: scale(0.5); } 70% { transform: scale(1.1); } 100% { transform: scale(1); }
}
#pre-start-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background-color: black; color: white; display: flex;
justify-content: center; align-items: center; font-size: 2em;
font-family: Impact, sans-serif; cursor: pointer; z-index: 10000;
opacity: 0; transition: opacity 1s ease-in;
}
#opening-scene-container {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 9998; background-color: black;
background-image: url('${RESOURCES.BACKGROUND_INTRO}');
background-size: cover; background-position: center top;
opacity: 1; pointer-events: none; overflow: hidden;
transition: none;
}
.curtain {
position: absolute; left: 0; width: 100vw; height: 50vh;
background-color: black;
transition: transform ${TIMINGS.SPLIT_REVEAL/1000}s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#curtain-top { top: 0; }
#curtain-bottom { bottom: 0; }
#elements-container {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 100%;
text-align: center; display: flex; flex-direction: column;
align-items: center;
}
#story-logo {
width: 50%; max-width: 500px; height: auto; opacity: 0;
margin-bottom: 20px; transform: scale(0.5);
}
#story-logo.bounce {
animation: bounce ${TIMINGS.LOGO_POPUP/1000}s forwards;
}
#play-button {
width: 25%; max-width: 200px; height: auto; cursor: pointer;
opacity: 0; margin-top: 50vh;
transform: scale(0.5);
transition: opacity ${TIMINGS.PLAY_BUTTON_FADE/1000}s ease-in, transform ${TIMINGS.PLAY_BUTTON_FADE/1000}s ease-in;
}
/* ---------------------------------------------------------------------- */
/* ESTILOS DE TRANSICIÓN HORIZONTAL */
/* ---------------------------------------------------------------------- */
.transition-curtain {
position: fixed; top: 0; width: 50vw; height: 100vh;
background-color: black;
z-index: 10000;
transition: transform ${TIMINGS.TRANSITION_DURATION/1000}s ease-out;
}
#transition-curtain-left { left: 0; }
#transition-curtain-right { right: 0; }
/* ---------------------------------------------------------------------- */
/* ESTILOS DE LA PANTALLA DE SELECCIÓN (SELECT SCREEN) */
/* ---------------------------------------------------------------------- */
#select-screen {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 9999; background-color: black;
background-image: url('${RESOURCES.BACKGROUND_SELECT}');
background-size: cover; background-position: center;
display: flex; flex-direction: column; align-items: center;
transition: opacity 0.5s ease-in;
}
/* Título "Choose your story" */
#select-title-container {
width: 60vh;
max-width: 600px;
margin-bottom: 1vh;
margin-top: 3vh;
}
#select-title-container img {
width: 100%;
height: auto;
}
/* Contenedor principal de la cuadrícula (el cuadro teal/azul) - AHORA INVISIBLE */
#main-card-container-select {
width: 80vw;
height: 85vh;
max-width: 1100px;
max-height: 850px;
background-image: none; /* ELIMINAR IMAGEN DE FONDO */
background-color: transparent; /* HACER INVISIBLE */
background-repeat: no-repeat;
padding: 0; /* ELIMINAR RELLENO */
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0; /* Ajuste de posición */
}
/* Cuadrícula de historias (4x3) */
#stories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0; /* SIN GAP */
width: 80%; /* Ajustado el ancho para centrar los elementos de 50% en un contenedor más grande */
height: 100%;
justify-items: center;
align-items: center;
}
/* Contenedor de cada historia */
.story-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
width: 100%;
max-width: 150px;
/* Asegurar el centrado de los cards en las celdas de la cuadrícula */
justify-self: center;
align-self: center;
}
/* Contenedor de la imagen (marco dorado) */
.story-img-container {
position: relative;
width: 100%;
padding-top: 65%;
background-image: url('${RESOURCES.STORY_CARD_BG}');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 0.3vh;
max-width: 100px;
max-height: 100px;
align-self: center;
}
/* Imagen Thumbnail dentro del marco (ajustada a 70% y centrada) */
.placeholder-img {
position: absolute;
top: 15%; /* Mueve hacia abajo */
left: 16%; /* Mueve hacia la derecha para centrar */
width: 70%; /* REDUCIDO */
height: 70%; /* REDUCIDO */
object-fit: cover;
border-radius: 12%;
}
/* Nombre del mundo - TAMAÑO AUMENTADO */
.story-name {
font-family: sans-serif;
font-weight: 300;
color: white;
font-size: 2vh; /* TAMAÑO AUMENTADO */
margin: 0.5vh 0 0 0; /* Ajuste para mayor separación */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* Hover effect (opcional) */
.story-card:hover {
transform: scale(1.05);
transition: transform 0.2s;
}
`);
}
// --- CONSTRUCCIÓN DEL DOM ---
function buildDOM() {
injectCSS();
// --- 0. Overlay de Click para Empezar ---
preStartOverlay = document.createElement('div');
preStartOverlay.id = 'pre-start-overlay';
preStartOverlay.textContent = 'Welcome to Drawaria Stories Game - Click to Start';
document.body.appendChild(preStartOverlay);
setTimeout(() => { preStartOverlay.style.opacity = '1'; }, 100);
// --- 1. Contenedor principal de la escena (OPENING) ---
mainContainer = document.createElement('div');
mainContainer.id = 'opening-scene-container';
// 2. Cortinas
const curtainTop = document.createElement('div');
curtainTop.id = 'curtain-top';
curtainTop.classList.add('curtain');
const curtainBottom = document.createElement('div');
curtainBottom.id = 'curtain-bottom';
curtainBottom.classList.add('curtain');
// 3. Contenedor de elementos (Logo y Botón)
const elementsContainer = document.createElement('div');
elementsContainer.id = 'elements-container';
// 4. Logo
const logo = document.createElement('img');
logo.id = 'story-logo';
logo.src = RESOURCES.LOGO;
logo.alt = 'Drawaria.online Stories Logo';
// 5. Botón Play
const playButton = document.createElement('img');
playButton.id = 'play-button';
playButton.src = RESOURCES.PLAY_BUTTON;
playButton.alt = 'Play Button';
playButton.addEventListener('click', cleanup);
// Estructura DOM de la escena
elementsContainer.appendChild(logo);
elementsContainer.appendChild(playButton);
mainContainer.appendChild(elementsContainer);
mainContainer.appendChild(curtainTop);
mainContainer.appendChild(curtainBottom);
document.body.appendChild(mainContainer);
// 6. Configuración del Canvas (Estrellas)
canvasOverlay = document.createElement('canvas');
canvasOverlay.style.position = 'fixed';
canvasOverlay.style.top = '0';
canvasOverlay.style.left = '0';
canvasOverlay.style.pointerEvents = 'none';
canvasOverlay.style.zIndex = '9999';
document.body.appendChild(canvasOverlay);
ctx = canvasOverlay.getContext('2d');
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// --- 7. Listener para Iniciar la Escena (Respuesta al click) ---
let loaded = 0;
const totalToLoad = 4;
const checkLoad = () => {
loaded++;
if (loaded === totalToLoad) {
preStartOverlay.addEventListener('click', startIntro, { once: true });
}
};
const bgIntroImg = new Image();
bgIntroImg.onload = checkLoad; bgIntroImg.onerror = checkLoad;
bgIntroImg.src = RESOURCES.BACKGROUND_INTRO;
const bgSelectImg = new Image();
bgSelectImg.onload = checkLoad; bgSelectImg.onerror = checkLoad;
bgSelectImg.src = RESOURCES.BACKGROUND_SELECT;
const logoImg = new Image();
logoImg.onload = checkLoad; logoImg.onerror = checkLoad;
logoImg.src = RESOURCES.LOGO;
const playButtonImg = new Image();
playButtonImg.onload = checkLoad; playButtonImg.onerror = checkLoad;
playButtonImg.src = RESOURCES.PLAY_BUTTON;
}
// --- START OF THE GAME SCRIPT ---
window.addEventListener('load', () => {
setupAudio();
buildDOM();
});
})();