/* Orbitron is self-hosted (SIL OFL — see fonts/Orbitron-OFL.txt) so it loads inside
   Discord and offline, with no request to a font CDN. */
@font-face {
    font-family: "Orbitron";
    src: url("fonts/Orbitron-Variable.ttf") format("truetype");
    font-weight: 400 900;
    font-display: swap;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #02060c;
    color: #e4eff6;
    font-family: "Orbitron", Arial, sans-serif;
    /* Keep mobile browsers from rubber-banding / address-bar jumps. */
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#app {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #02060c;
}

#game-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    /* Phaser FIT letterboxes inside this box at a locked 16:9. */
    position: relative;
}

#game-container canvas {
    display: block;
    margin: 0 auto;
}

/* Starfall is a widescreen game. A phone held upright gets a nudge instead of a
   postage-stamp picture. */
#rotate-hint {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: #040c18;
    color: #50eaff;
    font: 700 15px/1.4 "Orbitron", Arial, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}

#rotate-hint p {
    margin: 0;
    padding: 0 24px;
}

.rotate-phone {
    width: 46px;
    height: 78px;
    border: 3px solid #50eaff;
    border-radius: 9px;
    box-shadow: 0 0 18px #00eaff55;
    animation: rotate-phone 2.4s ease-in-out infinite;
}

@keyframes rotate-phone {
    0%, 25% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}

#rotate-stuck,
#rotate-upright {
    margin-top: 10px;
    padding: 12px 18px;
    font: 700 12px/1.2 "Orbitron", Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c4dce9;
    background: #06192c;
    border: 2px solid #42515f;
    border-radius: 8px;
}

@media (orientation: portrait) and (pointer: coarse) {
    #rotate-hint {
        display: flex;
    }
}

/* Sideways mode (see core/sideways.ts): for a browser that will not turn, such as the one inside a
   wallet app. The game box is laid out wide, then turned a quarter-turn to fill the upright page. */
html.sideways #rotate-hint,
html.upright-chosen #rotate-hint {
    display: none;
}

html.sideways #app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .rotate-phone {
        animation: none;
        transform: rotate(90deg);
    }
}