/* tglgames.com — Pool responsive layout.
 *
 * Progressive enrichment, not letterboxing. Small viewports = focused
 * single-canvas. Large viewports = surface fills with chat, telemetry,
 * leaderboard, friends. Container queries on .pool-table-wrap drive the
 * canvas fit; @media drives outer-shell layout. Fold phones use
 * env(viewport-segment-*) when available.
 */

/* ===== Mobile portrait (default) =====
 * Single column. Header on top, a horizontal mode strip below it (so phones
 * can pick Mode/Cue/Bot — the side rails are hidden on phone), table fills
 * the middle, compact footer below. */
@media (max-width: 599px) {
	.pool-shell {
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"header"
			"rail-top"
			"table"
			"footer";
	}
	/* Promote the left rail to a horizontal scrollable strip on phone. */
	.pool-rail-left {
		display: flex;
		grid-area: rail-top;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 10px;
		padding: 6px 8px;
		border-bottom: 1px solid var(--rail-border);
		-webkit-overflow-scrolling: touch;
	}
	.pool-rail-left .rail-section { flex: 0 0 auto; }
	.pool-rail-left .rail-section h3 { display: none; }
	.pool-rail-left .mode-picker,
	.pool-rail-left .cue-control,
	.pool-rail-left .bot-picker { flex-direction: row; gap: 4px; }
	.pool-rail-left .mode-pick,
	.pool-rail-left .cue-pick,
	.pool-rail-left .bot-pick {
		min-height: 36px;
		padding: 6px 10px;
		font-size: 0.78rem;
		white-space: nowrap;
	}
	#friendsRail { display: none; }   /* drawer covers friends on phone */

	/* Header: drop the H1 + scoreboard labels, tighten padding so the chip
	 * + drawer toggle fit a 360px viewport. */
	.pool-header { padding: 6px 8px; gap: 6px; }
	.pool-header h1 { display: none; }
	.pool-header .home { font-size: 0.78rem; }
	.scoreboard { gap: 8px; font-size: 0.72rem; }
	.scoreboard .timer { display: none; }

	/* Keyboard help bar is irrelevant on touch — recover the height. */
	.controls-help { display: none; }

	/* Footer: keep one anchor + brand, drawer has the rest. */
	.pool-footer { padding: 4px 8px; font-size: 0.66rem; gap: 6px; }
	.pool-footer span:first-child { display: none; }
	.pool-footer span:last-child a:not(:first-child):not(:nth-child(2)) { display: none; }

	/* Float toggles smaller; pregame card tighter. */
	.english-widget { width: 44px; height: 44px; bottom: 8px; right: 8px; }
	.accuracy-bar { width: min(220px, 80%); bottom: 10px; }
	.pregame { padding: 14px 12px; gap: 10px; }
	.pregame h2 { font-size: 1.15rem; }
	.pregame-hint { font-size: 0.82rem; }
	.daily-card, .quick-card { padding: 10px 12px; }
}

/* ===== Mobile landscape ===== */
@media (max-height: 600px) and (orientation: landscape) {
	.pool-header { padding: 6px 10px; }
	.pool-header h1 { display: none; }
	.scoreboard { font-size: 0.78rem; gap: 8px; }
	.pool-footer { display: none; }
	.hud-overlay { top: 6px; left: 6px; }
	.english-widget { width: 44px; height: 44px; bottom: 8px; right: 8px; }
}

/* ===== Tablet portrait (600–1100px tall, narrow) ===== */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
	.pool-shell {
		grid-template-rows: auto 70% 1fr auto auto;
		grid-template-areas:
			"header"
			"table"
			"rail-bottom"
			"controls"
			"footer";
	}
	.pool-rail-right {
		display: flex;
		grid-area: rail-bottom;
		flex-direction: row;
		overflow-x: auto;
	}
	.pool-rail-right .rail-section { flex: 1; min-width: 220px; }
}

/* ===== Tablet landscape ===== */
@media (min-width: 900px) and (max-width: 1099px) {
	.pool-shell {
		grid-template-columns: 220px 1fr 260px;
		grid-template-areas:
			"header   header   header"
			"left     table    right"
			"controls controls controls"
			"footer   footer   footer";
	}
	.pool-rail-left  { display: flex; grid-area: left;  }
	.pool-rail-right { display: flex; grid-area: right; }
}

/* ===== Desktop ===== */
@media (min-width: 1100px) {
	.pool-shell {
		grid-template-columns: 260px 1fr 300px;
		grid-template-areas:
			"header   header   header"
			"left     table    right"
			"controls controls controls"
			"footer   footer   footer";
	}
	.pool-rail-left  { display: flex; grid-area: left;  }
	.pool-rail-right { display: flex; grid-area: right; }
	/* When desktop rails are visible, the in-drawer leaderboard is
	 * redundant — collapse the drawer's #leadersDrawer section to keep
	 * focus tight. */
	.drawer #leadersDrawer { display: none; }
}

/* ===== Ultra-wide (≥1600px) =====
 * Add more breathing room and slightly wider rails so the desktop layout
 * doesn't feel cramped against a 4K display. Future slice: a fourth
 * floating panel for spectator list / shot heatmap. */
@media (min-width: 1600px) {
	.pool-shell {
		grid-template-columns: 300px 1fr 360px;
	}
	.pool-table-wrap { padding: 24px; }
}

/* ===== Fold-phone (Surface Duo, Pixel Fold unfolded) =====
 * env(viewport-segment-*) lands when the page is screen-spanning across a
 * single fold. We split the table area along the segment boundary: table
 * on segment 0, rails on segment 1 — never straddle the hinge. */
@media (horizontal-viewport-segments: 2) {
	.pool-shell {
		grid-template-columns:
			env(viewport-segment-width 0 0)
			env(viewport-segment-width 1 0);
		grid-template-areas:
			"header header"
			"table  right"
			"footer footer";
	}
	.pool-rail-left  { display: none; }
	.pool-rail-right {
		display: flex; grid-area: right;
		margin-left: env(viewport-segment-left 1 0);
	}
}

@media (vertical-viewport-segments: 2) {
	.pool-shell {
		grid-template-rows:
			auto
			env(viewport-segment-height 0 0)
			env(viewport-segment-height 1 0)
			auto;
		grid-template-areas:
			"header"
			"table"
			"rail-bottom"
			"footer";
	}
	.pool-rail-right {
		display: flex;
		grid-area: rail-bottom;
		flex-direction: row;
		overflow-x: auto;
		margin-top: env(viewport-segment-top 1 0);
	}
	.pool-rail-left { display: none; }
}

/* ===== Container-query refinements on the table itself =====
 * Lets the canvas behave correctly when the table area is shorter than the
 * viewport (e.g. a tall narrow tablet rail steals height). The canvas
 * picks landscape / portrait orientation in JS via ResizeObserver. */
@container tableWrap (max-aspect-ratio: 1/1) {
	.accuracy-bar { width: min(220px, 80%); }
}
@container tableWrap (min-width: 700px) {
	.english-widget { width: 64px; height: 64px; }
}

/* ===== Touch target floor (44px) on small viewports ===== */
@media (max-width: 600px) {
	.btn, .mode-pick, .cue-pick { min-height: 44px; }
	.theme-toggle, .drawer-toggle { min-height: 36px; min-width: 36px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.accuracy-needle { transition: none; }
	.drawer { transition: none; }
}