* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; touch-action:none; user-select:none;
            font-family:system-ui,-apple-system,sans-serif; color:#e8eef5; }
#game-canvas { position:fixed; inset:0; touch-action:none; }

/* HUD superior */
#hud-top { position:fixed; top:8px; left:8px; right:8px; display:flex; justify-content:space-between; align-items:flex-start; z-index:10; pointer-events:none; }
#char-info { background:rgba(0,0,0,0.6); padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); min-width:180px; }
#char-name { font-weight:700; font-size:14px; margin-bottom:4px; color:#6ee7c8; }
#hp-bar, #xp-bar { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; margin-top:3px; }
#hp-fill { height:100%; background:linear-gradient(90deg,#e0523f,#ff7a5c); width:100%; transition:width 0.2s; }
#xp-fill { height:100%; background:linear-gradient(90deg,#5b8def,#8b5cf6); width:0%; }
#status-icons { display:flex; gap:8px; font-size:12px; background:rgba(0,0,0,0.6); padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); }

/* Botão de ação contextual (grande, mobile-friendly) */
#action-btn { position:fixed; bottom:120px; right:16px; width:80px; height:80px; border-radius:50%;
              background:linear-gradient(135deg,#6ee7c8,#22c55e); border:3px solid #fff; font-size:28px;
              box-shadow:0 4px 20px rgba(110,231,200,0.5); z-index:20; cursor:pointer; color:#000;
              transition:transform 0.1s; touch-action:manipulation; }
#action-btn.hidden { display:none; }
#action-btn:active { transform:scale(0.92); }

/* Skill bar inferior */
#skill-bar { position:fixed; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:20; }
.skill-btn { width:56px; height:56px; border-radius:12px; background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.2);
              color:#fff; font-size:24px; cursor:pointer; transition:transform 0.1s; touch-action:manipulation; }
.skill-btn:active { transform:scale(0.92); background:rgba(110,231,200,0.3); }

/* Joystick */
#joystick-zone { position:fixed; left:0; bottom:0; width:50%; height:50%; z-index:15; touch-action:none; }
#joystick-base { position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.1);
                  border:2px solid rgba(255,255,255,0.3); display:none; }
#joystick-knob { position:absolute; width:50px; height:50px; border-radius:50%; background:#6ee7c8; top:35px; left:35px;
                  box-shadow:0 2px 8px rgba(0,0,0,0.5); }

/* Painel de menu */
#menu-panel { position:fixed; top:0; right:0; width:280px; height:100%; background:rgba(0,0,0,0.9);
               border-left:1px solid rgba(255,255,255,0.1); padding:16px; z-index:30; overflow-y:auto; transition:transform 0.2s; }
#menu-panel.hidden { transform:translateX(100%); }
.panel-section { margin-bottom:24px; }
.panel-section h3 { color:#ffd166; font-size:14px; margin-bottom:8px; }
#inventory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.inv-slot { aspect-ratio:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:4px;
            padding:4px; font-size:18px; text-align:center; }
.inv-slot.filled { background:rgba(110,231,200,0.15); border-color:#6ee7c8; }
#minimap { width:100%; border-radius:6px; background:#0a0d11; border:1px solid rgba(255,255,255,0.1); }
#menu-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,0.1); border:none; color:#fff;
              width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; }

/* Dialog NPC */
#npc-dialog { position:fixed; bottom:180px; left:50%; transform:translateX(-50%); width:85%; max-width:380px;
              background:rgba(10,15,20,0.95); border:1px solid rgba(255,255,255,0.2); border-radius:12px;
              padding:14px; z-index:40; box-shadow:0 8px 30px rgba(0,0,0,0.7); }
#npc-dialog.hidden { display:none; }
#npc-dialog h3 { color:#ffd166; margin-bottom:6px; }
#npc-text { color:#c8d0d8; font-size:13px; margin-bottom:12px; line-height:1.4; }
#npc-options button { display:block; width:100%; margin:4px 0; padding:10px; background:#2a2f3a; color:#fff;
                      border:1px solid rgba(255,255,255,0.15); border-radius:8px; text-align:left;
                      font:600 13px system-ui; cursor:pointer; transition:background 0.15s; }
#npc-options button:hover { background:#3a4152; }

/* Loading */
#loading { position:fixed; inset:0; background:#000; color:#6ee7c8; display:flex; align-items:center; justify-content:center; z-index:100; font:600 16px system-ui; flex-direction:column; gap:12px; }
.spinner { width:50px; height:50px; border:3px solid rgba(110,231,200,0.2); border-top-color:#6ee7c8; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.hidden { display:none !important; }