:root {
	--bg: #0d192d;
	--card: #112540;
	--card-border: #2f5f9f;
	--accent: #56b5ff;
	--text: #e8f1ff;
	--muted: #aabed8;
	--success: #7dcf94;
	--error: #ff8a8a;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: radial-gradient(circle at top, #1f3251 0%, #0d192d 60%);
	color: var(--text);
}

body.theme-school-life {
	background: radial-gradient(circle at top, #4c7bd8 0%, #10294c 55%, #081421 100%);
	--card: rgba(9, 27, 49, 0.82);
	--card-border: rgba(132, 191, 255, 0.85);
	--accent: #ffd166;
	--text: #f8fbff;
	--muted: #dce8ff;
}

body.theme-classroom-life {
	background: linear-gradient(135deg, #8a4c16 0%, #b15f1f 42%, #3a2b1e 100%);
	--card: rgba(74, 33, 12, 0.85);
	--card-border: rgba(255, 225, 180, 0.9);
	--accent: #fff0c7;
	--text: #fff9ef;
	--muted: #f7dfb4;
}

body.theme-personal-life {
	background: linear-gradient(180deg, #b14d75 0%, #8f2f54 38%, #3f1934 100%);
	--card: rgba(88, 29, 49, 0.88);
	--card-border: rgba(255, 214, 230, 0.9);
	--accent: #ffe3ee;
	--text: #fff7fa;
	--muted: #f8dbe8;
}

body.theme-family-life {
	background: radial-gradient(circle at top left, #cd7422 0%, #8f4b13 45%, #3b220d 100%);
	--card: rgba(89, 41, 12, 0.86);
	--card-border: rgba(255, 214, 164, 0.9);
	--accent: #ffe2aa;
	--text: #fff8eb;
	--muted: #f8e0b8;
}

body.theme-neighbourhood-city {
	background: radial-gradient(circle at top, #3864b8 0%, #213b62 45%, #0d1627 100%);
	--card: rgba(10, 29, 53, 0.86);
	--card-border: rgba(157, 197, 255, 0.9);
	--accent: #ffe08a;
	--text: #f8fbff;
	--muted: #dfeeff;
}

body.theme-life-in-the-world {
	background: radial-gradient(circle at top left, #2d7c4b 0%, #16452e 50%, #07150d 100%);
	--card: rgba(11, 41, 24, 0.86);
	--card-border: rgba(163, 227, 188, 0.9);
	--accent: #d7ffd8;
	--text: #f4fff8;
	--muted: #d9f7e4;
}

body.theme-life-in-nature,
body.theme-life-in-nature-2 {
	background: radial-gradient(circle at top, #2f6e2d 0%, #173f1c 55%, #08110b 100%);
	--card: rgba(13, 40, 17, 0.86);
	--card-border: rgba(192, 242, 192, 0.9);
	--accent: #f7ffd7;
	--text: #f7fff4;
	--muted: #dff1dc;
}

body.theme-life-in-the-universe,
body.theme-life-in-universe-future {
	background: radial-gradient(circle at top, #1c1e47 0%, #2f1d5d 35%, #000 100%);
	--card: rgba(25, 18, 53, 0.88);
	--card-border: rgba(180, 168, 255, 0.9);
	--accent: #e3d8ff;
	--text: #f8f6ff;
	--muted: #dccfff;
}

body.theme-school-life-education {
	background: linear-gradient(135deg, #1d7ac8 0%, #1d4c8c 45%, #0f1834 100%);
	--card: rgba(12, 34, 64, 0.86);
	--card-border: rgba(158, 212, 255, 0.9);
	--accent: #fff1ab;
	--text: #f6fbff;
	--muted: #dfefff;
}

body.theme-classroom-life-learning {
	background: linear-gradient(135deg, #d58934 0%, #b15d27 40%, #43314a 100%);
	--card: rgba(77, 33, 17, 0.86);
	--card-border: rgba(255, 215, 167, 0.9);
	--accent: #fff0c7;
	--text: #fffaf2;
	--muted: #f8e2bf;
}

body.theme-personal-life-wellbeing {
	background: radial-gradient(circle at top, #49b793 0%, #1d6355 45%, #0e2825 100%);
	--card: rgba(13, 57, 47, 0.86);
	--card-border: rgba(191, 234, 216, 0.9);
	--accent: #e6fff6;
	--text: #f6fffb;
	--muted: #d8f8ec;
}

body.theme-family-life-home {
	background: linear-gradient(135deg, #df8c2d 0%, #a5521d 45%, #47240f 100%);
	--card: rgba(83, 40, 15, 0.86);
	--card-border: rgba(255, 214, 170, 0.9);
	--accent: #fff0cc;
	--text: #fff8ea;
	--muted: #f7e1bc;
}

body.theme-life-in-neighbourhood-city-social-life {
	background: linear-gradient(135deg, #db7d31 0%, #b84d5d 45%, #2d1f40 100%);
	--card: rgba(80, 34, 52, 0.86);
	--card-border: rgba(255, 212, 222, 0.9);
	--accent: #fff2d6;
	--text: #fff8fb;
	--muted: #f5dce6;
}

body.theme-life-in-world-culture {
	background: radial-gradient(circle at top, #27458d 0%, #304d79 40%, #121d2f 100%);
	--card: rgba(14, 29, 53, 0.86);
	--card-border: rgba(157, 199, 255, 0.9);
	--accent: #ffe7a8;
	--text: #f8fbff;
	--muted: #dfefff;
}

... (file truncated for brevity)
		background: linear-gradient(135deg, #1d7ac8 0%, #1d4c8c 45%, #0f1834 100%);
		--card: rgba(12, 34, 64, 0.86);
		--card-border: rgba(158, 212, 255, 0.9);
		--accent: #fff1ab;
		--text: #f6fbff;
		--muted: #dfefff;
	}

	body.theme-classroom-life-learning {
		background: linear-gradient(135deg, #d58934 0%, #b15d27 40%, #43314a 100%);
		--card: rgba(77, 33, 17, 0.86);
		--card-border: rgba(255, 215, 167, 0.9);
		--accent: #fff0c7;
		--text: #fffaf2;
		--muted: #f8e2bf;
	}

	body.theme-personal-life-wellbeing {
		background: radial-gradient(circle at top, #49b793 0%, #1d6355 45%, #0e2825 100%);
		--card: rgba(13, 57, 47, 0.86);
		--card-border: rgba(191, 234, 216, 0.9);
		--accent: #e6fff6;
		--text: #f6fffb;
		--muted: #d8f8ec;
	}

	body.theme-family-life-home {
		background: linear-gradient(135deg, #df8c2d 0%, #a5521d 45%, #47240f 100%);
		--card: rgba(83, 40, 15, 0.86);
		--card-border: rgba(255, 214, 170, 0.9);
		--accent: #fff0cc;
		--text: #fff8ea;
		--muted: #f7e1bc;
	}

	body.theme-life-in-neighbourhood-city-social-life {
		background: linear-gradient(135deg, #db7d31 0%, #b84d5d 45%, #2d1f40 100%);
		--card: rgba(80, 34, 52, 0.86);
		--card-border: rgba(255, 212, 222, 0.9);
		--accent: #fff2d6;
		--text: #fff8fb;
		--muted: #f5dce6;
	}

	body.theme-life-in-world-culture {
		background: radial-gradient(circle at top, #27458d 0%, #304d79 40%, #121d2f 100%);
		--card: rgba(14, 29, 53, 0.86);
		--card-border: rgba(157, 199, 255, 0.9);
		--accent: #ffe7a8;
		--text: #f8fbff;
		--muted: #dfefff;
	}

	.app-shell {
		width: min(1320px, calc(100% - 24px));
		margin: 0 auto;
		padding: 16px 0 24px;
		display: flex;
		align-items: flex-start;
		gap: 14px;
	}

	.main-content {
		flex: 1;
		min-width: 0;
	}

	.theme-sidebar {
		flex: 0 0 44px;
		max-width: 44px;
		padding: 8px 6px;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 16px;
		overflow: hidden;
		transition: flex-basis 0.25s ease, max-width 0.25s ease, padding 0.25s ease, background 0.25s ease, border-color 0.25s ease;
		position: sticky;
		top: 12px;
	}

	.theme-sidebar.is-open {
		flex-basis: 240px;
		max-width: 240px;
		padding: 10px;
		background: var(--card);
		border-color: var(--card-border);
	}

	.sidebar-toggle {
		width: 30px;
		height: 30px;
		padding: 0;
		border: none;
		border-radius: 10px;
		background: transparent;
		color: var(--text);
		display: grid;
		place-items: center;
		cursor: pointer;
		margin: 0 0 10px;
	}

	.theme-sidebar.is-open .sidebar-toggle {
		width: 30px;
		height: 30px;
		border: none;
		background: transparent;
		margin: 0 0 10px;
	}

	.sidebar-icon {
		width: 18px;
		height: 2px;
		display: block;
		background: currentColor;
		box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
		border-radius: 999px;
	}

	.sidebar-content {
		display: none;
	}

	.theme-sidebar.is-open .sidebar-content {
		display: block;
	}

	header h1 {
		margin: 0 0 8px;
		font-size: clamp(1.75rem, 3.5vw, 2.6rem);
	}

	header p {
		margin: 0;
		color: var(--muted);
		max-width: 720px;
	}

	.theme-selector {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
	}

	.theme-selector span {
		color: var(--muted);
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		display: none;
	}

	.theme-sidebar.is-open .theme-selector span {
		display: block;
	}

	.theme-buttons {
		display: none;
		flex-direction: column;
		gap: 8px;
	}

	.theme-sidebar.is-open .theme-buttons {
		display: flex;
	}

	.theme-button {
		border: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(255, 255, 255, 0.05);
		color: var(--text);
		border-radius: 12px;
		padding: 8px 10px;
		font-size: 0.84rem;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.theme-button.active,
	.theme-button:hover {
		background: rgba(86, 181, 255, 0.16);
		border-color: rgba(86, 181, 255, 0.4);
	}

	.theme-info {
		margin-bottom: 18px;
	}

	.theme-info h2 {
		margin: 0 0 8px;
		font-size: 1.25rem;
	}

	.theme-info p {
		margin: 0;
		color: var(--muted);
	}

	.status-row {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
		margin: 18px 0;
	}

	.status-item {
		background: var(--card);
		border: 1px solid var(--card-border);
		border-radius: 16px;
		padding: 18px 22px;
	}

	button {
		border: none;
		border-radius: 16px;
		padding: 16px 24px;
		background: linear-gradient(135deg, #4784ff, #2ea7ff);
		color: white;
		font-size: 1rem;
		cursor: pointer;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	button:hover {
		transform: translateY(-1px);
		box-shadow: 0 18px 30px rgba(46, 167, 255, 0.18);
	}

	.game-board {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		align-items: start;
	}

	.column {
		background: var(--card);
		border: 1px solid var(--card-border);
		border-radius: 22px;
		padding: 14px;
		min-height: 320px;
	}

	.column h2 {
		margin-top: 0;
		margin-bottom: 18px;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		font-size: 0.95rem;
		color: var(--accent);
	}

	.card-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.card {
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
		border: 1px solid var(--card-border);
		padding: 12px 10px;
		min-height: 68px;
		display: grid;
		place-items: center;
		text-align: center;
		cursor: pointer;
		font-size: 0.95rem;
		line-height: 1.35;
		word-break: break-word;
		transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	}

	.card:hover {
		transform: translateY(-2px);
		border-color: rgba(86, 181, 255, 0.4);
	}

	.card.selected {
		background: rgba(86, 181, 255, 0.18);
		border-color: #56b5ff;
	}

	.card.matched {
		opacity: 0.55;
		cursor: default;
		box-shadow: inset 0 0 0 1px rgba(125, 207, 148, 0.25);
	}

	.matched-section {
		margin-top: 16px;
		padding: 14px 16px;
		border-radius: 18px;
		background: var(--card);
		border: 1px solid var(--card-border);
		max-height: 220px;
		overflow: auto;
	}

	.matched-section h2 {
		margin: 0 0 14px;
		color: var(--accent);
		letter-spacing: 0.05em;
		font-size: 0.95rem;
		text-transform: uppercase;
	}

	.matched-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 12px;
	}

	.matched-list li {
		display: flex;
		flex-direction: column;
		gap: 6px;
		border-radius: 14px;
		padding: 14px 16px;
		background: rgba(86, 181, 255, 0.12);
		color: var(--text);
		font-weight: 500;
	}

	.matched-item__pair {
		font-weight: 600;
	}

	.matched-item__example {
		color: var(--muted);
		font-size: 0.95rem;
		font-weight: 400;
	}

	.message-box {
		margin-top: 16px;
		padding: 14px 16px;
		border-radius: 18px;
		background: var(--card);
		border: 1px solid var(--card-border);
	}

	#message {
		margin: 0;
		color: var(--muted);
	}

	@media (max-width: 900px) {
		.app-shell {
			width: min(100% - 16px, 1320px);
			flex-direction: column;
			padding-top: 10px;
		}

		.theme-sidebar {
			flex-basis: auto;
			max-width: none;
			width: 100%;
			padding: 8px;
			position: static;
		}

		.theme-sidebar.is-open {
			flex-basis: auto;
			max-width: none;
		}

		.theme-sidebar.is-open .sidebar-content {
			display: block;
		}

		.theme-buttons {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.theme-button {
			flex: 1 1 140px;
		}
	}

	@media (max-width: 760px) {
		.game-board {
			grid-template-columns: 1fr;
		}

		.column {
			min-height: unset;
		}

		.status-row {
			flex-direction: column;
			align-items: stretch;
		}

		.status-item,
		button {
			width: 100%;
			text-align: center;
		}

		.card-grid {
			grid-template-columns: 1fr;
		}

		.matched-section {
			max-height: none;
		}
	}

	@media (max-width: 480px) {
		header h1 {
			font-size: 1.45rem;
		}

		.theme-info h2 {
			font-size: 1rem;
		}

		.card {
			min-height: 58px;
			padding: 10px 8px;
			font-size: 0.9rem;
		}
	}