/* Import the C64 Font */
@font-face {
    font-family: 'C64ProMono';
    src: url('fonts/C64_Pro_Mono-STYLE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #3C3C3C; /* Background of the whole page */
    font-family: 'C64ProMono', 'Courier New', Courier, monospace;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#scaler-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* VARIABLES for game content sizing */
:root { /* Define them at the root for clarity or on #game-window */
    --char-width: 8px;
    --char-height: 8px;
    --screen-cols: 40;
    --screen-rows: 25;
    --text-scale: 2;
    --c64-screen-base-width: calc(var(--screen-cols) * var(--char-width) * var(--text-scale));
    --c64-screen-base-height: calc(var(--screen-rows) * var(--char-height) * var(--text-scale));
    --c64-screen-internal-padding-total-vertical: calc(var(--char-height) * var(--text-scale)); /* 0.5 top + 0.5 bottom */
    --c64-screen-internal-padding-total-horizontal: calc(var(--char-width) * var(--text-scale)); /* 0.5 left + 0.5 right */

    --c64-screen-content-height: calc(var(--c64-screen-base-height) + var(--c64-screen-internal-padding-total-vertical));
    --c64-screen-content-width: calc(var(--c64-screen-base-width) + var(--c64-screen-internal-padding-total-horizontal));
    --c64-screen-border-thickness: 5px; /* border of .c64-screen */
    --c64-screen-bordered-width: calc(var(--c64-screen-content-width) + (2 * var(--c64-screen-border-thickness)));
    --c64-screen-bordered-height: calc(var(--c64-screen-content-height) + (2 * var(--c64-screen-border-thickness)));
    --status-line-font-size: calc(var(--char-height) * var(--text-scale) * 0.8);
    --status-line-line-height: 1.2;
    --status-line-padding-vertical: calc(var(--char-height) * var(--text-scale) * 0.2);
    --status-line-margin-bottom: calc(var(--char-height) * var(--text-scale) * 0.3);
    --status-line-border-bottom: 2px;
    --status-line-total-height: calc(var(--status-line-font-size) * var(--status-line-line-height) + (2 * var(--status-line-padding-vertical)) + var(--status-line-margin-bottom) + var(--status-line-border-bottom) );
    --message-area-font-size: calc(var(--char-height) * var(--text-scale) * 0.9);
    --message-area-line-height: 1.2;
    --message-area-padding-vertical: calc(var(--char-height) * var(--text-scale) * 0.3);
    --message-area-margin-top: calc(var(--char-height) * var(--text-scale) * 0.3);
    --message-area-border-top: 2px;
    --message-area-lines: 2;
    --message-area-total-height: calc( (var(--message-area-font-size) * var(--message-area-line-height) * var(--message-area-lines)) + (2 * var(--message-area-padding-vertical)) + var(--message-area-margin-top) + var(--message-area-border-top) );
}


#game-window {
    /* Its dimensions are now the sum of its children + its own border */
    width: var(--c64-screen-bordered-width); /* Assuming status & message match c64-screen width */
    height: calc(var(--status-line-total-height) + var(--c64-screen-bordered-height) + var(--message-area-total-height));
    border: 2px solid #111; /* Game window's own border */
    background-color: #000000; /* Default background, will be covered */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 0 15px rgba(0,0,0,0.5); /* Adjusted shadow */
    display: flex;
    flex-direction: column;
    transform-origin: center center; /* Scaling will be applied here */
}

#status-line {
    font-family: 'C64ProMono', 'Courier New', Courier, monospace;
    font-size: var(--status-line-font-size);
    line-height: var(--status-line-line-height);
    padding: var(--status-line-padding-vertical) calc(var(--char-width) * var(--text-scale) * 0.5);
    margin-bottom: var(--status-line-margin-bottom);
    text-transform: uppercase;
    background-color: #4A4A7A;
    color: #FFFF8B;
    border-bottom: var(--status-line-border-bottom) solid #222250;
    flex-shrink: 0;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.c64-screen {
    width: var(--c64-screen-bordered-width);
    height: var(--c64-screen-bordered-height);
    padding: calc(var(--char-height) * var(--text-scale) * 0.5); /* Internal padding of c64-screen */
    box-sizing: border-box;
    font-size: calc(var(--char-height) * var(--text-scale));
    line-height: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    image-rendering: pixelated;
    flex-shrink: 0;
    border-width: var(--c64-screen-border-thickness); /* Moved border definition here */
    border-style: solid;
}

/* C64 Color Palette (Background, Text, and C64 Screen Border colors) */
.yellow-bg {
    background-color: #FEFEC1;
    color: #504F00;
    border-color: #8A5442;
}

.pink-bg {
    background-color: #F7A898;
    color: #542C2C;
    border-color: #8A5442;
}

.blue-bg {
    background-color: #A4E3FF;
    color: #003A54;
    border-color: #4A4A7A;
}

.purple-bg {
    background-color: #D0B0FF;
    color: #400080;
    border-color: #6020A0;
}

.brown-bg {
    background-color: #DDC09C;
    color: #4E2F00;
    border-color: #8A5442;
}

.green-bg {
    background-color: #BEEBAD;
    color: #2A5328;
    border-color: #507B4E;
}

.orange-bg {
    background-color: #FFD1A9;
    color: #6B3400;
    border-color: #A05000;
}

.black-bg {
    background-color: #000000;
    color: #FFFF00;
    border-color: #444444;
}

.red-bg {
    background-color: #B52727;
    color: #FFFFFF;
    border-color: #7F0000;
}

.white-text {
    color: #FFFFFF;
}


#main-text-area p,
#options-list li {
    margin: 0;
    height: calc(var(--char-height) * var(--text-scale));
    white-space: pre;
    overflow: hidden;
    max-width: var(--c64-screen-base-width); /* Max width of text content itself */
}

#options-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: calc(var(--char-height) * var(--text-scale) * 0.5);
    margin-bottom: calc(var(--char-height) * var(--text-scale) * 0.5);
    flex-grow: 1;
}

.input-area {
    margin-top: auto;
    height: calc(var(--char-height) * var(--text-scale));
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#prompt-text {
    margin-right: 0;
}

#cursor-simulation {
    display: inline-block;
    animation: blink 1s step-start infinite;
    width: calc(var(--char-width) * var(--text-scale));
    height: calc(var(--char-height) * var(--text-scale));
    line-height: 1;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

#player-input-field {
    background-color: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    padding: 0;
    margin: 0;
    width: calc(var(--char-width) * var(--text-scale) * 10);
    height: calc(var(--char-height) * var(--text-scale));
    outline: none;
    caret-color: transparent;
    text-transform: uppercase;
}

#message-area {
    font-family: 'C64ProMono', 'Courier New', Courier, monospace;
    font-size: var(--message-area-font-size);
    line-height: var(--message-area-line-height);
    margin-top: var(--message-area-margin-top);
    padding: var(--message-area-padding-vertical) calc(var(--char-width) * var(--text-scale) * 0.5);
    color: #FF8C00;
    background-color: #333355;
    border-top: var(--message-area-border-top) solid #111133;
    text-transform: uppercase;
    flex-shrink: 0;
    height: var(--message-area-total-height);
    box-sizing: border-box;
}

hr {
    border: none;
    border-top: calc(var(--char-height) * var(--text-scale) * 0.1) solid currentColor;
    opacity: 0.6;
    margin: calc(var(--char-height) * var(--text-scale) * 0.2) 0;
}