/* tglgames.com — Chess responsive tweaks.
 *
 * Target: phones (375px), tablets (768px), desktops (1024px+).
 * The board MUST stay square at every size, so the meta panel collapses
 * below the board on narrow viewports.
 */

@media (max-width: 768px) {
	.board-wrap {
		grid-template-columns: 1fr;
		grid-template-areas:
			"black"
			"board"
			"white"
			"meta";
		padding: 8px;
		gap: 6px;
	}
	.board { max-width: min(100vw - 16px, 75vh); }
	.meta { min-height: auto; }
	.move-list { max-height: 160px; }
	.tips-ribbon { max-width: 90%; font-size: 0.72rem; }
	header { gap: 4px; padding: 4px 8px; }
	header h1 { font-size: 1rem; }
	header .scoreboard { gap: 6px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
	header h1 { font-size: 0.9rem; }
	.audio-btn, .fs-btn, .theme-toggle, .drawer-toggle { padding: 3px 6px; }
	.captured { font-size: 1.1rem; }
	.clock { font-size: 1rem; min-width: 60px; padding: 3px 6px; }
	.side-name { font-size: 0.78rem; min-width: 44px; }
	.btn { padding: 5px 10px; font-size: 0.78rem; }
	.chess-chat-dock { right: 8px; bottom: 8px; }
	.chess-chat-panel { width: calc(100vw - 16px); right: 0; }
}

/* iPhone notch / home indicator. */
@supports (padding: max(0px)) {
	main { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}