::-webkit-scrollbar { 
	width: 16px;
}
::-webkit-scrollbar-track { 
	background-color: #333;
} 
::-webkit-scrollbar-thumb { 
	background-color: #424e69;
}
::-webkit-scrollbar-thumb:hover { 
	background-color: #8295d5;
}

@font-face { 
	font-family: 'Quadrit'; 
	src: url('../css/Quadrit.ttf'); 
}

* { 
	font-family: Quadrit, sans-serif;
	font-size: 20px;
	color: #fff;
}

html, body { 
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html { 
	background-color: #000;
}
body { 
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #000;
	overflow: hidden;
}

h1, #score, #highscore { 
	display: inline-block;
	vertical-align: top;
	position: relative !important;
	top: 0px !important;
	left: 0px !important;
	margin: 10px 15px 0px 15px !important;
	width: auto !important;
}
#score h2, #score span, #highscore h2, #highscore span { 
	display: block;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 16px;
	height: 21px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	padding-right: 0px;
}
#score span, #highscore span { 
	padding-right: 0px;
}
#highscore span { 
	padding-right: 40px;
}
#message { 
	position: absolute;
	display: inline;
	top: 413px;
	left: 180px;
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 30px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 20px;
	color: #fff200;
	text-align: center;
}
#message.red { 
	color: red;
}

span.combo, span.fruits { 
	position: absolute;
	letter-spacing: 1.5px;
	font-size: 14px;
	color: #89dfff;
	font-weight: normal;
}

/* ── Core game container: always 550px internally, scaled by JS ── */
#panel, #home { 
	width: 550px;
	height: 690px;
	margin: 0;
	padding: 5px 10px 10px 10px;
	background-color: #000;
	transform-origin: top center;
	/* JS will set transform: scale() at runtime */
}

#board, #canvas-board, #canvas-paths, #canvas-fruits, #canvas-pacman, #canvas-bubbles, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde, #img-ghost-blinky, #img-ghost-pinky, #img-ghost-inky, #img-ghost-clyde, #img-pacman { 
	width: 550px;
	height: 550px;
	position: absolute;
}
#canvas-paths { 
	display: none;
}
#canvas-pacman, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde {
	display: none !important;
}
#img-ghost-blinky, #img-ghost-pinky, #img-ghost-inky, #img-ghost-clyde, #img-pacman {
	width: auto;
	height: auto;
	display: none;
	object-fit: contain;
	z-index: 10;
}
#board {
	position: relative;
}

#canvas-lifes, #canvas-level-fruits { 
	height: 30px;
	top: 670px;
	position: absolute;
	z-index: 111111;
}
#canvas-lifes { 
	width: 120px;
	left: 50px;
}
#canvas-level-fruits { 
	width: 265px;
	right: 50px;
}

/* ── Mobile D-pad: hidden on desktop, shown on touch ── */
#mobile-dpad {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 160px;
	background-color: rgba(0,0,0,0.75);
	z-index: 99999;
	touch-action: none;
}

#mobile-dpad-inner {
	position: relative;
	width: 160px;
	height: 160px;
	margin: 0 auto;
}

.dpad-btn {
	position: absolute;
	width: 52px;
	height: 52px;
	background-color: rgba(255,255,255,0.12);
	border: 2px solid rgba(255,255,255,0.25);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
	transition: background-color 0.1s;
}
.dpad-btn:active,
.dpad-btn.active {
	background-color: rgba(25, 63, 255, 0.6);
	border-color: #193fff;
}
.dpad-btn svg {
	width: 28px;
	height: 28px;
	fill: #fff;
	pointer-events: none;
}

#dpad-up    { top: 0;   left: 54px; }
#dpad-down  { bottom: 0; left: 54px; }
#dpad-left  { top: 54px; left: 0; }
#dpad-right { top: 54px; right: 0; }
#dpad-center {
	position: absolute;
	top: 54px; left: 54px;
	width: 52px; height: 52px;
	background-color: rgba(255,255,255,0.05);
	border-radius: 50%;
}

/* Pause button in mobile dpad bar */
#mobile-pause {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	background-color: rgba(255,255,255,0.12);
	border: 2px solid rgba(255,255,255,0.25);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
}
#mobile-pause:active { background-color: rgba(25,63,255,0.5); }

/* Old controls — hidden, still wired for keyboard fallback */
#control { 
	display: none !important;
}
#control-up, #control-down, #control-up-second, #control-down-second, #control-left, #control-right,
#control-up-big, #control-down-big, #control-left-big, #control-right-big { 
	display: none !important;
}

h1 { 
	margin: 10px 15px 25px 15px !important;
	padding: 0px;
	font-size: 24px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	font-style: normal;
}

h3 { 
	margin: 0px;
	padding: 0px;
	font-size: 20px;
	letter-spacing: 2px;
	color: #fff;
	text-transform: uppercase;
	font-style: normal;
}

.sound { 
	position: absolute;
}
.sound img { 
	height: 28px;
}
#home .sound { 
	bottom: 0px;
	right: 5px;
}
#panel .sound { 
	top: 15px;
	right: 5px;
}

.github { 
	position: absolute;
	bottom: 0px;
	left: 5px;
}

.help-button { 
	position: absolute;
	text-align: center;
	bottom: 8px;
	right: 55px;
	margin: auto;
	font-size: 14px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	color: #78abf7;
	transition: color 1.5s;
}
.help-button.yo { 
	color: #333;
}
#panel .help-button { 
	top: -510px;
	height: 25px;
}

#help h2 { 
	margin: 0px 0px 10px 0px;
	color: #d43b3b;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 26px;
}
#help { 
	position: fixed;
	width: 320px;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 15px;
	text-align: center;
	z-index: 9999999;
	background-color: #222;
	border: solid 1px #193fff;
	text-transform: uppercase;
	opacity: 0.95;
	display: none;
	cursor: pointer;
}
#help table tr td { 
	font-size: 16px;
	letter-spacing: 1px;
}
#help table tr td:first-child { 
	color: #f4c030;
	font-weight: bold;
	text-align: right;
}
#help table tr td:last-child { 
	text-align: left;
}

#sound { 
	position: absolute;
}

.ui-mobile {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ── Panel header layout ── */
#panel h1, 
#panel #canvas-panel-title-pacman, 
#panel #score, 
#panel #highscore { 
	display: inline-block !important;
	vertical-align: middle !important;
	position: relative !important;
	top: 0px !important;
	left: 0px !important;
	margin: 5px 12px 0px 12px !important;
	width: auto !important;
}

#panel #canvas-panel-title-pacman {
	content: url('../img/img 2.png') !important;
	width: 38px !important;
	height: 32px !important;
	object-fit: contain !important;
}

#panel h1 { 
	margin-bottom: 20px !important;
	font-size: 24px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
}

/* ── Touch device: show d-pad, hide help/sound clutter ── */
@media (pointer: coarse) {
	#mobile-dpad {
		display: block;
	}
	body {
		justify-content: flex-start;
		padding-top: 8px;
	}
	.help-button,
	.github,
	.sound {
		display: none !important;
	}
}

/* ── Desktop tall screens ── */
@media screen and (min-height: 1200px) { 
	/* scaling handled by JS */
}