body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
    overflow: hidden; /* Prevent scrollbars */
    width: 100vw;
    height: 100vh;
    min-width: 360px; /* Enforce minimum width for the entire page */
    min-height: 360px; /* Enforce minimum height for the entire page - typical phone height */
}

/* Add transition effects during orientation changes */
body.orientation-changing canvas,
body.orientation-changing #pixi-container {
    transition: all 0.3s ease-in-out;
}

html {
    min-width: 360px; /* Enforce minimum width at the root level */
    min-height: 360px; /* Enforce minimum height at the root level */
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Ensure proper positioning context */
    min-width: 360px; /* Enforce minimum width */
    min-height: 360px; /* Enforce minimum height */
}

#pixi-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    min-width: 360px; /* Enforce minimum width */
    min-height: 360px; /* Enforce minimum height */
}

canvas {
    display: block; /* Remove extra space below canvas */
    position: absolute; /* Allow precise positioning */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: -webkit-optimize-contrast; /* Improve image quality */
    image-rendering: crisp-edges;
    background-color: #000; /* Ensure black background */
    min-width: 360px; /* Enforce minimum width */
    min-height: 360px; /* Enforce minimum height */
    transition: none; /* Disable transitions to prevent jumps */
}

/* Media query to handle very small screens */
@media screen and (max-width: 360px), screen and (max-height: 360px) {
    body, html, #app, #pixi-container, canvas {
        width: 360px; /* Force minimum width */
        height: 360px; /* Force minimum height */
    }
}

/* Ensure consistent sizing across all orientations */
@media screen and (orientation: landscape), screen and (orientation: portrait) {
    canvas {
        max-height: 100vh;
        max-width: 100vw;
        transition: width 0.3s ease, height 0.3s ease; /* Smooth transitions for orientation changes */
    }
}