{"id":1648,"date":"2026-09-17T14:22:45","date_gmt":"2026-09-17T14:22:45","guid":{"rendered":"https:\/\/glapito.com\/?page_id=1648"},"modified":"2026-09-18T10:52:16","modified_gmt":"2026-09-18T10:52:16","slug":"see","status":"publish","type":"page","link":"https:\/\/glapito.com\/index.php\/see\/","title":{"rendered":"see"},"content":{"rendered":"\n<section class=\"wp-block-cover alignfull has-parallax\" style=\"margin-top:0px;padding-bottom:12.51rem;min-height:666px;aspect-ratio:unset;\"><div class=\"wp-block-cover__image-background wp-image-38 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/glapito.com\/wp-content\/uploads\/2024\/01\/Untitled-1-5.jpg)\"><\/div><span aria-hidden=\"true\" class=\"wp-block-cover__background has-black-background-color has-background-dim-70 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-362a54cb wp-block-cover-is-layout-constrained\">\n<div style=\"height:277px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   GLAPITO DREAM GAME\n   ========================================================= *\/\n\n#glapito-game {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    min-height: 500px;\n    overflow: hidden;\n\n    background: #000;\n    color: #fff;\n\n    font-family: monospace;\n\n    image-rendering: pixelated;\n\n    user-select: none;\n    -webkit-user-select: none;\n\n    touch-action: pan-y;\n}\n\n\n\/* =========================================================\n   START SCREEN\n   ========================================================= *\/\n\n#glapito-start-screen {\n    position: absolute;\n    inset: 0;\n\n    z-index: 100;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    background: #000;\n}\n\n#glapito-start-button {\n    padding: 18px 40px;\n\n    border: 2px solid #fff;\n    background: #000;\n    color: #fff;\n\n    font-family: monospace;\n    font-size: 18px;\n    letter-spacing: 5px;\n\n    cursor: pointer;\n\n    transition:\n        background 0.2s ease,\n        color 0.2s ease,\n        transform 0.2s ease;\n}\n\n#glapito-start-button:hover {\n    background: #fff;\n    color: #000;\n    transform: scale(1.04);\n}\n\n.glapito-start-subtitle {\n    margin-top: 18px;\n\n    font-size: 11px;\n    letter-spacing: 6px;\n\n    opacity: 0.55;\n}\n\n\n\/* =========================================================\n   WORLD\n   ========================================================= *\/\n\n#glapito-world {\n    position: absolute;\n\n    left: 0;\n    top: 0;\n\n    width: 6000px;\n    height: 100%;\n\n    transform: translateX(0);\n\n    will-change: transform;\n}\n\n\n\/* =========================================================\n   CAVE\n   ========================================================= *\/\n\n#glapito-cave {\n    position: absolute;\n\n    left: 0;\n    top: 0;\n\n    width: 4100px;\n    height: 72%;\n\n    overflow: hidden;\n\n    background:\n        radial-gradient(\n            ellipse at 40% 55%,\n            #343434 0%,\n            #1d1d1d 28%,\n            #0d0d0d 65%,\n            #050505 100%\n        );\n\n    border-bottom: 5px solid #050505;\n\n    z-index: 1;\n}\n\n\n\/* Cave ceiling *\/\n\n.glapito-cave-ceiling {\n    position: absolute;\n\n    left: 0;\n    top: 0;\n\n    width: 100%;\n    height: 100px;\n\n    background:\n        linear-gradient(\n            to bottom,\n            #000 0%,\n            #090909 60%,\n            transparent 100%\n        );\n\n    border-bottom: 4px solid #111;\n}\n\n\n\/* Cave walls *\/\n\n.glapito-cave-wall {\n    position: absolute;\n\n    background: #111;\n\n    border: 3px solid #080808;\n}\n\n.cave-wall-left {\n    left: -100px;\n    top: 0;\n\n    width: 350px;\n    height: 100%;\n\n    transform: skewY(8deg);\n}\n\n.cave-wall-right {\n    right: -120px;\n    top: 0;\n\n    width: 320px;\n    height: 100%;\n\n    transform: skewY(-7deg);\n}\n\n\n\/* =========================================================\n   CAVE ROCKS\n   ========================================================= *\/\n\n.glapito-rock {\n    position: absolute;\n\n    background:\n        linear-gradient(\n            135deg,\n            #484848,\n            #202020 45%,\n            #090909\n        );\n\n    border: 4px solid #080808;\n\n    filter:\n        drop-shadow(8px 8px 0 #050505);\n}\n\n\n\/* Individual rocks *\/\n\n.rock-1 {\n    left: 280px;\n    top: 95px;\n\n    width: 280px;\n    height: 130px;\n\n    clip-path: polygon(\n        0 55%,\n        17% 25%,\n        40% 10%,\n        67% 0,\n        87% 18%,\n        100% 62%,\n        78% 100%,\n        23% 94%\n    );\n}\n\n.rock-2 {\n    left: 730px;\n    top: 205px;\n\n    width: 210px;\n    height: 120px;\n\n    clip-path: polygon(\n        0 70%,\n        22% 33%,\n        44% 0,\n        73% 17%,\n        100% 74%,\n        73% 100%,\n        20% 95%\n    );\n}\n\n.rock-3 {\n    left: 1120px;\n    top: 85px;\n\n    width: 330px;\n    height: 175px;\n\n    clip-path: polygon(\n        0 65%,\n        14% 29%,\n        48% 8%,\n        74% 0,\n        97% 42%,\n        100% 78%,\n        68% 100%,\n        22% 91%\n    );\n}\n\n.rock-4 {\n    left: 1520px;\n    top: 280px;\n\n    width: 260px;\n    height: 145px;\n\n    clip-path: polygon(\n        0 58%,\n        20% 12%,\n        58% 0,\n        87% 26%,\n        100% 70%,\n        72% 100%,\n        28% 95%\n    );\n}\n\n.rock-5 {\n    left: 1980px;\n    top: 100px;\n\n    width: 360px;\n    height: 170px;\n\n    clip-path: polygon(\n        0 60%,\n        22% 21%,\n        51% 4%,\n        82% 19%,\n        100% 62%,\n        84% 100%,\n        33% 93%\n    );\n}\n\n.rock-6 {\n    left: 2580px;\n    top: 225px;\n\n    width: 250px;\n    height: 150px;\n\n    clip-path: polygon(\n        0 54%,\n        15% 28%,\n        42% 0,\n        76% 18%,\n        100% 62%,\n        76% 100%,\n        20% 93%\n    );\n}\n\n.rock-7 {\n    left: 3120px;\n    top: 115px;\n\n    width: 400px;\n    height: 190px;\n\n    clip-path: polygon(\n        0 68%,\n        17% 30%,\n        49% 4%,\n        81% 0,\n        100% 42%,\n        94% 81%,\n        69% 100%,\n        24% 91%\n    );\n}\n\n.rock-8 {\n    left: 3650px;\n    top: 260px;\n\n    width: 300px;\n    height: 160px;\n\n    clip-path: polygon(\n        0 66%,\n        22% 21%,\n        54% 0,\n        84% 18%,\n        100% 64%,\n        76% 100%,\n        18% 91%\n    );\n}\n\n\n\/* =========================================================\n   CAVE GLITCH EFFECT\n   ========================================================= *\/\n\n.cave-glitch-line {\n    position: absolute;\n\n    height: 4px;\n\n    background: #fff;\n\n    opacity: 0.08;\n\n    mix-blend-mode: screen;\n\n    animation:\n        caveGlitchLine 3s steps(1, end) infinite;\n}\n\n.cave-glitch-1 {\n    left: 180px;\n    top: 180px;\n    width: 240px;\n    animation-delay: 0.2s;\n}\n\n.cave-glitch-2 {\n    left: 850px;\n    top: 145px;\n    width: 380px;\n    animation-delay: 1s;\n}\n\n.cave-glitch-3 {\n    left: 1330px;\n    top: 360px;\n    width: 220px;\n    animation-delay: 1.7s;\n}\n\n.cave-glitch-4 {\n    left: 2110px;\n    top: 175px;\n    width: 310px;\n    animation-delay: 0.5s;\n}\n\n.cave-glitch-5 {\n    left: 2770px;\n    top: 330px;\n    width: 250px;\n    animation-delay: 2s;\n}\n\n.cave-glitch-6 {\n    left: 3400px;\n    top: 190px;\n    width: 380px;\n    animation-delay: 1.3s;\n}\n\n\n.cave-glitch-block {\n    position: absolute;\n\n    background: #fff;\n\n    opacity: 0.035;\n\n    mix-blend-mode: difference;\n\n    animation:\n        caveGlitchBlock 4s steps(1, end) infinite;\n}\n\n.cave-glitch-block-1 {\n    left: 610px;\n    top: 70px;\n\n    width: 90px;\n    height: 40px;\n\n    animation-delay: 0.7s;\n}\n\n.cave-glitch-block-2 {\n    left: 1730px;\n    top: 135px;\n\n    width: 120px;\n    height: 55px;\n\n    animation-delay: 2.2s;\n}\n\n.cave-glitch-block-3 {\n    left: 3010px;\n    top: 80px;\n\n    width: 150px;\n    height: 65px;\n\n    animation-delay: 1.1s;\n}\n\n\n@keyframes caveGlitchLine {\n\n    0%,\n    93%,\n    100% {\n        opacity: 0.04;\n        transform: translateX(0);\n    }\n\n    94% {\n        opacity: 0.55;\n        transform: translateX(-18px);\n    }\n\n    95% {\n        opacity: 0.15;\n        transform: translateX(25px);\n    }\n\n    96% {\n        opacity: 0.6;\n        transform: translateX(-8px);\n    }\n\n    97% {\n        opacity: 0.04;\n        transform: translateX(0);\n    }\n}\n\n@keyframes caveGlitchBlock {\n\n    0%,\n    90%,\n    100% {\n        opacity: 0.02;\n        transform: translate(0, 0);\n    }\n\n    91% {\n        opacity: 0.3;\n        transform: translate(-35px, 5px);\n    }\n\n    92% {\n        opacity: 0.04;\n        transform: translate(20px, -8px);\n    }\n\n    93% {\n        opacity: 0.25;\n        transform: translate(0, 0);\n    }\n}\n\n\n\/* =========================================================\n   FIELD AREA\n   ========================================================= *\/\n\n#glapito-field-area {\n    position: absolute;\n\n    left: 3900px;\n    top: 0;\n\n    width: 2100px;\n    height: 72%;\n\n    background:\n        radial-gradient(\n            ellipse at 50% 55%,\n            #252525 0%,\n            #0e0e0e 45%,\n            #000 100%\n        );\n\n    z-index: 2;\n}\n\n\n\/* Fog *\/\n\n.field-fog {\n    position: absolute;\n\n    width: 700px;\n    height: 220px;\n\n    border-radius: 50%;\n\n    background: rgba(255,255,255,0.025);\n\n    filter: blur(40px);\n\n    animation: fogMove 9s ease-in-out infinite alternate;\n}\n\n.field-fog-1 {\n    left: 100px;\n    top: 260px;\n}\n\n.field-fog-2 {\n    left: 850px;\n    top: 140px;\n\n    animation-delay: 2s;\n}\n\n.field-fog-3 {\n    left: 1450px;\n    top: 300px;\n\n    animation-delay: 4s;\n}\n\n@keyframes fogMove {\n\n    from {\n        transform: translateX(-70px);\n    }\n\n    to {\n        transform: translateX(80px);\n    }\n}\n\n\n\/* Field glitches *\/\n\n.field-glitch-line {\n    position: absolute;\n\n    height: 3px;\n\n    background: #fff;\n\n    opacity: 0.05;\n\n    animation: fieldGlitch 2.8s steps(1, end) infinite;\n}\n\n.field-glitch-1 {\n    left: 260px;\n    top: 170px;\n    width: 300px;\n}\n\n.field-glitch-2 {\n    left: 920px;\n    top: 310px;\n    width: 420px;\n\n    animation-delay: 0.9s;\n}\n\n.field-glitch-3 {\n    left: 1460px;\n    top: 200px;\n    width: 260px;\n\n    animation-delay: 1.8s;\n}\n\n@keyframes fieldGlitch {\n\n    0%,\n    90%,\n    100% {\n        opacity: 0.025;\n        transform: translateX(0);\n    }\n\n    91% {\n        opacity: 0.3;\n        transform: translateX(-20px);\n    }\n\n    92% {\n        opacity: 0.08;\n        transform: translateX(35px);\n    }\n\n    93% {\n        opacity: 0.02;\n        transform: translateX(0);\n    }\n}\n\n\n\/* =========================================================\n   GROUND\n   ========================================================= *\/\n\n#glapito-ground {\n    position: absolute;\n\n    left: 0;\n    bottom: 0;\n\n    width: 6000px;\n    height: 30%;\n\n    background:\n        linear-gradient(\n            to bottom,\n            #151515 0%,\n            #090909 50%,\n            #000 100%\n        );\n\n    border-top: 5px solid #080808;\n\n    z-index: 5;\n}\n\n\n\/* =========================================================\n   THE FIELD HOUSE\n   ========================================================= *\/\n\n#glapito-field-house {\n    position: absolute;\n\n    left: 4620px;\n    bottom: 30%;\n\n    width: 520px;\n    height: 390px;\n\n    z-index: 15;\n}\n\n\n\/* House *\/\n\n#glapito-field-body {\n    position: absolute;\n\n    left: 35px;\n    bottom: 0;\n\n    width: 450px;\n    height: 300px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #303030 0%,\n            #1c1c1c 45%,\n            #090909 100%\n        );\n\n    border: 7px solid #050505;\n\n    box-shadow:\n        0 18px 45px rgba(0,0,0,0.8);\n}\n\n\n\/* Roof *\/\n\n#glapito-field-roof {\n    position: absolute;\n\n    left: 0;\n    top: -75px;\n\n    width: 540px;\n    height: 150px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #373737,\n            #0b0b0b\n        );\n\n    clip-path: polygon(\n        0 100%,\n        50% 0,\n        100% 100%\n    );\n\n    border-bottom: 7px solid #050505;\n}\n\n\n\/* The Field title *\/\n\n#glapito-field-name {\n    position: absolute;\n\n    left: 50%;\n    top: 0;\n\n    transform: translateX(-50%);\n\n    z-index: 5;\n\n    color: #fff;\n\n    font-family: \"Rallomy\", serif;\n\n    font-size: 48px;\n    font-weight: 400;\n\n    letter-spacing: 2px;\n\n    white-space: nowrap;\n\n    text-shadow:\n        0 0 8px rgba(255,255,255,0.3),\n        0 5px 15px rgba(0,0,0,0.9);\n}\n\n\n\/* =========================================================\n   GLITCHING WINDOWS\n   ========================================================= *\/\n\n.field-window {\n    position: absolute;\n\n    top: 78px;\n\n    width: 76px;\n    height: 95px;\n\n    overflow: hidden;\n\n    background:\n        linear-gradient(\n            135deg,\n            #474747,\n            #111\n        );\n\n    border: 5px solid #050505;\n\n    box-shadow:\n        inset 0 0 22px #000;\n\n    isolation: isolate;\n\n    animation:\n        windowFlicker 3.2s steps(1, end) infinite;\n}\n\n\n\/* Glitch layer *\/\n\n.field-window::before,\n.field-window::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: -10%;\n    top: 0;\n\n    width: 120%;\n    height: 100%;\n\n    pointer-events: none;\n\n    mix-blend-mode: screen;\n}\n\n\n\/* Horizontal distorted light *\/\n\n.field-window::before {\n    background:\n        repeating-linear-gradient(\n            to bottom,\n            transparent 0px,\n            transparent 13px,\n            rgba(255,255,255,0.08) 14px,\n            transparent 17px\n        );\n\n    animation:\n        windowScan 2.4s steps(1, end) infinite;\n}\n\n\n\/* Glitch blocks *\/\n\n.field-window::after {\n    background:\n        linear-gradient(\n            to bottom,\n            transparent 0%,\n            transparent 22%,\n            rgba(255,255,255,0.28) 22%,\n            rgba(255,255,255,0.28) 28%,\n            transparent 28%,\n            transparent 53%,\n            rgba(255,255,255,0.16) 53%,\n            rgba(255,255,255,0.16) 61%,\n            transparent 61%,\n            transparent 78%,\n            rgba(255,255,255,0.22) 78%,\n            rgba(255,255,255,0.22) 82%,\n            transparent 82%\n        );\n\n    animation:\n        windowGlitch 1.9s steps(1, end) infinite;\n}\n\n\n\/* Left window *\/\n\n.field-window-left {\n    left: 50px;\n\n    animation-delay: 0.8s;\n}\n\n.field-window-left::before {\n    animation-delay: 0.3s;\n}\n\n.field-window-left::after {\n    animation-delay: 1.1s;\n}\n\n\n\/* Right window *\/\n\n.field-window-right {\n    right: 50px;\n\n    animation-delay: 1.7s;\n}\n\n.field-window-right::before {\n    animation-delay: 1.4s;\n}\n\n.field-window-right::after {\n    animation-delay: 0.5s;\n}\n\n\n\/* =========================================================\n   WINDOW GLITCH ANIMATIONS\n   ========================================================= *\/\n\n@keyframes windowFlicker {\n\n    0%,\n    72%,\n    100% {\n        opacity: 1;\n\n        transform:\n            translateX(0)\n            skewX(0deg);\n    }\n\n    73% {\n        opacity: 0.45;\n\n        transform:\n            translateX(-3px)\n            skewX(-2deg);\n    }\n\n    74% {\n        opacity: 1;\n\n        transform:\n            translateX(4px)\n            skewX(1deg);\n    }\n\n    75% {\n        opacity: 0.65;\n\n        transform:\n            translateX(-1px)\n            skewX(0deg);\n    }\n\n    76% {\n        opacity: 1;\n    }\n}\n\n\n@keyframes windowScan {\n\n    0%,\n    80%,\n    100% {\n        transform:\n            translateX(0)\n            translateY(0);\n\n        opacity: 0.15;\n    }\n\n    81% {\n        transform:\n            translateX(-12px)\n            translateY(7px);\n\n        opacity: 0.8;\n    }\n\n    82% {\n        transform:\n            translateX(15px)\n            translateY(-4px);\n\n        opacity: 0.25;\n    }\n\n    83% {\n        transform:\n            translateX(-5px)\n            translateY(2px);\n\n        opacity: 0.65;\n    }\n\n    84% {\n        transform:\n            translateX(0)\n            translateY(0);\n\n        opacity: 0.1;\n    }\n}\n\n\n@keyframes windowGlitch {\n\n    0%,\n    86%,\n    100% {\n        transform:\n            translateX(0)\n            scaleY(1);\n\n        opacity: 0;\n    }\n\n    87% {\n        transform:\n            translateX(-18px)\n            scaleY(1.03);\n\n        opacity: 0.8;\n    }\n\n    88% {\n        transform:\n            translateX(22px)\n            scaleY(0.97);\n\n        opacity: 0.25;\n    }\n\n    89% {\n        transform:\n            translateX(-8px)\n            scaleY(1.01);\n\n        opacity: 0.75;\n    }\n\n    90% {\n        transform:\n            translateX(0)\n            scaleY(1);\n\n        opacity: 0;\n    }\n}\n\n\/* Door *\/\n\n#glapito-field-door {\n    position: absolute;\n\n    left: 165px;\n    bottom: 0;\n\n    width: 120px;\n    height: 220px;\n\n    padding: 0;\n\n    border: 7px solid #050505;\n\n    background:\n        linear-gradient(\n            135deg,\n            #191919,\n            #030303\n        );\n\n    cursor: pointer;\n\n    transform-origin: center bottom;\n\n    --door-scale: 1;\n\n    transform: scale(var(--door-scale));\n\n    transition:\n        transform 0.2s ease,\n        filter 0.2s ease;\n\n    box-shadow:\n        inset 0 0 25px #000;\n}\n\n\n\/* Door hover \/ nearby glow *\/\n\n#glapito-field-door:hover,\n#glapito-field-door.door-near {\n    --door-scale: 1.06;\n\n    filter:\n        brightness(1.35)\n        drop-shadow(0 0 15px rgba(255,255,255,0.18));\n}\n\n\n\/* Door glitch\/shake *\/\n\n#glapito-field-door.door-shake {\n    animation: doorShake 180ms ease;\n}\n\n@keyframes doorShake {\n\n    0% {\n        transform:\n            translateX(0)\n            scale(var(--door-scale));\n    }\n\n    25% {\n        transform:\n            translateX(-6px)\n            scale(var(--door-scale));\n    }\n\n    50% {\n        transform:\n            translateX(6px)\n            scale(var(--door-scale));\n    }\n\n    75% {\n        transform:\n            translateX(-3px)\n            scale(var(--door-scale));\n    }\n\n    100% {\n        transform:\n            translateX(0)\n            scale(var(--door-scale));\n    }\n}\n\n\n\/* =========================================================\n   PLAYER\n   ========================================================= *\/\n\n#glapito-player {\n    position: absolute;\n\n    left: 300px;\n    bottom: 30%;\n\n    width: 60px;\n    height: 120px;\n\n    z-index: 20;\n}\n\n\n\/* Head *\/\n\n.glapito-head {\n    position: absolute;\n\n    left: 16px;\n    top: 8px;\n\n    width: 32px;\n    height: 32px;\n\n    background: #fff;\n\n    border-radius: 50%;\n\n    border: 3px solid #000;\n}\n\n\n\/* Face *\/\n\n.glapito-face {\n    position: absolute;\n\n    left: 23px;\n    top: 21px;\n\n    width: 5px;\n    height: 5px;\n\n    background: #000;\n\n    border-radius: 50%;\n\n    box-shadow:\n        12px 0 0 #000;\n}\n\n\n\/* Hat *\/\n\n.glapito-hat {\n    position: absolute;\n\n    left: 10px;\n    top: 0;\n\n    width: 40px;\n    height: 13px;\n\n    background: #111;\n\n    border: 3px solid #000;\n\n    z-index: 5;\n}\n\n.glapito-hat::after {\n    content: \"\";\n\n    position: absolute;\n\n    left: -7px;\n    top: 9px;\n\n    width: 54px;\n    height: 5px;\n\n    background: #000;\n}\n\n\n\/* Body *\/\n\n.glapito-body {\n    position: absolute;\n\n    left: 29px;\n    top: 38px;\n\n    width: 4px;\n    height: 42px;\n\n    background: #fff;\n}\n\n\n\/* Arms *\/\n\n.glapito-arm {\n    position: absolute;\n\n    top: 43px;\n\n    width: 38px;\n    height: 4px;\n\n    background: #fff;\n\n    transform-origin: left center;\n}\n\n.glapito-arm-left {\n    left: 28px;\n\n    transform:\n        rotate(28deg);\n}\n\n.glapito-arm-right {\n    left: 30px;\n\n    transform:\n        rotate(145deg);\n}\n\n\n\/* Legs *\/\n\n.glapito-leg {\n    position: absolute;\n\n    top: 78px;\n\n    width: 42px;\n    height: 4px;\n\n    background: #fff;\n\n    transform-origin: left center;\n}\n\n.glapito-leg-left {\n    left: 29px;\n\n    transform:\n        rotate(112deg);\n}\n\n.glapito-leg-right {\n    left: 29px;\n\n    transform:\n        rotate(68deg);\n}\n\n\n\/* =========================================================\n   LANTERN\n   ========================================================= *\/\n\n#glapito-lantern {\n    position: absolute;\n\n    left: 51px;\n    top: 44px;\n\n    width: 24px;\n    height: 34px;\n\n    z-index: 30;\n\n    transform: rotate(-4deg);\n\n    filter:\n        drop-shadow(0 0 5px rgba(255,255,255,0.8));\n\n    animation:\n        lanternSway 1.2s ease-in-out infinite;\n}\n\n\n\/* Handle *\/\n\n.lantern-handle {\n    position: absolute;\n\n    left: 5px;\n    top: -9px;\n\n    width: 13px;\n    height: 12px;\n\n    border: 3px solid #fff;\n    border-bottom: 0;\n\n    border-radius: 10px 10px 0 0;\n}\n\n\n\/* Body *\/\n\n.lantern-body {\n    position: absolute;\n\n    left: 1px;\n    top: 8px;\n\n    width: 22px;\n    height: 25px;\n\n    background: #111;\n\n    border: 3px solid #fff;\n\n    clip-path: polygon(\n        18% 0,\n        82% 0,\n        100% 100%,\n        0 100%\n    );\n}\n\n\n\/* Glass *\/\n\n.lantern-glass {\n    position: absolute;\n\n    left: 6px;\n    top: 13px;\n\n    width: 10px;\n    height: 12px;\n\n    background: #fff;\n\n    opacity: 0.9;\n\n    box-shadow:\n        0 0 10px #fff,\n        0 0 22px rgba(255,255,255,0.8);\n}\n\n\n\/* Flame *\/\n\n.lantern-flame {\n    position: absolute;\n\n    left: 9px;\n    top: 16px;\n\n    width: 5px;\n    height: 8px;\n\n    background: #fff;\n\n    border-radius: 50% 50% 45% 45%;\n\n    animation:\n        lanternFlicker 0.12s infinite alternate;\n}\n\n@keyframes lanternSway {\n\n    0%,\n    100% {\n        transform: rotate(-4deg);\n    }\n\n    50% {\n        transform: rotate(3deg);\n    }\n}\n\n@keyframes lanternFlicker {\n\n    from {\n        transform: scale(0.8);\n        opacity: 0.65;\n    }\n\n    to {\n        transform: scale(1.15);\n        opacity: 1;\n    }\n}\n\n\n\/* =========================================================\n   DARKNESS\n   ========================================================= *\/\n\n#glapito-darkness {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 50;\n\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            circle at var(--light-x, 50%) var(--light-y, 50%),\n\n            rgba(0,0,0,0) 0px,\n            rgba(0,0,0,0) 110px,\n\n            rgba(0,0,0,0.16) 140px,\n            rgba(0,0,0,0.48) 215px,\n            rgba(0,0,0,0.82) 285px,\n\n            #000 375px\n        );\n\n    will-change: background;\n}\n\n\n\/* =========================================================\n   VIGNETTE\n   ========================================================= *\/\n\n#glapito-vignette {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 60;\n\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            ellipse at center,\n            transparent 45%,\n            rgba(0,0,0,0.4) 75%,\n            rgba(0,0,0,0.85) 100%\n        );\n}\n\n\n\/* =========================================================\n   INSTRUCTIONS\n   ========================================================= *\/\n\n#glapito-instructions {\n    position: absolute;\n\n    left: 50%;\n    bottom: 20px;\n\n    transform: translateX(-50%);\n\n    z-index: 70;\n\n    font-size: 11px;\n    letter-spacing: 2px;\n\n    opacity: 0.55;\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   MOBILE CONTROLS\n   ========================================================= *\/\n\n#glapito-mobile-controls {\n    position: absolute;\n\n    left: 0;\n    right: 0;\n    bottom: 18px;\n\n    z-index: 90;\n\n    display: none;\n\n    justify-content: space-between;\n\n    padding-left: 18px;\n    padding-right: 18px;\n\n    pointer-events: none;\n}\n\n.glapito-control-button {\n    width: 70px;\n    height: 70px;\n\n    border: 2px solid rgba(255,255,255,0.6);\n\n    background: rgba(0,0,0,0.65);\n    color: #fff;\n\n    font-family: monospace;\n    font-size: 32px;\n\n    pointer-events: auto;\n\n    touch-action: none;\n\n    cursor: pointer;\n}\n\n.glapito-control-button:active {\n    background: #fff;\n    color: #000;\n}\n\n\n\/* =========================================================\n   WALKING ANIMATION\n   ========================================================= *\/\n\n#glapito-player.walking .glapito-leg-left {\n    animation: walkLeft 0.18s alternate infinite;\n}\n\n#glapito-player.walking .glapito-leg-right {\n    animation: walkRight 0.18s alternate infinite;\n}\n\n#glapito-player.walking .glapito-arm-left {\n    animation: armLeft 0.18s alternate infinite;\n}\n\n#glapito-player.walking .glapito-arm-right {\n    animation: armRight 0.18s alternate infinite;\n}\n\n@keyframes walkLeft {\n\n    from {\n        transform: rotate(112deg);\n    }\n\n    to {\n        transform: rotate(86deg);\n    }\n}\n\n@keyframes walkRight {\n\n    from {\n        transform: rotate(68deg);\n    }\n\n    to {\n        transform: rotate(94deg);\n    }\n}\n\n@keyframes armLeft {\n\n    from {\n        transform: rotate(28deg);\n    }\n\n    to {\n        transform: rotate(52deg);\n    }\n}\n\n@keyframes armRight {\n\n    from {\n        transform: rotate(145deg);\n    }\n\n    to {\n        transform: rotate(120deg);\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n    #glapito-game {\n        width: 90%;\n        height: 500px;\n        margin: 0 auto;\n    }\n\n    #glapito-mobile-controls {\n        display: flex;\n    }\n\n    #glapito-instructions {\n        display: none;\n    }\n\n    #glapito-field-name {\n        font-size: 38px;\n    }\n\n    #glapito-field-house {\n        transform: scale(0.78);\n        transform-origin: bottom left;\n    }\n\n    #glapito-darkness {\n        background:\n            radial-gradient(\n                circle at var(--light-x, 50%) var(--light-y, 50%),\n\n                rgba(0,0,0,0) 0px,\n                rgba(0,0,0,0) 95px,\n\n                rgba(0,0,0,0.2) 125px,\n                rgba(0,0,0,0.55) 185px,\n                rgba(0,0,0,0.84) 245px,\n\n                #000 315px\n            );\n    }\n}\n\n\n@media (max-width: 400px) {\n\n    #glapito-mobile-controls {\n        padding-left: 12px;\n        padding-right: 12px;\n\n        bottom: 12px;\n    }\n\n    .glapito-control-button {\n        width: 62px;\n        height: 62px;\n\n        font-size: 30px;\n    }\n\n    #glapito-field-name {\n        font-size: 34px;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    \/* =====================================================\n       ELEMENTS\n       ===================================================== *\/\n\n    const game = document.getElementById(\"glapito-game\");\n    const world = document.getElementById(\"glapito-world\");\n\n    const startScreen = document.getElementById(\"glapito-start-screen\");\n    const startButton = document.getElementById(\"glapito-start-button\");\n\n    const player = document.getElementById(\"glapito-player\");\n\n    const darkness = document.getElementById(\"glapito-darkness\");\n\n    const fieldHouse = document.getElementById(\"glapito-field-house\");\n    const fieldDoor = document.getElementById(\"glapito-field-door\");\n\n    const leftButton = document.getElementById(\"glapito-left-button\");\n    const rightButton = document.getElementById(\"glapito-right-button\");\n\n\n    \/* =====================================================\n       GAME SETTINGS\n       ===================================================== *\/\n\n    const SHOP_URL = \"https:\/\/glapito.com\/index.php\/Shop\/\";\n\n    const WORLD_WIDTH = 6000;\n\n    const PLAYER_WIDTH = 60;\n\n    const PLAYER_START = 300;\n\n    const PLAYER_SPEED = 30;\n\n    const FIELD_POSITION = 4620;\n\n    const FIELD_WIDTH = 520;\n\n    const DOOR_OFFSET = 165;\n\n    const DOOR_WIDTH = 120;\n\n    const DOOR_POSITION = FIELD_POSITION + DOOR_OFFSET;\n\n    const DOOR_TRIGGER_DISTANCE = 270;\n\n    const DOOR_CLICK_DISTANCE = 300;\n\n\n    \/* =====================================================\n       STATE\n       ===================================================== *\/\n\n    let playerX = PLAYER_START;\n\n    let cameraX = 0;\n\n    let gameStarted = false;\n\n    let movingLeft = false;\n    let movingRight = false;\n\n    let animationFrame = null;\n\n\n    \/* =====================================================\n       START GAME\n       ===================================================== *\/\n\n    function startGame() {\n\n        gameStarted = true;\n\n        startScreen.style.display = \"none\";\n\n        playerX = PLAYER_START;\n\n        updatePlayer();\n        updateCamera();\n        updateLanternLight();\n        updateDoorVisibility();\n\n        if (!animationFrame) {\n            animationFrame = requestAnimationFrame(gameLoop);\n        }\n    }\n\n\n    startButton.addEventListener(\"click\", startGame);\n\n\n    \/* =====================================================\n       KEYBOARD\n       ===================================================== *\/\n\n    document.addEventListener(\"keydown\", function (event) {\n\n        if (!gameStarted) {\n            return;\n        }\n\n        if (\n            event.key === \"ArrowLeft\" ||\n            event.key.toLowerCase() === \"a\"\n        ) {\n            movingLeft = true;\n            event.preventDefault();\n        }\n\n        if (\n            event.key === \"ArrowRight\" ||\n            event.key.toLowerCase() === \"d\"\n        ) {\n            movingRight = true;\n            event.preventDefault();\n        }\n    });\n\n\n    document.addEventListener(\"keyup\", function (event) {\n\n        if (\n            event.key === \"ArrowLeft\" ||\n            event.key.toLowerCase() === \"a\"\n        ) {\n            movingLeft = false;\n        }\n\n        if (\n            event.key === \"ArrowRight\" ||\n            event.key.toLowerCase() === \"d\"\n        ) {\n            movingRight = false;\n        }\n    });\n\n\n    \/* =====================================================\n       MOBILE BUTTONS\n       ===================================================== *\/\n\n    function startMovingLeft(event) {\n\n        event.preventDefault();\n\n        movingLeft = true;\n    }\n\n    function stopMovingLeft(event) {\n\n        event.preventDefault();\n\n        movingLeft = false;\n    }\n\n    function startMovingRight(event) {\n\n        event.preventDefault();\n\n        movingRight = true;\n    }\n\n    function stopMovingRight(event) {\n\n        event.preventDefault();\n\n        movingRight = false;\n    }\n\n\n    leftButton.addEventListener(\"pointerdown\", startMovingLeft);\n    leftButton.addEventListener(\"pointerup\", stopMovingLeft);\n    leftButton.addEventListener(\"pointercancel\", stopMovingLeft);\n    leftButton.addEventListener(\"pointerleave\", stopMovingLeft);\n\n\n    rightButton.addEventListener(\"pointerdown\", startMovingRight);\n    rightButton.addEventListener(\"pointerup\", stopMovingRight);\n    rightButton.addEventListener(\"pointercancel\", stopMovingRight);\n    rightButton.addEventListener(\"pointerleave\", stopMovingRight);\n\n\n    \/* =====================================================\n       GAME LOOP\n       ===================================================== *\/\n\n    function gameLoop() {\n\n        if (!gameStarted) {\n            animationFrame = null;\n            return;\n        }\n\n\n        let isWalking = false;\n\n\n        if (movingLeft) {\n\n            playerX -= PLAYER_SPEED;\n\n            isWalking = true;\n        }\n\n\n        if (movingRight) {\n\n            playerX += PLAYER_SPEED;\n\n            isWalking = true;\n        }\n\n\n        \/* Keep player inside world *\/\n\n        if (playerX < 0) {\n            playerX = 0;\n        }\n\n        if (playerX > WORLD_WIDTH - PLAYER_WIDTH) {\n            playerX = WORLD_WIDTH - PLAYER_WIDTH;\n        }\n\n\n        \/* Walking animation *\/\n\n        if (isWalking) {\n            player.classList.add(\"walking\");\n        } else {\n            player.classList.remove(\"walking\");\n        }\n\n\n        updatePlayer();\n        updateCamera();\n        updateLanternLight();\n        updateDoorVisibility();\n\n\n        animationFrame = requestAnimationFrame(gameLoop);\n    }\n\n\n    \/* =====================================================\n       PLAYER\n       ===================================================== *\/\n\n    function updatePlayer() {\n\n        player.style.left = playerX + \"px\";\n    }\n\n\n    \/* =====================================================\n       CAMERA\n       ===================================================== *\/\n\n    function updateCamera() {\n\n        const viewportWidth = game.clientWidth;\n\n        const playerCenter = playerX + (PLAYER_WIDTH \/ 2);\n\n        cameraX = playerCenter - (viewportWidth \/ 2);\n\n\n        if (cameraX < 0) {\n            cameraX = 0;\n        }\n\n\n        const maximumCamera = WORLD_WIDTH - viewportWidth;\n\n        if (cameraX > maximumCamera) {\n            cameraX = maximumCamera;\n        }\n\n\n        world.style.transform =\n            \"translate3d(\" + (-cameraX) + \"px, 0, 0)\";\n    }\n\n\n    \/* =====================================================\n       LANTERN LIGHT\n       ===================================================== *\/\n\n    function updateLanternLight() {\n\n        const gameRect = game.getBoundingClientRect();\n\n        const gameWidth = gameRect.width;\n        const gameHeight = gameRect.height;\n\n\n        \/*\n         * Character vertical position:\n         * player sits directly above the ground.\n         *\/\n\n        const playerTop =\n            (gameHeight * 0.70) - 120;\n\n\n        \/*\n         * Lantern is approximately in front of\n         * the character's left hand.\n         *\/\n\n        const lanternWorldX =\n            playerX + 63;\n\n\n        \/*\n         * Convert world coordinate to viewport coordinate.\n         *\/\n\n        const lanternScreenX =\n            lanternWorldX - cameraX;\n\n\n        \/*\n         * Lantern vertical coordinate.\n         *\/\n\n        const lanternScreenY =\n            playerTop + 60;\n\n\n        \/*\n         * Small horizontal flicker to make the\n         * illumination feel alive.\n         *\/\n\n        const flicker =\n            Math.sin(Date.now() \/ 75) * 2;\n\n\n        const lightX =\n            ((lanternScreenX + flicker) \/ gameWidth) * 100;\n\n        const lightY =\n            (lanternScreenY \/ gameHeight) * 100;\n\n\n        darkness.style.setProperty(\n            \"--light-x\",\n            lightX + \"%\"\n        );\n\n        darkness.style.setProperty(\n            \"--light-y\",\n            lightY + \"%\"\n        );\n    }\n\n\n    \/* =====================================================\n       DOOR PROXIMITY\n       ===================================================== *\/\n\n    function updateDoorVisibility() {\n\n        const playerCenter =\n            playerX + (PLAYER_WIDTH \/ 2);\n\n        const doorCenter =\n            DOOR_POSITION + (DOOR_WIDTH \/ 2);\n\n\n        const distance =\n            Math.abs(playerCenter - doorCenter);\n\n\n        \/*\n         * The door becomes slightly larger when\n         * the character approaches\/passes it.\n         *\/\n\n        if (distance <= DOOR_TRIGGER_DISTANCE) {\n\n            fieldDoor.classList.add(\"door-near\");\n\n        } else {\n\n            fieldDoor.classList.remove(\"door-near\");\n        }\n\n\n        \/*\n         * The Field only becomes noticeable when\n         * the character is getting close enough\n         * for the lantern to reach it.\n         *\/\n\n        if (distance <= 700) {\n\n            fieldHouse.classList.add(\"field-visible\");\n\n        } else {\n\n            fieldHouse.classList.remove(\"field-visible\");\n        }\n    }\n\n\n    \/* =====================================================\n       DOOR CLICK\n       ===================================================== *\/\n\n    fieldDoor.addEventListener(\"click\", function () {\n\n        const playerCenter =\n            playerX + (PLAYER_WIDTH \/ 2);\n\n        const doorCenter =\n            DOOR_POSITION + (DOOR_WIDTH \/ 2);\n\n\n        const distance =\n            Math.abs(playerCenter - doorCenter);\n\n\n        \/*\n         * Only allow entry when the character\n         * is actually beside the door.\n         *\/\n\n        if (distance <= DOOR_CLICK_DISTANCE) {\n\n            window.location.href = SHOP_URL;\n\n            return;\n        }\n\n\n        \/*\n         * Otherwise make the door react.\n         *\/\n\n        fieldDoor.classList.remove(\"door-shake\");\n\n        void fieldDoor.offsetWidth;\n\n        fieldDoor.classList.add(\"door-shake\");\n    });\n\n\n    \/* =====================================================\n       RESIZE\n       ===================================================== *\/\n\n    window.addEventListener(\"resize\", function () {\n\n        if (!gameStarted) {\n            return;\n        }\n\n        updateCamera();\n        updateLanternLight();\n    });\n\n\n    \/* =====================================================\n       INITIAL STATE\n       ===================================================== *\/\n\n    player.style.left =\n        PLAYER_START + \"px\";\n\n    world.style.transform =\n        \"translate3d(0, 0, 0)\";\n\n    darkness.style.setProperty(\n        \"--light-x\",\n        \"50%\"\n    );\n\n    darkness.style.setProperty(\n        \"--light-y\",\n        \"50%\"\n    );\n\n});\n<\/script>\n\n<div id=\"glapito-game\">\n\n    <!-- START SCREEN -->\n    <div id=\"glapito-start-screen\">\n        <button id=\"glapito-start-button\" type=\"button\">START<\/button>\n        <div class=\"glapito-start-subtitle\">EXIT THE DREAM<\/div>\n    <\/div>\n\n\n    <!-- WORLD -->\n    <div id=\"glapito-world\">\n\n        <!-- CAVE -->\n        <div id=\"glapito-cave\">\n\n            <div class=\"glapito-cave-ceiling\"><\/div>\n\n            <div class=\"glapito-cave-wall cave-wall-left\"><\/div>\n            <div class=\"glapito-cave-wall cave-wall-right\"><\/div>\n\n            <div class=\"glapito-rock rock-1\"><\/div>\n            <div class=\"glapito-rock rock-2\"><\/div>\n            <div class=\"glapito-rock rock-3\"><\/div>\n            <div class=\"glapito-rock rock-4\"><\/div>\n            <div class=\"glapito-rock rock-5\"><\/div>\n            <div class=\"glapito-rock rock-6\"><\/div>\n            <div class=\"glapito-rock rock-7\"><\/div>\n            <div class=\"glapito-rock rock-8\"><\/div>\n\n            <!-- CAVE GLITCH -->\n            <div class=\"cave-glitch-line cave-glitch-1\"><\/div>\n            <div class=\"cave-glitch-line cave-glitch-2\"><\/div>\n            <div class=\"cave-glitch-line cave-glitch-3\"><\/div>\n            <div class=\"cave-glitch-line cave-glitch-4\"><\/div>\n            <div class=\"cave-glitch-line cave-glitch-5\"><\/div>\n            <div class=\"cave-glitch-line cave-glitch-6\"><\/div>\n            <div class=\"cave-glitch-block cave-glitch-block-1\"><\/div>\n            <div class=\"cave-glitch-block cave-glitch-block-2\"><\/div>\n            <div class=\"cave-glitch-block cave-glitch-block-3\"><\/div>\n\n        <\/div>\n\n\n        <!-- CAVE EXIT \/ DARK FIELD -->\n        <div id=\"glapito-field-area\">\n\n            <div class=\"field-fog field-fog-1\"><\/div>\n            <div class=\"field-fog field-fog-2\"><\/div>\n            <div class=\"field-fog field-fog-3\"><\/div>\n\n            <div class=\"field-glitch-line field-glitch-1\"><\/div>\n            <div class=\"field-glitch-line field-glitch-2\"><\/div>\n            <div class=\"field-glitch-line field-glitch-3\"><\/div>\n\n        <\/div>\n\n\n        <!-- GROUND -->\n        <div id=\"glapito-ground\"><\/div>\n\n\n        <!-- THE FIELD -->\n        <div id=\"glapito-field-house\">\n\n            <div id=\"glapito-field-roof\"><\/div>\n\n            <div id=\"glapito-field-name\">\n                The Field\n            <\/div>\n\n            <div id=\"glapito-field-body\">\n\n                <div class=\"field-window field-window-left\"><\/div>\n                <div class=\"field-window field-window-right\"><\/div>\n\n                <!-- DOOR -->\n                <button id=\"glapito-field-door\" type=\"button\" aria-label=\"Enter The Field\"><\/button>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- PLAYER -->\n        <div id=\"glapito-player\">\n\n            <div class=\"glapito-hat\"><\/div>\n\n            <div class=\"glapito-head\"><\/div>\n\n            <div class=\"glapito-face\"><\/div>\n\n            <div class=\"glapito-body\"><\/div>\n\n            <div class=\"glapito-arm glapito-arm-left\"><\/div>\n            <div class=\"glapito-arm glapito-arm-right\"><\/div>\n\n            <div class=\"glapito-leg glapito-leg-left\"><\/div>\n            <div class=\"glapito-leg glapito-leg-right\"><\/div>\n\n\n            <!-- LANTERN -->\n            <div id=\"glapito-lantern\">\n\n                <div class=\"lantern-handle\"><\/div>\n                <div class=\"lantern-body\"><\/div>\n                <div class=\"lantern-glass\"><\/div>\n                <div class=\"lantern-flame\"><\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- LANTERN DARKNESS -->\n    <div id=\"glapito-darkness\"><\/div>\n\n\n    <!-- DESKTOP INSTRUCTIONS -->\n    <div id=\"glapito-instructions\">\n        \u2190 \u2192 &nbsp; \/ &nbsp; A D &nbsp; \u2014 &nbsp; WALK\n    <\/div>\n\n\n    <!-- PHONE CONTROLS -->\n    <div id=\"glapito-mobile-controls\">\n\n        <button id=\"glapito-left-button\" class=\"glapito-control-button\" type=\"button\" aria-label=\"Walk left\">\n            \u2190\n        <\/button>\n\n        <button id=\"glapito-right-button\" class=\"glapito-control-button\" type=\"button\" aria-label=\"Walk right\">\n            \u2192\n        <\/button>\n\n    <\/div>\n\n\n    <!-- VIGNETTE -->\n    <div id=\"glapito-vignette\"><\/div>\n\n<\/div>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-1648","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/pages\/1648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/comments?post=1648"}],"version-history":[{"count":41,"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/pages\/1648\/revisions"}],"predecessor-version":[{"id":1706,"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/pages\/1648\/revisions\/1706"}],"wp:attachment":[{"href":"https:\/\/glapito.com\/index.php\/wp-json\/wp\/v2\/media?parent=1648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}