/* Games page styles - matching site theme */
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }

/* HEADER */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 110px;
  padding: 0 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 18, 32, .92);
  backdrop-filter: blur(10px);
  z-index: 1002;
}

header strong { font-size: 1.7rem; font-weight: 600; word-spacing: 0.7rem; }
header nav { display: flex; }
nav a { margin-left: 28px; color: var(--muted); font-size: 1.15rem; font-weight: 600; text-decoration: none; transition: .3s; }
nav a:hover { color: var(--text); text-shadow: 0 0 1px var(--text); }

/** Main content */
.games-wrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 6vw;
	margin-top: 110px;
}

/* Überschrift im gleichen Stil wie auf der Index-Seite */

.buttons { 
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
    margin-top: 50px;
	justify-items: center;
	align-items: center;
	max-width: 900px;
	width: 100%;
}

/* Dunkle, rechteckige Buttons mit hellem Rand und Text */
.btn {
	background: var(--panel);
	color: var(--text);
	border: 2px solid #141c2c;
	padding: 0;
	aspect-ratio: 3 / 2;
	width: 100%;
	max-width: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 800;
	letter-spacing: 0.2px;
	box-shadow: 0 8px 24px rgba(2,6,12,0.6);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s;
	text-align: center;
}

.btn:hover {
	transform: translateY(-6px);

	box-shadow: 0 18px 40px #172133;
	border: 2px solid #202d46;
}

/* Tablet: zwei Buttons pro Reihe */
@media (max-width: 1024px) {
	.games-wrap { padding: 5vw; }
	.buttons { gap: 36px; max-width: 700px;}
	.btn { max-width: 240px; }
}

/* Mobile: Header vertikal, Buttons untereinander */
@media (max-width: 700px) {
	header {
		height: auto;
		flex-direction: column;
		padding: 12px 5%;
		gap: 12px;
		justify-content: center;
	}
	header strong { font-size: 1.3rem; word-spacing: 0.3rem; }
	header nav { flex-direction: column; }
	nav a { margin-left: 0; font-size: 0.95rem; }

	.games-wrap {
		padding: 4vw;
		margin-top: 0;
		justify-content: flex-start;
		padding-top: 20px;
	}
	.buttons {
		grid-template-columns: 1fr;
		gap: 20px;
		width: 100%;
		max-width: 100%;
		margin-top: 100px;
	}
	.btn {
		max-width: 100%;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}