:root {
    --app-height: 100dvh;
}

* {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Inputs must allow selection for the caret and focus to work with scanners/keyboards */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #EEEEEE; /* Dark background for desktop/letterboxing */
    overflow: hidden; /* Prevent viewport scroll */
}

body {
    margin: 0 auto; /* Center horizontally */
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Dimensions */
    width: 100%;
    /* Enforce 3:4 aspect ratio limit based on height for desktop/landscape usage */
    max-width: 75vh; 
    max-width: calc(var(--app-height) * 0.75);
    
    /* Ensure app takes exactly the visible viewport height */
    height: 100%; 
    height: 100dvh; 
    height: var(--app-height);
    
    background-color: #f4f4f4;
    color: #333;
    overflow: hidden; /* Prevent body scroll */
    overscroll-behavior: none; /* Prevent rubber-banding */
    
    position: relative; /* Context for absolute positioning of children */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Visual separation on large screens */
}
.hidden {
    display: none !important;
}