:root {
	--ink: #f8fbff;
	--line: rgba(255, 255, 255, 0.18);
	--sun: #ffd166;
	--shadow: 0 18px 46px rgba(8, 10, 38, 0.34);
	--tile-w: clamp(2.9rem, 6.8vw, 4.1rem);
	--tile-h: calc(var(--tile-w) * 1.25);
	--x-step: calc(var(--tile-w) + 0.22rem);
	--y-step: calc(var(--tile-h) * 0.72);
	--board-cols: 16;
	--board-rows: 12;
}

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

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

body {
	margin: 0;
	font-family: Nunito, system-ui, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 14% 12%, rgba(255, 209, 102, 0.24), transparent 24%),
		radial-gradient(circle at 84% 20%, rgba(156, 255, 210, 0.2), transparent 22%),
		linear-gradient(160deg, #14223d 0%, #0f4455 56%, #23704d 100%);
	touch-action: manipulation;
}

.app-shell {
	height: 100dvh;
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 0.55rem;
	padding: calc(0.45rem + env(safe-area-inset-top)) calc(0.55rem + env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) calc(0.55rem + env(safe-area-inset-left));
}

.topbar,
.board-panel,
.status-text,
.chip {
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	backdrop-filter: blur(14px);
}

.topbar {
	display: flex;
	min-width: 0;
	justify-content: space-between;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	border-radius: 1.2rem;
	background: rgba(6, 20, 36, 0.78);
}

.topbar > :first-child {
	min-width: 0;
	flex: 1 1 auto;
}

.eyebrow,
.subtitle,
.version-pill,
.status-text { margin: 0; }

.eyebrow {
	color: var(--sun);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-family: Fredoka, system-ui, sans-serif;
	font-size: clamp(1.3rem, 4vw, 2.4rem);
	line-height: 0.95;
}

.subtitle {
	margin-top: 0.2rem;
	font-size: clamp(0.78rem, 2vw, 0.96rem);
	color: rgba(248, 251, 255, 0.88);
}

.version-pill {
	display: inline-flex;
	margin-top: 0.3rem;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.7rem;
	font-weight: 900;
}

.toolbar-actions {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	gap: 0.42rem;
	justify-content: flex-end;
}

.layout-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

#layoutSelectLabel {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-inline: 0.75rem;
	font-weight: 900;
	color: #fff;
	pointer-events: none;
}

#goBack,
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.52rem 0.75rem;
	background: linear-gradient(135deg, #ffd166, #ef476f);
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

#layoutSelect {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 0.52rem 1.35rem;
	background: linear-gradient(135deg, #2dd4bf, #3b82f6);
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
	text-align: center;
	text-align-last: center;
	appearance: none;
	background-image: linear-gradient(135deg, #2dd4bf, #3b82f6), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: center, right 0.55rem center;
	cursor: pointer;
}

#layoutSelect option {
	color: #17324f;
	text-align: center;
}

.play-layout {
	min-height: 0;
	min-width: 0;
}

.board-panel {
	height: 100%;
	min-width: 0;
	border-radius: 1.2rem;
	background: rgba(255, 255, 255, 0.12);
	padding: 0.45rem;
	display: grid;
	place-items: center;
	overflow: auto;
}

.board {
	position: relative;
	width: max-content;
	height: auto;
	margin: 0 auto;
	border-radius: 0.8rem;
	background: linear-gradient(145deg, rgba(9, 36, 28, 0.85), rgba(16, 61, 47, 0.85));
	overflow: hidden;
	touch-action: none;
}

.tile {
	position: absolute;
	width: var(--tile-w);
	height: var(--tile-h);
	border-radius: 0.5rem;
	border: 1px solid rgba(22, 50, 79, 0.18);
	background:
		linear-gradient(125deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 35%),
		linear-gradient(180deg, #fffef9, #f7f2e4);
	box-shadow:
		0 1px 0 #ffffff inset,
		0 -1px 0 rgba(193, 182, 154, 0.65) inset,
		0 4px 0 #d8cfba,
		3px 4px 0 #c7bda7,
		8px 12px 22px rgba(0, 0, 0, 0.24);
	display: grid;
	place-items: center;
	font-size: clamp(0.78rem, 1.9vw, 1rem);
	font-weight: 900;
	color: #17324f;
	padding: 0;
	user-select: none;
	touch-action: none;
	transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.tile::after {
	content: '';
	position: absolute;
	left: 10%;
	right: 4%;
	bottom: -0.5rem;
	height: 0.52rem;
	border-radius: 999px;
	background: rgba(4, 14, 28, 0.42);
	filter: blur(4px);
	z-index: -1;
	pointer-events: none;
	transition: transform 0.12s ease, opacity 0.12s ease;
}

.tile::before {
	content: '';
	position: absolute;
	top: 0.18rem;
	left: 0.22rem;
	right: 0.25rem;
	height: 0.28rem;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.tile-face {
	position: relative;
	width: 92%;
	height: 92%;
	border-radius: 0.48rem;
	display: grid;
	place-items: center;
	padding: 0.03rem;
	line-height: 1;
	font-weight: 900;
	color: #17324f;
	background: linear-gradient(180deg, #ffffff, #f4f6fb);
	border: 1px solid rgba(23, 50, 79, 0.15);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 -1px 0 rgba(34, 52, 76, 0.08) inset;
}

.tile-icon {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.28rem;
	color: #17324f;
}

.tile-icon use {
	vector-effect: non-scaling-stroke;
}

.tile-face-animal .tile-icon { color: #0f6d63; }
.tile-face-food .tile-icon { color: #c45d12; }
.tile-face-object .tile-icon { color: #5b43b8; }
.tile-face-nature .tile-icon { color: #1f5f9f; }

.tile-face-dots {
	padding: 0.12rem 0.08rem;
}

.tile-pip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	padding: 0.04rem;
	gap: 0.04rem;
}

.tile-pip-cell {
	width: 66%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0.11rem solid rgba(23, 50, 79, 0.22);
	background: rgba(255, 255, 255, 0.42);
	box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.72);
	transform: scale(0.78);
}

.tile-pip-cell.filled {
	border-color: rgba(18, 36, 60, 0.98);
	background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.24) 30%, transparent 33%), linear-gradient(180deg, #3e5678, #0e1f35);
	box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.56), 0 0 0 0.04rem rgba(255, 255, 255, 0.6), 0 0.02rem 0 rgba(12, 26, 44, 0.28);
	transform: scale(1);
}

.tile.theme-animal .tile-face { background: linear-gradient(180deg, #e8fff0, #d6f8e4); }
.tile.theme-food .tile-face { background: linear-gradient(180deg, #fff6e8, #ffedcd); }
.tile.theme-object .tile-face { background: linear-gradient(180deg, #f2edff, #e5ddff); }
.tile.theme-nature .tile-face { background: linear-gradient(180deg, #e8f4ff, #d6ebff); }

.tile.blocked {
	filter: grayscale(0.22) brightness(0.76) saturate(0.82);
}

.tile.free {
	box-shadow:
		0 1px 0 #ffffff inset,
		0 -1px 0 rgba(193, 182, 154, 0.65) inset,
		0 4px 0 #d8cfba,
		3px 4px 0 #c7bda7,
		0 0 0 2px rgba(141, 231, 178, 0.42),
		8px 12px 22px rgba(0, 0, 0, 0.24);
}

.tile.selected {
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 1px 0 #ffffff inset,
		0 -1px 0 rgba(193, 182, 154, 0.65) inset,
		0 5px 0 #d8cfba,
		3px 5px 0 #c7bda7,
		0 0 0 3px rgba(255, 209, 102, 0.7),
		0 14px 24px rgba(0, 0, 0, 0.3);
}

.tile.selected::after {
	opacity: 0.75;
	transform: scale(0.95);
}

.tile.matched {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.7);
}

.tile.matched::after {
	opacity: 0;
}

.status-row {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem;
	align-items: center;
}

.status-text {
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	background: rgba(6, 20, 36, 0.82);
	font-weight: 900;
	font-size: 0.9rem;
}

.chips {
	display: flex;
	gap: 0.35rem;
}

.chip {
	padding: 0.4rem 0.6rem;
	border-radius: 999px;
	background: rgba(6, 20, 36, 0.82);
	font-size: 0.78rem;
	font-weight: 800;
}

.chip strong { font-family: Fredoka, system-ui, sans-serif; }

.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: 780px) {
	.subtitle,
	.version-pill { display: none; }
	.toolbar-actions { max-width: 14rem; }
	.layout-select-wrap { flex: 1 1 5.4rem; }
	#layoutSelect,
	#layoutSelectLabel { width: 100%; }
	.status-row { grid-template-columns: 1fr; }
	.chips { justify-content: center; }
}

@media (max-width: 560px) {
	.topbar {
		flex-direction: column;
		align-items: stretch;
	}

	.toolbar-actions {
		max-width: none;
		justify-content: stretch;
	}

	#goBack,
	button,
	.layout-select-wrap {
		flex: 1 1 calc(50% - 0.21rem);
		min-width: 0;
	}

	#layoutSelect,
	#layoutSelectLabel {
		width: 100%;
	}

	.tile-face {
		width: 94%;
		height: 94%;
	}

	.tile-icon {
		font-size: clamp(1.1rem, 5vw, 1.65rem);
	}

	.tile-pip-cell {
		width: 76%;
	}
}

@media (min-width: 781px) and (max-width: 1100px) {
	.subtitle,
	.version-pill { display: none; }

	.app-shell {
		gap: 0.42rem;
		padding: calc(0.35rem + env(safe-area-inset-top)) calc(0.42rem + env(safe-area-inset-right)) calc(0.42rem + env(safe-area-inset-bottom)) calc(0.42rem + env(safe-area-inset-left));
	}

	.topbar {
		padding: 0.42rem 0.58rem;
		border-radius: 1rem;
	}

	.toolbar-actions {
		gap: 0.34rem;
	}

	#goBack,
	button,
	.layout-select-wrap {
		padding: 0.42rem 0.62rem;
		font-size: 0.84rem;
	}

	#layoutSelect,
	#layoutSelectLabel {
		font-size: 0.84rem;
	}

	.board-panel {
		padding: 0.28rem;
	}

	.status-row {
		gap: 0.35rem;
	}

	.status-text,
	.chip {
		padding-top: 0.36rem;
		padding-bottom: 0.36rem;
	}
}

@media (hover: none) and (pointer: coarse) and (min-width: 600px) {
	:root {
		--tile-w: clamp(3.4rem, 5.9vw, 4.8rem);
	}
}