:root { --sky-blue: #4a82d4; --text-color: #fff; --coin-gold: #e7a526; --lives-red: #e74c3c; --hud-bg: rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--sky-blue); color: var(--text-color); font-family: 'Outfit', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } #game-container { position: relative; width: 100%; max-width: 95vw; max-height: 90vh; aspect-ratio: 800 / 600; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); overflow: hidden; } #gameCanvas { width: 100%; height: 100%; display: block; } /* HUD */ #ui-overlay { position: absolute; top: 0; left: 0; right: 0; /* Padding-direito maior reserva espaco pro botao de som (e o de pausa no touch), pra o ultimo item do HUD (POS X) nao ficar atras deles. */ padding: 10px 60px 10px 24px; background: var(--hud-bg); display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 10; } /* No toque aparecem 2 botoes (som + pausa) — reserva mais espaco a direita. */ body.touch-on #ui-overlay { padding-right: 108px; } .hud-item { text-align: center; min-width: 80px; } .hud-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; opacity: 0.8; margin-bottom: 2px; } .hud-value { font-size: 1.3rem; font-weight: 900; } .hud-coins { color: var(--coin-gold); } .hud-lives { color: var(--lives-red); } .hud-pos { color: #7ec8ff; font-variant-numeric: tabular-nums; } /* ===== Botao de som (mudo) ===== */ #btn-mute { position: absolute; top: 8px; right: 10px; z-index: 20; width: 40px; height: 40px; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #btn-mute:hover { background: rgba(0, 0, 0, 0.65); } /* ===== Controles de toque (mobile/tablet) ===== */ /* Escondidos por padrao; game.js adiciona .touch-on ao em dispositivos de toque. */ #touch-controls { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; padding: 0 18px 18px; justify-content: space-between; align-items: flex-end; pointer-events: none; /* nao intercepta o resto; so os botoes recebem toque */ } body.touch-on #touch-controls { display: flex; } .touch-dpad, .touch-actions { display: flex; gap: 14px; pointer-events: none; } .touch-btn { pointer-events: auto; width: 62px; height: 62px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.38); color: #fff; font-size: 22px; font-weight: 900; font-family: 'Outfit', sans-serif; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; } .touch-btn.touch-jump { width: 84px; height: 84px; font-size: 16px; background: rgba(46, 204, 113, 0.4); border-color: rgba(46, 204, 113, 0.6); } .touch-btn.active { background: rgba(255, 255, 255, 0.55); color: #222; } /* ===== Campo de nome (mobile) ===== */ /* Escondido por padrao; game.js mostra (.name-on) so na tela de digitar nome. Posicionado sobre a caixa desenhada no canvas (box em y=290..360 de 600). */ #name-input { display: none; position: absolute; left: 26%; top: 48.3%; width: 48%; height: 11%; z-index: 25; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); border: 3px solid #2ecc71; border-radius: 6px; color: #fff; font-family: monospace; font-weight: bold; font-size: 5vh; text-align: center; text-transform: uppercase; outline: none; /* Reforca selecao de texto: body.mobile poe user-select:none, e alguns WebKit/iOS herdam isso no input e travam a digitacao — justo o que este campo serve. Forcamos 'text' aqui pra garantir a edicao. */ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #name-input.name-on { display: block; } /* ===== Botao de pausa (so em toque) ===== */ #btn-pause { display: none; /* game.js mostra via body.touch-on */ position: absolute; top: 8px; right: 56px; /* a esquerda do botao de som */ z-index: 20; width: 40px; height: 40px; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } body.touch-on #btn-pause { display: flex; } /* ===== Adaptacao mobile ===== */ /* game.js adiciona body.mobile em celulares. Ai o container ocupa a tela toda (sem moldura), e desabilitamos selecao/zoom/scroll que atrapalham o toque. */ body.mobile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; } body.mobile #game-container { max-width: 100vw; max-height: 100vh; border-radius: 0; box-shadow: none; touch-action: none; /* evita scroll/zoom ao arrastar sobre o jogo */ } /* ===== Aviso "gire o celular" (so mobile em retrato) ===== */ #rotate-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: #0a1628; color: #fff; align-items: center; justify-content: center; text-align: center; padding: 24px; } .rotate-inner { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.5; } .rotate-icon { font-size: 4rem; margin-bottom: 16px; animation: rotate-hint 1.6s ease-in-out infinite; } @keyframes rotate-hint { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(75deg); } } /* Em celular no modo retrato, cobre a tela pedindo pra girar. Em paisagem some. */ @media (orientation: portrait) { body.mobile #rotate-overlay { display: flex; } }