Layout

static/style.css

@@ -23,6 +23,7 @@
 }
 
 * { box-sizing: border-box; }
+[hidden] { display: none !important; }
 
 body {
   margin: 0;
@@ -32,12 +33,42 @@ body {
 }
 
 main {
-  max-width: 720px;
+  max-width: 1160px;
   margin: 0 auto;
   padding: 1rem;
   text-align: center;
+  display: grid;
+  grid-template-columns: 340px minmax(0, 1fr);
+  gap: 2rem;
+  align-items: start;
 }
 
+.game-panel {
+  position: sticky;
+  top: 1rem;
+  z-index: 2;
+  background: var(--base);
+  border: 1px solid var(--surface);
+  border-radius: 16px;
+  padding: 1rem;
+}
+.game-panel h1 { font-size: 1.5rem; }
+.game-panel #countdown { font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
+.game-panel #history-global-summary { font-size: 0.85rem; color: var(--subtext); }
+.section-browser { min-width: 0; }
+#section-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+#section-nav button { flex: 1 0 auto; min-height: 44px; }
+#section-nav button[aria-expanded="true"] {
+  background: var(--mauve);
+  color: var(--crust);
+  border-color: var(--mauve);
+}
+#section-hint { color: var(--subtext); margin-top: 2rem; }
+[data-panel] { overflow-x: auto; padding: 1rem; }
+[data-panel] h2 { margin-top: 0; }
+form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
+form input { min-width: 0; max-width: 100%; }
+
 h1 { letter-spacing: 0.3em; }
 
 a { color: var(--sapphire); }
@@ -117,6 +148,25 @@ table {
 }
 th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--surface); }
 
+#leaderboard-section {
+  padding: 1rem;
+  background: var(--mantle);
+  border: 1px solid var(--surface);
+  border-radius: 12px;
+}
+#leaderboard-section > p { color: var(--subtext); font-size: 0.9rem; }
+#leaderboard-status:empty { display: none; }
+.leaderboard-scroll { overflow-x: auto; }
+#leaderboard { width: 100%; }
+#leaderboard th { color: var(--lavender); }
+#leaderboard th:nth-child(2), #leaderboard td:nth-child(2) {
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+#leaderboard td:not(:nth-child(2)) { font-variant-numeric: tabular-nums; }
+#leaderboard tbody tr:first-child { color: var(--yellow); }
+#leaderboard tbody tr:hover { background: var(--surface); }
+
 input, button {
   font-size: 1rem;
   padding: 0.4rem 0.8rem;
@@ -171,3 +221,27 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl
 .error { color: var(--red); }
 
 #rules { text-align: left; font-size: 0.9rem; color: var(--subtext); }
+
+@media (max-width: 760px) {
+  main { display: block; padding: 0.5rem; }
+  .game-panel {
+    top: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.25rem 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0 0 12px 12px;
+    box-shadow: 0 6px 16px var(--crust);
+  }
+  .game-panel h1 { grid-column: 1 / -1; margin: 0; font-size: 1rem; }
+  .game-panel section { margin: 0; }
+  .game-panel #countdown { font-size: clamp(1.4rem, 6vw, 2.5rem); }
+  #zone-label { font-size: 0.7rem; letter-spacing: 0.1em; }
+  #zone-bar { margin: 0.35rem auto; }
+  .game-panel #history-global-summary { margin: 0.25rem 0; font-size: 0.7rem; }
+  #the-button { width: 84px; height: 84px; font-size: 1rem; border-width: 4px; }
+  #button-section { align-self: center; }
+  #press-result { max-width: 110px; margin: 0.4rem 0 0; font-size: 0.7rem; }
+  #press-result:empty { display: none; }
+  .section-browser { margin-top: 1rem; }
+}