/* Loaded by every page; applies once mobile-app.js marks the app or a touch device. */
.app-layout {
    background: #090d1c;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}
.app-layout body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    background: #090d1c;
}
.app-layout .bottombar {
    display: none;
}
.app-game {
    height: 100dvh;
    overflow: hidden;
}
.app-game::before,
.app-game::after {
    display: none;
}
.app-game .game-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}
.app-game .game-header {
    flex: 0 0 48px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
    padding: 0 12px 0 0;
    border-bottom: 1px solid #ffffff18;
    background: #120e20;
}
.app-game .home-link,
.app-game .game-title,
.app-game .scores {
    grid-column: auto;
    grid-row: 1;
}
.app-game .home-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 48px;
    font-size: 26px;
}
.app-game .game-title {
    text-align: left;
}
.app-game .game-title h1 {
    margin: 0;
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.25;
    color: #f1e7ff;
}
.app-game .game-title small,
.app-game .game-header-tools,
.app-game .scores > span:has(#score) {
    display: none;
}
.app-game .scores {
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.app-game .game-screen {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Each half of the board is a touch control, so fingers never scroll, zoom, or select. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.app-game #gameCanvas {
    width: 100%;
    height: 100%;
    /* Letterboxed if a website player chose to play without rotating. */
    object-fit: contain;
}
/* Abilities sit in a strip under the board, one in each bottom corner, so they never
   cover the player. The strip still counts as part of its half for steering. */
.app-game .game-screen:has(.powerup-button) {
    padding-bottom: 60px;
    background: #120e20;
}
.app-game .game-screen:has(.powerup-button) #gameCanvas {
    border-bottom: 1px solid #ffffff18;
}
.app-game .powerup-button {
    top: auto;
    right: 12px;
    bottom: 8px;
    left: auto;
    width: auto;
    min-width: 116px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
}
/* The first of two abilities takes the left corner; a lone one sits on the right. */
.app-game .powerup-button:has(~ .powerup-button) {
    right: auto;
    left: 12px;
}
.app-game .powerup-key,
.app-game .press-hint {
    display: none;
}
.app-game .powerup-label {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.app-game .touch-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--accent-soft);
}
.app-game .message {
    padding: 20px;
}
.app-game .message h2 {
    font-size: clamp(22px, 5vw, 36px);
}
.app-game .revive-banner {
    font-size: clamp(20px, 5vw, 36px);
}
.app-home .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 10px 6px;
    padding: calc(env(safe-area-inset-top) + 10px) 12px 12px;
    background: #201331;
    border-bottom: 1px solid #8f4fc044;
}
.app-home .logo {
    grid-area: 1 / 1;
    gap: 8px;
    margin: 0;
    font-size: clamp(12px, 3.6vw, 18px);
    line-height: 1.4;
}
.app-home .site-logo {
    width: 30px;
}
.app-home .topbar > .account-trigger {
    grid-area: 1 / 2;
    width: 44px;
    height: 44px;
    padding: 6px;
}
.app-home .account-trigger-label {
    display: none;
}
.app-home .topbar > .settings-trigger {
    grid-area: 1 / 3;
    width: 44px;
    height: 44px;
}
.app-home .topbar-actions {
    grid-area: 2 / 1 / auto / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
.app-home .challenges-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 11px;
    border-radius: 10px;
}
.app-home .nav-pixel-icon {
    width: 22px;
    height: 22px;
}
.app-home .account-save-status {
    grid-column: 1 / -1;
}
.app-home .account-save-status:empty {
    display: none;
}
.app-home .game-grid {
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 12px calc(env(safe-area-inset-bottom) + 16px);
}
.app-home .game-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
}
.app-home .game-card h2 {
    padding: 40px 8px 14px;
    font-size: 12px;
}
.app-home .game-card:hover {
    transform: none;
}
.app-layout dialog {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
}
/* Website only: browsers cannot lock rotation, so games ask for the right orientation. */
.rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #090d1c;
    color: #f1e7ff;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}
.rotate-prompt[hidden] {
    display: none;
}
.rotate-prompt p {
    margin: 0;
    font-size: clamp(16px, 4.5vw, 22px);
    line-height: 1.5;
}
.rotate-prompt button {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid #8f4fc0;
    border-radius: 10px;
    background: #201331;
    color: inherit;
    font: inherit;
    font-size: 13px;
}
@media (orientation: landscape) {
    .app-game .scores {
        flex-direction: row;
        gap: 14px;
        font-size: 12px;
    }
}