body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

@font-face {
    font-family: "PixeloidSans";
    src: url("/assets/main/PixeloidSans.ttf");
    font-display: swap;
}

.rotate-prompt {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
    background-color: #000000;
    color: #fde4c4;
}

.rotate-prompt .rotate-icon {
    width: 48px;
    height: 48px;
    /* Snaps between fixed angles instead of tweening — same chunky,
       low-fps-looking motion as the sandstorm's stepped fade in MainScreen. */
    animation: rotate-prompt-spin 2.4s steps(1) infinite;
}

.rotate-prompt p {
    margin: 0;
    font-family: "PixeloidSans", sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
}

/* Phone -> landscape -> back to phone, so the loop point doesn't jump. */
@keyframes rotate-prompt-spin {
    0%,
    12% {
        transform: rotate(0deg);
    }
    24%,
    32% {
        transform: rotate(-30deg);
    }
    44%,
    52% {
        transform: rotate(-60deg);
    }
    64%,
    82% {
        transform: rotate(-90deg);
    }
    88%,
    92% {
        transform: rotate(-60deg);
    }
    96%,
    100% {
        transform: rotate(-30deg);
    }
}

/* Phone-sized portrait viewports only — portrait tablets (iPad etc, ~768px+
   wide) have enough room and shouldn't be gated. */
@media (orientation: portrait) and (max-width: 700px) {
    .rotate-prompt {
        display: flex;
    }
}