@font-face {
            font-family: 'Conv';
            src: url('../fonts/Conv.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'NokiaFC22';
            src: url('../fonts/nokiafc22.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @property --scene-bg-start {
            syntax: '<color>';
            inherits: true;
            initial-value: #000000;
        }

        @property --scene-bg-end {
            syntax: '<color>';
            inherits: true;
            initial-value: #4a4a4a;
        }

        @property --scene-accent {
            syntax: '<color>';
            inherits: true;
            initial-value: #bcf001;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            --scene-bg-start: var(--bg-gradient-start, #000000);
            --scene-bg-end: var(--bg-gradient-end, #4a4a4a);
            --scene-accent: #bcf001;
            --scene-accent-soft: rgba(188, 240, 1, 0.2);
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Conv', sans-serif;
            overflow: hidden;
            background: linear-gradient(to bottom, var(--scene-bg-start), var(--scene-bg-end));
            position: relative;
            transition:
                --scene-bg-start 900ms ease,
                --scene-bg-end 900ms ease,
                background 900ms ease;
            user-select: none;
            -webkit-user-select: none;
        }

        /* PS3-style ribbon romboids background */
        .parallax-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
            perspective: 900px;
            transition: opacity 900ms ease;
        }

        .romboid-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: center center;
            will-change: transform, opacity;
            pointer-events: none;
            transition: opacity 160ms linear;
        }

        .romboid-bg {
            position: absolute;
            left: 0;
            top: 0;
            border-style: solid;
            border-color: color-mix(in srgb, var(--scene-accent) 75%, transparent);
            box-shadow:
                0 0 12px color-mix(in srgb, var(--scene-accent) 18%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--scene-accent) 10%, transparent);
            transform-origin: center center;
            will-change: transform;
            transition: border-color 900ms ease, box-shadow 900ms ease;
        }

        .romboid-bg.ribbon-soft {
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow:
                0 0 18px rgba(255, 255, 255, 0.13),
                inset 0 0 12px rgba(255, 255, 255, 0.08);
        }

        .romboid-bg.ribbon-bright {
            border-color: color-mix(in srgb, var(--scene-accent) 90%, transparent);
            box-shadow:
                0 0 18px color-mix(in srgb, var(--scene-accent) 24%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--scene-accent) 16%, transparent);
        }

        .sparkle-layer {
            position: fixed;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
            perspective: 800px;
        }

        .background-sparkle {
            position: absolute;
            width: var(--sparkle-size, 5px);
            height: var(--sparkle-size, 5px);
            left: 0;
            top: 0;
            background: rgba(255, 255, 255, 0.95);
            box-shadow:
                0 0 var(--sparkle-glow, 8px) rgba(255, 255, 255, 0.9),
                0 0 calc(var(--sparkle-glow, 8px) * 2.2) var(--scene-accent-soft);
            transform: translate3d(var(--sparkle-x, 0), var(--sparkle-y, 0), 0) rotate(45deg) scale(0.2);
            animation: backgroundSparkleDrift var(--sparkle-life, 2200ms) linear forwards;
            will-change: transform, opacity;
        }

        @keyframes backgroundSparkleDrift {
            0% {
                opacity: 0;
                transform: translate3d(var(--sparkle-x, 0), var(--sparkle-y, 0), var(--sparkle-z, 0)) rotate(45deg) scale(0.3);
            }
            16% {
                opacity: var(--sparkle-opacity, 0.72);
            }
            72% {
                opacity: calc(var(--sparkle-opacity, 0.72) * 0.82);
            }
            100% {
                opacity: 0;
                transform: translate3d(
                    calc(var(--sparkle-x, 0) + var(--sparkle-dx, 0px)),
                    calc(var(--sparkle-y, 0) + var(--sparkle-dy, 0px)),
                    var(--sparkle-z, 0)
                ) rotate(var(--sparkle-rotate, 105deg)) scale(var(--sparkle-end-scale, 0.95));
            }
        }

        .language-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .start-button-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .start-button-container.transitioning-out {
            pointer-events: none;
            animation: startScreenFadeOut 0.75s ease-in forwards;
        }

        @keyframes startScreenFadeOut {
            to {
                opacity: 0;
            }
        }

        .start-button {
            background: linear-gradient(to bottom, #bcf001, #1beb00af);
            color: white;
            border: 2px solid;
            border-image: linear-gradient(to bottom, #1beb00af, #bcf001) 1;
            font-size: 24px;
            font-family: 'Conv', sans-serif;
            cursor: pointer;
            transform: skewX(-20deg);
            border-radius: 0;
            width: 200px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
            text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
        }

        .start-button span {
            transform: skewX(20deg);
            display: block;
        }

        .start-button:hover {
            transform: scale(1.1) skewX(-20deg);
        }

        .start-button:active {
            transform: scale(0.95) skewX(-20deg);
            background: linear-gradient(to bottom, #9dc901, #006e06);
        }

        .start-button.hidden {
            display: none;
        }

        .logo-container {
            display: flex;
            justify-content: center;
            margin-top: -150px;
            margin-bottom: 150px;
        }

        .logo-container img {
            height: 150px;
            width: auto;
            max-width: calc(100vw - 40px);
            filter:
                drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.5))
                drop-shadow(0 0 14px rgba(188, 240, 1, 0.18));
        }

        @media (max-width: 560px) {
            .logo-container {
                width: 100%;
                margin-top: -70px;
                margin-bottom: 110px;
                padding: 0 20px;
            }

            .logo-container img {
                width: min(82vw, 320px);
                height: auto;
            }
        }

        .music-toggle-btn {
            z-index: 30;
            background: linear-gradient(to bottom, #bcf001, #1beb00af);
            color: white;
            border: 2px solid;
            border-image: linear-gradient(to bottom, #1beb00af, #bcf001) 1;
            font-size: 16px;
            font-family: 'Conv', sans-serif;
            cursor: pointer;
            border-radius: 0;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
            text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        }

        .music-toggle-btn span {
            display: block;
            font-size: 18px;
            line-height: 1;
        }

        .music-toggle-btn.music-off {
            background: linear-gradient(to bottom, #5f5f5f, #2f2f2f);
            border-image: linear-gradient(to bottom, #2f2f2f, #5f5f5f) 1;
            opacity: 0.8;
        }

        .music-toggle-btn:hover {
            transform: scale(1.1);
        }

        .music-toggle-btn:active {
            transform: scale(0.95);
            background: linear-gradient(to bottom, #9dc901, #006e06);
        }

        .music-toggle-btn.music-off {
            opacity: 0.6;
        }

        .now-playing {
            position: fixed;
            right: 18px;
            bottom: 16px;
            z-index: 40;
            display: flex;
            align-items: center;
            gap: 4px;
            max-width: calc(100vw - 36px);
            pointer-events: none;
            opacity: 0;
            --now-playing-lime: 188, 240, 1;
        }

        .now-playing.visible {
            animation: nowPlayingFadeIn 9s linear forwards;
        }

        .now-playing-icon {
            width: 18px;
            height: 21px;
            flex: 0 0 auto;
            background: rgba(var(--now-playing-lime), 0.65);
            -webkit-mask: url('../Images/page-parts/news-icons/music.svg') center / contain no-repeat;
            mask: url('../Images/page-parts/news-icons/music.svg') center / contain no-repeat;
            filter:
                drop-shadow(0 0 5px rgba(var(--now-playing-lime), 0.55))
                drop-shadow(0 0 10px rgba(var(--now-playing-lime), 0.25));
        }

        .now-playing-title {
            font-family: 'NokiaFC22', sans-serif;
            font-size: 16px;
            line-height: 1.2;
            letter-spacing: 0;
            text-align: right;
            color: rgba(var(--now-playing-lime), 0.65);
            text-shadow:
                0 0 5px rgba(var(--now-playing-lime), 0.72),
                0 0 12px rgba(var(--now-playing-lime), 0.48),
                0 0 20px rgba(255, 255, 255, 0.28);
            white-space: nowrap;
        }

        .now-playing-title {
            background:
                linear-gradient(
                    105deg,
                    rgba(var(--now-playing-lime), 0.65) 0%,
                    rgba(var(--now-playing-lime), 0.65) 30%,
                    rgba(var(--now-playing-lime), 0.76) 39%,
                    rgba(255, 255, 255, 0.9) 48%,
                    rgba(var(--now-playing-lime), 0.96) 54%,
                    rgba(var(--now-playing-lime), 0.84) 63%,
                    rgba(var(--now-playing-lime), 0.72) 74%,
                    rgba(var(--now-playing-lime), 0.67) 86%,
                    rgba(var(--now-playing-lime), 0.65) 100%
                );
            background-size: 320% 100%;
            background-position: 150% 0;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: nowPlayingGlowWave 9s ease-in-out infinite;
        }

        @keyframes nowPlayingFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes nowPlayingGlowWave {
            0%, 18% { background-position: 150% 0; }
            72%, 100% { background-position: -150% 0; }
        }

        @media (max-width: 560px) {
            .now-playing {
                right: 12px;
                bottom: 12px;
                max-width: calc(100vw - 24px);
            }

            .now-playing-title {
                font-size: 12px;
            }

            .now-playing-icon {
                width: 14px;
                height: 17px;
            }
        }

        .text-overlay {
            position: absolute;
            top: 15%;
            font-size: 3rem;
            font-weight: 300;
            letter-spacing: 2px;
            color: #fff;
            text-align: center;
            animation:
                fadeInOut 4s infinite,
                languagePromptGlowWave 8s ease-in-out infinite;
            pointer-events: none;
            background:
                linear-gradient(
                    105deg,
                    rgba(255, 255, 255, 0.92) 0%,
                    rgba(255, 255, 255, 0.92) 30%,
                    rgba(188, 240, 1, 0.72) 39%,
                    rgba(255, 255, 255, 1) 48%,
                    rgba(188, 240, 1, 0.86) 54%,
                    rgba(255, 255, 255, 0.98) 63%,
                    rgba(255, 255, 255, 0.94) 74%,
                    rgba(255, 255, 255, 0.92) 100%
                );
            background-size: 320% 100%;
            background-position: 150% 0;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow:
                0 2px 10px rgba(0, 0, 0, 0.7),
                0 0 9px rgba(188, 240, 1, 0.46),
                0 0 22px rgba(188, 240, 1, 0.28),
                0 0 32px rgba(255, 255, 255, 0.16);
        }

        .text-overlay.hidden {
            display: none;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            20% { opacity: 1; }
            50% { opacity: 1; }
            70% { opacity: 0; }
            100% { opacity: 0; }
        }

        @keyframes languagePromptGlowWave {
            0%, 18% { background-position: 150% 0; }
            72%, 100% { background-position: -150% 0; }
        }

        .buttons-container {
            display: flex;
            gap: 4rem;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 10;
        }

        .buttons-container.hidden {
            display: none;
        }

        .buttons-container.selection-locked {
            pointer-events: none;
        }

        .language-button {
            background: linear-gradient(to bottom, #bcf001, #1beb00af);
            color: white;
            border: 2px solid;
            border-image: linear-gradient(to bottom, #1beb00af, #bcf001) 1;
            font-size: 18px;
            font-family: 'Conv', sans-serif;
            cursor: pointer;
            /* build transform from variables so JS can update parts independently; bob-offset cancels bob during hover */
            transform: skewX(-20deg) translate(var(--dx, 0px), var(--dy, 0px)) translateY(var(--bob, 0px)) scale(var(--hover-scale, 1));
            border-radius: 0;
            width: 140px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 140ms ease;
            text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
            position: relative;
            box-shadow:
                0 4px 10px rgba(0, 0, 0, 0.25),
                0 0 0 rgba(188, 240, 1, 0);
            /* bobbing will animate custom property --bob */
            animation: floatBobVar 3s ease-in-out infinite;
        }

        .language-button.hovering {
            box-shadow:
                0 8px 18px rgba(0, 0, 0, 0.38),
                0 0 20px rgba(188, 240, 1, 0.82),
                0 0 44px rgba(188, 240, 1, 0.38);
        }

        .language-button:active:not(.selected) {
            transform: scale(0.95) skewX(-20deg);
            background: linear-gradient(to bottom, #9dc901, #006e06);
        }

        .language-button.fading {
            animation: fadeOutButton 1.5s ease-in-out forwards;
        }

        @keyframes fadeOutButton {
            to {
                opacity: 0;
            }
        }

        .language-button span {
            transform: skewX(20deg);
            display: block;
        }

        .language-button:nth-child(2) {
            animation-delay: 0.5s;
        }

        .dialog-box {
            position: fixed;
            bottom: 18%;
            left: 50%;
            transform: translateX(-50%) skewX(-20deg);
            width: min(650px, calc(100vw - 48px));
            height: 170px;
            background: transparent;
            border: 0;
            opacity: 1;
            padding: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dialog-box::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 9px;
            height: 9px;
            background: #bcf001;
            box-shadow:
                0 0 10px rgba(188, 240, 1, 0.9),
                0 0 24px rgba(188, 240, 1, 0.45);
            transform: translate(-50%, -50%);
            animation:
                dialogDotToLine 0.32s ease-out forwards,
                dialogLineHide 0.16s ease-out forwards 0.58s;
        }

        .dialog-box.closing::before {
            animation: none;
            opacity: 0;
        }

        .dialog-box::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.88);
            border: 2px solid #bcf001;
            box-shadow:
                0 0 16px rgba(188, 240, 1, 0.38),
                inset 0 0 18px rgba(188, 240, 1, 0.12);
            transform: scaleX(0);
            transform-origin: center;
            opacity: 1;
            animation: dialogPanelReveal 0.46s cubic-bezier(.2,.8,.2,1) forwards 0.3s;
        }

        .dialog-box.closing::after {
            opacity: 1;
            transform: scaleX(1);
            animation: dialogPanelClose 0.24s cubic-bezier(.4,0,.8,.2) forwards;
        }

        @keyframes dialogDotToLine {
            0% {
                width: 9px;
                height: 9px;
                opacity: 0;
            }
            22% {
                opacity: 1;
            }
            100% {
                width: 5px;
                height: 170px;
                opacity: 1;
            }
        }

        @keyframes dialogLineHide {
            to {
                opacity: 0;
            }
        }

        @keyframes dialogLineToDot {
            0% {
                width: 5px;
                height: 170px;
                opacity: 1;
            }
            100% {
                width: 9px;
                height: 9px;
                opacity: 0;
            }
        }

        @keyframes dialogPanelReveal {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }

        @keyframes dialogPanelClose {
            0% {
                opacity: 1;
                transform: scaleX(1);
            }
            99% {
                opacity: 1;
                transform: scaleX(0);
            }
            100% {
                opacity: 0;
                transform: scaleX(0);
            }
        }

        .dialog-text {
            color: white;
            font-size: 13px;
            line-height: 1.26;
            text-align: justify;
            text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
            opacity: 0;
            position: relative;
            z-index: 1;
            width: min(610px, 100%);
            padding: 16px 34px;
            margin: 0 auto;
            animation: textFadeIn 0.32s ease-out forwards 0.78s;
            transform: skewX(20deg);
        }

        .dialog-text.lang-en {
            width: 100%;
        }

        .dialog-text-line {
            display: block;
            text-align-last: justify;
        }

        .dialog-text-line.centered {
            text-align: center;
            text-align-last: center;
            color: #bcf001;
            text-shadow:
                0 0 7px rgba(188, 240, 1, 0.48),
                0 2px 6px rgba(0, 0, 0, 0.5);
        }

        .dialog-text-line.spacer {
            height: 6px;
        }

        .dialog-box.closing .dialog-text {
            animation: textFadeOut 0.14s ease-in forwards;
        }

        @media (max-width: 560px), (hover: none) and (pointer: coarse) {
            .text-overlay {
                top: 8%;
                width: min(92vw, 360px);
                font-size: 1.85rem;
                line-height: 1.05;
            }

            .buttons-container {
                transform: translateY(-18vh);
                gap: 1.4rem;
            }

            .language-button {
                width: 118px;
                height: 36px;
                font-size: 15px;
            }

            .dialog-box {
                bottom: max(18px, env(safe-area-inset-bottom));
                width: min(340px, calc(100vw - 34px));
                height: 148px;
            }

            .dialog-box::before {
                animation:
                    dialogDotToMobileLine 0.32s ease-out forwards,
                    dialogLineHide 0.16s ease-out forwards 0.58s;
            }

            .dialog-text {
                font-size: 10.5px;
                line-height: 1.18;
                padding: 12px 22px;
            }

            .dialog-text-line.spacer {
                height: 4px;
            }
        }

        @keyframes dialogDotToMobileLine {
            0% {
                width: 9px;
                height: 9px;
                opacity: 0;
            }
            22% {
                opacity: 1;
            }
            100% {
                width: 5px;
                height: 148px;
                opacity: 1;
            }
        }

        @keyframes textFadeIn {
            to {
                opacity: 1;
            }
        }

        @keyframes textFadeOut {
            to {
                opacity: 0;
            }
        }

        .language-button:active:not(.selected) {
            transform: scale(0.95) skewX(-20deg);
            background: linear-gradient(to bottom, #9dc901, #006e06);
        }

        @property --bob {
            syntax: '<length>';
            inherits: false;
            initial-value: 0px;
        }

        @keyframes floatBobVar {
            0%, 100% { --bob: 0px; }
            50% { --bob: -12px; }
        }

        @keyframes returnToFloat {
            to {
                transform: skewX(-20deg) translateY(0px) rotateZ(0deg);
            }
        }

        @keyframes floatFade {
            0% {
                opacity: 1;
                transform: skewX(-20deg) scale(1);
            }
            100% {
                opacity: 0;
                transform: skewX(-20deg) scale(0.8);
            }
        }

        .language-button.selected {
            animation: floatFade 1.5s ease-in-out forwards;
        }

        .background-transition {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            pointer-events: none;
            z-index: 150;
            opacity: 0;
        }

        .background-transition.active {
            animation: blackFadeIn 2s ease-in-out forwards;
        }

        body.route-loading {
            overflow: hidden;
        }

        body.route-loaded {
            width: auto;
            height: auto;
            min-height: 100vh;
            overflow: auto;
            display: block;
            justify-content: initial;
            align-items: initial;
            background: linear-gradient(to bottom, var(--scene-bg-start), var(--scene-bg-end)) !important;
        }

        body.route-loaded .gradient-background {
            background: transparent !important;
        }

        body.route-loaded .parallax-bg {
            z-index: 0;
            opacity: 0.74;
        }

        body.route-loaded .sparkle-layer {
            z-index: 2;
            opacity: 0.72;
        }

        body.motion-paused .parallax-bg,
        body.motion-paused .sparkle-layer {
            opacity: 0;
        }

        @media (max-width: 768px) and (pointer: coarse) {
            body.route-loaded {
                background: linear-gradient(to bottom, var(--scene-bg-start), var(--scene-bg-end)) !important;
            }

            body.route-loaded .parallax-bg,
            body.route-loaded .sparkle-layer {
                display: none;
            }
        }

        body.route-loaded:not(.route-loading) .language-container,
        body.route-loaded:not(.route-loading) .now-playing,
        body.route-loaded:not(.route-loading) .background-transition {
            display: none;
        }

        .dynamic-page-mount[hidden] {
            display: none;
        }

        .dynamic-page-mount {
            position: relative;
            z-index: 20;
            width: 100%;
            min-height: 100vh;
        }

        .route-loading-overlay {
            --part-w: 40px;
            --part-h: 60px;
            --skew: -35deg;
            --stagger: 0.15s;
            --dur: 2s;
            --stretch-down: 18;
            --stretch-up: 18;
            position: fixed;
            inset: 0;
            z-index: 200;
            background: #222;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 260ms ease, visibility 260ms ease;
        }

        body.route-loading .route-loading-overlay {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .route-loading-overlay .loader {
            position: fixed;
            bottom: 50px;
            right: 120px;
            display: flex;
            gap: 0;
        }

        .route-loading-overlay .part {
            width: var(--part-w);
            height: var(--part-h);
            display: flex;
            flex-direction: column;
            transform: skew(var(--skew));
            transform-origin: center;
            position: relative;
        }

        .route-loading-overlay .half {
            flex: 1;
            background: inherit;
        }

        .route-loading-overlay .bottom-half { transform-origin: top center; }
        .route-loading-overlay .top-half { transform-origin: bottom center; }

        .route-loading-overlay .red {
            background: #e32e2e;
            animation: redAnim var(--dur) ease-in-out infinite;
        }

        .route-loading-overlay .blue {
            background: #18a0ff;
            animation: blueAnim var(--dur) ease-in-out infinite;
            animation-delay: var(--stagger);
        }

        .route-loading-overlay .green {
            background: #33e038;
            animation: greenAnim var(--dur) ease-in-out infinite;
            animation-delay: calc(var(--stagger) * 2);
        }

        .route-loading-overlay .loading-wrapper {
            position: fixed;
            bottom: 68px;
            right: 300px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-family: Conv, sans-serif;
            font-weight: 600;
            font-size: 30px;
            user-select: none;
            pointer-events: none;
        }

        .route-loading-overlay .loading-text span {
            display: inline-block;
            animation: waveUpDown 1.5s ease-in-out infinite;
            animation-fill-mode: both;
            transform-origin: center bottom;
        }

        @keyframes redAnim {
            0% { transform: skew(var(--skew)) translateY(0); }
            15% { transform: skew(var(--skew)) translateY(0) scaleY(var(--stretch-down)); }
            30% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            59.9% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            60% { transform: skew(var(--skew)) translateY(-100vh) scaleY(var(--stretch-down)); opacity: 0; }
            75% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 1; }
            100% { transform: skew(var(--skew)) translateY(0) scaleY(1); }
        }

        @keyframes blueAnim {
            0% { transform: skew(var(--skew)) translateY(0); }
            15% { transform: skew(var(--skew)) translateY(0) scaleY(var(--stretch-up)); }
            30% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            59.9% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            60% { transform: skew(var(--skew)) translateY(100vh) scaleY(var(--stretch-up)); opacity: 0; }
            75% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 1; }
            100% { transform: skew(var(--skew)) translateY(0) scaleY(1); }
        }

        @keyframes greenAnim {
            0% { transform: skew(var(--skew)) translateY(0); }
            15% { transform: skew(var(--skew)) translateY(0) scaleY(var(--stretch-down)); }
            30% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            59.9% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 0; }
            60% { transform: skew(var(--skew)) translateY(-100vh) scaleY(var(--stretch-down)); opacity: 0; }
            75% { transform: skew(var(--skew)) translateY(0) scaleY(1); opacity: 1; }
            100% { transform: skew(var(--skew)) translateY(0) scaleY(1); }
        }

        @keyframes waveUpDown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }

        @media (max-width: 700px) {
            .route-loading-overlay .loader {
                right: 42px;
                bottom: 46px;
            }

            .route-loading-overlay .loading-wrapper {
                right: 185px;
                bottom: 64px;
                font-size: 24px;
            }
        }

        @keyframes blackFadeIn {
            to {
                opacity: 1;
            }
        }

        audio {
            display: none;
        }

        @media screen and (max-width: 768px) {
            .text-overlay {
                top: 6% !important;
                left: 50%;
                width: min(92vw, 360px) !important;
                font-size: 1.75rem !important;
                line-height: 1.05 !important;
                transform: translateX(-50%);
            }

            .buttons-container:not(.hidden) {
                position: absolute !important;
                top: 33% !important;
                left: 50% !important;
                width: 100%;
                gap: 1.35rem !important;
                transform: translateX(-50%) !important;
            }

            .language-button {
                width: 116px !important;
                height: 36px !important;
                font-size: 15px !important;
            }

            .dialog-box {
                top: auto !important;
                bottom: calc(max(16px, env(safe-area-inset-bottom)) + 190px) !important;
                width: min(330px, calc(100vw - 42px)) !important;
                height: 142px !important;
                transform: translateX(-50%) skewX(-12deg) !important;
            }

            .dialog-box::before {
                animation:
                    dialogDotToSmallMobileLine 0.32s ease-out forwards,
                    dialogLineHide 0.16s ease-out forwards 0.58s !important;
            }

            .dialog-text {
                font-size: 10.25px !important;
                line-height: 1.18 !important;
                padding: 10px 20px !important;
                transform: skewX(12deg) !important;
            }

            .dialog-text-line.spacer {
                height: 3px !important;
            }
        }

        @keyframes dialogDotToSmallMobileLine {
            0% {
                width: 9px;
                height: 9px;
                opacity: 0;
            }
            22% {
                opacity: 1;
            }
            100% {
                width: 5px;
                height: 142px;
                opacity: 1;
            }
        }