body {
    font-family: 'Roboto Mono', monospace;
    background-color: #383940;
}

.home-page,
.playverse-page,
.bananaverse-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.home-page .row > *,
.playverse-page .row > *,
.bananaverse-page .row > * {
    min-width: 0;
}

.home-connect a,
.playverse-game-facts span {
    overflow-wrap: anywhere;
}

.home-hero {
    position: relative;
    min-height: min(76svh, 760px);
    overflow: hidden;
    background-color: #262126;
    background-image: url('/assets/images/hero_home.png');
    background-position: center;
    background-size: cover;
}

.home-hero::before {
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 12, 0.5);
    content: "";
}

.home-hero > .container {
    z-index: 1;
}

.home-hero-content {
    max-width: 720px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.home-brand-logo {
    width: min(600px, 82vw);
    height: auto;
}

.home-intro,
.home-creator {
    background: #292a30;
}

.home-intro-details dt {
    letter-spacing: 0;
}

.home-experience-card {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-experience-card:hover,
.home-experience-card:focus {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    transform: translateY(-4px);
}

.home-experience-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-creator-image {
    width: min(230px, 70vw);
    aspect-ratio: 1;
    object-fit: cover;
    border: 3px solid #ffc107;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .home-hero {
        min-height: 70svh;
        background-position: 58% center;
    }

    .home-brand-logo {
        width: min(500px, 88vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-experience-card {
        transition: none;
    }

    .home-experience-card:hover,
    .home-experience-card:focus {
        transform: none;
    }
}

.playverse-hero {
    position: relative;
    min-height: min(76svh, 760px);
    overflow: hidden;
    background: #14231a;
}

.playverse-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(4, 12, 8, 0.54);
    content: "";
}

.playverse-hero > .container {
    z-index: 2;
}

.playverse-hero-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
}

.playverse-hero-minecraft {
    background-image: url('/assets/images/playverse/minecraft.png');
    animation: playverseHeroMinecraft 18s ease-in-out infinite;
}

.playverse-hero-mario {
    background-image: url('/assets/images/playverse/mario-kart-world.jpg');
    animation: playverseHeroMario 18s ease-in-out infinite;
}

@keyframes playverseHeroMinecraft {
    0%, 47% {
        opacity: 1;
    }

    50%, 97% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes playverseHeroMario {
    0%, 47% {
        opacity: 0;
    }

    50%, 97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.playverse-hero-content {
    max-width: 720px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
}

.playverse-hero h1,
.playverse-principles dt {
    letter-spacing: 0;
}

.playverse-intro,
.playverse-join {
    background: #292a30;
}

.playverse-experiences {
    background: #34353c;
}

.playverse-game,
.playverse-join-card {
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.playverse-game-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}

.playverse-game-facts {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.playverse-join-card .modal-content {
    text-align: left;
}

@media (max-width: 991.98px) {
    .playverse-game-image {
        min-height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767.98px) {
    .playverse-hero {
        min-height: 70svh;
    }

    .playverse-hero-image {
        background-position: center;
    }

    .playverse-hero h1 {
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .playverse-hero-minecraft,
    .playverse-hero-mario {
        animation: none;
    }

    .playverse-hero-mario {
        display: none;
    }
}

.bananaverse-hero {
    position: relative;
    min-height: min(76svh, 760px);
    overflow: hidden;
    background-color: #17252b;
}

.bananaverse-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(4, 12, 15, 0.46);
    content: "";
}

.bananaverse-hero > .container {
    z-index: 2;
}

.bananaverse-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
}

.bananaverse-hero-image-primary {
    background-image: url('/assets/images/bananaverse/hero.png');
    animation: bananaverseHeroPrimary 20s ease-in-out infinite;
}

.bananaverse-hero-image-secondary {
    background-image: url('/assets/images/bananaverse/hero2.png');
    animation: bananaverseHeroSecondary 20s ease-in-out infinite;
}

@keyframes bananaverseHeroPrimary {
    0%, 47% {
        opacity: 1;
    }

    50%, 97% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bananaverseHeroSecondary {
    0%, 47% {
        opacity: 0;
    }

    50%, 97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.bananaverse-hero-content {
    max-width: 680px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.bananaverse-hero h1 {
    letter-spacing: 0;
}

.bananaverse-intro,
.bananaverse-status {
    background: #292a30;
}

.bananaverse-details dt {
    letter-spacing: 0;
}

.bananaverse-feature {
    border-top: 3px solid #ffc107;
}

@media (max-width: 767.98px) {
    .bananaverse-hero {
        min-height: 68svh;
    }

    .bananaverse-hero-image {
        background-position: 58% center;
    }

    .bananaverse-hero h1 {
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bananaverse-hero-image-primary,
    .bananaverse-hero-image-secondary {
        animation: none;
    }

    .bananaverse-hero-image-secondary {
        display: none;
    }
}

.navbar-brand.pride-text,
.navbar-brand.halloween-text,
.navbar-brand.christmas-text,
.navbar-brand.valentine-text {
    display: inline-block;
    position: relative;
}

/* =========================
   PRIDE 🌈
========================= */

.pride-text {
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff8800,
        #ffee00,
        #00cc44,
        #0099ff,
        #aa00ff
    );

    background-size: 300% auto;

    animation: prideFlow 6s linear infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes prideFlow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

/* =========================
   HALLOWEEN 🎃
========================= */

.halloween-text {
    background: linear-gradient(
        90deg,
        #ff6a00,
        #ff9500,
        #ff2d55,
        #6a00ff
    );

    text-shadow:
        0 0 10px rgba(255, 106, 0, 0.8),
        0 0 20px rgba(255, 106, 0, 0.5),
        0 0 40px rgba(255, 45, 85, 0.3);

    animation: halloweenGlow 2s ease-in-out infinite alternate;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes halloweenGlow {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.3);
    }
}

/* =========================
   CHRISTMAS 🎄
========================= */

.christmas-text {
    background: linear-gradient(
        90deg,
        #00c853,
        #ffffff,
        #ff1744
    );

    text-shadow:
        0 0 8px rgba(255,255,255,0.8),
        0 0 16px rgba(255,255,255,0.5);

    animation: christmasShine 3s ease infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes christmasShine {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.4);
    }

    100% {
        filter: brightness(1);
    }
}

/* Snow effect */

.christmas-text::after {
    content: " ❄️";
    position: absolute;
    top: -10px;
    right: -25px;

    animation: snowFloat 2s ease-in-out infinite alternate;
}

@keyframes snowFloat {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(6px);
    }
}

/* =========================
   VALENTINE ❤️
========================= */

.valentine-text {
    background: linear-gradient(
        90deg,
        #ff1744,
        #ff4081,
        #ff80ab
    );

    text-shadow:
        0 0 12px rgba(255, 64, 129, 0.7),
        0 0 24px rgba(255, 64, 129, 0.4);

    animation: heartbeat 1.5s ease infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.04);
    }

    40% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

.valentine-text::after {
    content: " ❤";
    position: absolute;
    margin-left: 8px;

    animation: heartFloat 1.5s ease infinite;
}

@keyframes heartFloat {
    0% {
        transform: translateY(0px);
        opacity: 1;
    }

    50% {
        transform: translateY(-4px);
        opacity: 0.8;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}