@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap');

        .vt323-regular { font-family: "VT323", monospace; font-weight: 400; font-style: normal; }
        .silkscreen-regular { font-family: "Silkscreen", sans-serif; font-weight: 400; font-style: normal; }
        .silkscreen-bold { font-family: "Silkscreen", sans-serif; font-weight: 700; font-style: normal; }

        body { margin: 0; overflow: hidden; touch-action: none; font-family: 'Silkscreen', 'Courier New', monospace; background: #111; color: white; user-select: none; }
        canvas { display: block; }

        .mc-bg {
            background-color: #1a1a1a;
            background-image: repeating-linear-gradient(45deg, #222 25%, transparent 25%, transparent 75%, #222 75%, #222), repeating-linear-gradient(45deg, #222 25%, #1a1a1a 25%, #1a1a1a 75%, #222 75%, #222);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
        }

        button {
            font-family: 'Silkscreen', monospace;
            font-size: 20px;
            cursor: pointer;
            border: 2px solid #000;
            background: #7e7e7e;
            color: #ddd;
            text-shadow: 2px 2px #000;
            box-shadow: inset 2px 2px 0 #bdafa3, inset -2px -2px 0 #57483d;
            padding: 5px 10px;
        }
        button:hover { background: #8f8f8f; color: #fff; }
        button:active { background: #5e5e5e; box-shadow: inset 2px 2px 0 #3d3128, inset -2px -2px 0 #8f8075; }

        #ui-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        .menu-screen { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.75); 
            display: none; flex-direction: column; align-items: center; 
            z-index: 1000; pointer-events: all; 
            padding-top: 5vh; box-sizing: border-box;
        }
        
        .scroll-container {
            width: 100%;
            max-width: 600px;
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 20px;
            scrollbar-width: thin;
            scrollbar-color: #888 #333;
        }
        .scroll-container::-webkit-scrollbar { width: 10px; }
        .scroll-container::-webkit-scrollbar-track { background: #333; }
        .scroll-container::-webkit-scrollbar-thumb { background: #888; border: 1px solid #000; }

        #crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.8; mix-blend-mode: difference; }
        #crosshair::before, #crosshair::after { content: ''; position: absolute; background: white; }
        #crosshair::before { top: 9px; left: 0; width: 20px; height: 2px; }
        #crosshair::after { left: 9px; top: 0; height: 20px; width: 2px; }

        #hotbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; background: rgba(0,0,0,0.5); padding: 2px; border: 2px solid #333; pointer-events: auto; }
        
        .slot { width: 40px; height: 40px; border: 2px solid #555; margin: 2px; background: rgba(0,0,0,0.4); background-size: cover; image-rendering: pixelated; position: relative; pointer-events: all; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5), inset -2px -2px 0 rgba(255,255,255,0.2); }
        .slot:hover { background-color: rgba(255,255,255,0.1); border-color: #aaa; }
        
        /* FIX: Correct CSS selector for selected slot */
        .slot.selected { border-color: #fff; box-shadow: 0 0 0 2px #fff; z-index: 10; }
        
        .item-count { position: absolute; bottom: 0; right: 2px; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 0 #000; pointer-events: none; }
        
        #inventory { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #c6c6c6; border: 4px solid #373737; padding: 10px; display: none; pointer-events: all; box-shadow: 0 10px 30px rgba(0,0,0,0.8); color: #333; }
        .inv-title { margin: 0 0 5px 2px; font-weight: bold; font-size: 18px; color: #404040; }
        .inventory-grid { display: grid; grid-template-columns: repeat(9, 44px); gap: 0; background: #8b8b8b; padding: 2px; border: 2px solid #fff; border-top-color: #373737; border-left-color: #373737; }
        .inventory-grid .slot { border-color: #8b8b8b; background-color: #8b8b8b; width: 40px; height: 40px; margin: 0; border: 2px solid #fff; border-bottom-color: #373737; border-right-color: #373737; }
        
        #drag-icon { position: absolute; width: 40px; height: 40px; pointer-events: none; z-index: 2000; display: none; background-size: cover; image-rendering: pixelated; transform: scale(1.1); }

        .menu-btn { font-size: 20px; padding: 12px 0; width: 300px; margin: 5px; text-align: center; }
        .menu-title { font-size: 48px; color: #fcfcfc; text-shadow: 4px 4px 0 #3f3f3f; margin-bottom: 20px; margin-top: 10px; font-weight: bold; }
        
        .options-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 95%;
            margin-bottom: 20px;
        }

        .option-item {
            width: 100%;
        }

        .slider-container {
            width: 100%;
            background: #7e7e7e;
            border: 2px solid #000;
            padding: 5px;
            box-sizing: border-box;
            text-align: center;
            box-shadow: inset 2px 2px 0 #bdafa3, inset -2px -2px 0 #57483d;
            position: relative;
        }
        .slider-label { display: block; font-size: 16px; margin-bottom: 2px; color: #fff; text-shadow: 1px 1px #000; }
        input[type=range] { width: 90%; cursor: pointer; }
        
        #debug-info { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 16px; text-shadow: 1px 1px 0 #000; }

        #mobile-controls { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 800; }
        #joystick-zone { position: absolute; bottom: 40px; left: 40px; width: 140px; height: 140px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; pointer-events: auto; touch-action: none; }
        #joystick-knob { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
        #action-buttons { position: absolute; bottom: 40px; right: 40px; display: flex; flex-direction: column; gap: 20px; pointer-events: auto; }
        .top-btn { position: absolute; top: 10px; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.4); color: white; z-index: 900; pointer-events: auto; display: flex; justify-content: center; align-items: center; }
        .touch-btn { width: 70px; height: 70px; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; color: white; backdrop-filter: blur(4px); }
        
        @media (hover: none) and (pointer: coarse) {
            #mobile-controls { display: block; }
            .menu-btn { width: 80vw; }
            .options-grid { grid-template-columns: 1fr; }
        }