/* =========================================
   LAYOUT & STRUCTURE
   ========================================= */

body {
    background-color: var(--crt-bg);
    background-image:
        radial-gradient(circle at 50% -10%, rgba(255, 61, 242, 0.16), transparent 32rem),
        radial-gradient(circle at 12% 18%, rgba(0, 255, 255, 0.09), transparent 20rem),
        linear-gradient(rgba(138, 43, 226, 0.13) 2px, transparent 2px),
        linear-gradient(90deg, rgba(138, 43, 226, 0.12) 2px, transparent 2px),
        linear-gradient(to bottom, #05000a 0%, #0b0017 42%, #16002d 100%);
    background-size: auto, auto, 24px 24px, 24px 24px, 100% 100%;
    background-attachment: scroll;
    color: #ffffff;
    font-family: var(--font-body);
    text-align: center;
    padding: 40px 20px;
    margin: 0;
    overflow-x: hidden;
    animation: none;
}

html {
    scroll-behavior: smooth;
}

body::before {
    content: ""; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    background-image:
        linear-gradient(to bottom, rgba(5,0,10,0.18), rgba(5,0,10,0.64)),
        url('../assets/backgrounds/fondo-akane.webp');
    background-size: cover; background-position: center; opacity: 0.16; z-index: 1; pointer-events: none;
    animation: bg-drift 14s ease-in-out infinite;
    will-change: transform;
}

@media (max-width: 768px) {
    body::before {
        background-image: url('../assets/backgrounds/mobile/fondo-akane.webp');
    }
}

body::after {
    content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%),
        linear-gradient(90deg, rgba(255, 61, 242, 0.035), transparent 18%, transparent 82%, rgba(0, 255, 255, 0.035));
    background-size: 100% 4px, auto; z-index: 999; pointer-events: none;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    body {
        animation: grid-breathe 14s steps(8, end) infinite;
    }
}

/* General Containers */
.profile-container { width: min(100%, 980px); margin: 0 auto 34px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; }
.logos-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; max-width: 540px; margin-bottom: 15px; }
.links-container { display: flex; flex-direction: column; gap: 30px; max-width: 450px; margin: 44px auto 150px; position: relative; z-index: 10; }
.bottom-art-container { width: min(100%, 340px); margin: 18px auto 0; position: relative; z-index: 10; }
.footer {
    width: min(100%, 980px);
    margin: 46px auto 0;
    padding: 20px 18px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #9d9d9d;
    font-family: var(--font-terminal);
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    border: 2px solid #333;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.75), inset 0 0 18px rgba(0, 255, 255, 0.08);
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-top: 1px solid rgba(0, 255, 255, 0.28);
    background: linear-gradient(90deg, transparent, rgba(255, 105, 180, 0.12), transparent);
    opacity: 0.7;
}
.footer p {
    margin: 3px 0;
    position: relative;
    z-index: 1;
}
.footer-logo {
    width: 120px;
    height: auto;
    position: relative;
    z-index: 1;
    margin-bottom: 5px;
    opacity: 0.74;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.18));
}

/* Arcade Layout */
.arcade-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #05000a; background-image: linear-gradient(rgba(0, 255, 255, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 255, 255, 0.05) 2px, transparent 2px); background-size: 30px 30px; z-index: 100000; font-family: var(--font-terminal); color: #fff; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.arcade-screen { display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; text-align: center; padding: 60px 20px 40px 20px; }
.arcade-screen.active { display: flex; }
.arcade-game-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 450px;}
.canvas-container { width: 100%; position: relative; }

/* Layout Media Queries */
@media (max-width: 520px) {
    .mitsuki-overlay { padding: 10px; align-items: center; overflow-y: auto; }
    .mitsuki-vn-box { width: 100%; margin: 0 auto; }
}

@media (max-width: 600px) {
    body {
        padding: 32px 12px 150px;
        background-attachment: scroll;
        animation: none;
    }

    body::before {
        animation: none;
        transform: none;
        opacity: 0.11;
        will-change: auto;
    }

    body::after {
        background-size: 100% 6px, auto;
        opacity: 0.72;
    }

    .profile-container {
        width: 100%;
        margin-bottom: 26px;
    }

    .logos-wrapper {
        max-width: min(100%, 340px);
        gap: 10px;
    }

    .main-logo {
        max-width: 235px;
    }

    p.subtitle {
        max-width: 100%;
        font-size: 20px;
        letter-spacing: 1px;
    }

    .links-container {
        width: min(100%, 450px);
        gap: 22px;
        margin-top: 34px;
        margin-bottom: 96px;
    }

    .bottom-art-container {
        width: min(100%, 315px);
        margin-top: 16px;
    }

    .modal-box { width: calc(100% - 20px); margin: 10px; }
    .modal-body { flex-direction: column; align-items: center; text-align: center; padding: 15px; }
}

@media (max-width: 640px) {
    .footer {
        font-size: 16px;
        padding: 16px 12px;
        margin-top: 36px;
    }

    .footer-logo {
        width: 100px;
    }
}