* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	height: 100%;
	overflow: hidden;
	background: #000;
	overscroll-behavior: none;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

main { position: fixed; inset: 0; }

canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

img { display: none; }

#rotate { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
	#rotate {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 3;
		align-items: center;
		justify-content: center;
		padding: 24px;
		background: #000;
		color: #f3f300;
		font: bold 20px Arial, sans-serif;
		text-align: center;
	}
}

/* Controles táctiles */
[hidden] { display: none !important; }
#touch { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#touch .stick-zone { position: absolute; left: 0; top: 30%; bottom: 0; width: 45%; pointer-events: auto; touch-action: none; }
#touch .stick-base { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.3); }
#touch .stick-knob { position: absolute; left: 26px; top: 26px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
#touch .buttons { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 16px; display: grid; grid-template-columns: repeat(3, 56px); gap: 10px; pointer-events: auto; touch-action: none; }
#touch button { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); color: white; font: bold 18px Arial, sans-serif; touch-action: none; -webkit-tap-highlight-color: transparent; }
#touch button.punch { background: rgba(243, 243, 0, 0.25); }
#touch button.kick { background: rgba(80, 160, 255, 0.25); }
#touch button.on { filter: brightness(2); }