/* Font & Typography */
@font-face {
    font-family: ByteBounce;
    src: url(../assets/fonts/ByteBounce.ttf);
}

/* Root variables */
:root {
    --text-color: #eaeaea;
}

/* Global reset & base styles */
* {
    margin: 0;
    padding: 0;
    font-family:
        ByteBounce,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    color: var(--text-color);
    user-select: none;
}

html,
body {
    background-color: #000;
    font-size: 32pt;
}

button {
    user-select: none;
}

/* Layout helpers */
.centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.centerRow {
    display: flex;
    gap: 40px;
}

.darkBG {
    filter: invert(1) contrast(0.95) brightness(0.9);
}

/* Dust particle effect */
.dust {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #909090aa;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    animation: dustFall 0.9s ease-out forwards;
}

@keyframes dustFall {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        transform: translate(-50%, -100%) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 150%) scale(0.6);
    }
}

/* Screen overlay (full-screen flash effect) */
#screenOverlay {
    display: block;
    width: 100vw;
    height: 100vw;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 10000;
}

.playFlash {
    animation: flashBlack 5s ease-out forwards;
}

@keyframes flashBlack {
    0% { background-color: #00000000; }
    2% { background-color: #000000ff; }
    10% { background-color: #000000ff; }
    100% { background-color: #00000000; }
}

/* Fade out animation (title screen) */
.fadeOut {
    animation: fadeOut 1s ease-in forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes circle {
    from {
        transform: rotate(0deg) translate(50px, 0) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translate(50px, 0) rotate(-360deg);
    }
}