ui: Add landscape two-column layout (US-18)

Detect orientation via LocalConfiguration and switch to a Row-based
two-column layout in landscape mode. Left column shows the title, BPM
display and pulse ring; right column shows the BPM slider, presets,
volume slider and the START/STOP button. All controls remain visible
without scrolling. Portrait layout is unchanged.

Extracted shared UI into private composables (Title, BpmDisplay,
PulseRing, BpmControls, VolumeControl, StartStopButton) to avoid
duplication between the two layout paths.

BACKLOG.md

@@ -68,6 +68,10 @@ US-15: As a user, I want an app icon and splash screen so that it feels native.
 US-16: As a developer, I want a signed APK for installation so that the app can be deployed.
 - Acceptance: Release build generated; offline functionality verified.
 
+### Theme 8: Landscape Support
+US-18: As a user, I want the app to work in landscape orientation so that I can use it however I hold my phone.
+- Acceptance: In landscape, all controls are visible and usable without scrolling; layout switches to a two-column arrangement (pulse ring + BPM display on the left, sliders/buttons on the right); no content is clipped or overlapping.
+
 ## Additional Notes
 - TDD: Focus on US-03, US-04, US-13 first—write failing tests, then implement.
 - Priorities: Complete setup (US-01-02), then audio (US-03-05), UI (US-06-07), service (US-08-10), rest.

app/src/main/kotlin/net/jeena/pacer/ui/PacerScreen.kt

@@ -1,5 +1,6 @@
 package net.jeena.pacer.ui
 
+import android.content.res.Configuration
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.tween
@@ -12,6 +13,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -35,6 +37,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -106,9 +109,79 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
 
     val bpmColor    = lerp(FG, ACCENT, bpmFlash.value)
     val stepsPerSec = "%.1f steps/sec".format(bpm / 60.0)
+    val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
 
     Box(modifier = modifier.background(BG)) {
 
+        if (isLandscape) {
+            LandscapeLayout(
+                isPlaying    = isPlaying,
+                bpm          = bpm,
+                volume       = volume,
+                bpmColor     = bpmColor,
+                stepsPerSec  = stepsPerSec,
+                rippleScale  = rippleScale.value,
+                rippleAlpha  = rippleAlpha.value,
+                dotScale     = dotScale.value,
+                onBpmChange  = { viewModel.updateBpm(it) },
+                onVolChange  = { viewModel.updateVolume(it) },
+                onToggle     = { viewModel.togglePlayback() }
+            )
+        } else {
+            PortraitLayout(
+                isPlaying    = isPlaying,
+                bpm          = bpm,
+                volume       = volume,
+                bpmColor     = bpmColor,
+                stepsPerSec  = stepsPerSec,
+                rippleScale  = rippleScale.value,
+                rippleAlpha  = rippleAlpha.value,
+                dotScale     = dotScale.value,
+                onBpmChange  = { viewModel.updateBpm(it) },
+                onVolChange  = { viewModel.updateVolume(it) },
+                onToggle     = { viewModel.togglePlayback() }
+            )
+        }
+
+        // Progress bar — fills linearly across one beat interval
+        Box(
+            modifier = Modifier
+                .fillMaxWidth(progress.value)
+                .height(3.dp)
+                .background(ACCENT)
+                .align(Alignment.BottomStart)
+        )
+
+        // Scanline overlay
+        Canvas(modifier = Modifier.fillMaxSize()) {
+            val stripe = 4.dp.toPx()
+            var y = 0f
+            while (y < size.height) {
+                drawRect(
+                    color = Color.Black.copy(alpha = 0.07f),
+                    topLeft = Offset(0f, y),
+                    size = Size(size.width, stripe / 2)
+                )
+                y += stripe
+            }
+        }
+    }
+}
+
+@Composable
+private fun PortraitLayout(
+    isPlaying:   Boolean,
+    bpm:         Int,
+    volume:      Float,
+    bpmColor:    Color,
+    stepsPerSec: String,
+    rippleScale: Float,
+    rippleAlpha: Float,
+    dotScale:    Float,
+    onBpmChange: (Int)   -> Unit,
+    onVolChange: (Float) -> Unit,
+    onToggle:    ()      -> Unit,
+) {
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -117,7 +190,65 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.SpaceBetween
     ) {
-            // Title
+        Title()
+        BpmDisplay(bpm, bpmColor, stepsPerSec)
+        PulseRing(rippleScale, rippleAlpha, dotScale, size = 80.dp)
+        BpmControls(bpm, onBpmChange)
+        VolumeControl(volume, onVolChange)
+        StartStopButton(isPlaying, onToggle, Modifier.fillMaxWidth())
+    }
+}
+
+@Composable
+private fun LandscapeLayout(
+    isPlaying:   Boolean,
+    bpm:         Int,
+    volume:      Float,
+    bpmColor:    Color,
+    stepsPerSec: String,
+    rippleScale: Float,
+    rippleAlpha: Float,
+    dotScale:    Float,
+    onBpmChange: (Int)   -> Unit,
+    onVolChange: (Float) -> Unit,
+    onToggle:    ()      -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 24.dp, vertical = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(24.dp)
+    ) {
+        // Left column: title + BPM + pulse ring
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxHeight(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceEvenly
+        ) {
+            Title()
+            BpmDisplay(bpm, bpmColor, stepsPerSec)
+            PulseRing(rippleScale, rippleAlpha, dotScale, size = 64.dp)
+        }
+
+        // Right column: sliders + presets + start/stop
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxHeight(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceBetween
+        ) {
+            BpmControls(bpm, onBpmChange)
+            VolumeControl(volume, onVolChange)
+            StartStopButton(isPlaying, onToggle, Modifier.fillMaxWidth())
+        }
+    }
+}
+
+@Composable
+private fun Title() {
     Text(
         text = "PACER",
         fontSize = 28.sp,
@@ -126,8 +257,10 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
         color = ACCENT,
         letterSpacing = 5.sp
     )
+}
 
-            // BPM number + labels
+@Composable
+private fun BpmDisplay(bpm: Int, bpmColor: Color, stepsPerSec: String) {
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
         Text(
             text = "$bpm",
@@ -152,30 +285,34 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
             letterSpacing = 1.sp
         )
     }
+}
 
-            // Pulse ring + ripple + center dot
+@Composable
-            Box(contentAlignment = Alignment.Center, modifier = Modifier.size(80.dp)) {
+private fun PulseRing(rippleScale: Float, rippleAlpha: Float, dotScale: Float, size: androidx.compose.ui.unit.Dp) {
+    Box(contentAlignment = Alignment.Center, modifier = Modifier.size(size)) {
         Canvas(modifier = Modifier.fillMaxSize()) {
             drawCircle(
-                        color = ACCENT.copy(alpha = rippleAlpha.value),
+                color = ACCENT.copy(alpha = rippleAlpha),
-                        radius = (size.minDimension / 2f) * rippleScale.value,
+                radius = (this.size.minDimension / 2f) * rippleScale,
                 style = Stroke(width = 2.dp.toPx())
             )
         }
         Box(
             modifier = Modifier
-                        .size(50.dp)
+                .size(size * 0.625f)
                 .border(2.dp, ACCENT, CircleShape)
         )
         Box(
             modifier = Modifier
-                        .size(12.dp)
+                .size(size * 0.15f)
-                        .scale(dotScale.value)
+                .scale(dotScale)
                 .background(ACCENT, CircleShape)
         )
     }
+}
 
-            // BPM slider with SLOW / FAST labels + presets
+@Composable
+private fun BpmControls(bpm: Int, onBpmChange: (Int) -> Unit) {
     Column(modifier = Modifier.fillMaxWidth()) {
         Row(
             modifier = Modifier.fillMaxWidth(),
@@ -198,7 +335,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
         }
         Slider(
             value = bpm.toFloat(),
-                    onValueChange = { viewModel.updateBpm(it.toInt()) },
+            onValueChange = { onBpmChange(it.toInt()) },
             valueRange = 40f..200f,
             colors = SliderDefaults.colors(
                 thumbColor = ACCENT,
@@ -213,7 +350,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
             PRESETS.forEach { (preset, label) ->
                 val active = bpm == preset
                 OutlinedButton(
-                            onClick = { viewModel.updateBpm(preset) },
+                    onClick = { onBpmChange(preset) },
                     modifier = Modifier.size(width = 72.dp, height = 48.dp),
                     shape = RectangleShape,
                     contentPadding = PaddingValues(0.dp),
@@ -241,8 +378,10 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
             }
         }
     }
+}
 
-            // Volume slider
+@Composable
+private fun VolumeControl(volume: Float, onVolChange: (Float) -> Unit) {
     Column(modifier = Modifier.fillMaxWidth()) {
         Row(
             modifier = Modifier.fillMaxWidth(),
@@ -265,7 +404,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
         }
         Slider(
             value = volume,
-                    onValueChange = { viewModel.updateVolume(it) },
+            onValueChange = { onVolChange(it) },
             valueRange = 0f..1f,
             colors = SliderDefaults.colors(
                 thumbColor = ACCENT,
@@ -274,11 +413,13 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
             )
         )
     }
+}
 
-            // Start/Stop button
+@Composable
+private fun StartStopButton(isPlaying: Boolean, onToggle: () -> Unit, modifier: Modifier = Modifier) {
     OutlinedButton(
-                onClick = { viewModel.togglePlayback() },
+        onClick = onToggle,
-                modifier = Modifier.fillMaxWidth(),
+        modifier = modifier,
         shape = RectangleShape,
         border = BorderStroke(2.dp, if (isPlaying) ACCENT else FG),
         colors = ButtonDefaults.outlinedButtonColors(
@@ -295,29 +436,4 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
             modifier = Modifier.padding(vertical = 6.dp)
         )
     }
-        }
-
-        // Progress bar — fills linearly across one beat interval
-        Box(
-            modifier = Modifier
-                .fillMaxWidth(progress.value)
-                .height(3.dp)
-                .background(ACCENT)
-                .align(Alignment.BottomStart)
-        )
-
-        // Scanline overlay
-        Canvas(modifier = Modifier.fillMaxSize()) {
-            val stripe = 4.dp.toPx()
-            var y = 0f
-            while (y < size.height) {
-                drawRect(
-                    color = Color.Black.copy(alpha = 0.07f),
-                    topLeft = Offset(0f, y),
-                    size = Size(size.width, stripe / 2)
-                )
-                y += stripe
-            }
-        }
-    }
 }