/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Container fills viewport */
.game-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    touch-action: none;
}

/* Canvas scales to fit, maintaining 3:2 aspect ratio */
#game-canvas {
    width: 100%;
    max-width: calc(100vh * 1.5);
    max-height: calc(100vw / 1.5);
    aspect-ratio: 960 / 640;
    image-rendering: pixelated;
    touch-action: none;
}

/* Engine-generated canvas elements */
.game-container canvas,
.game-container svg {
    width: 100%;
    max-width: calc(100vh * 1.5);
    max-height: calc(100vw / 1.5);
    aspect-ratio: 960 / 640;
    image-rendering: pixelated;
    touch-action: none;
    display: block;
}

/* Konva stage container */
.game-container .konvajs-content {
    width: 100% !important;
    height: auto !important;
    max-width: calc(100vh * 1.5);
    aspect-ratio: 960 / 640;
}

.game-container .konvajs-content canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Fabric.js wrapper */
.game-container .canvas-container {
    width: 100% !important;
    height: auto !important;
    max-width: calc(100vh * 1.5);
    aspect-ratio: 960 / 640;
}

.game-container .canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Controls area - used on portrait phones (below canvas) */
.controls-area {
    flex-shrink: 0;
}

/* Portrait phones: canvas at top, controls below */
@media (orientation: portrait) and (max-width: 600px) {
    .game-container {
        justify-content: flex-start;
    }
    #game-canvas {
        width: 100%;
        max-height: none;
    }
    .controls-area {
        width: 100%;
        flex: 1;
        min-height: 250px;
    }
}

/* Landscape: canvas fills height */
@media (orientation: landscape) {
    #game-canvas {
        height: 100vh;
        width: auto;
    }
    .game-container canvas,
    .game-container svg {
        height: 100vh;
        width: auto;
        max-width: none;
    }
    .game-container .konvajs-content,
    .game-container .canvas-container {
        height: 100vh;
        width: auto !important;
        max-width: none;
    }
}