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

body {
    background: #000;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

canvas { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.loading-text { font-size: 18px; color: #aaa; margin-bottom: 15px; letter-spacing: 3px; }
.loading-bar { width: 280px; height: 6px; background: #111; border: 1px solid #333; }
.loading-fill { width: 0%; height: 100%; background: #555; transition: width 0.3s; }
.loading-sub { font-size: 12px; color: #555; margin-top: 10px; }

#error-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0a0000; z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.error-title { font-size: 22px; color: #f44; margin-bottom: 12px; }
.error-msg { font-size: 14px; color: #fff; max-width: 500px; text-align: center; line-height: 1.5; }

#info-text {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
    pointer-events: none; font-size: 12px; color: rgba(255,255,255,0.35); letter-spacing: 1px;
    transition: opacity 2s;
}
#info-text.fade { opacity: 0; }

/* ---- MAIN MENU ---- */
#main-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 990; display: flex; align-items: center; justify-content: center;
}
.menu-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, #0a1a2a 0%, #000 70%);
}
.menu-content {
    position: relative; z-index: 1; text-align: center;
}
.menu-title {
    font-size: 48px; font-weight: bold; letter-spacing: 10px;
    color: #fff; text-shadow: 0 0 30px rgba(68,170,255,0.5);
    margin-bottom: 5px;
}
.menu-subtitle {
    font-size: 20px; letter-spacing: 15px; color: #6af;
    margin-bottom: 50px; text-shadow: 0 0 15px rgba(68,170,255,0.3);
}
.menu-btn {
    display: block; margin: 12px auto; width: 240px; padding: 14px 0;
    font-family: 'Courier New', monospace; font-size: 22px; letter-spacing: 6px;
    background: transparent; color: #fff; border: 2px solid #4af;
    cursor: pointer; transition: all 0.2s;
}
.menu-btn:hover { background: #4af; color: #000; }

/* ---- PASSWORD MODAL ---- */
#password-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 995;
}
.modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
}
.modal-box {
    position: relative; z-index: 1; width: 320px; margin: 20vh auto 0;
    background: #0a1a2a; border: 2px solid #4af; padding: 25px; text-align: center;
}
.modal-title { font-size: 16px; color: #4af; letter-spacing: 4px; margin-bottom: 15px; }
#password-input {
    width: 100%; padding: 10px; font-family: 'Courier New', monospace; font-size: 16px;
    background: #000; color: #4af; border: 1px solid #4af; outline: none;
    margin-bottom: 10px; text-align: center;
}
.modal-btns { display: flex; gap: 10px; justify-content: center; }
.modal-btn {
    padding: 8px 24px; font-family: 'Courier New', monospace; font-size: 14px;
    background: #0a2a3a; color: #fff; border: 1px solid #4af; cursor: pointer;
}
.modal-btn:hover { background: #4af; color: #000; }
.modal-btn-cancel { border-color: #555; }
.modal-btn-cancel:hover { background: #555; }

/* ---- EDITOR UI ---- */
#editor-ui {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50; pointer-events: none;
}
.editor-topbar {
    position: absolute; top: 0; left: 0; width: 100%; height: 40px;
    background: rgba(5,15,25,0.9); border-bottom: 1px solid #2a4a6a;
    display: flex; align-items: center; padding: 0 15px; gap: 12px;
    pointer-events: auto; z-index: 2;
}
.topbar-btn {
    padding: 5px 14px; font-family: 'Courier New', monospace; font-size: 11px;
    background: #0a1a2a; color: #8cf; border: 1px solid #3a5a7a; cursor: pointer;
}
.topbar-btn:hover { background: #1a3a5a; }
.topbar-mode { margin-left: auto; font-size: 11px; color: #6af; letter-spacing: 3px; }

.editor-left {
    position: absolute; top: 40px; left: 0; width: 190px; bottom: 0;
    background: rgba(5,15,25,0.9); border-right: 1px solid #2a4a6a;
    pointer-events: auto; z-index: 2; overflow-y: auto;
}
.editor-right {
    position: absolute; top: 40px; right: 0; width: 240px; bottom: 0;
    background: rgba(5,15,25,0.9); border-left: 1px solid #2a4a6a;
    pointer-events: auto; z-index: 2; overflow-y: auto;
}
.panel-title {
    font-size: 11px; color: #6af; letter-spacing: 3px; padding: 12px;
    border-bottom: 1px solid #1a3a5a; text-align: center;
}
.item-card {
    margin: 6px 8px; padding: 10px; border: 1px solid #1a3a5a;
    font-size: 12px; color: #8cf; cursor: pointer; text-align: center;
    transition: all 0.15s;
}
.item-card:hover { background: #1a3a5a; border-color: #4af; }

#props-content { padding: 10px; }
.props-empty { font-size: 12px; color: #555; text-align: center; padding: 30px 10px; }

.prop-row { margin-bottom: 10px; }
.prop-label { font-size: 10px; color: #6af; margin-bottom: 3px; letter-spacing: 1px; }
.prop-input {
    width: 100%; padding: 5px 7px; font-family: 'Courier New', monospace; font-size: 11px;
    background: #000; color: #fff; border: 1px solid #2a4a6a; outline: none;
}
.prop-input:focus { border-color: #4af; }
.prop-input-small { width: 62px; display: inline-block; margin-right: 4px; }
.prop-row-inline { display: flex; gap: 4px; }
.prop-select {
    width: 100%; padding: 5px; font-family: 'Courier New', monospace; font-size: 11px;
    background: #000; color: #fff; border: 1px solid #2a4a6a; outline: none;
}

/* ---- COLOR PALETTE ---- */
.palette-btn {
    position: absolute; bottom: 20px; right: 20px;
    width: 48px; height: 48px; font-size: 22px;
    background: rgba(5,15,25,0.9); border: 2px solid #4af;
    border-radius: 50%; cursor: pointer; z-index: 3;
    pointer-events: auto; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.palette-btn:hover { background: #4af; }

/* ---- EDITOR BOTTOM BAR ---- */
#editor-bottom-bar {
    position: absolute; bottom: 20px; left: 200px;
    display: flex; gap: 6px; z-index: 3;
    pointer-events: auto;
}
#transform-tools {
    display: flex; gap: 6px;
}
.tool-btn {
    padding: 8px 14px; font-family: 'Courier New', monospace; font-size: 11px;
    background: rgba(5,15,25,0.9); color: #8cf; border: 1px solid #3a5a7a;
    cursor: pointer; transition: all 0.15s;
}
.tool-btn:hover { background: #1a3a5a; }
.tool-btn.active { background: #4af; color: #000; border-color: #4af; }

/* ---- MARQUEE SELECTION RECT ---- */
#marquee-rect {
    position: fixed; z-index: 4; pointer-events: none;
    border: 1.5px solid #4af;
    background: rgba(68, 170, 255, 0.1);
}

/* ---- MATERIAL MODAL ---- */
#mat-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 995; pointer-events: auto;
}
.mat-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
}
.mat-panel {
    position: relative; z-index: 1; width: 480px; max-height: 85vh;
    margin: 4vh auto 0; background: #0a1a2a; border: 2px solid #4af;
    overflow-y: auto;
}
.mat-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: #0a1520; border-bottom: 1px solid #2a4a6a;
    font-size: 14px; color: #4af; letter-spacing: 3px;
}
.mat-close {
    background: none; border: 1px solid #4af; color: #4af;
    font-size: 14px; width: 28px; height: 28px; cursor: pointer;
    font-family: 'Courier New', monospace;
}
.mat-close:hover { background: #4af; color: #000; }
.mat-section { padding: 10px 16px; }
.mat-section-title {
    font-size: 10px; color: #6af; letter-spacing: 2px; margin-bottom: 8px;
}
.mat-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-swatch {
    width: 48px; height: 48px; border: 2px solid #2a4a6a; cursor: pointer;
    transition: all 0.15s; border-radius: 4px;
}
.mat-swatch:hover { border-color: #fff; transform: scale(1.1); }
.mat-swatch-label {
    font-size: 8px; color: #8cf; text-align: center; margin-top: 2px;
    overflow: hidden; white-space: nowrap;
}

/* ---- RESET FADE OVERLAY ---- */
#reset-fade {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    z-index: 10000;
    pointer-events: none;
    transition: opacity 0.5s ease;
    opacity: 0;
}

/* ---- CAMERA HUD ---- */
#camera-hud {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 80; pointer-events: none;
}
#camera-hud-top {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    font-family: 'Courier New', monospace; font-size: 16px; color: #0f0;
    letter-spacing: 3px; text-shadow: 0 0 8px #0f0;
    background: rgba(0,0,0,0.7); padding: 6px 18px; border: 1px solid #0f0;
}
#camera-hud-bottom {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font-family: 'Courier New', monospace; font-size: 12px; color: #0f0;
    letter-spacing: 1px; text-shadow: 0 0 5px #0f0;
    background: rgba(0,0,0,0.7); padding: 6px 14px; border: 1px solid #0f0;
}
#camera-hud-scanlines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,255,0,0.03) 0px,
        rgba(0,255,0,0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}

/* ---- CHARGE RING ---- */
#charge-ring {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80px; height: 80px; z-index: 85; pointer-events: none;
}
#charge-ring svg { width: 100%; height: 100%; }
#charge-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: 'Courier New', monospace; font-size: 18px; color: #0f0;
}

/* ---- ENERGY HUD ---- */
#energy-hud {
    position: fixed; top: 15px; right: 15px;
    z-index: 80; pointer-events: none;
    font-family: 'Courier New', monospace;
}
#energy-bar-bg {
    width: 200px; height: 18px;
    background: rgba(0,0,0,0.7); border: 1px solid #0f0;
    position: relative;
}
#energy-bar-fill {
    height: 100%; width: 100%;
    background: #0f0;
    transition: width 0.3s, background-color 0.3s;
}
#energy-bar-fill.low { background: #ff0; }
#energy-bar-fill.critical { background: #f00; }
#energy-text {
    font-size: 11px; color: #0f0; text-align: center;
    margin-top: 3px; text-shadow: 0 0 5px #0f0;
}
#fuel-indicator {
    font-size: 11px; color: #ff0; text-align: center;
    margin-top: 5px; text-shadow: 0 0 5px #ff0;
    background: rgba(0,0,0,0.7); padding: 8px 12px;
    border: 1px solid #ff0;
    display: flex; align-items: center; gap: 8px;
}
#fuel-can-icon {
    width: 20px; height: 28px;
    background: #cc4422;
    border: 2px solid #ff6644;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
}
#fuel-can-icon::before {
    content: '';
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 5px;
    background: #888; border-radius: 2px 2px 0 0;
}
#fuel-can-text {
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* ---- GAME TIMER HUD ---- */
#game-timer-hud {
    position: fixed; top: 15px; left: 15px;
    z-index: 80; pointer-events: none;
    font-family: 'Courier New', monospace;
}
#game-timer-text {
    font-size: 24px; color: #0f0;
    text-shadow: 0 0 8px #0f0;
    background: rgba(0,0,0,0.7); padding: 6px 14px;
    border: 1px solid #0f0; letter-spacing: 3px;
}
#day-counter-text {
    font-size: 16px; color: #4af;
    text-shadow: 0 0 6px #4af;
    background: rgba(0,0,0,0.7); padding: 4px 10px;
    border: 1px solid #4af; letter-spacing: 2px;
    margin-top: 5px; display: inline-block;
}

/* ---- SCREAM OVERLAY ---- */
#scream-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 0, 0, 0.5); z-index: 90; pointer-events: none;
    animation: screamFlash 0.6s ease-out forwards;
}
@keyframes screamFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- GAME OVER OVERLAY ---- */
#game-over-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.97); z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 40px;
    pointer-events: auto;
}
#game-over-text {
    font-family: 'Courier New', monospace;
    font-size: 64px; color: #f00;
    text-shadow: 0 0 30px #f00, 0 0 60px #900;
    letter-spacing: 15px;
    animation: gameOverPulse 1.5s ease-in-out infinite;
}
.gameover-btn {
    padding: 14px 40px;
    font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 4px;
    background: transparent; color: #fff; border: 2px solid #4af;
    cursor: pointer; transition: all 0.2s;
}
.gameover-btn:hover { background: #4af; color: #000; }
@keyframes gameOverPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ---- ANIMATRONIC CATALOG ---- */
.item-card-anim {
    border-color: #5a2a2a;
}
.item-card-anim:hover {
    background: #3a1a1a;
    border-color: #f44;
}

/* ---- ANIMATRONIC INSPECTOR PANEL ---- */
.prop-anim-header {
    font-size: 11px; color: #f80; letter-spacing: 2px;
    padding: 8px 0; margin-top: 8px;
    border-top: 1px solid #5a3a1a; text-align: center;
}

/* ---- DAY END OVERLAY ---- */
#day-end-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95); z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 30px;
    pointer-events: auto;
}
#day-end-title {
    font-family: 'Courier New', monospace;
    font-size: 48px; color: #4af;
    text-shadow: 0 0 20px #4af, 0 0 40px #226;
    letter-spacing: 8px;
    animation: dayEndPulse 1.5s ease-in-out infinite;
}
.day-btn-next {
    border-color: #0a0;
}
.day-btn-next:hover { background: #0a0; color: #fff; }
.day-btn-menu {
    border-color: #f44;
}
.day-btn-menu:hover { background: #f44; color: #fff; }
@keyframes dayEndPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.03); }
}