:root {
    --gold: #f1c40f;
    --panel-bg: #d1b182;
    --panel-border: #8c6035;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
    width: 100%; height: 100%;
    font-family: 'VT323', monospace;
    overflow: hidden; /* No scrolling, full screen game */
    background-color: #000;
}

/* Fullscreen Canvas */
#gameCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
    cursor: crosshair;
}

/* UI Overlay */
#ui-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Let clicks pass through to canvas */
    z-index: 10;
}

.top-stats {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 20px;
    pointer-events: auto;
}
.stat-box {
    background: rgba(0,0,0,0.7); color: white;
    padding: 10px 20px; font-size: 24px;
    border: 3px solid #555; border-radius: 5px;
}
.gold-text { color: var(--gold); }
.karma-good { color: #3498db; }

#btn-inventory {
    position: absolute; bottom: 20px; right: 20px;
    padding: 15px 30px; font-size: 24px; font-family: 'VT323';
    background: #8c6035; color: white; border: 4px solid #f7e0b5;
    cursor: pointer; pointer-events: auto;
}

#inventory-panel {
    position: absolute; bottom: 80px; right: 20px;
    width: 250px; background: var(--panel-bg);
    border: 4px solid var(--panel-border); padding: 10px;
    pointer-events: auto; display: none;
}
#inventory-panel.active { display: block; }
.inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.inv-slot { aspect-ratio: 1; background: rgba(0,0,0,0.2); border: 2px inset #000; display: flex; justify-content: center; align-items: center; }
.ore-copper { width: 80%; height: 80%; background: #d35400; border-radius: 50%; }

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 100;
    display: none; justify-content: center; align-items: center;
    pointer-events: auto;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--panel-bg); border: 6px solid var(--panel-border);
    padding: 20px; width: 400px; max-width: 90%; color: #000;
}
.modal-header { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 15px; }
.close-btn { background: #e74c3c; color: white; font-family: 'VT323'; border: 2px solid #000; cursor: pointer; padding: 2px 10px; font-size: 20px; }

.btn { background: #27ae60; color: white; padding: 10px; border: 3px solid #000; font-family: 'VT323'; font-size: 20px; cursor: pointer; }
.w-100 { width: 100%; }

/* Toasts */
#toast-container { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 1000; pointer-events: none; }
.toast { background: rgba(0,0,0,0.8); color: white; padding: 10px 20px; margin-top: 5px; border: 2px solid #fff; font-size: 20px; }