/* --- APP COMPILATION ADAPTATIONS --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    /* The body is now the calculator's background color */
    background-color: blue; 
    overflow: hidden;        
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: white;
}

.calculator {
    /* Removed fixed 520px width and border-radius */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.calculator:focus {
    outline: none;
}

/* --- UPDATED AUTO-EXPANDING LAYOUT PROPERTIES --- */

.operation {
    background: rgb(7, 7, 144);
    border-radius: 20px;
    width: 100%; /* Replaced 500px */
    flex: 1.5;   /* Allows the screen to dynamically take up vertical space */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    padding: 15px;         
    box-sizing: border-box; 
    margin-bottom: 10px;
}

#txt-box {
    width: 100%; /* Replaced 470px */
    min-height: 48px;      
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-weight: 700;
    font-size: 48px;
    padding-top: 0;
    margin: 0;
    word-break: break-all; 
    outline: none;         
}

.result {
    width: 100%;
    min-height: 48px;      
    padding: 0;
    margin-top: 10px;      
    text-align: right;     
    box-sizing: border-box;
    word-break: break-all; 
}

/* --- BUTTON MECHANICS AND DESIGN GRAPHICS --- */

.buttons {
    display: flex;
    flex-direction: column;
    flex: 5; /* Forces the buttons area to fill the remaining vertical space */
    gap: 8px;
}

.function-btns, .top-btns, .middle-btns, .bottom-btns, .other-btns {
    display: flex;
    justify-content: space-between;
    flex: 1; /* Distributes row height evenly */
    gap: 8px;
}

.button {
    background: #8b7c7c;
    border: 1px solid black;
    /* Adjusted from 50% to scale better dynamically */
    border-radius: 20px; 
    /* Removed fixed 100px width/height to fill the flex container */
    flex: 1; 
    width: 100%;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-weight: 700;
    transition: filter 0.2s ease, transform 0.1s ease;
    font-size: 48px;
    color: white;
    padding: 5px;
    margin: 0;
    cursor: pointer;
}

.button:hover {
    filter: brightness(0.7);
}

.button:active, .button.active {
    transform: scale(0.95);
    filter: brightness(0.5); 
}

/* The images will automatically center and scale because of background-size: contain */
[id="9"] { background-image: url('images/9.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="8"] { background-image: url('images/8.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="7"] { background-image: url('images/7.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; color: white; }
[id="6"] { background-image: url('images/6.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="5"] { background-image: url('images/5.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="4"] { background-image: url('images/4.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="3"] { background-image: url('images/3.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="2"] { background-image: url('images/2.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; color: white; }
[id="1"] { background-image: url('images/1.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }

[id="0"] {
    background-color: #87CEEB;
    background-image: url('images/0.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    /* Flex 2.1 makes the zero button mathematically span exactly two buttons wide + the gap */
    flex: 2.1; 
    border-radius: 20px;
}

#decimal { background-image: url('images/decimal.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="="] { background-image: url('images/=.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
#divide { background-image: url('images/divide.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="()"] { background-image: url('images/().png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="percent"] { background-image: url('images/percent.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="add"] { background-image: url('images/+.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="subtract"] { background-image: url('images/-.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="multiply"] { background-image: url('images/x.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
[id="c"] { background-image: url('images/c.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; }