Redesign shot clock page layout and UX

- Responsive 3-column grid layout with named areas (horn/display/clear, corr, start/reset14/reset24)
- Horn button to play buzzer manually, aligned with Clear button
- Buttons scale by breakpoint: 70px mobile / 100px tablet / 130px desktop
- Seconds display scales by breakpoint with ghost digit alignment fix (inset: 0)
- Compact 3-column mobile layout with portrait orientation banners (mobile + desktop)
- Press-down active effect on all buttons
- courtFilter theme property for light/dark mode SVG handling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChengaDev

src/components/Controls.tsx

@@ -9,70 +9,95 @@ type ControlsProps = {
 	on14SecondsClick: () => void;
 	on24SecondsClick: () => void;
 	toggleDisplay: () => void;
+	layout?: 'all' | 'clearOnly' | 'actionsOnly' | 'startOnly' | 'reset14Only' | 'reset24Only';
 };
 
 function Buttons(props: ControlsProps) {
 	const { locals } = useLocalization();
+	const layout = props.layout ?? 'all';
+
+	const showStart   = layout === 'all' || layout === 'actionsOnly' || layout === 'startOnly';
+	const showReset14 = layout === 'all' || layout === 'actionsOnly' || layout === 'reset14Only';
+	const showReset24 = layout === 'all' || layout === 'actionsOnly' || layout === 'reset24Only';
+	const showClear   = layout === 'all' || layout === 'clearOnly';
 
 	return (
-		<Container>
-			<TimeToggleButton id='btnStart' onClick={props.onTickToggle} $isCurrentlyTicking={props.isTicking}>
-				{props.isTicking ? locals.stopLabel : locals.startLabel}
-			</TimeToggleButton>
-			<ResetButton id='btnReset14' onClick={props.on14SecondsClick}>
-				<div>{locals.resetButtonText}</div>
-				<div>14s</div>
-			</ResetButton>
-			<ResetButton id='btnReset24' onClick={props.on24SecondsClick}>
-				<div>{locals.resetButtonText}</div>
-				<div>{locals.possessionLabel}</div>
-			</ResetButton>
-			<ClockButton id='btnToggleDisplay' onClick={props.toggleDisplay}>
-				{locals.removeDisplayLabel}
-			</ClockButton>
+		<Container $layout={layout}>
+			{showStart && (
+				<TimeToggleButton id='btnStart' onClick={props.onTickToggle} $isCurrentlyTicking={props.isTicking}>
+					{props.isTicking ? locals.stopLabel : locals.startLabel}
+				</TimeToggleButton>
+			)}
+			{showReset14 && (
+				<ResetButton id='btnReset14' onClick={props.on14SecondsClick}>
+					<div>{locals.resetButtonText}</div>
+					<div>14s</div>
+				</ResetButton>
+			)}
+			{showClear && (
+				<ClockButton id='btnToggleDisplay' onClick={props.toggleDisplay}>
+					{locals.removeDisplayLabel}
+				</ClockButton>
+			)}
+			{showReset24 && (
+				<ResetButton id='btnReset24' onClick={props.on24SecondsClick}>
+					<div>{locals.resetButtonText}</div>
+					<div>{locals.possessionLabel}</div>
+				</ResetButton>
+			)}
 		</Container>
 	);
 }
 
-const Container = styled.div`
+const Container = styled.div<{ $layout: string }>`
 	display: flex;
 	flex-direction: row;
-	justify-content: space-between;
-	max-width: 65%;
-	margin: 0 auto;
-	margin-bottom: 50px;
+	justify-content: center;
+	align-items: center;
+	gap: 100px;
+	margin-bottom: ${(props) => props.$layout === 'all' ? '50px' : '0'};
 
 	@media ${(props) => props.theme.mediaQueries.mobile} {
 		flex-direction: column;
-
-		#btnToggleDisplay {
-			margin-bottom: 0;
-		}
+		margin-bottom: ${(props) => props.$layout === 'all' ? '20px' : '0'};
 	}
 `;
 
 const ClockButton = styled.button`
-	font-size: 17px;
-	height: 100px;
-	min-width: 100px;
+	font-size: 14px;
+	height: 80px;
+	width: 80px;
 	padding: 10px;
 	border: 4px solid ${(props) => props.theme.colors.white};
 	background: ${(props) => props.theme.defaulButtonBackground};
 	outline: none;
 	border-radius: 20px;
 	cursor: pointer;
 	font-weight: bold;
+	transition: transform 0.08s ease, box-shadow 0.08s ease;
+
+	&:active {
+		transform: scale(0.92) translateY(2px);
+		box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
+	}
+
+	@media ${'(min-width: 768px)'} {
+		font-size: 16px;
+		height: 100px;
+		width: 100px;
+	}
 
 	@media ${'(min-width: 1200px)'} {
-		width: 130px;
+		font-size: 18px;
 		height: 130px;
+		width: 130px;
 	}
 
 	@media ${(props) => props.theme.mediaQueries.mobile} {
-		font-size: 16px;
+		font-size: 13px;
 		margin: 0 auto;
-		height: 80px;
-		margin-bottom: 20px;
+		height: 70px;
+		width: 70px;
 	}
 `;
 
@@ -92,8 +117,9 @@ const ResetButton = styled(ClockButton)`
 	font-weight: bold;
 
 	@media ${(props) => props.theme.mediaQueries.mobile} {
-		height: 80px;
-		font-size: 16px;
+		height: 70px;
+		width: 70px;
+		font-size: 13px;
 	}
 `;
 

src/components/Correction.tsx

@@ -51,6 +51,11 @@ const AdjustButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: transform 0.08s ease;
+
+  &:active {
+    transform: scale(0.8) translateY(2px);
+  }
 `
 
 const CorrectionSign = styled.span`