* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui, sans-serif; }
#game { display: block; width: 100%; height: 100%; }

/* Tinta submersa (docs/WATER.md fase 2): tela inteira azulada quando o olho está na água.
   Overlay DOM (não WebGL) → não compete com a ordenação das transparentes (sem flicker),
   cobre uniformemente a cena. z-index abaixo do HUD (5+), acima do canvas. */
#water-tint { position: fixed; inset: 0; pointer-events: none; z-index: 3; background: rgba(16, 48, 130, 0.7); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.25s linear; }
#water-tint.on { opacity: 1; }

#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; z-index: 5; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #fff; }
#crosshair::before { width: 2px; height: 18px; left: -1px; top: -9px; }
#crosshair::after { width: 18px; height: 2px; left: -9px; top: -1px; }

/* Barra de progresso da mineração (estilo vanilla): abaixo da mira, só enquanto se segura */
#mine-bar { position: fixed; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); width: 44px; height: 5px; background: rgba(0,0,0,0.65); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 0 1px rgba(0,0,0,0.4); pointer-events: none; z-index: 5; display: none; }
#mine-bar.on { display: block; }
#mine-fill { width: 0%; height: 100%; background: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); }

/* --- Hotbar + vitais + XP bar (layout do HUD do Minecraft) --- */
#hud-bottom { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: stretch; width: max-content; }
/* vitais na mesma largura da hotbar: corações alinhados à borda esq, fome/oxigênio à dir */
.vitals-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; pointer-events: none; }
#xp-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 3px; }
.xp-bar { position: relative; width: 100%; height: 8px; background: rgba(0,0,0,0.5); border: 1px solid #1b1b1b; box-shadow: inset 0 2px 0 rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.15); }
.xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #7ee03e; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4); }
/* estado inicial via style inline no HTML (showItemName limpa o inline para exibir) */
#item-name { background: rgba(0,0,0,0.75); color: #fff; font-family: monospace; font-size: 13px; padding: 2px 8px; }
#hotbar { display: flex; background: rgba(0,0,0,0.45); padding: 2px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 1px rgba(0,0,0,0.6); }
.slot { width: 46px; height: 46px; background: rgba(0,0,0,0.35); border: none; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5), inset -2px -2px 0 rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; position: relative; }
.slot.active { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px rgba(0,0,0,0.6), inset 2px 2px 0 rgba(0,0,0,0.5), inset -2px -2px 0 rgba(255,255,255,0.18); }
.slot img { width: 34px; height: 34px; image-rendering: pixelated; border-radius: 3px; pointer-events: none; }
.slot .count { position: absolute; right: 2px; bottom: 0; color: #fff; font-family: monospace; font-size: 14px; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; pointer-events: none; }

/* --- Vitais (HUD do MC): corações à esq. e fome/oxigênio à dir., ambos acima da hotbar --- */
#top-left { position: fixed; top: 8px; left: 8px; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
#health, #hunger, #oxygen { display: flex; gap: 1px; }
#health img, #hunger img { width: 18px; height: auto; image-rendering: pixelated; }
#oxygen img { width: 14px; height: auto; image-rendering: pixelated; }

/* Flash de dano (vignette vermelha) */
#damage-flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, rgba(180,0,0,0) 45%, rgba(180,0,0,0.55) 100%); }
#damage-flash.show { animation: dmgflash 0.6s ease-out; }
@keyframes dmgflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* --- Tela de morte (estilo MC): vinheta vermelha + "Você morreu!" + renascer --- */
#death-screen { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at center, rgba(140,0,0,0.5), rgba(60,0,0,0.78)); }
#death-screen[hidden] { display: none; }
.death-title { color: #fff; font-family: monospace; font-size: 34px; font-weight: bold; letter-spacing: 2px; text-shadow: 2px 2px 0 rgba(0,0,0,0.6); }
#respawn-btn { padding: 10px 34px; background: #67b93e; color: #fff; font-weight: bold; font-size: 16px; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 0 #4c8a2b; font-family: inherit; }
#respawn-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4c8a2b; }

/* --- Painel de inventário / crafting (estilo Minecraft) --- */
#inventory { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; background: #c6c6c6; border: 3px solid #1b1b1b; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.7), inset -2px -2px 0 rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.6); padding: 14px; font-family: monospace; }
#inventory .inv-title { color: #3f3f3f; font-weight: bold; font-size: 13px; margin-bottom: 10px; text-align: center; letter-spacing: 1px; }
#inventory .craft-area { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
#inventory .craft-grid { display: grid; gap: 4px; }
#inventory .craft-arrow { font-size: 26px; color: #3f3f3f; }
#inventory .inv-main, #inventory .inv-hotbar-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
#inventory .inv-hotbar-row { border-top: 2px solid #8b8b8b; padding-top: 8px; margin-top: 4px; }
#inventory .slot { width: 40px; height: 40px; background: #8b8b8b; border-radius: 0; border: 2px solid; border-color: #373737 #fff #fff #373737; }
#inventory .slot img { width: 30px; height: 30px; border-radius: 0; }
#inventory .slot.cursor { box-shadow: inset 0 0 0 3px #fff, 0 0 8px rgba(255,255,255,0.9); } /* cursor do gamepad */
#cursor-item { position: fixed; z-index: 30; pointer-events: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); border-radius: 6px; }
#cursor-item[hidden] { display: none; } /* display:flex acima anula o [hidden] do UA sem esta regra */
#cursor-item img { width: 34px; height: 34px; image-rendering: pixelated; pointer-events: none; }
#cursor-item .count { position: absolute; right: 2px; bottom: 0; color: #fff; font-family: monospace; font-size: 12px; text-shadow: 1px 1px 0 #000; }

/* #stats fica dentro da coluna #top-left (estilo Pocket UI) — sem position fixed */
#stats { color: #fff; font-family: monospace; font-size: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); pointer-events: none; line-height: 1.5; }

#overlay { position: fixed; inset: 0; background: rgba(10, 14, 20, 0.72); display: flex; align-items: center; justify-content: center; z-index: 10; backdrop-filter: blur(3px); }
#overlay .panel { text-align: center; color: #fff; padding: 36px 48px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; }
#overlay h1 { font-size: 34px; letter-spacing: 6px; margin-bottom: 6px; color: #9fe870; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
#overlay .sub { color: #aab; font-size: 13px; margin-bottom: 22px; }
#overlay table { margin: 0 auto 24px; border-collapse: collapse; font-size: 14px; text-align: left; color: #cdd6e4; }
#overlay td { padding: 3px 14px; }
#overlay td:first-child { color: #fff; font-family: monospace; background: rgba(255,255,255,0.08); border-radius: 4px; text-align: center; white-space: nowrap; }
#overlay .menu { display: flex; flex-direction: column; gap: 14px; width: 260px; margin-top: 12px; }
#overlay .mode-btn { padding: 13px 20px; background: #67b93e; color: #fff; font-weight: bold; font-size: 16px; letter-spacing: 1px; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 0 #4c8a2b; }
#overlay .mode-btn:hover { background: #74cc49; }
#overlay .mode-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4c8a2b; }

/* Seleção de personagem (tela de abertura): grade 3x3 com preview do avatar */
#char-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; justify-content: center; margin-bottom: 16px; }
.char-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px 5px; background: rgba(255,255,255,0.07); border: 2px solid transparent; border-radius: 8px; color: #cdd6e4; font-size: 11px; cursor: pointer; }
.char-card:hover { background: rgba(255,255,255,0.16); }
.char-card.sel { border-color: #9fe870; background: rgba(103,185,62,0.22); color: #fff; }
.char-card canvas { image-rendering: pixelated; }
#player-name { display: block; width: 240px; margin: 0 auto 4px; padding: 9px 12px; font-size: 15px; text-align: center; color: #fff; background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.35); border-radius: 8px; outline: none; font-family: inherit; }
#player-name:focus { border-color: #9fe870; }

/* Telas de abertura em etapas (nome+modo → skin+controle touch+entrar) e pausa */
#overlay .panel[hidden] { display: none; }
.ctl-label { color: #aab; font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
.ctl-modes { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.ctl-opt { width: 150px; padding: 8px 10px; background: rgba(255,255,255,0.07); border: 2px solid transparent; border-radius: 8px; color: #cdd6e4; cursor: pointer; font-family: inherit; text-align: center; }
.ctl-opt strong { display: block; color: #fff; font-size: 13px; margin-bottom: 3px; }
.ctl-opt small { display: block; font-size: 10px; line-height: 1.4; color: #9aa7bd; }
.ctl-opt:hover { background: rgba(255,255,255,0.16); }
.ctl-opt.sel { border-color: #9fe870; background: rgba(103,185,62,0.22); }

/* --- Controles touch (tablets/smartphones) --- */
#look-area { position: fixed; inset: 0; z-index: 4; touch-action: none; }
#joy-base { position: fixed; left: 24px; bottom: 96px; width: 132px; height: 132px; border-radius: 50%; background: rgba(0,0,0,0.28); border: 2px solid rgba(255,255,255,0.4); z-index: 6; touch-action: none; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.tbtn { position: fixed; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.4); color: #fff; font-family: inherit; font-size: 11px; font-weight: bold; letter-spacing: 1px; border-radius: 12px; z-index: 6; padding: 0; }
.tbtn:active { background: rgba(255,255,255,0.28); }
/* Coluna direita (estilo Bedrock): PULAR / CORRER / AGACHAR */
#btn-jump { right: 24px; bottom: 168px; width: 84px; height: 84px; border-radius: 50%; font-size: 12px; }
/* INV ao lado da hotbar (estilo Bedrock touch): alinhado à esquerda da faixa */
#btn-inv { left: calc(50% - 279px); bottom: 11px; width: 64px; height: 44px; border-radius: 8px; }
#btn-sprint { right: 36px; bottom: 92px; width: 72px; height: 56px; }
#btn-sneak { right: 36px; bottom: 30px; width: 72px; height: 56px; }
/* Topo central: CHAT + MENU */
#btn-chat { left: calc(50% - 64px); top: 12px; width: 60px; height: 38px; }
#btn-menu { left: calc(50% + 4px); top: 12px; width: 60px; height: 38px; }

/* Toasts no topo-direita (estilo Bedrock) */
#toast { position: fixed; top: 8px; right: 8px; background: rgba(232,232,232,0.92); color: #1b1b1b; padding: 6px 12px; border-radius: 2px; font-family: monospace; font-size: 13px; z-index: 20; }

/* --- Chat (fase 3) — topo-esquerda dentro de #top-left (estilo Bedrock) --- */
#chat-box { width: min(420px, 70vw); pointer-events: none; }
#chat-msgs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.chat-msg { font-family: monospace; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.8); background: rgba(0,0,0,0.25); padding: 2px 6px; border-radius: 4px; animation: chatfade 8s forwards; }
.chat-msg .chat-name { color: #9fe870; font-weight: bold; }
@keyframes chatfade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#chat-input { display: block; width: 100%; background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.35); border-radius: 6px; color: #fff; font-family: monospace; font-size: 13px; padding: 8px 10px; outline: none; pointer-events: auto; }
#chat-input[hidden] { display: none; }
#chat-input::placeholder { color: rgba(255,255,255,0.45); }