html {
    height: 100%;
}

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

#app {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#game-container canvas {
    touch-action: none;
}

/* Portrait-Hinweis nur auf typisch mobilen Viewports (Desktop-Priorität) */
#portrait-hint {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
        env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(10, 14, 28, 0.94);
    color: #e8ecff;
    font-family: system-ui, "Segoe UI", sans-serif;
    font-size: 1.05rem;
    line-height: 1.45;
    pointer-events: auto;
}

#portrait-hint p {
    margin: 0 1.5rem;
    max-width: 20rem;
}

@media screen and (orientation: portrait) and (max-width: 1024px) {
    #portrait-hint {
        display: flex;
    }
}