/* layout.css - Overall structure, canvas, and responsive layouts */
.game-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2px; /* Reduce from 5px → 2px = 6px saved */
    box-sizing: border-box;
}

/* Mobile-specific override */
@media (max-width: 768px) {
    .game-wrapper {
        padding: 1px; /* Further reduce to 1px = 8px total saved */
    }
}

.ui-panel, .canvas-panel {
    margin: 1px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.canvas-panel {
    flex-grow: 1;
    min-width: 0; /* Prevent flexbox overflow */
    border: 2px solid var(--grey-border); /* Reduce from 4px → 2px = 4px saved */
    border-radius: 4px; /* Reduce from 8px → 4px */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    background-color: #000;
}

/* Mobile-specific ultra-thin border */
@media (max-width: 768px) {
    .canvas-panel {
        border: 1px solid var(--grey-border); /* 6px total saved */
        border-radius: 2px;
    }
}

#game-canvas {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    border-radius: 8px; /* Match panel's border radius */
    /* PHASE 2: Crisp pixel art rendering (Restored) */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.ui-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 4px; /* Reduce from 10px → 4px = 6px saved */
}

@media (max-width: 480px) {
    .ui-container {
        gap: 2px; /* Ultra-compact on small screens = 8px total saved */
    }
}


/* --- LAYOUT MANAGEMENT --- */
#show-pwa-prompt { display: none; }
body.is-mobile #show-pwa-prompt { display: block; }
#landscape-left-sidebar, #landscape-right-sidebar { display: none; }


/* --- Portrait Layout (Default) --- */
body.layout-portrait .game-wrapper {
    flex-direction: column;
}

body.layout-portrait .ui-panel {
    width: 100%;
    flex-shrink: 0;
}

body.layout-portrait .ui-container {
     max-width: 800px;
     flex-wrap: wrap;
     margin: 0 auto; /* Center the UI container in portrait */
}


/* --- LANDSCAPE LAYOUT (Side Bar Panel) --- */
body.layout-landscape {
    padding: 0;
}

body.layout-landscape .game-wrapper {
    flex-direction: row;
    height: 100vh;
}

body.layout-landscape .ui-panel {
    height: 100%;
    flex-shrink: 0;
}

body.layout-landscape .ui-container {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

/* Landscape component adjustments (Restored) */
body.layout-landscape .stats-box {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    cursor: default;
}

body.layout-landscape .log-box {
    width: 100%;
    flex-grow: 1;
    min-height: 150px;
    cursor: pointer;
}

body.layout-landscape .actions-box {
    display: block;
}

body.layout-landscape #landscape-left-sidebar,
body.layout-landscape #landscape-right-sidebar {
    display: none;
}

/* --- Safe Area Support for Notched Devices --- */
/* More conservative safe area handling */
@supports (padding: max(0px)) {
    body {
        padding-right: max(2px, env(safe-area-inset-right));
        padding-bottom: max(2px, env(safe-area-inset-bottom));
        padding-left: max(2px, env(safe-area-inset-left));
    }
    /* Note: Mobile control safe areas are handled in mobile.css */
}