html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Press Start 2P', cursive;
    background-color: #0d1117; /* Dark background */
    color: #c9d1d9; /* Light text */
    overflow: hidden; /* Prevent scrollbars */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    height: 100vh; /* MODIFIED: Force full height */
    padding: 0; /* MODIFIED: Remove body padding */
    margin: 0;
    touch-action: manipulation; /* Prevent zoom */
}
#game-container {
    width: 100%;
    flex-grow: 1; /* MODIFIED: Take all available vertical space */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* MODIFIED: Prevent inner content from overflowing */
}
canvas#gameCanvas { /* Target main game canvas specifically */
    background-color: #000; /* Black game area */
    border: 4px solid #30363d; /* Dark border */
    display: block;
    image-rendering: pixelated; /* Crisp pixels */
    /* width: 100%; */ /* REMOVED: JS will set style.width */
    /* height: auto; */ /* REMOVED: JS will set style.height */
    /* max-width: 600px; */ /* REMOVED: Allow canvas to grow */
    /* aspect-ratio: 4 / 3; */ /* REMOVED: JS will handle aspect ratio */
    margin: 0 auto; /* Center canvas */
    cursor: none; /* Hide cursor over game */
    touch-action: manipulation;
}
.pixel-text {
    text-shadow: 2px 2px #000;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 17, 23, 0.9); /* Dark overlay */
    color: #c9d1d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
    border-radius: 0.5rem; /* Match canvas rounding */
    padding: 1rem;
}

.hidden {
    display: none;
}
/* Style for order type indicators (These might be less relevant now if drawing directly on canvas) */
.order-buy { color: #22c55e; } /* Green */
.order-sell { color: #ef4444; } /* Red */
.order-call { color: #3b82f6; } /* Blue */
.order-put { color: #f97316; } /* Orange */
.order-quote { color: #ffffff; } /* White */
.order-hedge { color: #a855f7; } /* Purple */

/* Trader angry animation style */
.trader-angry { filter: sepia(100%) saturate(300%) hue-rotate(-50deg); animation: shake 0.2s infinite linear; }
/* Screen shake animation */
@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 0px); }
    50% { transform: translate(3px, 0px); }
    75% { transform: translate(-3px, 0px); }
}
.shake {
    animation: shake 0.15s linear;
}
/* Desk highlighting */
.desk-highlight {
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Yellow glow */
}
/* Small font for chart labels/trader text */
.small-font {
     font-size: 8px; /* Adjust as needed */
     line-height: 1;
}
/* Quote styling */
.quote-text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #facc15; /* Yellow */
    margin-bottom: 1rem;
    max-width: 80%;
}
/* Boss message styling (on canvas) - Keep classes if JS adds/removes them */
.boss-message-warning {
    color: #ef4444; /* Red */
    font-size: 1rem;
    line-height: 1.5;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ef4444;
    border-radius: 4px;
    text-shadow: 2px 2px #000;
    max-width: 80%;
    text-align: center;
}
.boss-message-quote {
     color: #facc15; /* Yellow */
     font-size: 0.8rem;
     line-height: 1.5;
     padding: 1rem;
     background-color: rgba(0, 0, 0, 0.7);
     border: 2px solid #facc15;
     border-radius: 4px;
     text-shadow: 2px 2px #000;
     max-width: 80%;
     text-align: center;
}