/* SPDX-FileCopyrightText: 2026 RiftWii contributors */
/* SPDX-License-Identifier: GPL-3.0-or-later */
img {
    -webkit-user-drag: none;
    user-select: none;
}

@font-face {
    font-family: "Rounded";
    src: url("../resources/fonts/rounded.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #02051c;
    color: white;
    font-family: "Rounded", sans-serif;
    overflow-x: hidden;
}

.background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -10;
    background: #02051c;
}

.haze-main {
    position: absolute;
    inset: -20px;
    background-image: url("../resources/img/hazebg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.05);
    z-index: 1;
}

.mist {
    position: absolute;
    width: 135vw;
    height: 135vh;
    top: -17.5vh;
    left: -17.5vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: transform, opacity;
}

.haze-1 {
    background-image: url("../resources/img/haze1.png");
    opacity: 0.97;
    filter: blur(1px);
    z-index: 3;
    animation:
        hazeMovement1 28s ease-in-out infinite alternate,
        hazeBreathing1 10s ease-in-out infinite alternate;
}

.haze-2 {
    background-image: url("../resources/img/haze2.png");
    opacity: 0.76;
    filter: blur(6px);
    z-index: 4;
    animation:
        hazeMovement2 38s ease-in-out infinite alternate,
        hazeBreathing2 14s ease-in-out infinite alternate;
}

.stars {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0.35;
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.7),
        0 0 9px rgba(255, 255, 255, 0.28);
    animation: twinkle linear infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(0.7);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.2);
    }
}

@keyframes hazeMovement1 {
    0% {
        transform: translate3d(-3%, -1%, 0) scale(1.03);
    }

    25% {
        transform: translate3d(1%, 2%, 0) scale(1.07);
    }

    50% {
        transform: translate3d(5%, -2%, 0) scale(1.04);
    }

    75% {
        transform: translate3d(2%, 3%, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-2%, 1%, 0) scale(1.05);
    }
}

@keyframes hazeMovement2 {
    0% {
        transform: translate3d(4%, 2%, 0) scale(1.08);
    }

    25% {
        transform: translate3d(0%, -2%, 0) scale(1.04);
    }

    50% {
        transform: translate3d(-5%, 2%, 0) scale(1.09);
    }

    75% {
        transform: translate3d(-1%, -3%, 0) scale(1.05);
    }

    100% {
        transform: translate3d(3%, 0%, 0) scale(1.08);
    }
}

@keyframes hazeBreathing1 {
    from {
        opacity: 0.73;
    }

    to {
        opacity: 0.97;
    }
}

@keyframes hazeBreathing2 {
    from {
        opacity: 0.49;
    }

    to {
        opacity: 0.76;
    }
}

.page-content {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    padding: 0 60px 90px;
    transition: padding-left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

body.loaded .page-content {
    padding-left: 270px;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.welcome {
    margin-bottom: 20px;
    font-size: clamp(1rem, 2vw, 1.45rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #d7f4ff;
    text-shadow:
        0 0 8px rgba(107, 220, 255, 0.35),
        0 0 20px rgba(151, 83, 255, 0.24);
    opacity: 0;
    transform: translateY(18px) scale(0.72);
    filter: blur(5px);
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
}

body.loaded .welcome {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.mod-loader {
    margin-top: 30px;
    letter-spacing: 0.35em;
    font-size: clamp(0.8rem, 1.8vw, 1.4rem);
    color: #9dbaf8;
    text-shadow:
        0 0 8px rgba(120, 190, 255, 0.12),
        0 0 18px rgba(120, 190, 255, 0.05);
    opacity: 0.88;
}

.riftwii {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
    z-index: 10;
    margin: 0;
    font-size: clamp(3rem, 8vw, 8rem);
    letter-spacing: 0.03em;
    line-height: 1;
    --orbit-opacity: 0.92;
    --orbit-thickness: 6;
    --orbit-rotation: 12deg;
    --orbit-scale: 1.38;
}

.rift-letter {
    position: relative;
    display: inline-block;
    z-index: 3;
    animation: textWave 4s ease-in-out infinite;
}

.letter-face {
    position: relative;
    display: inline-block;
    z-index: 3;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.letter-glow {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.left-group .letter-face {
    background-image: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fdff 28%,
        #e8faff 56%,
        #caefff 76%,
        #a2e5ff 100%
    );
}

.left-group .letter-glow {
    color: #79e5ff;
    text-shadow:
        0 0 7px rgba(121, 229, 255, 0.60),
        0 0 15px rgba(67, 215, 255, 0.34),
        0 0 28px rgba(67, 215, 255, 0.16);
}

.right-group .letter-face {
    background-image: linear-gradient(
        180deg,
        #83e9ff 0%,
        #70dcff 22%,
        #63ceff 45%,
        #63c0ff 68%,
        #73b2ff 100%
    );
}

.right-group .letter-glow {
    color: #b35cff;
    text-shadow:
        0 0 7px rgba(179, 92, 255, 0.58),
        0 0 15px rgba(159, 74, 255, 0.34),
        0 0 28px rgba(139, 61, 255, 0.16);
}

.rift-divider {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.34em;
    height: 1.32em;
    margin: 0 -0.02em;
    z-index: 4;
    transform: translateY(0.03em);
}

.rift-image {
    position: relative;
    z-index: 3;
    width: 250%;
    height: 250%;
    object-fit: contain;
    image-rendering: auto;
    animation: riftPulse 3.1s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.rift-embers {
    position: absolute;
    inset: -10% -40%;
    z-index: 2;
    pointer-events: none;
}

.ember {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.85),
        0 0 14px rgba(255, 255, 255, 0.35);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: emberFloat var(--dur) ease-out infinite;
    animation-delay: var(--delay);
}

@keyframes emberFloat {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x0)), calc(-50% + var(--y0))) scale(0.4);
    }

    10% {
        opacity: 0.95;
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x1)), calc(-50% + var(--y1))) scale(0.12);
    }
}

@keyframes riftPulse {
    0%, 100% {
        transform: scaleY(0.985) scaleX(0.985);
        filter:
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.82))
            drop-shadow(0 0 10px rgba(180, 235, 255, 0.46))
            drop-shadow(0 0 20px rgba(180, 235, 255, 0.22));
    }

    50% {
        transform: scaleY(1.03) scaleX(1.02);
        filter:
            drop-shadow(0 0 7px rgba(255, 255, 255, 0.98))
            drop-shadow(0 0 16px rgba(180, 235, 255, 0.68))
            drop-shadow(0 0 28px rgba(180, 235, 255, 0.34));
    }
}

.rift-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170%;
    height: 132%;
    z-index: 0;
    transform:
        translate(-50%, -50%)
        rotate(var(--orbit-rotation))
        scale(var(--orbit-scale));
    overflow: visible;
    pointer-events: none;
}

.orbit-trace {
    fill: none;
    stroke-width: var(--orbit-thickness);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.orbit-blue-trace {
    stroke: url("#blueGradient");
    filter: url("#blueOrbitGlow");
    animation: orbitBreatheBlue 4s ease-in-out infinite;
}

.orbit-purple-trace {
    stroke: url("#purpleGradient");
    filter: url("#purpleOrbitGlow");
    animation: orbitBreathePurple 4.8s ease-in-out infinite;
}

@keyframes orbitBreatheBlue {
    0%, 100% {
        opacity: calc(var(--orbit-opacity) * 0.55);
    }

    50% {
        opacity: var(--orbit-opacity);
    }
}

@keyframes orbitBreathePurple {
    0%, 100% {
        opacity: calc(var(--orbit-opacity) * 0.48);
    }

    50% {
        opacity: calc(var(--orbit-opacity) * 0.94);
    }
}

@keyframes textWave {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}
.social-embed-grid {
    width: 100%;

    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.discord-invite,
.github-invite {
    width: 100%;
    min-width: 0;

    padding:
        38px
        40px
        40px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 14px;

    background: #242428;

    box-shadow:
        0 18px 48px
            rgba(
                0,
                0,
                25,
                0.28
            ),
        0 0 30px
            rgba(
                85,
                76,
                255,
                0.06
            );
}


.discord-server-icon {
    width: 82px;
    height: 82px;

    margin-bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 5px 15px
            rgba(
                0,
                0,
                0,
                0.25
            );
}


.discord-server-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.github-repo-icon {
    width: 82px;
    height: 82px;

    margin-bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    overflow: hidden;

    background: #0d1117;

    box-shadow:
        0 5px 15px
            rgba(
                0,
                0,
                0,
                0.25
            );
}


.github-repo-icon img {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


.discord-invite-text,
.github-invite-text {
    margin:
        0
        0
        10px
        !important;

    color:
        #d6d6db
        !important;

    font-family:
        Arial,
        sans-serif
        !important;

    font-size:
        1.05rem
        !important;

    line-height:
        1.4
        !important;
}


.discord-server-name,
.github-repo-name {
    margin:
        0
        0
        28px;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            2rem
        );

    font-weight: 700;

    overflow-wrap: anywhere;
}


.discord-join-button,
.github-repo-button {
    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        12px
        22px;

    border-radius: 9px;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 5px 16px
            rgba(
                0,
                0,
                0,
                0.18
            );

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.discord-join-button {
    background: #5865f2;
}


.github-repo-button {
    background: #2f3338;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}


.discord-join-button:hover,
.discord-join-button:focus-visible {
    background: #6875f5;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
            rgba(
                0,
                0,
                0,
                0.24
            );

    outline: none;
}


.github-repo-button:hover,
.github-repo-button:focus-visible {
    background: #3a3f45;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
            rgba(
                0,
                0,
                0,
                0.24
            );

    outline: none;
}


.discord-join-button:active,
.github-repo-button:active {
    transform:
        translateY(0);
}


@media (max-width: 760px) {

    .social-embed-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .discord-invite,
    .github-invite {
        padding:
            30px
            22px;
    }

    .discord-server-icon,
    .github-repo-icon {
        width: 72px;
        height: 72px;
    }

    .github-repo-icon img {
        width: 44px;
        height: 44px;
    }

}
.tbar {
    position: fixed;
    left: 22px;
    top: 50%;
    z-index: 1000;
    width: 210px;
    padding: 24px 18px;
    border: 1px solid rgba(151, 115, 255, 0.26);
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(14, 19, 64, 0.88),
            rgba(19, 9, 55, 0.86)
        );
    box-shadow:
        0 0 32px rgba(61, 178, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform:
        translate(-135%, -50%)
        scale(0.72);
    transform-origin: left center;
    transition:
        opacity 0.85s ease,
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

body.loaded .tbar {
    opacity: 1;
    transform:
        translate(0, -50%)
        scale(1);
}

.tbar-brand {
    margin: 0 8px 22px;
    font-size: 1.5rem;
    letter-spacing: 0.28em;
    color: #9feaff;
    text-shadow:
        0 0 10px rgba(88, 221, 255, 0.35),
        0 0 22px rgba(158, 80, 255, 0.20);
}

.tbar-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbar-links a {
    display: block;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #c9dbff;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tbar-links a:hover,
.tbar-links a:focus-visible,
.tbar-links a.active {
    color: white;
    border-color: rgba(113, 218, 255, 0.26);
    background:
        linear-gradient(
            90deg,
            rgba(66, 211, 255, 0.13),
            rgba(155, 80, 255, 0.12)
        );
    box-shadow:
        0 0 18px rgba(72, 210, 255, 0.07);
    transform: translateX(4px);
    outline: none;
}

.delayed-content {
    opacity: 0;
    transform: translateY(48px) scale(0.97);
    filter: blur(7px);
    pointer-events: none;
    transition:
        opacity 1s ease 0.15s,
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
        filter 0.9s ease 0.15s;
}

body.loaded .delayed-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.content-shell {
    width: min(1050px, 100%);
    margin: 0 auto;
    padding: 40px 0 100px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.content-box {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(135, 181, 255, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(12, 27, 75, 0.64),
            rgba(38, 15, 83, 0.48)
        );
    box-shadow:
        0 18px 50px rgba(0, 0, 30, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.content-box::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(91, 223, 255, 0.65),
        rgba(183, 91, 255, 0.48),
        transparent
    );
}

.intro-box {
    padding: 36px;
}

.box-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: #8feaff;
    font-size: 1.5rem;
    letter-spacing: 0.28em;
}

.content-box h2 {
    margin: 0 0 14px;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    color: #f6fbff;
}

.content-box p {
    margin: 0;
    color: rgba(217, 229, 255, 0.78);
    font-family: Arial, sans-serif;
    line-height: 1.7;
    font-size: 0.98rem;
}

.content-link,
.download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    color: #eafdff;
    text-decoration: none;
    border: 1px solid rgba(98, 217, 255, 0.25);
    background:
        linear-gradient(
            90deg,
            rgba(59, 211, 255, 0.13),
            rgba(154, 79, 255, 0.16)
        );
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.content-link:hover,
.content-link:focus-visible,
.download-button:hover,
.download-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(126, 229, 255, 0.52);
    box-shadow:
        0 0 18px rgba(70, 215, 255, 0.12),
        0 0 28px rgba(157, 76, 255, 0.08);
    outline: none;
}

@media (max-width: 900px) {
    body.loaded .page-content {
        padding-left: 220px;
    }

    .tbar {
        left: 14px;
        width: 175px;
        padding: 18px 13px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .page-content,
    body.loaded .page-content {
        padding-left: 22px;
        padding-right: 22px;
    }

    .tbar {
        left: 12px;
        right: 12px;
        top: 12px;
        width: auto;
        padding: 10px 12px;
        border-radius: 16px;
        transform: translateY(-140%) scale(0.92);
    }

    body.loaded .tbar {
        transform: translateY(0) scale(1);
    }

    .tbar-brand {
        display: none;
        font-size: 1.5em;
    }

    .tbar-links {
        flex-direction: row;
        justify-content: space-between;
        gap: 4px;
    }

    .tbar-links a {
        padding: 9px 8px;
        font-size: 0.78rem;
    }

    .hero {
        min-height: 92vh;
    }

    .welcome {
        margin-top: 50px;
    }

    .content-shell {
        padding-top: 20px;
    }

    .content-box,
    .intro-box {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


body.page-locked {
    overflow: hidden;
    height: 100vh;
}

body.loaded {
    overflow-y: auto;
    height: auto;
}

.hero {
    align-items: flex-start;
    padding-top: clamp(120px, 18vh, 190px);
}

.hero-stack {
    width: min(980px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-intro {
    width: min(980px, 100%);
    margin-top: 44px;
}

.delayed-content {
    opacity: 0;
    transform: translateY(70px) scale(0.88);
    filter: blur(8px);
    pointer-events: none;
    transition:
        opacity 1s ease 0.1s,
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        filter 0.95s ease 0.1s;
}

body.loaded .delayed-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.page-section {
    min-height: 78vh;
    display: flex;
    align-items: center;
    scroll-margin-top: 40px;
}

.content-shell {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 70px 0 100px;
}

.section-box {
    width: 100%;
}

.tbar {
    overflow: visible;
}

.tbar-toggle {
    position: absolute;
    right: -43px;
    top: 50%;
    width: 43px;
    height: 62px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(126, 210, 255, 0.28);
    border-left: 0;
    border-radius: 0 15px 15px 0;
    background: rgba(15, 15, 55, 0.90);
    color: #c6f4ff;
    cursor: pointer;
    box-shadow: 8px 0 22px rgba(66, 187, 255, 0.08);
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.tbar-arrow {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
    transition: transform 0.35s ease;
}

body.tbar-collapsed .tbar-arrow {
    transform: rotate(180deg);
}

body.loaded.tbar-collapsed .tbar {
    transform: translate(calc(-100% - 22px), -50%) scale(1);
}

.tbar-toggle:hover,
.tbar-toggle:focus-visible {
    color: white;
    background:
        linear-gradient(
            180deg,
            rgba(39, 126, 199, 0.36),
            rgba(92, 43, 170, 0.34)
        );
    outline: none;
}

.tbar-links a {
    position: relative;
}

.tbar-links a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(#6fe7ff, #b263ff);
    transform: translateY(-50%);
    transition:
        height 0.25s ease,
        box-shadow 0.25s ease;
}

.tbar-links a.active::before {
    height: 55%;
    box-shadow:
        0 0 8px rgba(92, 225, 255, 0.60),
        0 0 12px rgba(174, 93, 255, 0.34);
}

.tbar-links a.active {
    color: white;
    border-color: rgba(113, 218, 255, 0.30);
    background:
        linear-gradient(
            90deg,
            rgba(66, 211, 255, 0.16),
            rgba(155, 80, 255, 0.14)
        );
    box-shadow:
        0 0 18px rgba(72, 210, 255, 0.10),
        inset 0 0 18px rgba(133, 75, 255, 0.04);
    transform: translateX(4px);
}

body.loaded:not(.tbar-collapsed) .page-content {
    padding-left: 270px;
}

body.loaded.tbar-collapsed .page-content {
    padding-left: 60px;
}

@media (max-width: 900px) {
    body.loaded:not(.tbar-collapsed) .page-content {
        padding-left: 220px;
    }
}

@media (max-width: 680px) {
    body.loaded:not(.tbar-collapsed) .page-content,
    body.loaded.tbar-collapsed .page-content {
        padding-left: 22px;
    }

    .tbar-toggle {
        right: 8px;
        top: calc(100% + 26px);
        width: 44px;
        height: 44px;
        border-left: 1px solid rgba(126, 210, 255, 0.28);
        border-radius: 50%;
    }

    body.loaded.tbar-collapsed .tbar {
        transform: translateY(calc(-100% - 70px)) scale(1);
    }

    body.tbar-collapsed .tbar-arrow {
        transform: rotate(-90deg);
    }
}



.page-section {
    min-height: 0;
    display: block;
    scroll-margin-top: 70px;
}

.content-shell {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 14px 0;
}

#features .content-shell {
    padding-top: 28px;
}

#credits .content-shell {
    padding-bottom: 90px;
}

.hero-intro {
    width: min(980px, 100%);
    margin-top: 44px;
    margin-bottom: 14px;
}



.reveal-box {
    opacity: 0;
    transform: translateY(64px) scale(0.88);
    filter: blur(7px);
    pointer-events: none;
    transition:
        opacity 0.8s ease,
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease;
    will-change: opacity, transform, filter;
}

.reveal-box.box-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

body:not(.loaded) .reveal-box {
    opacity: 0;
    pointer-events: none;
}

.release-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 26px;
}

.release-grid-single {
    width: min(620px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.release-card {
    position: relative;
    min-width: 0;
    padding: 28px;
    border: 1px solid rgba(127, 205, 255, 0.20);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(23, 50, 107, 0.46),
            rgba(55, 20, 105, 0.42)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 28px rgba(75, 218, 255, 0.05),
        0 12px 28px rgba(0, 0, 20, 0.12);
    text-align: center;
}

.latest-release {
    width: 100%;
}

.release-type {
    display: inline-block;
    margin-bottom: 10px;
    color: #8feaff;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}

.release-card h3 {
    margin: 0 0 12px;
    color: #f5fbff;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.release-card p {
    min-height: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.release-button {
    width: 100%;
    margin-top: 20px;
}

.download-intro {
    max-width: 760px;
}

@media (max-width: 760px) {
    .release-grid-single {
        width: 100%;
    }
}



body.page-locked .hero {
    min-height: 100vh;
}

body.loaded .hero {
    min-height: 0;
    padding-bottom: 14px;
}

body.loaded .hero-intro {
    margin-bottom: 0;
}

body.loaded #download .content-shell {
    padding-top: 14px;
}


.placeholder-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 24px;
    border-radius: 18px;
    border: 1px solid rgba(120, 211, 255, 0.18);
    box-shadow:
        0 0 28px rgba(65, 206, 255, 0.08),
        0 0 42px rgba(152, 76, 255, 0.05);
}


.grid-image {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    width: 100%;

    margin: 18px 0 24px;
}

.grid-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 16px;

    border:
        1px solid
        rgba(120, 211, 255, 0.18);

    box-shadow:
        0 0 28px
            rgba(65, 206, 255, 0.08),

        0 0 42px
            rgba(152, 76, 255, 0.05);
}

@media (max-width: 650px) {
    .grid-image {
        grid-template-columns: 1fr;
    }
}


#socials .content-box {
    background:
        linear-gradient(
            145deg,
            rgba(14, 30, 82, 0.68),
            rgba(52, 20, 101, 0.54)
        );
}





.site-footer {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: 28px;
    padding: 0;
    border-top: 1px solid rgba(135, 181, 255, 0.18);
    border-bottom: 1px solid rgba(135, 181, 255, 0.18);
    background:
        linear-gradient(
            145deg,
            rgba(12, 27, 75, 0.66),
            rgba(38, 15, 83, 0.50)
        );
    box-shadow:
        0 -18px 50px rgba(0, 0, 30, 0.16),
        0 18px 50px rgba(0, 0, 30, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(91, 223, 255, 0.65),
        rgba(183, 91, 255, 0.48),
        transparent
    );
}

.footer-inner {
    position: relative;

    width: 100%;
    min-height: 120px;

    padding: 28px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;

    border: 1px solid rgba(135, 181, 255, 0.20);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 27, 75, 0.70),
            rgba(38, 15, 83, 0.56)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 30, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(16px);

    overflow: hidden;

    font-family: "Rounded", sans-serif;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.7em;

    font-size: clamp(0.8rem, 1.4vw, 1rem);
    letter-spacing: 0.35em;

    color: #9dbaf8;

    text-shadow:
        0 0 8px rgba(120, 190, 255, 0.12),
        0 0 18px rgba(120, 190, 255, 0.05);
}

.footer-label {
    color: #9dbaf8;
    opacity: 0.88;
}

.footer-author {
    color: #d8e9ff;
    opacity: 0.96;

    text-shadow:
        0 0 8px rgba(120, 210, 255, 0.24),
        0 0 18px rgba(166, 92, 255, 0.18);
}

.footer-year {
    color: rgba(157, 186, 248, 0.62);

    font-size: 0.72rem;
    letter-spacing: 0.22em;
}



.tutorial-browser {
    margin-top: 26px;
}

.tutorial-search-wrap {
    display: block;
    width: 100%;
    margin-bottom: 14px;
}

.tutorial-search {
    width: 100%;
    min-height: 50px;
    padding: 0 17px;
    border: 1px solid rgba(116, 211, 255, 0.26);
    border-radius: 14px;
    outline: none;
    background:
        linear-gradient(
            90deg,
            rgba(29, 68, 131, 0.30),
            rgba(74, 38, 135, 0.26)
        );
    color: #eefaff;
    font-family: "Rounded", sans-serif;
    font-size: 0.98rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 22px rgba(73, 203, 255, 0.04);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.tutorial-search::placeholder {
    color: rgba(202, 220, 255, 0.58);
}

.tutorial-search:focus {
    border-color: rgba(116, 226, 255, 0.62);
    box-shadow:
        0 0 0 3px rgba(75, 207, 255, 0.08),
        0 0 22px rgba(73, 203, 255, 0.09);
}

.tutorial-list {
    display: grid;
    gap: 9px;
}

.tutorial-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 12px 15px;
    border: 1px solid rgba(126, 195, 255, 0.16);
    border-radius: 13px;
    background:
        linear-gradient(
            90deg,
            rgba(27, 55, 112, 0.34),
            rgba(69, 31, 128, 0.26)
        );
    color: #e8f5ff;
    text-decoration: none;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.tutorial-item:hover,
.tutorial-item:focus-visible {
    transform: translateX(4px);
    border-color: rgba(105, 222, 255, 0.42);
    background:
        linear-gradient(
            90deg,
            rgba(37, 91, 160, 0.44),
            rgba(91, 42, 163, 0.36)
        );
    box-shadow:
        0 0 18px rgba(65, 205, 255, 0.07);
    outline: none;
}

.tutorial-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutorial-item-arrow {
    flex: 0 0 auto;
    color: #91e8ff;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
}

.tutorial-toggle {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 1px solid rgba(126, 210, 255, 0.24);
    border-radius: 13px;
    background:
        linear-gradient(
            90deg,
            rgba(56, 177, 229, 0.13),
            rgba(142, 71, 255, 0.15)
        );
    color: #e7f7ff;
    font-family: "Rounded", sans-serif;
    font-size: 0.92rem;
    cursor: pointer;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.tutorial-toggle:hover,
.tutorial-toggle:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(126, 225, 255, 0.48);
    box-shadow:
        0 0 18px rgba(73, 207, 255, 0.08);
    outline: none;
}

.tutorial-status {
    padding: 16px 6px;
    color: rgba(210, 225, 255, 0.68);
    font-family: Arial, sans-serif;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.tbar {
    width: 320px;
}

.tbar-links a {
    font-size: clamp(1rem, 2vw, 1.45rem);
    padding: 15px 18px;
}

body.loaded:not(.tbar-collapsed) .page-content {
    padding-left: 380px;
}

@media (max-width: 1100px) {
    .tbar {
        width: 275px;
    }

    .tbar-links a {
        font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    }

    body.loaded:not(.tbar-collapsed) .page-content {
        padding-left: 330px;
    }
}

@media (max-width: 680px) {
    .tbar {
        width: auto;
    }

    .tbar-links a {
        font-size: 0.78rem;
        padding: 9px 8px;
    }

    body.loaded:not(.tbar-collapsed) .page-content {
        padding-left: 22px;
    }
}


.footer-inner {
    font-size: clamp(0.8rem, 1.8vw, 1.4rem);
}



.tutorial-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 14px;
}

.tutorial-search-wrap {
    margin-bottom: 0;
}

.tutorial-sort-wrap {
    position: relative;
    z-index: 20;
}

.tutorial-sort-button {
    min-width: 165px;
    min-height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(116, 211, 255, 0.26);
    border-radius: 14px;
    background:
        linear-gradient(
            90deg,
            rgba(29, 68, 131, 0.34),
            rgba(74, 38, 135, 0.30)
        );
    color: #eefaff;
    font-family: "Rounded", sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 22px rgba(73, 203, 255, 0.04);
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
}

.tutorial-sort-button:hover,
.tutorial-sort-button:focus-visible,
.tutorial-sort-wrap.open .tutorial-sort-button {
    border-color: rgba(116, 226, 255, 0.55);
    box-shadow:
        0 0 0 3px rgba(75, 207, 255, 0.06),
        0 0 22px rgba(73, 203, 255, 0.08);
    outline: none;
}

.tutorial-sort-chevron {
    font-family: Arial, sans-serif;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-sort-wrap.open .tutorial-sort-chevron {
    transform: rotate(180deg);
}

.tutorial-sort-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition:
        grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-sort-wrap.open .tutorial-sort-menu {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.tutorial-sort-menu-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(
            160deg,
            rgba(12, 31, 82, 0.97),
            rgba(47, 20, 94, 0.97)
        );
    box-shadow:
        0 14px 32px rgba(0, 0, 25, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
    transition:
        padding 0.28s ease,
        border-color 0.28s ease;
}

.tutorial-sort-wrap.open .tutorial-sort-menu-inner {
    padding: 7px;
    border-color: rgba(126, 210, 255, 0.20);
}

.tutorial-sort-menu button {
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #dcecff;
    text-align: left;
    font-family: "Rounded", sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-5px);
    transition:
        opacity 0.20s ease,
        transform 0.24s ease,
        background 0.20s ease,
        color 0.20s ease;
}

.tutorial-sort-wrap.open .tutorial-sort-menu button {
    opacity: 1;
    transform: translateY(0);
}

.tutorial-sort-wrap.open .tutorial-sort-menu button:nth-child(2) {
    transition-delay: 0.035s;
}

.tutorial-sort-wrap.open .tutorial-sort-menu button:nth-child(3) {
    transition-delay: 0.07s;
}

.tutorial-sort-wrap.open .tutorial-sort-menu button:nth-child(4) {
    transition-delay: 0.105s;
}

.tutorial-sort-menu button:hover,
.tutorial-sort-menu button:focus-visible,
.tutorial-sort-menu button.active {
    color: white;
    background:
        linear-gradient(
            90deg,
            rgba(59, 211, 255, 0.14),
            rgba(154, 79, 255, 0.16)
        );
    outline: none;
}

.tutorial-list {
    overflow: hidden;
    transition: height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-item {
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.tutorial-item.entering {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
}

.tutorial-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tutorial-item-date {
    color: rgba(176, 203, 239, 0.56);
    font-family: Arial, sans-serif;
    font-size: 0.74rem;
}

.tutorial-toggle {
    position: relative;
    overflow: hidden;
}

.tutorial-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.07),
        transparent
    );
    transform: translateX(-110%);
    transition: transform 0.55s ease;
}

.tutorial-toggle:hover::after {
    transform: translateX(110%);
}

@media (max-width: 720px) {
    .tutorial-toolbar {
        grid-template-columns: 1fr;
    }

    .tutorial-sort-button {
        width: 100%;
    }
}


.tutorial-browser {
    width: 100%;
}

.tutorial-list {
    width: 100%;
    overflow: hidden;
    transition:
        max-height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

.tutorial-item {
    width: 100%;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top center;
    transition:
        opacity 0.26s ease,
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        min-height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-item.tutorial-fading-out {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.72);
}

.tutorial-item.tutorial-fading-in {
    opacity: 0;
    transform: translateY(8px) scaleY(0.82);
}

.tutorial-toggle {
    transform: translateY(0);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.tutorial-sort-wrap {
    transition:
        opacity 0.26s ease,
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        max-width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-sort-wrap.tutorial-sort-hidden {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
}

.tutorial-sort-wrap:not(.tutorial-sort-hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-width: 220px;
}

.tutorial-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    transition: gap 0.34s ease;
}

.tutorial-toolbar:has(.tutorial-sort-hidden) {
    gap: 0;
}

@media (max-width: 720px) {
    .tutorial-sort-wrap:not(.tutorial-sort-hidden) {
        max-width: 100%;
    }
}



.split-ps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

    width: 100%;

    margin: 18px 0 24px;
}

.split-ps > * {
    min-width: 0;
}

@media (max-width: 650px) {
    .split-ps {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}



.features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin-top: 26px;
    overflow: hidden;
    /* Rows keep their content's height while the grid's height is pinned for
       the open/close animation, instead of stretching to fill it. */
    align-content: start;
    transition: height 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-group {
    width: 100%;
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(126, 195, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(25, 57, 118, 0.34),
            rgba(73, 31, 132, 0.28)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 28px rgba(0, 0, 30, 0.10);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-group.feature-fade-in {
    opacity: 0;
    transform: translateY(12px);
}

.feature-group.feature-fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

.feature-group h3 {
    margin: 0 0 14px;
    color: #f4fbff;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.feature-group ul {
    margin: 0;
    padding-left: 1.2rem;
}

.feature-group li {
    margin: 8px 0;
    color: rgba(219, 231, 255, 0.82);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.features-status {
    grid-column: 1 / -1;
    padding: 14px 4px;
    color: rgba(210, 225, 255, 0.68);
    font-family: Arial, sans-serif;
}

.features-toggle {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: 1px solid rgba(126, 210, 255, 0.24);
    border-radius: 13px;
    background:
        linear-gradient(
            90deg,
            rgba(56, 177, 229, 0.13),
            rgba(142, 71, 255, 0.15)
        );
    color: #e7f7ff;
    font-family: "Rounded", sans-serif;
    font-size: 0.92rem;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease;
}

.features-toggle:hover,
.features-toggle:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(126, 225, 255, 0.48);
    box-shadow:
        0 0 18px rgba(73, 207, 255, 0.08);
    outline: none;
}

@media (max-width: 700px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}



/* The custom cursor rules return with the new cursor art. Until then they
   would request images that are gone (a 404 on every load) and, because of
   the !important on *, override cursor: pointer on the buttons.

html,
body,
* {
    cursor: url("../resources/img/player1_point.png") 40 50, auto !important;
}

body.mouse-down,
body.mouse-down * {
    cursor: url("../resources/img/player1_grab.png") 40 50, auto !important;
}
*/



.social-embed-grid {
    width: 100%;

    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.discord-invite,
.github-invite {
    width: 100%;
    min-width: 0;

    padding:
        38px
        40px
        40px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 14px;

    background: #242428;

    box-shadow:
        0 18px 48px
            rgba(
                0,
                0,
                25,
                0.28
            ),
        0 0 30px
            rgba(
                85,
                76,
                255,
                0.06
            );
}


.discord-server-icon {
    width: 82px;
    height: 82px;

    margin-bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 5px 15px
            rgba(
                0,
                0,
                0,
                0.25
            );
}


.discord-server-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.github-repo-icon {
    width: 82px;
    height: 82px;

    margin-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    overflow: hidden;

    background: #0d1117;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.25);
}

.github-repo-icon img {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}



.discord-invite-text,
.github-invite-text {
    margin:
        0
        0
        10px
        !important;

    color:
        #d6d6db
        !important;

    font-family:
        Arial,
        sans-serif
        !important;

    font-size:
        1.05rem
        !important;

    line-height:
        1.4
        !important;
}


.discord-server-name,
.github-repo-name {
    margin:
        0
        0
        28px;

    color:
        #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            2rem
        );

    font-weight: 700;

    overflow-wrap: anywhere;
}


.discord-join-button,
.github-repo-button {
    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        12px
        22px;

    border-radius: 9px;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 5px 16px
            rgba(
                0,
                0,
                0,
                0.18
            );

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.discord-join-button {
    background: #5865f2;
}


.github-repo-button {
    background: #2f3338;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}


.discord-join-button:hover,
.discord-join-button:focus-visible {
    background: #6875f5;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
            rgba(
                0,
                0,
                0,
                0.24
            );

    outline: none;
}


.github-repo-button:hover,
.github-repo-button:focus-visible {
    background: #3a3f45;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
            rgba(
                0,
                0,
                0,
                0.24
            );

    outline: none;
}


.discord-join-button:active,
.github-repo-button:active {
    transform:
        translateY(0);
}


@media (max-width: 760px) {

    .social-embed-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .discord-invite,
    .github-invite {
        padding:
            30px
            22px;
    }

    .discord-server-icon,
    .github-repo-icon {
        width: 72px;
        height: 72px;
    }

    .github-repo-icon svg {
        width: 44px;
        height: 44px;
    }

}



.credits-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    width: 100%;

    margin-top: 26px;

    overflow: hidden;

    align-content: start;

    transition:
        height 0.5s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.credit-card {
    display: grid;

    grid-template-columns:
        82px minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    width: 100%;

    padding: 18px;

    border:
        1px solid
        rgba(126, 195, 255, 0.16);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 57, 118, 0.34),
            rgba(73, 31, 132, 0.28)
        );

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.04),

        0 10px 28px
            rgba(0, 0, 30, 0.10);

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.28s ease,
        transform 0.36s
            cubic-bezier(0.22, 1, 0.36, 1);
}

.credit-card.credit-entering {
    opacity: 0;

    transform:
        translateY(12px);
}

.credit-card.credit-leaving {
    opacity: 0;

    transform:
        translateY(-8px);
}

.credit-avatar {
    width: 82px;
    height: 82px;

    border-radius: 18px;

    overflow: hidden;

    border:
        1px solid
        rgba(117, 219, 255, 0.20);

    background:
        rgba(20, 30, 80, 0.5);

    box-shadow:
        0 0 20px
            rgba(80, 210, 255, 0.08);
}

.credit-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.credit-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.credit-name {
    margin: 0 0 7px;

    color: #f4fbff;

    font-family:
        "Rounded",
        sans-serif;

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.35rem
        );
}

.credit-subtitle {
    margin: 0 !important;

    color:
        rgba(
            219,
            231,
            255,
            0.72
        ) !important;

    font-family:
        Arial,
        sans-serif !important;

    line-height: 1.45 !important;
}

.credits-status {
    grid-column: 1 / -1;

    padding: 14px 4px;

    color:
        rgba(
            210,
            225,
            255,
            0.68
        );

    font-family:
        Arial,
        sans-serif;
}

.credits-toggle {
    width: 100%;

    min-height: 48px;

    margin-top: 16px;

    border:
        1px solid
        rgba(
            126,
            210,
            255,
            0.24
        );

    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(
                56,
                177,
                229,
                0.13
            ),
            rgba(
                142,
                71,
                255,
                0.15
            )
        );

    color: #e7f7ff;

    font-family:
        "Rounded",
        sans-serif;

    font-size: 0.92rem;

    cursor: pointer;

    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease;
}

.credits-toggle:hover,
.credits-toggle:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            126,
            225,
            255,
            0.48
        );

    box-shadow:
        0 0 18px
        rgba(
            73,
            207,
            255,
            0.08
        );

    outline: none;
}

@media (max-width: 750px) {
    .credits-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .credit-card {
        grid-template-columns:
            64px minmax(0, 1fr);

        gap: 14px;
    }

    .credit-avatar {
        width: 64px;
        height: 64px;
    }
}


.credit-card-no-image {
    grid-template-columns: 1fr;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

body.reduced-motion .haze-1,
body.reduced-motion .haze-2 {
    animation: none !important;
    transform: none !important;
}

body.reduced-motion .haze-1 {
    opacity: 0.82 !important;
}

body.reduced-motion .haze-2 {
    opacity: 0.58 !important;
}

body.reduced-motion .star {
    animation: none !important;
    opacity: 0.45 !important;
    transform: none !important;
}

body.reduced-motion .orbit-trace,
body.reduced-motion .orbit-blue-trace,
body.reduced-motion .orbit-purple-trace {
    animation: none !important;
}

body.reduced-motion .rift-letter {
    animation: none !important;
    transform: none !important;
}

body.reduced-motion .rift-image {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.82)) drop-shadow(0 0 12px rgba(180, 235, 255, 0.42));
}

body.reduced-motion .rift-embers,
body.reduced-motion .ember {
    display: none !important;
}

body.reduced-motion .welcome,
body.reduced-motion .delayed-content,
body.reduced-motion .reveal-box,
body.reduced-motion .reveal-box.box-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
}

body.reduced-motion .tbar,
body.reduced-motion.loaded .tbar {
    opacity: 1 !important;
    transform: translate(0, -50%) scale(1) !important;
}

body.reduced-motion.loaded.tbar-collapsed .tbar {
    transform: translate(calc(-100% - 22px), -50%) scale(1) !important;
}

body.reduced-motion .feature-group,
body.reduced-motion .feature-group.feature-fade-in,
body.reduced-motion .feature-group.feature-fade-out,
body.reduced-motion .credit-card,
body.reduced-motion .credit-card.credit-entering,
body.reduced-motion .credit-card.credit-leaving,
body.reduced-motion .tutorial-item,
body.reduced-motion .tutorial-item.entering,
body.reduced-motion .tutorial-item.tutorial-fading-in,
body.reduced-motion .tutorial-item.tutorial-fading-out {
    opacity: 1 !important;
    transform: none !important;
}

body.reduced-motion .features-grid,
body.reduced-motion .credits-grid,
body.reduced-motion .tutorial-list {
    transition: none !important;
}

@media (max-width: 520px) {
    }

@media (max-width: 680px) {
    body.reduced-motion .tbar,
    body.reduced-motion.loaded .tbar {
        transform: translateY(0) scale(1) !important;
    }

    body.reduced-motion.loaded.tbar-collapsed .tbar {
        transform: translateY(calc(-100% - 70px)) scale(1) !important;
    }
}


.tbar-motion-toggle {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #c9dbff;
    font-family: "Rounded", sans-serif;
    font-size: clamp(1rem, 2vw, 1.45rem);
    letter-spacing: 0.06em;
    text-align: left;
    cursor: pointer;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tbar-motion-toggle:hover,
.tbar-motion-toggle:focus-visible,
.tbar-motion-toggle[aria-pressed="true"] {
    color: white;
    border-color: rgba(113, 218, 255, 0.26);
    background:
        linear-gradient(
            90deg,
            rgba(66, 211, 255, 0.13),
            rgba(155, 80, 255, 0.12)
        );
    box-shadow: 0 0 18px rgba(72, 210, 255, 0.07);
    transform: translateX(4px);
    outline: none;
}

@media (max-width: 680px) {
    .tbar-motion-toggle {
        padding: 9px 8px;
        font-size: 0.78rem;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .tbar {
        /* Sticky, not fixed: the bar takes its own space in the page, so
           the content starts below it however many rows the links wrap to. */
        position: sticky !important;
        top: 8px !important;
        left: auto !important;
        right: auto !important;
        margin: 8px 8px 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.loaded .tbar,
    body.loaded.tbar-collapsed .tbar,
    body.reduced-motion .tbar,
    body.reduced-motion.loaded .tbar,
    body.reduced-motion.loaded.tbar-collapsed .tbar {
        top: 8px !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .tbar-toggle,
    #tbarToggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .tbar-brand {
        display: none !important;
    }

    .tbar-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .tbar-links a,
    .tbar-motion-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 28px !important;
        padding: 5px 4px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 0.68rem !important;
        line-height: 1.08 !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-overflow: clip !important;
        transform: none !important;
    }

    .tbar-links a:hover,
    .tbar-links a:focus-visible,
    .tbar-links a.active,
    .tbar-motion-toggle:hover,
    .tbar-motion-toggle:focus-visible,
    .tbar-motion-toggle[aria-pressed="true"] {
        transform: none !important;
    }

    .tbar-links a::before {
        display: none !important;
    }

    .page-content,
    body.loaded .page-content,
    body.loaded:not(.tbar-collapsed) .page-content,
    body.loaded.tbar-collapsed .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero {
        padding-top: 18px !important;
    }

    .welcome {
        margin-top: 0 !important;
    }
}

@media (max-width: 520px) {
    .tbar-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tbar-links a,
    .tbar-motion-toggle {
        min-height: 25px !important;
        padding: 4px 3px !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 900px) {
    .tbar {
        /* Sticky, not fixed: the bar takes its own space in the page, so
           the content starts below it however many rows the links wrap to. */
        position: sticky !important;
        top: 8px !important;
        left: auto !important;
        right: auto !important;
        margin: 8px 8px 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px !important;
        border-radius: 12px !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition:
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    body.loaded .tbar,
    body.reduced-motion .tbar,
    body.reduced-motion.loaded .tbar {
        top: 8px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    body.loaded.tbar-collapsed .tbar,
    body.reduced-motion.loaded.tbar-collapsed .tbar {
        transform: translateY(calc(-100% + 8px)) !important;
    }

    .tbar-toggle,
    #tbarToggle {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 100% !important;
        width: 42px !important;
        height: 30px !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(126, 210, 255, 0.28) !important;
        border-top: 0 !important;
        border-radius: 0 0 12px 12px !important;
        background: rgba(15, 15, 55, 0.94) !important;
        color: #c6f4ff !important;
        box-shadow: 0 8px 18px rgba(66, 187, 255, 0.08) !important;
    }

    .tbar-arrow {
        font-size: 1.35rem !important;
        line-height: 1 !important;
        transform: rotate(90deg) !important;
        transition:
            transform 0.28s ease !important;
    }

    body.tbar-collapsed .tbar-arrow {
        transform: rotate(-90deg) !important;
    }

    .tbar-brand {
        display: none !important;
    }

    .tbar-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .tbar-links a,
    .tbar-motion-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 28px !important;
        padding: 5px 4px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 0.64rem !important;
        line-height: 1.08 !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-overflow: clip !important;
        transform: none !important;
    }

    .tbar-links a:hover,
    .tbar-links a:focus-visible,
    .tbar-links a.active,
    .tbar-motion-toggle:hover,
    .tbar-motion-toggle:focus-visible,
    .tbar-motion-toggle[aria-pressed="true"] {
        transform: none !important;
    }

    .tbar-links a::before {
        display: none !important;
    }

    .page-content,
    body.loaded .page-content,
    body.loaded:not(.tbar-collapsed) .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.loaded.tbar-collapsed .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero {
        padding-top: 18px !important;
    }

    .welcome {
        margin-top: 0 !important;
    }
}

@media (max-width: 520px) {
    .tbar-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tbar-links a,
    .tbar-motion-toggle {
        min-height: 25px !important;
        padding: 4px 3px !important;
        font-size: 0.54rem !important;
        line-height: 1.05 !important;
    }
}

.credits-notice {
    width: 100%;

    margin:
        26px
        0
        0;

    padding:
        24px;

    border:
        1px solid
        rgba(
            127,
            205,
            255,
            0.20
        );

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(
                23,
                50,
                107,
                0.46
            ),
            rgba(
                55,
                20,
                105,
                0.42
            )
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.05
        ),
        0
        0
        28px
        rgba(
            75,
            218,
            255,
            0.05
        );
}

#credits .content-box .credits-notice {
    margin-top: 26px;
    color:
        rgba(
            217,
            229,
            255,
            0.78
        );

    font-family:
        Arial,
        sans-serif;

    line-height: 1.7;

    font-size: 0.98rem;
}

.credits-notice a {
    width: 100%;

    min-height: 46px;

    margin-top: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        11px
        16px;

    border:
        1px solid
        rgba(
            98,
            217,
            255,
            0.25
        );

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(
                59,
                211,
                255,
                0.13
            ),
            rgba(
                154,
                79,
                255,
                0.16
            )
        );

    color: #eafdff;

    font-family:
        "Rounded",
        sans-serif;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    transition:
        transform
        0.25s
        ease,
        box-shadow
        0.25s
        ease,
        border-color
        0.25s
        ease;
}

.credits-notice a:hover,
.credits-notice a:focus-visible {
    transform:
        translateY(
            -2px
        );

    border-color:
        rgba(
            126,
            229,
            255,
            0.52
        );

    box-shadow:
        0
        0
        18px
        rgba(
            70,
            215,
            255,
            0.12
        ),
        0
        0
        28px
        rgba(
            157,
            76,
            255,
            0.08
        );

    outline: none;
}

/* Below 900px the bar sits in the page (sticky, above): room under it for
   the toggle tab that hangs below it, which otherwise covered the top of
   the hero. Collapsed, the bar leaves the page's flow (fixed, slid up), so
   the content moves up instead of keeping an empty space where the bar
   was; the padding keeps it clear of the tab that is still showing. */
@media (max-width: 900px) {
    body.loaded:not(.tbar-collapsed) .tbar,
    body.reduced-motion.loaded:not(.tbar-collapsed) .tbar {
        margin-bottom: 36px !important;
    }

    body.loaded.tbar-collapsed .tbar,
    body.reduced-motion.loaded.tbar-collapsed .tbar {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        margin: 0 !important;
    }

    body.loaded.tbar-collapsed .page-content {
        padding-top: 52px !important;
    }
}

/* ------------------------------------------------------------------
   Phone and tablet navigation (900px and below)

   A slim fixed bar (name and a Menu button) that opens the links as a panel.
   This block comes last and uses "html body" selectors so it wins over the
   older overlapping rules above, which also use !important. At 901px and
   wider none of it applies and the side bar is untouched.
   ------------------------------------------------------------------ */
.tbar-menu-button,
.nav-scrim {
    display: none;
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: 64px;
    }

    html body #tbar.tbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 8px 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-width: 0 0 1px 0 !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow: visible !important;
        transition: transform 0.3s ease !important;
    }

    html body.nav-hidden #tbar.tbar {
        transform: translateY(-100%) !important;
    }

    html body .tbar-toggle,
    html body #tbarToggle {
        display: none !important;
    }

    html body .tbar-brand {
        display: block !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
        letter-spacing: 0.2em !important;
    }

    html body .tbar-brand-extra {
        display: none;
    }

    html body .tbar-menu-button {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        min-width: 44px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid rgba(126, 210, 255, 0.28);
        border-radius: 12px;
        background: rgba(15, 15, 55, 0.7);
        color: #c6f4ff;
        font: inherit;
        font-size: 1rem;
        cursor: pointer;
    }

    html body .tbar-menu-button:hover,
    html body .tbar-menu-button:focus-visible,
    html body.nav-open .tbar-menu-button {
        color: white;
        background: rgba(60, 90, 190, 0.45);
    }

    html body .tbar-menu-button:focus-visible,
    html body .tbar-links a:focus-visible,
    html body .tbar-motion-toggle:focus-visible {
        outline: 2px solid #9feaff;
        outline-offset: 2px;
    }

    /* Three bars that become a cross while the menu is open. */
    .tbar-menu-icon,
    .tbar-menu-icon::before,
    .tbar-menu-icon::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 0.25s ease, background 0.25s ease;
    }

    .tbar-menu-icon {
        position: relative;
    }

    .tbar-menu-icon::before,
    .tbar-menu-icon::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .tbar-menu-icon::before {
        top: -6px;
    }

    .tbar-menu-icon::after {
        top: 6px;
    }

    body.nav-open .tbar-menu-icon {
        background: transparent;
    }

    body.nav-open .tbar-menu-icon::before {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .tbar-menu-icon::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* The panel: closed it is not drawn and cannot be tabbed into. */
    html body .tbar-links {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: auto !important;
        max-height: calc(100vh - 64px) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        padding: 8px 12px 14px !important;
        border-bottom: 1px solid rgba(151, 115, 255, 0.26);
        background: #0d1040 !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0s linear 0.2s !important;
    }

    html body.nav-open .tbar-links {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s !important;
    }

    html body .tbar-links a,
    html body .tbar-motion-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        padding: 10px 16px !important;
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
        border-radius: 12px !important;
    }

    html body .tbar-motion-toggle {
        margin-top: 6px !important;
        border-top: 1px solid rgba(151, 115, 255, 0.22);
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(3, 4, 20, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.nav-open .nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* Room for the fixed bar; the old collapsed-bar offsets no longer apply. */
    html body .page-content,
    html body.loaded .page-content,
    html body.loaded.tbar-collapsed .page-content,
    html body.loaded:not(.tbar-collapsed) .page-content {
        padding-top: 52px !important;
    }

    html body .page-section {
        scroll-margin-top: 64px;
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    html body #tbar.tbar,
    html body .tbar-links,
    .tbar-menu-icon,
    .tbar-menu-icon::before,
    .tbar-menu-icon::after,
    .nav-scrim {
        transition: none !important;
    }
}

/* The tutorial toolbar's single column was "1fr", which cannot shrink below
   its widest content; the sort button's 165px minimum pushed the whole page
   wider than a phone. */
@media (max-width: 720px) {
    .tutorial-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .tutorial-sort-button {
        min-width: 0;
    }

    /* Hidden, the sort control would still keep its row (and a gap) under the
       search box; closed it takes no height. */
    .tutorial-sort-wrap.tutorial-sort-hidden {
        height: 0;
    }
}

/* The title's orbit ring is drawn wider than the screen on a phone. Clipping
   it at the page edge stops the browser from widening the page to fit it
   (which also shrank everything else and made the page scroll sideways; on a
   desktop window it added a sideways scroll bar). */
html body .page-content {
    overflow-x: clip;
}

/* ------------------------------------------------------------------
   Phone and tablet typography and spacing (900px and below)

   The desktop sizes (a 24px spaced-out kicker, 22px headings, 1.7 line
   height, 30px panel padding, 100px under every section) made a phone page
   very long. Normal mobile sizes: 15px text, 19px headings, a 13px kicker.
   This block comes after the older rules and uses "html body" selectors so
   it wins over their !important overrides.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    html body .box-kicker {
        margin-bottom: 8px;
        font-size: 0.85rem;
        letter-spacing: 0.2em;
    }

    html body .content-box h2 {
        margin-bottom: 10px;
        font-size: 1.25rem;
        line-height: 1.25;
    }

    html body .content-box p,
    html body .credits-notice {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    html body .content-shell,
    html body.loaded .content-shell,
    html body.loaded #download .content-shell {
        padding: 12px 0 28px;
    }

    html body .content-box,
    html body .intro-box {
        padding: 18px;
        border-radius: 18px;
    }

    html body .welcome {
        margin-bottom: 10px;
        font-size: 0.9rem;
    }

    html body .mod-loader {
        margin-top: 16px;
        font-size: 0.75rem;
    }

    html body .riftwii {
        font-size: 2.6rem;
    }

    html body .hero,
    html body.loaded .hero {
        padding-bottom: 6px !important;
    }

    html body .features-grid {
        gap: 12px;
        margin-top: 16px;
    }

    html body .feature-group {
        padding: 14px;
        border-radius: 14px;
    }

    html body .feature-group h3 {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    html body .feature-group li {
        margin: 5px 0;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    html body .placeholder-image {
        margin-bottom: 14px;
        border-radius: 12px;
    }

    html body .release-card h3 {
        margin-bottom: 8px;
        font-size: 1.15rem;
    }

    html body .release-button,
    html body .content-link,
    html body .download-button {
        margin-top: 14px;
    }

    html body .site-footer {
        margin-top: 8px;
    }
}

/* Screenshots are a grid, not one tall list: three columns on a tablet, two
   on a phone (down to 320px), the same gap everywhere. */
@media (max-width: 900px) {
    html body .grid-image {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 12px 0 16px;
    }

    html body .grid-image img {
        border-radius: 10px;
    }
}

@media (max-width: 599px) {
    html body .grid-image {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* The Themes page (themes.html). It reuses the panels, the navigation bar
   and the search box above; these rules are only what is special to it:
   the title, the grid of theme cards and the numbered steps. */
.themes-page .themes-top .content-shell {
    padding-top: clamp(48px, 9vh, 96px);
}

.themes-page .content-box h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: normal;
    line-height: 1.12;
    color: #f6fbff;
    text-shadow:
        0 0 18px rgba(88, 221, 255, 0.3),
        0 0 36px rgba(158, 80, 255, 0.22);
}

.themes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.themes-actions .download-button {
    margin-top: 22px;
}

.themes-page .content-box h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: normal;
    color: #f6fbff;
    overflow-wrap: anywhere;
}

.themes-page .content-box a {
    color: #8feaff;
}

.themes-page .content-box a.download-button {
    color: #eafdff;
}

.themes-page .content-box code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    color: #eafdff;
    overflow-wrap: anywhere;
    background: rgba(59, 211, 255, 0.12);
    padding: 1px 6px;
    border-radius: 6px;
}

.themes-page .tutorial-browser {
    margin-top: 20px;
}

.themes-page .tutorial-search[hidden] {
    display: none;
}

.themes-page .themes-note {
    margin-top: 22px;
    font-size: 0.9rem;
}

.theme-grid {
    display: grid;
    gap: 20px;
    margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.theme-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 195, 255, 0.2);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(25, 57, 118, 0.34),
            rgba(73, 31, 132, 0.28)
        );
    box-shadow:
        0 10px 28px rgba(0, 0, 30, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}

.theme-card:hover {
    border-color: rgba(126, 229, 255, 0.55);
    transform: translateY(-3px);
}

.theme-preview {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: rgba(4, 8, 40, 0.55);
    border-bottom: 1px solid rgba(135, 181, 255, 0.2);
}

.theme-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.theme-no-preview {
    color: rgba(190, 206, 245, 0.74);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
}

.theme-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.theme-card-body h3 {
    margin: 0;
}

.themes-page .content-box .theme-by {
    color: rgba(190, 206, 245, 0.74);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.theme-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.theme-tag {
    padding: 2px 10px;
    border: 1px solid rgba(98, 217, 255, 0.25);
    border-radius: 999px;
    background: rgba(59, 211, 255, 0.14);
    color: #d6f6ff;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
}

.theme-card .theme-download {
    margin-top: auto;
}

.theme-hash {
    color: rgba(190, 206, 245, 0.74);
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
}

.theme-hash summary {
    cursor: pointer;
}

.themes-page .content-box .theme-hash p {
    margin: 6px 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.theme-empty {
    padding: 22px;
    border: 1px solid rgba(135, 181, 255, 0.2);
    border-radius: 18px;
    background: rgba(4, 8, 40, 0.35);
    text-align: center;
}

.themes-page .content-box .theme-status {
    color: rgba(190, 206, 245, 0.74);
}

.theme-steps {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    counter-reset: theme-step;
}

.theme-step {
    padding: 18px;
    border: 1px solid rgba(126, 195, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(25, 57, 118, 0.34),
            rgba(73, 31, 132, 0.28)
        );
}

.theme-step::before {
    counter-increment: theme-step;
    content: counter(theme-step);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border: 1px solid rgba(126, 229, 255, 0.5);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 211, 255, 0.3), rgba(154, 79, 255, 0.34));
    color: #eafdff;
}

.theme-rules {
    display: grid;
    gap: 14px;
    margin-top: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.theme-rule {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.theme-rule svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: #9feaff;
}

@media (max-width: 900px) {
    .themes-page .themes-top .content-shell {
        padding-top: 14px;
    }

    .theme-step,
    .theme-card-body {
        padding: 14px;
    }
}

/* The Compatibility page (compatibility.html). It reuses the panels, the
   navigation bar and the search box above; these rules are only what is
   special to it: the title, the filters, the game rows and the status pills. */
.compatibility-page .compatibility-top .content-shell {
    padding-top: clamp(48px, 9vh, 96px);
}

.compatibility-page .content-box h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: normal;
    line-height: 1.12;
    color: #f6fbff;
    text-shadow:
        0 0 18px rgba(88, 221, 255, 0.3),
        0 0 36px rgba(158, 80, 255, 0.22);
}

.compatibility-page .content-box h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: normal;
    color: #f6fbff;
    overflow-wrap: anywhere;
}

.compatibility-page .content-box a {
    color: #8feaff;
}

.compatibility-page .content-box a.download-button {
    color: #eafdff;
}

.compatibility-page .content-box code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    color: #eafdff;
    overflow-wrap: anywhere;
    background: rgba(59, 211, 255, 0.12);
    padding: 1px 6px;
    border-radius: 6px;
}

.compatibility-page .tutorial-browser {
    margin-top: 20px;
}

.compatibility-page .tutorial-search[hidden] {
    display: none;
}

.compatibility-page .compat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.compatibility-page .compat-filter {
    display: flex;
    flex: 1 1 160px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 260px;
}

.compatibility-page .compat-filter label {
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    color: rgba(190, 206, 245, 0.74);
}

.compatibility-page .compat-filter select {
    width: 100%;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(126, 195, 255, 0.3);
    border-radius: 12px;
    background: rgba(4, 8, 40, 0.55);
    color: #eafdff;
    font-family: Arial, sans-serif;
    font-size: 0.92rem;
}

.compatibility-page .compat-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    grid-template-columns: 1fr;
}

.compatibility-page .compat-card {
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid rgba(126, 195, 255, 0.2);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(25, 57, 118, 0.34),
            rgba(73, 31, 132, 0.28)
        );
    box-shadow:
        0 10px 28px rgba(0, 0, 30, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}

.compatibility-page .compat-card:hover {
    border-color: rgba(126, 229, 255, 0.55);
    transform: translateY(-3px);
}

.compatibility-page .compat-card h3 {
    margin: 0;
}

.compatibility-page .compat-id {
    margin: 4px 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: rgba(190, 206, 245, 0.74);
    overflow-wrap: anywhere;
}

.compatibility-page .compat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.compatibility-page .compat-type {
    padding: 2px 10px;
    border: 1px solid rgba(135, 181, 255, 0.3);
    border-radius: 999px;
    background: rgba(4, 8, 40, 0.4);
    color: #d6e6ff;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
}

.compatibility-page .compat-pill {
    padding: 2px 10px;
    border: 1px solid rgba(98, 217, 255, 0.25);
    border-radius: 999px;
    background: rgba(59, 211, 255, 0.14);
    color: #d6f6ff;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
}

.compatibility-page .compat-pill-perfect {
    border-color: rgba(86, 211, 100, 0.55);
    background: rgba(46, 160, 67, 0.24);
    color: #c9f5d3;
}

.compatibility-page .compat-pill-playable {
    border-color: rgba(98, 217, 255, 0.5);
    background: rgba(59, 211, 255, 0.16);
    color: #d6f6ff;
}

.compatibility-page .compat-pill-problems {
    border-color: rgba(230, 184, 64, 0.55);
    background: rgba(210, 153, 34, 0.22);
    color: #ffe3a3;
}

.compatibility-page .compat-pill-wont-start {
    border-color: rgba(255, 123, 114, 0.55);
    background: rgba(218, 54, 51, 0.22);
    color: #ffd7d2;
}

.compatibility-page .compat-dolphin-only {
    color: rgba(190, 206, 245, 0.74);
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
}

.compatibility-page .compat-reports,
.compatibility-page .compat-version {
    margin: 8px 0 0;
    color: rgba(190, 206, 245, 0.9);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.compatibility-page .compat-details {
    margin-top: 10px;
    color: rgba(190, 206, 245, 0.9);
    font-family: Arial, sans-serif;
    font-size: 0.88rem;
}

.compatibility-page .compat-details summary {
    cursor: pointer;
    color: #8feaff;
}

.compatibility-page .compat-report-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

.compatibility-page .compat-report-list li {
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.compatibility-page .compat-empty {
    padding: 22px;
    border: 1px solid rgba(135, 181, 255, 0.2);
    border-radius: 18px;
    background: rgba(4, 8, 40, 0.35);
    text-align: center;
}

.compatibility-page .content-box .compat-status {
    color: rgba(190, 206, 245, 0.74);
}

.compatibility-page .compat-note {
    margin-top: 22px;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .compatibility-page .compatibility-top .content-shell {
        padding-top: 14px;
    }

    .compatibility-page .compat-card {
        padding: 14px;
    }

    .compatibility-page .compat-filter {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .compatibility-page .compat-card {
        transition: none;
    }

    .compatibility-page .compat-card:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Phone hero and first screen (900px and below)

   On a phone the first block is subtext under the logo, not a panel of its
   own: the tagline as a short line under MOD LOADER and the sentence as small
   muted text, with the box kicker (a second "RIFTWII") left out. The hero is
   smaller and the Download banner comes after the version and its button, so
   the Download heading and button are on the first screen of a phone (about
   412x690 visible) without scrolling. This block is last and uses "html body"
   selectors to win over the older rules above.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    html body .hero,
    html body.loaded .hero {
        padding-top: 10px !important;
        padding-bottom: 0 !important;
    }

    html body .welcome {
        margin-bottom: 6px;
        font-size: 0.8rem;
    }

    html body .riftwii {
        font-size: 2.1rem;
    }

    html body .mod-loader {
        margin-top: 10px;
        font-size: 0.72rem;
    }

    html body .hero-intro,
    html body .hero-intro.box-visible {
        margin: 8px auto 0;
        padding: 0 6px;
        max-width: 34em;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-align: center;
    }

    html body .hero-intro::before,
    html body .hero-intro::after {
        display: none;
    }

    html body .hero-intro .box-kicker {
        display: none;
    }

    html body .hero-intro h2 {
        margin: 0 0 4px;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.3;
    }

    html body .hero-intro p {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.45;
        text-wrap: balance;
        color: rgba(215, 232, 255, 0.68);
    }

    /* The banner comes after the version and the button. */
    html body #download .content-shell {
        padding-top: 4px;
        padding-bottom: 20px;
    }

    html body #download .content-box {
        display: flex;
        flex-direction: column;
        padding: 14px 16px 16px;
    }

    html body #download .box-kicker {
        margin-bottom: 4px;
    }

    html body #download .release-grid {
        order: 1;
    }

}

/* ------------------------------------------------------------------
   Desktop hero and first screen (above 900px)

   Same idea as on phones: the first block is subtext under the logo, not a
   panel of its own, and the hero shrinks with the window's height so the
   Download heading and its button stay on the first screen of a short desktop
   window (down to about 1000x511) as well as a tall one. Sizes are clamps of
   vh, so a 1440x900 screen keeps a large logo. This block is last and uses
   "html body" selectors to win over the older rules above.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
    html body .hero,
    html body.loaded .hero {
        padding-top: clamp(14px, 4.5vh, 56px) !important;
        padding-bottom: 0 !important;
    }

    html body .welcome {
        margin-bottom: clamp(2px, 1vh, 12px);
        font-size: clamp(0.7rem, 2.2vh, 1.2rem);
    }

    html body .riftwii {
        font-size: clamp(2rem, 8.5vh, 5.5rem);
    }

    html body .mod-loader {
        margin-top: clamp(6px, 2.2vh, 22px);
        font-size: clamp(0.62rem, 1.8vh, 1rem);
    }

    html body .hero-intro,
    html body .hero-intro.box-visible {
        margin: clamp(6px, 1.8vh, 18px) auto 0;
        padding: 0 6px;
        width: min(40em, 100%);
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-align: center;
    }

    html body .hero-intro::before,
    html body .hero-intro::after {
        display: none;
    }

    html body .hero-intro .box-kicker {
        display: none;
    }

    html body .hero-intro h2 {
        margin: 0 0 clamp(2px, 0.6vh, 6px);
        font-size: clamp(0.9rem, 2.6vh, 1.25rem);
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.3;
    }

    html body .hero-intro p {
        margin: 0;
        font-size: clamp(0.75rem, 1.9vh, 0.95rem);
        line-height: 1.45;
        text-wrap: balance;
        color: rgba(215, 232, 255, 0.68);
    }

    /* Download sits right under the intro, not centred in a tall section. */
    html body #download {
        min-height: 0;
    }

    html body #download .content-shell,
    html body.loaded #download .content-shell {
        padding-top: clamp(4px, 1.5vh, 14px);
        padding-bottom: 40px;
    }

    html body #download .content-box {
        padding-top: clamp(12px, 2.5vh, 28px);
        padding-bottom: clamp(12px, 2.5vh, 28px);
    }
}

/* ------------------------------------------------------------------
   Side bar in short windows (above 900px wide)

   The side bar is about 690px tall at its normal size, so in a window
   shorter than that its last rows (Credits, Animations) were cut off below
   the window edge. Up to 740px tall everything in it scales with the window
   height, down to 32px rows and 13px text; the bar stays centred. Where even
   that does not fit (under about 400px tall) the bar is capped to the window
   and the link list scrolls inside it, with the title still showing. Taller
   windows and the phone and tablet bar (900px and below) are untouched.
   "html body" selectors and !important beat the older overlapping rules
   above, as in the block before this one.
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (max-height: 740px) {
    html body #tbar.tbar {
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: clamp(10px, 3.2vh, 24px) clamp(10px, 2.4vh, 18px) !important;
        border-radius: clamp(14px, 3vh, 22px) !important;
    }

    html body .tbar-brand {
        flex: 0 0 auto !important;
        margin: 0 8px clamp(8px, 3vh, 22px) !important;
        font-size: clamp(0.85rem, 3.2vh, 1.5rem) !important;
        line-height: 1.2 !important;
    }

    html body .tbar-links {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        gap: clamp(3px, 1vh, 8px) !important;
        padding: 2px 6px 2px 2px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(126, 210, 255, 0.35) transparent !important;
    }

    html body .tbar-links a,
    html body .tbar-motion-toggle {
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        min-height: 32px !important;
        padding: clamp(6px, 2vh, 15px) clamp(10px, 2vh, 18px) !important;
        font-size: clamp(0.82rem, 3.1vh, clamp(1rem, 2vw, 1.45rem)) !important;
        line-height: 1.15 !important;
        border-radius: clamp(9px, 1.8vh, 13px) !important;
    }
}


.themes-image,
.compat-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 20px 0;
    object-fit: contain;
    border-radius: 14px;
}