/* layout.css - Overall structure, canvas, and responsive layouts */
.game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    max-width: 1200px;
}

/* --- Main Game UI --- */
#game-canvas {
    background-color: #000;
    border: 4px solid var(--grey-border);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    /* 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%;
    max-width: 800px;
    flex-wrap: nowrap;
    gap: 10px;
}

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

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

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

body.layout-landscape .ui-container {
    flex-direction: column;
    width: 280px;
    max-width: 35%;
    height: 100%;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 5px;
}

/* 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: none;
}

body.layout-landscape #game-canvas {
    border: 4px solid var(--grey-border);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

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

/* --- Portrait Layout (Default) --- */
body.layout-portrait .game-wrapper {
    padding: 5px;
}

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