body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        canvas { display: block; image-rendering: pixelated; }
        
        #ui { position: absolute; top: 20px; left: 20px; background: #5c3a21; border: 4px solid #3b2312; border-radius: 8px; color: #fff; padding: 15px; pointer-events: none; box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 6px 10px rgba(0,0,0,0.6); }
        h1 { margin: 0 0 10px 0; font-size: 22px; color: #f5d47a; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 0px #222;}
        p { margin: 0; font-size: 14px; color: #e6d3ba; text-shadow: 1px 1px 0px #111; font-weight: 500;}
        
        #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f5d47a; font-size: 20px; font-weight: bold; text-shadow: 3px 3px 0px #000; background: linear-gradient(160deg,#3a2510,#2b1a0c); padding: 20px 40px; border: 1px solid rgba(200,160,80,0.3); border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.8); z-index: 10000; display: none; letter-spacing: 3px; }

        /* TITLE SCREEN — overridden by new design in index.html */
        #title-screen { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 30px; z-index: 3000; flex-wrap: wrap; }
        .title-panel { background: #4a3018; border: 4px solid #2b1a0c; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.8), inset 0 0 15px rgba(0,0,0,0.5); }
        .title-text { font-size: 54px; margin: 0; background: linear-gradient(to bottom, #f5d47a, #d1a838); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.6)); text-align: center; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; }
        .subtitle-text { font-size: 16px; color: #bdc9c0; text-align: center; margin-bottom: 25px; font-weight: bold; letter-spacing: 6px; }
        .start-btn { background: linear-gradient(to bottom, #527d3e, #365926); color: #fff; border: 3px solid #2b451f; padding: 15px; font-size: 22px; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 6px 0 #2b451f, 0 10px 15px rgba(0,0,0,0.6); transition: all 0.1s; margin-top: 15px; }
        .start-btn:active { transform: translateY(6px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 0px 0 #2b451f, 0 4px 8px rgba(0,0,0,0.6); }
        .start-btn:hover { filter: brightness(1.2); }
        .settings-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #e6d3ba; font-weight: bold; font-size: 16px; }
        .settings-row select, .settings-row input { background: #2b1a0c; color: #f5d47a; border: 2px solid #111; padding: 6px 10px; border-radius: 4px; font-weight: bold; font-size: 14px; outline: none; cursor: pointer; }

        #menu-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; gap: 20px; z-index: 100; backdrop-filter: blur(4px); }
        #sleep-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-in-out; z-index: 9999; display: flex; align-items: center; justify-content: center; }

        #stats-container { position: absolute; top: 40px; left: 20px; display: flex; flex-direction: column; gap: 8px; width: auto; pointer-events: none; z-index: 100; }
        .icon-stat { position: relative; width: 44px; height: 44px; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.8)); }
        .stat-bg, .stat-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .stat-bg path { stroke: #111; stroke-width: 2.5; fill: #333; }
        .stat-fill path { stroke: #111; stroke-width: 2.5; }
        .stat-fill { transition: clip-path 0.2s ease-out, fill 0.2s; }

        #ammo-hud { display: none; align-items: center; gap: 8px; background: #2b1a0c; border: 3px solid #4a2e1b; border-radius: 6px; padding: 4px 8px; margin-top: 4px; width: fit-content; align-self: flex-start; box-shadow: 0 4px 6px rgba(0,0,0,0.5); }
        #ammo-count { font-size: 18px; font-weight: bold; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; color: #fff; }

        #xp-container { position: absolute; bottom: 115px; left: 50%; transform: translateX(-50%); width: 360px; height: 14px; background: #1c1f26; border: 2px solid #0a0b0d; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.6), inset 0 0 4px rgba(0,0,0,0.8); display: none; z-index: 90; }
        #xp-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5eb853, #7ce070); transition: width 0.3s ease-out; box-shadow: inset 0 2px 4px rgba(255,255,255,0.4); }
        #xp-level-text { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: #7ce070; font-weight: 900; font-size: 14px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; letter-spacing: 1px; white-space: nowrap; }

        #skill-btn { position: absolute; bottom: 20px; left: calc(50% - 280px); background: #4a3018; border: 4px solid #2b1a0c; width: 60px; height: 60px; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 15px rgba(0,0,0,0.6), inset 2px 2px 5px rgba(255,255,255,0.1); z-index: 80; display: none; align-items: center; justify-content: center; transition: transform 0.1s, background 0.1s, border-color 0.1s; }
        #skill-btn:hover { background: #5c3a21; border-color: #527d3e; transform: translateY(-2px); }
        #skill-btn:active { transform: translateY(2px); }

        .skill-node { background: #4a3018; border: 3px solid #2b1a0c; border-radius: 8px; padding: 15px; margin: 0; display: flex; justify-content: space-between; align-items: center; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.5); }
        .skill-node.unlocked { border-color: #527d3e; background: #3e5e29; box-shadow: inset 2px 2px 5px rgba(255,255,255,0.1), 0 0 10px rgba(82,125,62,0.5); }
        .skill-node.locked { filter: grayscale(100%); opacity: 0.8; }
        .skill-node .craft-btn { background: #2b1a0c; color: #888; border: 2px solid #111; padding: 8px 16px; border-radius: 4px; cursor: not-allowed; font-weight: bold; text-transform: uppercase; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1); }
        .skill-node:not(.locked):not(.unlocked) .craft-btn { background: #527d3e; color: #fff; border-color: #2b451f; cursor: pointer; box-shadow: inset 2px 2px 4px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.4); }
        .skill-node:not(.locked):not(.unlocked) .craft-btn:hover { background: #63964b; transform: translateY(-1px); }
        .skill-node.unlocked .craft-btn { background: #5c3a21; color: #f5d47a; border-color: #f5d47a; cursor: default; }

        #time-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: #5c3a21; border: 4px solid #3b2312; border-radius: 8px; color: #fff; padding: 10px 20px; pointer-events: none; box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.6); text-align: center; display: none; white-space: nowrap; }
        #day-display { color: #f5d47a; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; text-shadow: 1px 1px 0 #000;}
        #clock-display { font-size: 24px; font-weight: bold; text-shadow: 2px 2px 0 #000;}
        
        #cave-hud { display: none; position: absolute; top: 85px; left: 50%; transform: translateX(-50%); background: #1c1f26; color: #8e98a3; border: 3px solid #0a0b0d; padding: 6px 16px; font-weight: bold; letter-spacing: 2px; border-radius: 6px; box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 8px rgba(0,0,0,0.8); text-transform: uppercase; font-size: 14px; z-index: 50; }

        #hotbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: #4a3018; padding: 12px; border-radius: 12px; border: 4px solid #2b1a0c; box-shadow: 0 8px 15px rgba(0,0,0,0.6); }
        
        .panel { background: #5c3a21; padding: 25px; border-radius: 12px; border: 6px solid #3b2312; display: flex; flex-direction: column; align-items: center; max-height: 80vh; box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.8); }
        .panel h2 { margin: 0 0 20px 0; color: #f5d47a; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 0px #000; }
        
        #inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; }
        #chest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        
        #crafting-list { display: flex; flex-direction: column; gap: 12px; width: 280px; overflow-y: auto; padding-right: 10px; }
        #crafting-list::-webkit-scrollbar { width: 8px; }
        #crafting-list::-webkit-scrollbar-track { background: #3b2312; border-radius: 4px; }
        #crafting-list::-webkit-scrollbar-thumb { background: #8b5a33; border-radius: 4px; }
        
        .recipe-card { background: #4a3018; border: 3px solid #2b1a0c; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3); }
        .recipe-card.craftable { border-color: #527d3e; background: #3e5e29; }
        .recipe-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #f5d47a; font-weight: bold; font-size: 16px; text-shadow: 1px 1px 0 #000; }
        .recipe-cost { font-size: 13px; color: #e6d3ba; font-weight: bold; text-shadow: 1px 1px 0 #000; }
        .craft-btn { background: #2b1a0c; color: #888; border: 2px solid #111; padding: 6px 12px; border-radius: 4px; cursor: not-allowed; font-weight: bold; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1); }
        .recipe-card.craftable .craft-btn { background: #527d3e; color: #fff; border-color: #2b451f; cursor: pointer; box-shadow: inset 2px 2px 4px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.4); }
        .recipe-card.craftable .craft-btn:hover { background: #63964b; transform: translateY(-1px); }

        .slot { width: 52px; height: 52px; background: #8b6b4a; border: 3px solid #4a3018; border-radius: 6px; position: relative; box-sizing: border-box; cursor: pointer; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); transition: transform 0.1s, border-color 0.1s; }
        .slot:hover { transform: scale(1.05); background: #9c7b57; }
        .slot.selected { border-color: #ffd700; background: #a68561; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2), 0 0 12px rgba(255, 215, 0, 0.6); }
        .slot-number { position: absolute; top: 2px; left: 4px; font-size: 14px; color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000; pointer-events: none; }
        .item-icon { width: 36px; height: 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));}
        .item-count { position: absolute; bottom: 2px; right: 4px; font-size: 14px; color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
        
        #fps-counter { position: absolute; top: 10px; left: 10px; color: #00ff00; font-family: monospace; font-size: 14px; font-weight: bold; z-index: 100; text-shadow: 1px 1px 0 #000; display: none; pointer-events: none; }

        /* ── Autosave indicator ────────────────────────────────────────────── */
        #autosave-indicator {
            position: fixed;
            bottom: 18px;
            right: 18px;
            display: flex;
            align-items: center;
            gap: 7px;
            background: rgba(10, 18, 10, 0.82);
            border: 2px solid #527d3e;
            border-radius: 8px;
            padding: 6px 12px 6px 8px;
            z-index: 200;
            pointer-events: none;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.35s ease, transform 0.35s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.6);
        }
        #autosave-indicator.visible {
            opacity: 1;
            transform: translateY(0);
        }
        #autosave-icon {
            width: 20px;
            height: 20px;
            fill: #6abf5e;
            flex-shrink: 0;
            animation: autosave-spin 1.2s linear infinite;
            filter: drop-shadow(0 0 4px rgba(82, 200, 82, 0.5));
        }
        #autosave-indicator.done #autosave-icon {
            animation: none;
            fill: #8ee07e;
            filter: drop-shadow(0 0 5px rgba(100, 230, 100, 0.7));
        }
        @keyframes autosave-spin {
            0%   { transform: rotate(0deg);   }
            100% { transform: rotate(360deg); }
        }
        #autosave-label {
            color: #a8d89a;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 1px;
            text-shadow: 1px 1px 0 #000;
            font-family: 'Cinzel', serif;
            text-transform: uppercase;
        }
        
        #item-tooltip { display: none; position: absolute; background: rgba(20,25,30,0.95); color: #f5d47a; border: 2px solid #527d3e; padding: 6px 10px; border-radius: 6px; font-weight: bold; font-size: 14px; z-index: 9000; pointer-events: none; text-shadow: 1px 1px 0 #000; box-shadow: 0 4px 6px rgba(0,0,0,0.5); }
        #hotbar-popup { opacity: 0; position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(30,35,45,0.85); color: #f5d47a; padding: 10px 20px; border-radius: 8px; font-weight: 900; font-size: 20px; border: 2px solid #527d3e; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 100; text-shadow: 2px 2px 0 #000; box-shadow: 0 4px 10px rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 2px; backdrop-filter: blur(4px); }
        
        #crafting-result-container { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; border: 2px solid #2b1a0c; }
        
        #cursor-item { display: none; position: fixed; pointer-events: none; z-index: 10000; width: 48px; height: 48px; }
        #cursor-item img { width: 36px; height: 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
        #cursor-item .item-count { position: absolute; bottom: 2px; right: 4px; font-size: 14px; color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }

/* Dev Menu Styles */
    #dev-menu { scrollbar-width: thin; scrollbar-color: #4a2e1b #1a0e05; }
    #dev-menu ::-webkit-scrollbar { width: 5px; }
    #dev-menu ::-webkit-scrollbar-thumb { background: #4a2e1b; border-radius: 3px; }
    .dev-tab-btn { flex:1; padding:5px 2px; font-size:10px; font-weight:bold; border:1px solid #3a2010; cursor:pointer; transition: all 0.15s; letter-spacing:0.5px; text-transform:uppercase; }
    .dev-tab-btn.active { background:#d4832a; color:#1a0a00; border-color:#ff9944; }
    .dev-tab-btn:not(.active) { background:#2b1a0c; color:#a07040; }
    .dev-tab-btn:hover:not(.active) { background:#3a220f; color:#c89a60; }
    .dev-tab-panel { display:none; flex-direction:column; gap:8px; }
    .dev-tab-panel.active { display:flex; }
    .dev-label { display:flex; justify-content:space-between; align-items:center; color:#e6d3ba; }
    .dev-inp { background:#1a0e05; color:#e6d3ba; border:1px solid #3a2010; padding:3px 5px; border-radius:2px; font-size:11px; }
    .dev-inp:focus { outline:none; border-color:#d4832a; }
    .dev-select { background:#1a0e05; color:#e6d3ba; border:1px solid #3a2010; padding:3px 4px; border-radius:2px; font-size:11px; flex:1; }
    .dev-btn { padding:6px 10px; border-radius:3px; cursor:pointer; font-weight:bold; font-size:11px; border:1px solid transparent; transition: all 0.15s; }
    .dev-btn-green { background:#3a5e28; color:#b8e87a; border-color:#527d3e; }
    .dev-btn-green:hover { background:#4a7a32; }
    .dev-btn-red { background:#5e2828; color:#ff9999; border-color:#993333; }
    .dev-btn-red:hover { background:#7a3232; }
    .dev-btn-red.active { background:#993333; border-color:#ff5555; color:#fff; }
    .dev-btn-blue { background:#1e3a58; color:#7cc8ff; border-color:#2a5a8a; }
    .dev-btn-blue:hover { background:#2a4a6a; }
    .dev-btn-orange { background:#5e3c10; color:#ffc070; border-color:#8a5a20; }
    .dev-btn-orange:hover { background:#7a4e18; }
    .dev-section-label { color:#d4832a; font-size:10px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid #3a2010; padding-bottom:3px; margin-bottom:2px; }
    .dev-range { width:100%; accent-color:#d4832a; }