body {
    font-family: 'Monospace', monospace;
    overscroll-behavior: none; 
    margin: 0;
    background-color: #0f172a; /* bg-slate-900 */
    color: #e2e8f0; /* text-slate-100 */
    overflow: hidden; /* Prevent scrollbars */
}
#game-screen {
    position: relative; /* For absolute positioning of children */
    width: 100vw;
    height: 100vh;
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#game-canvas-container {
    width: 100%;
    height: 100%; /* Canvas container takes full screen */
    position: absolute; /* Canvas is in the background */
    top: 0;
    left: 0;
    z-index: 1;
}
canvas {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; 
    cursor: pointer;
}

.ui-panel-wrapper {
    position: absolute;
    z-index: 10; /* UI on top of canvas */
    padding: 8px;
    display: flex;
    gap: 8px;
    width: calc(100% - 16px); /* Full width with padding */
    box-sizing: border-box;
}

#player-info-wrapper {
    top: 0;
    left: 0;
    justify-content: space-between; 
    align-items: center;
    background-color: rgba(15, 23, 42, 0.7); 
    border-bottom: 1px solid rgba(51, 65, 85, 0.7); 
}
#player-name-display { font-size: 1.1rem; font-weight: bold; color: #38bdf8; } 
#message-display { text-align: center; flex-grow: 1; }
#stats-wrapper { display: flex; gap: 10px; align-items: center; } 


#bottom-controls-wrapper {
    bottom: 0;
    left: 0;
    justify-content: center; 
    background-color: rgba(15, 23, 42, 0.7);
    border-top: 1px solid rgba(51, 65, 85, 0.7);
}

.info-panel, .control-panel-group {
    background-color: rgba(30, 41, 59, 0.85); 
    padding: 6px 8px;
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    font-size: 0.75rem; /* text-xs */
}
.control-panel-group {
    display: flex; 
    flex-direction: column;
    align-items: center;
}
.control-panel { 
     @apply grid grid-cols-3 gap-1 p-1;
}


.game-button {
    @apply bg-slate-600 hover:bg-slate-700 text-white font-bold py-1 px-2 rounded text-xs shadow-sm transition-all duration-150 ease-in-out transform active:scale-95;
     white-space: nowrap;
}
.game-button-sm {
    @apply bg-sky-600 hover:bg-sky-700 text-white font-bold py-1 px-1 rounded text-xs shadow-sm transition-all duration-150 ease-in-out transform active:scale-95;
    white-space: nowrap;
}

.modal {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-20; 
}
.modal-content {
    @apply bg-slate-700 p-6 rounded-lg shadow-2xl text-center text-slate-100;
}