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

html,
body {
    overscroll-behavior: none;
    touch-action: none;
}

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

/* Phones held in portrait now render the game rotated to landscape (handled in
   main.ts by rotating the PixiJS stage), so the old "please rotate" prompt is
   never shown. */
#rotate-overlay {
    display: none;
}

/* Discord Activity: full-screen gate shown (display:flex) by setup.ts when the
   required Discord login fails. Respects mobile safe-area insets. */
#discord-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #0a0c10;
    color: #e8edf4;
    font-family: "VT323", monospace;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#discord-gate .gate-title {
    font-size: 28px;
    color: #ffd864;
    margin-bottom: 10px;
}

#discord-gate .gate-sub {
    font-size: 18px;
    color: #9aa4b2;
    margin-bottom: 22px;
}

#discord-gate button {
    font-family: inherit;
    font-size: 20px;
    color: #fff;
    background: #2b3a55;
    border: 2px solid #4a6da8;
    border-radius: 8px;
    padding: 8px 28px;
    cursor: pointer;
}