:root {
	--ink: #f8fbff;
	--muted: #aebbd2;
	--panel: rgba(8, 14, 31, 0.84);
	--line: rgba(255, 255, 255, 0.16);
	--gold: #ffd166;
	--cyan: #63e6ff;
	--pink: #ff4fd8;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: Nunito, system-ui, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 14% 12%, rgba(99, 230, 255, 0.24), transparent 30%),
		radial-gradient(circle at 88% 18%, rgba(255, 79, 216, 0.18), transparent 25%),
		linear-gradient(145deg, #080b1c 0%, #151b39 48%, #050712 100%);
	overflow-x: hidden;
	touch-action: manipulation;
}

button, a { font: inherit; }

.app-shell {
	min-height: 100vh;
	padding: clamp(0.45rem, 1.4vw, 1rem);
}

.topbar, .side-panel, .table-panel, .bottom-actions {
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
	backdrop-filter: blur(14px);
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-radius: 1.4rem;
	padding: 0.65rem 0.95rem;
}

.eyebrow {
	margin: 0 0 0.2rem;
	color: var(--cyan);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

h1, h2, p { margin: 0; }

h1 {
	font-family: Bungee, system-ui, sans-serif;
	font-size: clamp(1.8rem, 5.2vw, 3.6rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-shadow: 0 0 18px rgba(99, 230, 255, 0.44), 4px 5px 0 rgba(255, 79, 216, 0.28);
}

h2 {
	font-size: 1.08rem;
	font-weight: 800;
}

.top-actions, .table-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.bottom-actions {
	position: relative;
	z-index: 4;
	justify-content: center;
	margin: 1rem auto 0;
	border-radius: 1.15rem;
	padding: 1rem;
}

button, #goBack {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 0.64rem 0.92rem;
	background: linear-gradient(135deg, #192962, #213d8f);
	color: var(--ink);
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

button:hover, button:focus-visible, #goBack:hover, #goBack:focus-visible {
	outline: none;
	transform: translateY(-2px);
	border-color: var(--cyan);
}

.game-layout {
	display: grid;
	grid-template-columns: minmax(300px, 680px) minmax(250px, 330px);
	justify-content: center;
	align-items: start;
	gap: .75rem;
	margin-top: .55rem;
}

.table-panel {
	position: relative;
	min-height: 0;
	border-radius: 2rem;
	padding: clamp(0.5rem, 1.4vw, 0.8rem);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

#pinballCanvas {
	display: block;
	width: 100%;
	height: min(82vh, calc(100dvh - 122px));
	min-height: 520px;
	border-radius: 1.45rem;
	background: #070b19;
	box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.72);
}

.table-hud {
	position: absolute;
	inset: .75rem .75rem auto;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	pointer-events: none;
}

.hud-badge {
	min-width: 5.3rem;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: .85rem;
	padding: .38rem .55rem;
	background: rgba(5, 9, 24, .68);
	box-shadow: 0 10px 24px rgba(0,0,0,.28);
	backdrop-filter: blur(10px);
}

.hud-badge span {
	display: block;
	color: var(--muted);
	font-size: .58rem;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.hud-badge strong {
	display: block;
	margin-top: .05rem;
	color: var(--gold);
	font-size: clamp(.95rem, 3.2vw, 1.3rem);
	line-height: 1;
}

.balls-badge { text-align: right; }

.touch-zone {
	position: absolute;
	right: auto;
	bottom: 0.8rem;
	width: 42%;
	height: 23%;
	display: grid;
	place-items: end center;
	padding-bottom: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.25rem;
	background: linear-gradient(180deg, transparent, rgba(99, 230, 255, 0.12));
	color: rgba(248, 251, 255, 0.72);
	font-weight: 800;
	pointer-events: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: clamp(0.68rem, 2.5vw, 0.82rem);
}

.left-zone { left: 0.8rem; }
.right-zone { right: 0.8rem; left: auto; background: linear-gradient(180deg, transparent, rgba(255, 79, 216, 0.13)); }

.side-panel {
	border-radius: 1.35rem;
	padding: 1rem;
	position: sticky;
	top: 1rem;
}

.table-buttons {
	margin: 0.8rem 0 1rem;
}

.table-button {
	width: 100%;
	justify-content: flex-start;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.07);
	text-align: left;
}

.table-button.active {
	border-color: var(--gold);
	background: linear-gradient(135deg, rgba(255, 209, 102, 0.24), rgba(99, 230, 255, 0.14));
}

.how-to {
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.how-to p {
	margin-top: 0.65rem;
	color: var(--muted);
	line-height: 1.45;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 860px) {
	.app-shell { padding: 0.55rem; }
	.topbar { border-radius: 1.1rem; }
	.game-layout { grid-template-columns: 1fr; }
	.side-panel { position: static; }
	#pinballCanvas { height: calc(100dvh - 156px); min-height: 470px; }
}

@media (max-width: 520px) {
	.top-actions button, #goBack { padding: 0.56rem 0.72rem; }
	.bottom-actions { align-items: center; flex-direction: row; gap: .42rem; margin-top: .45rem; padding: .55rem; }
	.bottom-actions button, .bottom-actions #goBack { flex: 1 1 7.5rem; font-size: .88rem; }
	#pinballCanvas { min-height: 430px; height: calc(100dvh - 150px); }
	.side-panel { padding: 0.75rem; }
	.side-panel h2 { font-size: 0.95rem; }
	.table-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin: 0.6rem 0 0; }
	.table-button { width: auto; padding: 0.56rem 0.45rem; text-align: center; justify-content: center; }
	.how-to { display: none; }
}
@media (max-width: 520px) {
	.topbar { padding: .55rem .7rem; }
	.eyebrow { display: none; }
	h1 { font-size: clamp(1.45rem, 8vw, 2rem); }
	#pinballCanvas { min-height: 0; height: clamp(355px, calc(100dvh - 150px), 610px); }
	.table-panel { border-radius: 1.1rem; padding: .35rem; }
	.table-buttons { margin: .4rem 0 0; }
	.table-hud { inset: .55rem .55rem auto; }
	.hud-badge { min-width: 4.5rem; padding: .3rem .45rem; border-radius: .7rem; }
}
#goBack{display:inline-flex;align-items:center;justify-content:center;text-align:center}