body { margin: 0; background: #0a0a0a; overflow: hidden; font-family: 'Segoe UI', sans-serif; user-select: none; color: white; }
#game-container { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; }
#viewport { flex: 1; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #050505; cursor: crosshair; }
#worldCanvas { image-rendering: pixelated; border: 1px solid #222; background-size: cover; background-position: center; outline: none; }
#ui-tray { height: 70px; background: #111; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 30px; border-top: 1px solid #222; z-index: 100; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; border: 2px solid #111; }
::-webkit-scrollbar-thumb:hover { background: #3abdc2; }

.tool-group { display: flex; flex-direction: row; gap: 12px; }
.icon-text-btn { background: #1a1a1a; border: 1px solid #333; color: #aaa; display: flex; align-items: center; gap: 8px; padding: 0 15px; border-radius: 8px; cursor: pointer; height: 42px; transition: 0.2s; white-space: nowrap; font-size: 14px; font-weight: 600; }
.icon-text-btn:hover { border-color: #3abdc2; color: #fff; background: #222; }
.icon-text-btn img { width: 18px; height: 18px; image-rendering: pixelated; }
.icon-text-btn.active-tool { border-color: #3abdc2; color: #fff; background: rgba(58, 189, 194, 0.15); box-shadow: 0 0 10px rgba(58, 189, 194, 0.2); }

#hotbar-container { position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 90; pointer-events: none; }
#selection-display { background: rgba(0,0,0,0.8); padding: 5px 15px; border-radius: 20px; font-size: 11px; border: 1px solid #333; color: #3abdc2; font-weight: 700; text-transform: uppercase; }
#hotbar { display: flex; gap: 6px; background: rgba(10,10,10,0.9); padding: 8px; border-radius: 12px; border: 1px solid #333; backdrop-filter: blur(10px); pointer-events: auto; }
.slot { width: 48px; height: 48px; background: #1a1a1a; border: 1px solid #444; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot.active { border-color: #3abdc2; background: rgba(58, 189, 194, 0.1); }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; }

.menu-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; background: rgba(22, 22, 22, 0.98); border: 1px solid #333; padding: 25px; border-radius: 16px; z-index: 110; box-shadow: 0 25px 50px rgba(0,0,0,0.8); backdrop-filter: blur(15px); }
.wide-popup { width: 800px; max-width: 90vw; }
.popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; }
.close-btn-fancy { background: #333; border: none; color: white; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.close-btn-fancy:hover { background: #ff4444; }

.ui-search { background: #111; border: 1px solid #333; color: white; padding: 10px; border-radius: 6px; outline: none; width: 100%; box-sizing: border-box; font-size: 14px; }
.grid-display { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; padding: 5px; }

.block-btn { background: #1c1c1c; border: 1px solid #333; padding: 10px 5px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: 0.2s; font-size: 10px; text-align: center; color: #eee; }
.block-btn:hover { background: #252525; border-color: #3abdc2; }
.block-btn img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }

.suggestions-list .block-btn { flex-direction: row; justify-content: flex-start; padding: 8px 15px; border-radius: 0; border: none; border-bottom: 1px solid #222; }

.switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #333; transition: .4s; border-radius: 34px; border: 1px solid #444; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 4px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #1f6aa2; }
input:checked + .slider:before { transform: translateX(20px); }

.fancy-btn { width: 100%; padding: 12px; background: #222; border: 1px solid #444; color: white; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 10px; }
.fancy-btn.highlight { border-color: #3abdc2; color: #3abdc2; }
.fancy-btn.danger { border-color: #ff4444; color: #ff8888; }

.hidden { display: none !important; }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 105; backdrop-filter: blur(3px); }

#coords-display { position: absolute; top: 20px; right: 20px; background: rgba(10, 10, 10, 0.85); border: 1px solid #333; padding: 8px 15px; border-radius: 8px; color: #3abdc2; font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; pointer-events: none; z-index: 200; box-shadow: 0 4px 10px rgba(0,0,0,0.5); letter-spacing: 1px;}