@import url(
    'https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'
);

/* ============================================================
   MISSYAN BLAST — GLOBAL VARIABLES
============================================================ */

:root {
    --background: #05030b;
    --background-soft: #0b0715;

    --panel: rgba(15, 11, 30, 0.96);
    --panel-soft: rgba(25, 17, 50, 0.82);
    --panel-dark: rgba(7, 5, 16, 0.96);

    --white: #fffaff;
    --muted: #aaa1bf;
    --muted-light: #d0c8df;

    --pink: #ff4fcf;
    --pink-dark: #8f285f;

    --purple: #9a67ff;
    --purple-dark: #45237d;

    --violet: #7046db;

    --blue: #49c8ff;
    --blue-dark: #174e78;

    --cyan: #66fff1;
    --yellow: #ffe26d;
    --green: #7eff85;
    --orange: #ff995e;
    --red: #ff607e;

    --header-height: 92px;
    --footer-height: 54px;

    --volume-progress: 70%;

    --page-max-width: 1380px;

    --pixel-shadow:
        0 0 0 3px rgba(24, 13, 43, 0.96),
        5px 5px 0 rgba(0, 0, 0, 0.72);

    --pixel-shadow-hover:
        0 0 0 3px rgba(24, 13, 43, 0.96),
        8px 8px 0 rgba(0, 0, 0, 0.72),
        0 0 30px rgba(151, 87, 255, 0.6);
}

/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    image-rendering: pixelated;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow: hidden;

    color: var(--white);
    background: #000;

    font-family: "VT323", monospace;
    font-size: 18px;
}

body.arcade-started {
    overflow: hidden;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

img {
    max-width: 100%;
}

.hidden {
    display: none !important;
}

/* ============================================================
   DATABASE WARNING
============================================================ */

.database-warning {
    position: fixed;
    z-index: 50000;

    top: 14px;
    left: 50%;

    width: min(92vw, 760px);

    padding: 13px 18px;

    border: 3px solid var(--red);

    color: var(--white);
    background: rgba(91, 17, 42, 0.98);

    box-shadow:
        6px 6px 0 #000,
        0 0 25px rgba(255, 96, 126, 0.44);

    font-family: "Press Start 2P", monospace;
    font-size: 0.49rem;
    line-height: 1.7;
    text-align: center;

    transform: translateX(-50%);
}

/* ============================================================
   ENTER GATE
============================================================ */

.enter-gate {
    position: fixed;
    inset: 0;
    z-index: 40000;

    display: grid;
    place-items: center;

    padding: 24px;

    background: #000;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}

.enter-gate.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.enter-gate-content {
    width: min(100%, 670px);
    text-align: center;
}

.enter-block-logo {
    position: relative;

    width: 108px;
    height: 108px;

    margin: 0 auto 32px;

    animation: enterLogoFloat 2.2s ease-in-out infinite;
}

.enter-block-logo span {
    position: absolute;

    width: 32px;
    height: 32px;

    background: var(--pink);

    box-shadow:
        inset -7px -7px 0 rgba(0, 0, 0, 0.26),
        inset 5px 5px 0 rgba(255, 255, 255, 0.24),
        0 0 20px currentColor;
}

.enter-block-logo span:nth-child(1) {
    top: 0;
    left: 38px;

    color: var(--pink);
    background: var(--pink);
}

.enter-block-logo span:nth-child(2) {
    top: 38px;
    left: 0;

    color: var(--cyan);
    background: var(--cyan);
}

.enter-block-logo span:nth-child(3) {
    top: 38px;
    left: 38px;

    color: var(--yellow);
    background: var(--yellow);
}

.enter-block-logo span:nth-child(4) {
    top: 38px;
    left: 76px;

    color: var(--purple);
    background: var(--purple);
}

@keyframes enterLogoFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(4deg);
    }
}

.enter-game-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(90vw, 420px);
    min-height: 134px;

    border: 5px solid var(--white);
    padding: 20px 30px;

    color: var(--white);

    background:
        linear-gradient(
            180deg,
            rgba(35, 23, 59, 0.98),
            rgba(7, 5, 13, 0.98)
        );

    box-shadow:
        0 0 0 6px #39205f,
        11px 11px 0 #000,
        0 0 40px rgba(153, 83, 255, 0.74);

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    line-height: 1.5;

    animation: enterButtonPulse 1.4s steps(2, end) infinite;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        filter 0.15s ease;
}

.enter-game-button:hover:not(:disabled) {
    color: var(--yellow);
    border-color: var(--cyan);

    filter: brightness(1.2);
    transform: translateY(-5px);
}

.enter-game-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

.enter-game-icon {
    margin-bottom: 8px;

    color: var(--cyan);
    font-size: 1.1rem;
}

.enter-game-button > span:nth-child(2) {
    font-size: clamp(0.6rem, 2vw, 0.85rem);
}

.enter-game-button strong {
    margin-top: 5px;

    font-size: clamp(0.9rem, 3vw, 1.4rem);
    letter-spacing: 0.05em;
}

.enter-gate-note {
    margin: 28px 0 0;

    color: rgba(255, 255, 255, 0.54);

    font-family: "Press Start 2P", monospace;
    font-size: 0.45rem;
    line-height: 1.8;
    letter-spacing: 0.08em;

    animation: pixelBlink 1.1s steps(2, end) infinite;
}

@keyframes enterButtonPulse {
    50% {
        box-shadow:
            0 0 0 6px #39205f,
            11px 11px 0 #000,
            0 0 68px rgba(72, 211, 255, 0.84);
    }
}

@keyframes pixelBlink {
    50% {
        opacity: 0.18;
    }
}

/* ============================================================
   INTRO
============================================================ */

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 39000;

    display: grid;
    place-items: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    background: #000;
}

.intro-screen.is-playing {
    opacity: 1;
    visibility: visible;
}

.intro-screen.is-ending {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.35s ease,
        visibility 1.35s ease;
}

.intro-content {
    width: min(96vw, 1060px);

    opacity: 0;

    text-align: center;

    transform: scale(0.84);
}

.intro-screen.is-playing .intro-content {
    animation: introContentReveal 1.55s 0.25s forwards;
}

.intro-title {
    margin: 0;

    font-family: "Press Start 2P", monospace;
    font-size: clamp(1.6rem, 7vw, 5.5rem);
    line-height: 1.22;
    letter-spacing: 0.05em;
}

.intro-missyan {
    display: block;

    color: var(--white);

    text-shadow:
        6px 0 0 rgba(255, 61, 202, 0.6),
        -6px 0 0 rgba(55, 218, 255, 0.52),
        0 0 15px var(--white),
        0 0 40px var(--purple),
        8px 8px 0 #37175b;
}

.intro-blast {
    display: block;

    margin-top: 14px;

    color: var(--yellow);

    font-size: 0.8em;
    letter-spacing: 0.17em;

    text-shadow:
        5px 5px 0 #a32980,
        0 0 18px var(--yellow),
        0 0 42px var(--pink);
}

.intro-subtitle {
    margin: 28px 0 0;

    color: var(--cyan);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.5rem, 1.6vw, 0.85rem);
    line-height: 1.7;
    letter-spacing: 0.12em;
}

.intro-loading {
    margin: 18px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.42rem, 1.2vw, 0.62rem);
    line-height: 1.7;
    letter-spacing: 0.08em;

    animation: pixelBlink 0.85s steps(2, end) infinite;
}

@keyframes introContentReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   ARCADE SHELL
============================================================ */

.arcade-shell {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100vh;
    height: 100vh;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(94, 40, 148, 0.56),
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 82%,
            rgba(17, 83, 126, 0.45),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(114, 26, 104, 0.32),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #090611,
            #040208
        );

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.arcade-shell.is-ready {
    opacity: 1;
    visibility: visible;
}

.arcade-stars,
.arcade-retro-grid,
.floating-block-field,
.arcade-noise,
.arcade-vignette,
.arcade-scanlines {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.arcade-stars {
    opacity: 0.68;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.95) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle,
            rgba(102, 255, 241, 0.95) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle,
            rgba(255, 79, 207, 0.95) 1px,
            transparent 1px
        );

    background-position:
        0 0,
        45px 70px,
        125px 25px;

    background-size:
        130px 130px,
        190px 190px,
        260px 260px;

    animation: arcadeStarsMove 24s linear infinite;
}

@keyframes arcadeStarsMove {
    to {
        transform: translateY(130px);
    }
}

.arcade-retro-grid {
    top: auto;
    right: -25%;
    bottom: -43%;
    left: -25%;

    height: 74%;

    opacity: 0.34;

    background-image:
        linear-gradient(
            rgba(90, 124, 255, 0.52) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 70, 213, 0.42) 1px,
            transparent 1px
        );

    background-size: 60px 40px;

    transform:
        perspective(360px)
        rotateX(65deg);

    transform-origin: bottom;

    animation: arcadeGridMove 8s linear infinite;
}

@keyframes arcadeGridMove {
    to {
        background-position: 0 80px;
    }
}

.floating-block-field {
    overflow: hidden;
}

.floating-block {
    position: absolute;

    top: 112%;
    left: var(--block-left);

    width: var(--block-size);
    height: var(--block-size);

    color: var(--block-color);
    opacity: var(--block-opacity);

    transform: rotate(var(--block-rotation));

    filter: drop-shadow(0 0 12px currentColor);

    animation:
        floatingBlockRise
            var(--block-duration)
            linear
            infinite,
        floatingBlockGlow
            3s
            ease-in-out
            infinite;

    animation-delay: var(--block-delay);
}

.floating-block::before,
.floating-block::after,
.floating-block span {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background: currentColor;

    box-shadow:
        inset -5px -5px 0 rgba(0, 0, 0, 0.25),
        inset 4px 4px 0 rgba(255, 255, 255, 0.23);
}

.floating-block::after {
    transform: translateX(100%);
}

.floating-block span {
    transform: translateY(100%);
}

.floating-block.floating-single::after,
.floating-block.floating-single span {
    display: none;
}

.floating-block.floating-line span {
    transform: translateX(200%);
}

.floating-block.floating-l::after {
    transform: translateY(-100%);
}

.floating-block.floating-l span {
    display: none;
}

@keyframes floatingBlockRise {
    to {
        top: -20%;

        transform:
            translateX(var(--block-drift))
            rotate(
                calc(
                    var(--block-rotation) +
                    360deg
                )
            );
    }
}

@keyframes floatingBlockGlow {
    50% {
        filter:
            drop-shadow(0 0 23px currentColor)
            brightness(1.28);
    }
}

.arcade-noise {
    z-index: 80;

    opacity: 0.028;

    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            white 0 1px,
            transparent 1px 4px
        );

    animation: arcadeNoiseShift 0.17s steps(2, end) infinite;
}

@keyframes arcadeNoiseShift {
    50% {
        transform: translate(2px, -1px);
    }
}

.arcade-vignette {
    z-index: 81;

    box-shadow:
        inset 0 0 180px 50px #000;
}

.arcade-scanlines {
    z-index: 82;

    opacity: 0.1;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px,
            transparent 4px
        );
}

/* ============================================================
   HEADER
============================================================ */

.arcade-header {
    position: relative;
    z-index: 1000;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    flex: 0 0 var(--header-height);

    width: 100%;
    min-height: var(--header-height);

    padding:
        15px
        clamp(17px, 3vw, 48px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            180deg,
            rgba(5, 3, 11, 0.94),
            rgba(5, 3, 11, 0.72)
        );

    backdrop-filter: blur(14px);
}

.mobile-navigation-button {
    display: none;

    width: 46px;
    height: 46px;

    border: 3px solid var(--white);

    color: var(--white);
    background:
        linear-gradient(
            180deg,
            rgba(94, 58, 155, 0.96),
            rgba(35, 19, 70, 0.98)
        );

    box-shadow:
        4px 4px 0 #000;

    cursor: pointer;

    font-size: 1.3rem;
    line-height: 1;
}

.arcade-brand-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 166px;

    border: 0;
    padding: 0;

    color: var(--white);
    background: transparent;

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    text-align: left;
}

.brand-missyan {
    font-size: clamp(0.72rem, 1.4vw, 1rem);
    letter-spacing: 0.08em;

    text-shadow:
        2px 0 0 rgba(255, 79, 207, 0.6),
        -2px 0 0 rgba(73, 200, 255, 0.5),
        0 0 10px rgba(154, 103, 255, 0.72);
}

.brand-blast {
    margin-top: 4px;

    color: var(--yellow);

    font-size: clamp(0.48rem, 1vw, 0.68rem);
    letter-spacing: 0.13em;

    text-shadow:
        2px 2px 0 #78265f,
        0 0 9px var(--pink);
}

.arcade-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1vw, 12px);

    min-width: 0;
}

.navigation-link {
    position: relative;

    border: 2px solid transparent;
    padding: 11px 12px;

    color: #c9c2da;
    background: transparent;

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.42rem, 0.85vw, 0.56rem);
    line-height: 1.5;
    white-space: nowrap;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.navigation-link:hover {
    color: var(--white);

    border-color:
        rgba(102, 255, 241, 0.4);

    background:
        rgba(102, 255, 241, 0.07);

    transform: translateY(-2px);
}

.navigation-link.active {
    color: var(--yellow);

    border-color:
        rgba(255, 226, 109, 0.58);

    background:
        rgba(255, 226, 109, 0.08);

    box-shadow:
        0 0 16px rgba(255, 226, 109, 0.15);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
}

/* ============================================================
   PIXEL BUTTONS
============================================================ */

.pixel-button {
    position: relative;

    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 0;

    padding: 12px 16px;

    color: var(--white);

    background:
        linear-gradient(
            180deg,
            rgba(117, 74, 190, 0.96),
            rgba(42, 23, 82, 0.98)
        );

    box-shadow: var(--pixel-shadow);

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    line-height: 1.5;
    text-transform: uppercase;

    transition:
        transform 0.14s ease,
        filter 0.14s ease,
        box-shadow 0.14s ease;
}

.pixel-button:hover:not(:disabled) {
    filter: brightness(1.23);

    transform: translate(-2px, -2px);

    box-shadow: var(--pixel-shadow-hover);
}

.pixel-button:active:not(:disabled) {
    transform: translate(3px, 3px);

    box-shadow:
        0 0 0 3px rgba(24, 13, 43, 0.96),
        2px 2px 0 rgba(0, 0, 0, 0.72);
}

.pixel-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.7);
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 165px;
    max-width: 220px;

    padding: 9px 13px;
}

.profile-chip-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;

    text-align: left;
}

.profile-chip-name {
    overflow: hidden;

    color: var(--white);

    font-size: 0.61rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip-status {
    color: var(--cyan);

    font-family: "VT323", monospace;
    font-size: 1rem;
    text-transform: none;
}

.settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(22, 128, 159, 0.96),
            rgba(10, 47, 74, 0.98)
        );
}

.danger-button {
    background:
        linear-gradient(
            180deg,
            rgba(201, 46, 92, 0.96),
            rgba(91, 18, 51, 0.98)
        );
}

.full-width-button {
    width: 100%;
}

.modal-action-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 24px;
}

/* ============================================================
   PIXEL AVATARS
============================================================ */

.header-avatar {
    display: grid;
    place-items: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border: 2px solid var(--white);

    background: #171327;

    box-shadow:
        0 0 12px rgba(91, 231, 255, 0.46);
}

.pixel-avatar {
    position: relative;

    display: inline-grid;
    place-items: center;

    width: 54px;
    height: 54px;
}

.pixel-avatar.large {
    transform: scale(1.35);
}

.pixel-avatar .pixel-face {
    position: relative;

    width: 32px;
    height: 32px;

    background:
        var(--avatar-main, #56d9ff);

    box-shadow:
        -8px 0 0 var(--avatar-main, #56d9ff),
        8px 0 0 var(--avatar-main, #56d9ff),
        0 -8px 0 var(--avatar-main, #56d9ff),
        0 8px 0 var(--avatar-main, #56d9ff),
        inset -6px -6px 0 rgba(0, 0, 0, 0.18);
}

.pixel-avatar .pixel-face::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 6px;

    width: 5px;
    height: 6px;

    background: #10101c;

    box-shadow:
        15px 0 0 #10101c;
}

.pixel-avatar .pixel-face::after {
    content: "";

    position: absolute;

    left: 10px;
    bottom: 7px;

    width: 12px;
    height: 4px;

    background:
        var(--avatar-mouth, #10101c);
}

.avatar-robot {
    --avatar-main: #66d7ff;
    --avatar-mouth: #ff4fd8;
}

.avatar-slime {
    --avatar-main: #76ff87;
    --avatar-mouth: #175a34;
}

.avatar-mage {
    --avatar-main: #b37bff;
    --avatar-mouth: #ffe45e;
}

.avatar-knight {
    --avatar-main: #c9d2e7;
    --avatar-mouth: #38415f;
}

.avatar-cat {
    --avatar-main: #ffb660;
    --avatar-mouth: #582a3d;
}

.avatar-alien {
    --avatar-main: #6dffdc;
    --avatar-mouth: #4a2c75;
}

.avatar-ghost {
    --avatar-main: #f2efff;
    --avatar-mouth: #6f5ba4;
}

.avatar-arcade {
    --avatar-main: #ff548d;
    --avatar-mouth: #ffe45e;
}

.avatar-missyan {
    --avatar-main: #273b85;
    --avatar-mouth: #db759b;
}

/* ============================================================
   PAGE LOADING BAR
============================================================ */

.page-loading-bar {
    position: absolute;
    z-index: 1100;

    top: var(--header-height);
    right: 0;
    left: 0;

    height: 4px;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    background:
        rgba(255, 255, 255, 0.06);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.page-loading-bar.active {
    opacity: 1;
    visibility: visible;
}

.page-loading-bar span {
    display: block;

    width: 35%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--cyan)
        );

    box-shadow:
        0 0 14px var(--cyan);

    animation: pageLoadingMove 0.9s linear infinite;
}

@keyframes pageLoadingMove {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(380%);
    }
}

/* ============================================================
   DYNAMIC PAGE CONTAINER
============================================================ */

.arcade-page-container {
    position: relative;
    z-index: 100;

    flex: 1 1 auto;

    width: 100%;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-color:
        var(--purple)
        rgba(255, 255, 255, 0.04);

    scrollbar-width: thin;
}

.arcade-page-container::-webkit-scrollbar {
    width: 10px;
}

.arcade-page-container::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.03);
}

.arcade-page-container::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--purple),
            var(--pink)
        );
}

.arcade-page-container.page-leaving {
    animation: internalPageLeave 0.26s ease forwards;
}

.arcade-page-container.page-entering {
    animation: internalPageEnter 0.44s ease forwards;
}

@keyframes internalPageLeave {
    to {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(0.99);
    }
}

@keyframes internalPageEnter {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(1.01);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.initial-loading-screen {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 24px;

    min-height:
        calc(
            100vh -
            var(--header-height) -
            var(--footer-height)
        );

    padding: 40px;

    text-align: center;
}

.initial-loading-screen p {
    margin: 0;

    color: var(--cyan);

    font-family: "Press Start 2P", monospace;
    font-size: 0.58rem;
    line-height: 1.7;

    animation: pixelBlink 0.85s steps(2, end) infinite;
}

.initial-loading-blocks {
    display: flex;
    align-items: flex-end;
    gap: 7px;

    height: 70px;
}

.initial-loading-blocks span {
    width: 26px;
    height: 26px;

    background: var(--pink);

    box-shadow:
        inset -5px -5px 0 rgba(0, 0, 0, 0.24),
        0 0 12px currentColor;

    animation:
        loadingBlocks 0.8s ease-in-out infinite alternate;
}

.initial-loading-blocks span:nth-child(2) {
    color: var(--yellow);
    background: var(--yellow);
    animation-delay: -0.25s;
}

.initial-loading-blocks span:nth-child(3) {
    color: var(--cyan);
    background: var(--cyan);
    animation-delay: -0.5s;
}

@keyframes loadingBlocks {
    to {
        transform: translateY(-32px);
    }
}

/* ============================================================
   SHARED INTERNAL PAGE COMPONENTS
============================================================ */

.arcade-page {
    width: min(100%, var(--page-max-width));

    margin: 0 auto;

    padding:
        clamp(30px, 5vw, 70px)
        clamp(18px, 4vw, 56px)
        90px;
}

.page-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 34px;
}

.page-heading-copy {
    min-width: 0;
}

.page-eyebrow {
    margin: 0 0 12px;

    color: var(--cyan);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.46rem, 1vw, 0.62rem);
    line-height: 1.7;
    letter-spacing: 0.14em;

    text-shadow:
        0 0 12px var(--blue);
}

.page-title {
    margin: 0;

    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(1.7rem, 5vw, 4.1rem);
    line-height: 1.2;

    text-shadow:
        4px 0 0 rgba(255, 58, 209, 0.45),
        -4px 0 0 rgba(55, 218, 255, 0.4),
        0 0 25px rgba(154, 103, 255, 0.6),
        7px 7px 0 #30144e;
}

.page-title span {
    color: var(--yellow);
}

.page-description {
    max-width: 760px;

    margin: 17px 0 0;

    color: #d1cae2;

    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.4;
}

.card-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.arcade-card {
    position: relative;

    overflow: hidden;

    border: 4px solid var(--white);

    background:
        linear-gradient(
            180deg,
            rgba(26, 18, 54, 0.96),
            rgba(8, 6, 20, 0.99)
        );

    box-shadow:
        0 0 0 5px rgba(50, 28, 86, 0.96),
        10px 10px 0 rgba(0, 0, 0, 0.72),
        0 0 26px rgba(91, 70, 180, 0.3);

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

.arcade-card:hover {
    filter: brightness(1.08);

    transform: translateY(-7px);

    box-shadow:
        0 0 0 5px rgba(50, 28, 86, 0.96),
        14px 14px 0 rgba(0, 0, 0, 0.72),
        0 0 42px rgba(102, 255, 241, 0.28);
}

.card-content {
    padding: 22px;
}

.card-title {
    margin: 0;

    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: 0.92rem;
    line-height: 1.55;
}

.card-description {
    margin: 14px 0 0;

    color: #c8c0d7;

    font-size: 1.14rem;
    line-height: 1.38;
}

.stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.stat-card {
    border:
        2px solid
        rgba(134, 210, 255, 0.36);

    padding: 16px 13px;

    background:
        rgba(16, 15, 35, 0.8);

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

    text-align: center;
}

.stat-card strong {
    display: block;

    color: var(--yellow);

    font-family: "Press Start 2P", monospace;
    font-size: 0.82rem;
    line-height: 1.7;
}

.stat-card span {
    color: var(--muted);
    font-size: 1rem;
}

/* ============================================================
   FOOTER
============================================================ */

.arcade-footer {
    position: relative;
    z-index: 150;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 34px);

    flex: 0 0 var(--footer-height);

    min-height: var(--footer-height);

    padding: 12px 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.46);

    background:
        rgba(4, 3, 9, 0.68);

    backdrop-filter: blur(10px);

    font-family: "Press Start 2P", monospace;
    font-size: 0.39rem;
    line-height: 1.6;
    text-align: center;
}

/* ============================================================
   MODALS
============================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 20000;

    display: grid;
    place-items: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    background:
        rgba(0, 0, 0, 0.84);

    backdrop-filter: blur(9px);

    transition:
        opacity 0.23s ease,
        visibility 0.23s ease;
}

.modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-panel {
    position: relative;

    width: min(100%, 780px);
    max-height: min(92vh, 930px);

    overflow-x: hidden;
    overflow-y: auto;

    border: 4px solid var(--white);

    padding:
        clamp(22px, 4vw, 36px);

    background:
        linear-gradient(
            180deg,
            rgba(26, 18, 54, 0.995),
            rgba(9, 7, 22, 0.995)
        );

    box-shadow:
        0 0 0 6px #3e2268,
        12px 12px 0 #000,
        0 0 47px rgba(96, 76, 255, 0.47);

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        transform 0.23s ease;
}

.modal.open .modal-panel {
    transform:
        translateY(0)
        scale(1);
}

.modal-panel::-webkit-scrollbar {
    width: 10px;
}

.modal-panel::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--purple),
            var(--pink)
        );
}

.settings-modal-panel {
    width: min(100%, 650px);
}

.modal-close-button {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 40px;
    height: 40px;

    border: 3px solid var(--white);

    color: var(--white);
    background: #a52a61;

    box-shadow:
        4px 4px 0 #000;

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    font-size: 0.75rem;
}

.modal-title {
    margin:
        0
        56px
        26px
        0;

    color: var(--yellow);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(1rem, 3vw, 1.5rem);
    line-height: 1.5;

    text-shadow:
        3px 3px 0 #852a7d,
        0 0 17px rgba(255, 224, 94, 0.46);
}

/* ============================================================
   PROFILE
============================================================ */

.profile-summary-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 20px;

    margin-bottom: 26px;

    border:
        2px solid
        rgba(128, 209, 255, 0.4);

    padding: 18px;

    background:
        rgba(63, 38, 112, 0.27);
}

.profile-avatar-preview {
    display: grid;
    place-items: center;

    width: 94px;
    height: 94px;

    border: 4px solid var(--white);

    background:
        linear-gradient(
            135deg,
            #30215d,
            #111027
        );

    box-shadow:
        6px 6px 0 #000,
        0 0 22px rgba(96, 232, 255, 0.44);
}

.profile-summary-copy {
    min-width: 0;
}

.profile-summary-copy h3 {
    margin: 0;

    overflow: hidden;

    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.72rem, 2vw, 1rem);
    line-height: 1.6;

    text-overflow: ellipsis;
}

.profile-summary-copy p {
    margin: 8px 0 0;

    color: var(--cyan);

    font-size: 1.24rem;
    line-height: 1.25;
}

.authentication-tabs {
    display: flex;
    gap: 8px;

    margin-bottom: 22px;
}

.authentication-tab {
    flex: 1;

    border:
        2px solid
        rgba(141, 115, 207, 0.56);

    padding: 13px 10px;

    color: var(--muted);

    background:
        rgba(14, 12, 31, 0.86);

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    font-size: 0.53rem;
    line-height: 1.5;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.authentication-tab.active {
    color: var(--white);
    border-color: var(--white);

    background:
        rgba(104, 67, 171, 0.88);

    box-shadow:
        0 0 16px rgba(141, 86, 255, 0.42);
}

.authentication-panel {
    display: none;
}

.authentication-panel.active {
    display: block;
}

.profile-statistics-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 11px;

    margin: 20px 0 25px;
}

.profile-statistic-card {
    border:
        2px solid
        rgba(134, 210, 255, 0.36);

    padding: 14px 10px;

    background:
        rgba(16, 15, 35, 0.78);

    text-align: center;
}

.profile-statistic-card strong {
    display: block;

    color: var(--yellow);

    font-family: "Press Start 2P", monospace;
    font-size: 0.72rem;
    line-height: 1.7;
}

.profile-statistic-card span {
    color: var(--muted);
    font-size: 0.95rem;
}

/* ============================================================
   FORMS
============================================================ */

.responsive-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-group {
    min-width: 0;
    margin-bottom: 18px;
}

.form-label {
    display: block;

    margin-bottom: 9px;

    color: var(--cyan);

    font-family: "Press Start 2P", monospace;
    font-size: 0.51rem;
    line-height: 1.5;
}

.form-input {
    width: 100%;
    min-width: 0;

    border:
        3px solid
        rgba(255, 255, 255, 0.72);

    border-radius: 0;

    padding: 13px 14px;

    color: var(--white);
    outline: 0;

    background:
        rgba(6, 6, 17, 0.9);

    box-shadow:
        inset 4px 4px 0
        rgba(0, 0, 0, 0.36);

    font-size: 1.22rem;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.27);
}

.form-input:focus {
    border-color: var(--cyan);

    box-shadow:
        inset 4px 4px 0
            rgba(0, 0, 0, 0.36),
        0 0 17px
            rgba(89, 239, 255, 0.36);
}

.password-field {
    position: relative;
}

.password-field .form-input {
    padding-right: 52px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 9px;

    width: 34px;
    height: 34px;

    border:
        2px solid
        rgba(255, 255, 255, 0.45);

    color: var(--cyan);

    background:
        rgba(26, 18, 54, 0.92);

    cursor: pointer;

    transform: translateY(-50%);
}

.avatar-section-heading {
    margin:
        26px 0
        15px;

    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    line-height: 1.5;
}

.avatar-selection-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(80px, 1fr));
    gap: 12px;

    margin-bottom: 25px;
}

.avatar-option {
    position: relative;

    min-height: 116px;

    border:
        3px solid
        rgba(138, 121, 194, 0.56);

    padding:
        12px 8px
        10px;

    color: var(--white);

    background:
        rgba(14, 12, 31, 0.84);

    box-shadow:
        4px 4px 0
        rgba(0, 0, 0, 0.72);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        filter 0.15s ease;
}

.avatar-option:hover:not(:disabled) {
    border-color: var(--cyan);

    transform: translateY(-3px);
}

.avatar-option.selected {
    border-color: var(--white);

    background:
        rgba(104, 67, 171, 0.72);

    box-shadow:
        4px 4px 0 #000,
        0 0 19px
            rgba(94, 227, 255, 0.5);
}

.avatar-option.locked,
.avatar-option:disabled {
    cursor: not-allowed;

    opacity: 0.48;
    filter: grayscale(0.68);
}

.avatar-option-name {
    display: block;

    margin-top: 8px;

    font-family: "Press Start 2P", monospace;
    font-size: 0.42rem;
    line-height: 1.45;
}

.avatar-lock-label {
    display: block;

    margin-top: 4px;

    color: var(--yellow);

    font-size: 0.78rem;
}

/* ============================================================
   SETTINGS
============================================================ */

.settings-section {
    margin-bottom: 24px;

    border:
        2px solid
        rgba(142, 111, 216, 0.4);

    padding: 20px;

    background:
        rgba(21, 16, 43, 0.56);
}

.settings-heading-row,
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.settings-heading {
    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: 0.58rem;
    line-height: 1.5;
}

.settings-heading-row strong {
    color: var(--yellow);

    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
}

.settings-description {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 1.08rem;
    line-height: 1.35;
}

.volume-slider {
    width: 100%;
    height: 14px;

    margin-top: 17px;

    appearance: none;

    border: 2px solid var(--white);
    border-radius: 0;

    outline: 0;

    background:
        linear-gradient(
            90deg,
            var(--cyan) 0,
            var(--cyan)
                var(--volume-progress),
            #242037
                var(--volume-progress),
            #242037 100%
        );

    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    width: 24px;
    height: 30px;

    appearance: none;

    border: 3px solid var(--white);

    background: var(--pink);

    box-shadow:
        3px 3px 0 #000;
}

.volume-slider::-moz-range-thumb {
    width: 22px;
    height: 28px;

    border: 3px solid var(--white);
    border-radius: 0;

    background: var(--pink);

    box-shadow:
        3px 3px 0 #000;
}

.sound-toggle {
    position: relative;

    flex: 0 0 78px;

    width: 78px;
    height: 38px;

    border: 3px solid var(--white);
    padding: 0;

    background: #3a304e;

    box-shadow:
        4px 4px 0 #000;

    cursor: pointer;
}

.sound-toggle::before {
    content: "";

    position: absolute;

    top: 4px;
    left: 5px;

    width: 24px;
    height: 24px;

    background: #aaa2bb;

    transition:
        left 0.2s ease,
        background 0.2s ease;
}

.sound-toggle.on {
    background: #286c69;
}

.sound-toggle.on::before {
    left: 43px;

    background: var(--cyan);
}

/* ============================================================
   STATUS AND AUDIO UNLOCK
============================================================ */

.status-banner {
    position: fixed;
    z-index: 30000;

    left: 50%;
    bottom: 28px;

    min-width: min(90vw, 420px);
    max-width: min(90vw, 620px);

    padding: 15px 20px;

    border: 3px solid var(--white);

    color: var(--white);

    background:
        rgba(21, 17, 42, 0.99);

    box-shadow:
        5px 5px 0 #000,
        0 0 23px
            rgba(119, 99, 255, 0.57);

    font-family: "Press Start 2P", monospace;
    font-size: 0.54rem;
    line-height: 1.7;
    text-align: center;

    transform:
        translate(-50%, 160px);

    transition:
        transform 0.36s ease;
}

.status-banner.show {
    transform:
        translate(-50%, 0);
}

.status-banner.error {
    border-color: var(--red);
}

.audio-unlock-button {
    position: fixed;
    z-index: 19000;

    right: 20px;
    bottom: 20px;

    display: none;

    border: 3px solid var(--yellow);

    padding: 12px 15px;

    color: var(--yellow);

    background:
        rgba(7, 6, 13, 0.97);

    box-shadow:
        5px 5px 0 #000,
        0 0 18px rgba(255, 226, 109, 0.28);

    cursor: pointer;

    font-family: "Press Start 2P", monospace;
    font-size: 0.46rem;
    line-height: 1.6;
}

.audio-unlock-button.show {
    display: block;
}

/* ============================================================
   EMPTY AND ERROR STATES FOR INTERNAL PAGES
============================================================ */

.internal-page-message {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 20px;

    min-height:
        calc(
            100vh -
            var(--header-height) -
            var(--footer-height)
        );

    padding: 40px;

    text-align: center;
}

.internal-page-message-icon {
    color: var(--yellow);

    font-family: "Press Start 2P", monospace;
    font-size: 3rem;

    text-shadow:
        4px 4px 0 #7a286f,
        0 0 22px var(--yellow);
}

.internal-page-message h2 {
    margin: 0;

    color: var(--white);

    font-family: "Press Start 2P", monospace;
    font-size: clamp(1rem, 3vw, 1.5rem);
    line-height: 1.5;
}

.internal-page-message p {
    max-width: 650px;

    margin: 0;

    color: var(--muted-light);

    font-size: 1.25rem;
    line-height: 1.4;
}

/* ============================================================
   RESPONSIVE — LARGE TABLET
============================================================ */

@media (max-width: 1180px) {
    .arcade-header {
        grid-template-columns: auto 1fr auto;
        gap: 14px;

        padding-right: 18px;
        padding-left: 18px;
    }

    .navigation-link {
        padding-right: 8px;
        padding-left: 8px;

        font-size: 0.42rem;
    }

    .profile-chip {
        min-width: auto;
    }

    .profile-chip-copy {
        display: none;
    }

    .profile-chip {
        padding: 8px;
    }

    .settings-button span {
        display: none;
    }

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

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

/* ============================================================
   RESPONSIVE — TABLET / MOBILE NAVIGATION
============================================================ */

@media (max-width: 900px) {
    :root {
        --header-height: 78px;
    }

    .arcade-header {
        grid-template-columns: auto auto 1fr auto;
    }

    .mobile-navigation-button {
        display: inline-grid;
        place-items: center;
    }

    .arcade-brand-button {
        min-width: 130px;
    }

    .arcade-navigation {
        position: fixed;
        z-index: 3000;

        top: var(--header-height);
        right: 0;
        left: 0;

        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;

        padding: 18px;

        opacity: 0;
        visibility: hidden;

        border-bottom:
            3px solid
            rgba(255, 255, 255, 0.2);

        background:
            rgba(7, 5, 16, 0.985);

        box-shadow:
            0 16px 40px
            rgba(0, 0, 0, 0.55);

        transform: translateY(-15px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .arcade-navigation.open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .navigation-link {
        width: 100%;

        border:
            2px solid
            rgba(255, 255, 255, 0.14);

        padding: 14px;

        font-size: 0.52rem;
        text-align: left;
    }

    .page-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-statistics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 680px) {
    :root {
        --header-height: 72px;
        --footer-height: 48px;
    }

    body {
        font-size: 17px;
    }

    .arcade-header {
        grid-template-columns: auto minmax(0, 1fr) auto;

        gap: 9px;

        min-height: var(--header-height);

        padding: 10px 12px;
    }

    .arcade-brand-button {
        min-width: 0;
    }

    .brand-missyan {
        font-size: 0.65rem;
    }

    .brand-blast {
        font-size: 0.42rem;
    }

    .header-actions {
        gap: 7px;
    }

    .settings-button {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .profile-chip {
        width: 44px;
        height: 44px;

        padding: 0;
    }

    .header-avatar {
        width: 36px;
        height: 36px;
    }

    .pixel-avatar {
        transform: scale(0.88);
    }

    .mobile-navigation-button {
        width: 44px;
        height: 44px;
    }

    .arcade-page {
        padding:
            30px
            16px
            70px;
    }

    .page-title {
        font-size:
            clamp(1.35rem, 9vw, 2.6rem);
    }

    .page-description {
        font-size: 1.15rem;
    }

    .card-grid,
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .arcade-footer {
        gap: 8px;

        padding-right: 10px;
        padding-left: 10px;

        font-size: 0.3rem;
    }

    .arcade-footer span:nth-child(2) {
        display: none;
    }

    .modal {
        align-items: end;

        padding: 10px;
    }

    .modal-panel {
        width: 100%;
        max-height: 94vh;

        border-bottom: 0;

        padding:
            24px
            16px
            28px;

        box-shadow:
            0 0 0 4px #3e2268,
            0 -8px 30px rgba(96, 76, 255, 0.3);

        transform:
            translateY(50px);
    }

    .modal.open .modal-panel {
        transform: translateY(0);
    }

    .profile-summary-panel {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .profile-avatar-preview {
        margin: 0 auto;
    }

    .responsive-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .avatar-selection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .profile-statistics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .modal-action-grid {
        grid-template-columns: 1fr;
    }

    .settings-toggle-row {
        align-items: flex-start;
    }

    .status-banner {
        bottom: 17px;

        min-width: calc(100vw - 30px);

        font-size: 0.47rem;
    }

    .audio-unlock-button {
        right: 13px;
        bottom: 13px;

        padding: 10px;

        font-size: 0.4rem;
    }

    .enter-block-logo {
        transform: scale(0.88);
    }

    .enter-game-button {
        min-height: 122px;
    }
}

/* ============================================================
   RESPONSIVE — VERY SMALL MOBILE
============================================================ */

@media (max-width: 400px) {
    .arcade-brand-button {
        display: none;
    }

    .arcade-header {
        grid-template-columns: auto 1fr auto;
    }

    .header-actions {
        justify-self: end;
    }

    .avatar-selection-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .avatar-option {
        min-height: 108px;
    }

    .authentication-tab {
        padding-right: 6px;
        padding-left: 6px;

        font-size: 0.46rem;
    }

    .profile-statistic-card strong {
        font-size: 0.62rem;
    }
}

/* ============================================================
   ACCESSIBILITY
============================================================ */

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