* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#game-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#game-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 1024px;
    height: 896px;
    border: 2px solid #333;
}

/* Touch controls - hidden by default (desktop) */
#touch-controls {
    display: none;
}

/* ===== Mobile styles ===== */
@media (max-width: 1060px) {
    #game-canvas {
        width: 512px;
        height: 448px;
    }
}

@media (max-width: 540px) {
    body {
        align-items: flex-start;
    }
    #game-canvas {
        width: 100vw;
        height: calc(100vw * 448 / 512);
        border: none;
    }
}

/* Show touch controls on touch-capable devices */
@media (pointer: coarse) {
    body {
        align-items: flex-start;
        min-height: 100dvh;
    }

    #game-canvas {
        width: 100vw;
        height: calc(100vw * 448 / 512);
        border: none;
    }

    #touch-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100vw;
        flex: 1;
        padding: 10px 16px;
        min-height: 160px;
    }

    /* D-pad */
    #dpad {
        display: grid;
        grid-template-columns: 42px 42px 42px;
        grid-template-rows: 42px 42px 42px;
        gap: 3px;
    }

    .dpad-btn {
        width: 42px;
        height: 42px;
        border: 2px solid #555;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        color: #aaa;
        font-size: 22px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .dpad-btn:active {
        background: rgba(255, 255, 255, 0.35);
    }

    #btn-up    { grid-column: 2; grid-row: 1; }
    #btn-left  { grid-column: 1; grid-row: 2; }
    #btn-center{ grid-column: 2; grid-row: 2; border-color: #333; background: rgba(255,255,255,0.04); }
    #btn-right { grid-column: 3; grid-row: 2; }
    #btn-down  { grid-column: 2; grid-row: 3; }

    /* Arrow icons via border tricks */
    #btn-up::after    { content: ''; display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #aaa; }
    #btn-down::after  { content: ''; display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #aaa; }
    #btn-left::after  { content: ''; display: block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10px solid #aaa; }
    #btn-right::after { content: ''; display: block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #aaa; }

    /* Action buttons */
    #action-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 140px;
    }

    .action-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid #555;
        background: rgba(255, 255, 255, 0.12);
        color: #ccc;
        font-size: 16px;
        font-weight: bold;
        font-family: monospace;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .action-btn:active {
        background: rgba(255, 255, 255, 0.35);
    }

    #btn-a {
        border-color: #4a8;
        color: #6da;
        width: 54px;
        height: 54px;
        font-size: 15px;
    }
    #btn-b {
        border-color: #a64;
        color: #d96;
    }
    #btn-menu {
        width: 40px;
        height: 40px;
        font-size: 11px;
        border-color: #668;
        color: #99b;
    }
}