Add 16:9 aspect ratio container optimized for TV fullscreen with browser chrome compensation

src/styles.css

@@ -11,6 +11,50 @@
   box-sizing: border-box;
 }
 
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+/* TV/Fullscreen optimized container - 16:9 aspect ratio accounting for browser chrome */
+#app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+#app > * {
+  /* 16:9 aspect ratio container */
+  aspect-ratio: 16 / 9;
+  /* Account for browser chrome (~100px) on height, then let width follow 16:9 */
+  max-height: calc(100vh - 100px);
+  max-width: 100vw;
+  width: auto;
+  height: auto;
+  /* Ensure it doesn't overflow */
+  min-width: 0;
+  min-height: 0;
+}
+
+/* When in fullscreen, use full viewport */
+:fullscreen #app > *,
+:-webkit-full-screen #app > *,
+:-moz-full-screen #app > * {
+  max-height: 100vh;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -45,11 +89,13 @@ button {
 }
 
 .layout {
-  min-height: 100vh;
+  width: 100%;
+  height: 100%;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
+  overflow: hidden;
 }
 
 .scoreboard {