/* ===================================================
   Pixel Homestead — Main Stylesheet
   Minimal CSS: canvas centering, no-scroll, pixel font
   =================================================== */

/* --- Reset & Base --------------------------------- */
/* Remove default margins/padding and prevent page scroll */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full-viewport body, dark background, centered canvas */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;             /* prevent scrollbars */
    background: #0e0e1a;         /* very dark blue-black behind canvas */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;       /* pixel-friendly fallback font */
    -webkit-font-smoothing: none; /* keep pixel-crisp text */
}

/* --- Canvas --------------------------------------- */
/* The main game canvas — 960x540 native, scales to fit viewport on mobile */
#game-canvas {
    display: block;
    image-rendering: pixelated;           /* keep pixel art sharp */
    image-rendering: crisp-edges;         /* Firefox fallback */
    background: #1a1a2e;                  /* canvas clear color (dark blue-black) */
    cursor: default;
    /* Max size on desktop — native 960x540 */
    max-width: 960px;
    max-height: 540px;
}

/* --- Mobile viewport scaling ---------------------- */
/* On small screens, scale the canvas to fill the viewport
   while preserving the 16:9 aspect ratio. Uses vw/vh units
   to pick whichever dimension is the constraining one. */
@media (max-width: 960px) {
    #game-canvas {
        width: 100vw;                     /* fill viewport width */
        height: calc(100vw * 9 / 16);     /* maintain 16:9 ratio */
        max-height: 100vh;                /* don't exceed viewport height */
    }
}

@media (max-height: 540px) {
    #game-canvas {
        height: 100vh;                    /* fill viewport height */
        width: calc(100vh * 16 / 9);      /* maintain 16:9 ratio */
        max-width: 100vw;                 /* don't exceed viewport width */
    }
}

/* Landscape phones: fill entire screen for maximum play area */
@media (max-width: 960px) and (orientation: landscape) {
    html, body {
        /* Remove flex centering gaps on landscape mobile */
        align-items: center;
        justify-content: center;
    }
    #game-canvas {
        width: min(100vw, calc(100vh * 16 / 9));
        height: min(100vh, calc(100vw * 9 / 16));
    }
}

/* Portrait phones: letterbox with canvas at top */
@media (max-width: 540px) and (orientation: portrait) {
    html, body {
        align-items: flex-start;
        padding-top: env(safe-area-inset-top, 0);
    }
    #game-canvas {
        width: 100vw;
        height: calc(100vw * 9 / 16);
    }
}

/* --- Selection Prevention ------------------------- */
/* Prevent text/image selection so drag doesn't highlight */
canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* no tap flash on mobile */
    touch-action: none;                       /* prevent browser gestures */
}

/* --- Focus Outline -------------------------------- */
/* Remove focus outline on canvas (keyboard users use game controls) */
#game-canvas:focus {
    outline: none;
}