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

body {
	background: #000;
	overflow: hidden;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow: hidden;
}

main {
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

img {
	display: none;
}

#touch-controls {
	display: none;
}

/* Online Battle Button */
#online-btn-container {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	z-index: 20;
}

#online-battle-btn {
	background: #c41e3a;
	color: #fff;
	border: 2px solid #ff4466;
	border-radius: 8px;
	padding: 10px 32px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	cursor: pointer;
	box-shadow: 0 0 12px rgba(196, 30, 58, 0.5);
	-webkit-tap-highlight-color: transparent;
}

#online-battle-btn:active {
	transform: scale(0.95);
	filter: brightness(1.2);
}

#online-battle-btn.hidden {
	display: none;
}

/* Lobby Overlay */
#lobby-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 26, 0.95);
	z-index: 100;
	justify-content: center;
	align-items: center;
}

#lobby-overlay.active {
	display: flex;
}

#lobby-content {
	text-align: center;
	font-family: Arial, sans-serif;
	max-width: 90vw;
}

#lobby-title {
	color: #ff4444;
	font-size: 28px;
	margin-bottom: 24px;
	letter-spacing: 3px;
}

#lobby-room {
	color: #ffffff;
	font-size: 32px;
	font-family: monospace;
	font-weight: bold;
	margin: 16px 0;
	letter-spacing: 4px;
}

#lobby-link {
	color: #44aaff;
	font-size: 13px;
	font-family: monospace;
	word-break: break-all;
	margin: 12px 0;
	padding: 8px 12px;
	background: rgba(68, 170, 255, 0.1);
	border-radius: 6px;
	cursor: pointer;
}

#lobby-link:active {
	background: rgba(68, 170, 255, 0.2);
}

#lobby-waiting {
	color: #ffcc00;
	font-size: 18px;
	margin: 20px 0;
}

#lobby-player {
	color: #888;
	font-size: 14px;
}

#lobby-status {
	color: #aaa;
	font-size: 16px;
}

/* ========================================
   MOBILE PORTRAIT LAYOUT
   ======================================== */

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
	main {
		height: 58vh;
		height: 58dvh;
		width: 100vw;
		background: #000;
		overflow: hidden;
	}

	canvas {
		display: block;
		width: 100vw !important;
		height: 58vh !important;
		height: 58dvh !important;
		object-fit: fill;
	}

	#touch-controls {
		display: flex;
		flex-direction: column;
		height: 42vh;
		height: 42dvh;
		width: 100vw;
		background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
		border-top: 2px solid #333;
		padding: 4px 8px 8px;
	}

	/* Player Tabs */
	.player-tabs {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-bottom: 6px;
		flex-shrink: 0;
	}

	.player-tab {
		font-family: 'Courier New', monospace;
		font-size: 14px;
		font-weight: bold;
		padding: 5px 28px;
		border: 2px solid #444;
		border-radius: 6px;
		background: #1a1a2e;
		color: #666;
		cursor: pointer;
		text-transform: uppercase;
		letter-spacing: 2px;
		transition: all 0.15s;
		-webkit-tap-highlight-color: transparent;
	}

	.player-tab.active {
		background: #c41e3a;
		color: #fff;
		border-color: #ff4466;
		box-shadow: 0 0 12px rgba(196, 30, 58, 0.5);
	}

	/* Controls Row */
	.controls-row {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		padding: 0 6px;
		min-height: 0;
	}

	/* ====== D-PAD ====== */
	.dpad-container {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dpad {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		width: min(38vw, 180px);
		height: min(38vw, 180px);
		gap: 3px;
	}

	.dpad-btn {
		border: none;
		border-radius: 8px;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.08s;
	}

	.dpad-up {
		grid-column: 2;
		grid-row: 1;
		background: #2a2a4a;
		color: #aaa;
		border: 2px solid #3a3a5a;
	}

	.dpad-left {
		grid-column: 1;
		grid-row: 2;
		background: #2a2a4a;
		color: #aaa;
		border: 2px solid #3a3a5a;
	}

	.dpad-center {
		grid-column: 2;
		grid-row: 2;
		background: #1a1a30;
		border-radius: 50%;
		border: 2px solid #2a2a4a;
	}

	.dpad-right {
		grid-column: 3;
		grid-row: 2;
		background: #2a2a4a;
		color: #aaa;
		border: 2px solid #3a3a5a;
	}

	.dpad-down {
		grid-column: 2;
		grid-row: 3;
		background: #2a2a4a;
		color: #aaa;
		border: 2px solid #3a3a5a;
	}

	.dpad-btn.pressed {
		background: #5555aa;
		border-color: #7777cc;
		color: #fff;
	}

	/* ====== ACTION BUTTONS ====== */
	.action-buttons {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}

	.btn-row {
		display: flex;
		gap: 8px;
	}

	.action-btn {
		width: min(14vw, 64px);
		height: min(14vw, 64px);
		border-radius: 50%;
		border: 3px solid;
		font-family: 'Courier New', monospace;
		font-size: 11px;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		transition: all 0.08s;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	}

	/* Punch colors - warm */
	.action-btn.punch.light {
		background: radial-gradient(circle at 35% 35%, #f0c040, #c89a20);
		border-color: #e0b030;
		box-shadow: 0 3px 8px rgba(240, 192, 64, 0.3);
	}

	.action-btn.punch.medium {
		background: radial-gradient(circle at 35% 35%, #e08030, #b86020);
		border-color: #d07020;
		box-shadow: 0 3px 8px rgba(224, 128, 48, 0.3);
	}

	.action-btn.punch.heavy {
		background: radial-gradient(circle at 35% 35%, #d03030, #a01818);
		border-color: #c02020;
		box-shadow: 0 3px 8px rgba(208, 48, 48, 0.3);
	}

	/* Kick colors - cool */
	.action-btn.kick.light {
		background: radial-gradient(circle at 35% 35%, #40c0e0, #209aa0);
		border-color: #30b0c0;
		box-shadow: 0 3px 8px rgba(64, 192, 224, 0.3);
	}

	.action-btn.kick.medium {
		background: radial-gradient(circle at 35% 35%, #4060e0, #2040b0);
		border-color: #3050d0;
		box-shadow: 0 3px 8px rgba(64, 96, 224, 0.3);
	}

	.action-btn.kick.heavy {
		background: radial-gradient(circle at 35% 35%, #8030d0, #6020a0);
		border-color: #7028c0;
		box-shadow: 0 3px 8px rgba(128, 48, 208, 0.3);
	}

	.action-btn.pressed {
		transform: scale(0.9);
		filter: brightness(1.4);
		box-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
	}
}