Refactor: Remove audio processing and game state management modules

src/server-deno/public/style.css

@@ -0,0 +1,177 @@
+:root {
+  color-scheme: light dark;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  touch-action: manipulation;
+}
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0 auto;
+  padding: 1rem;
+  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+  max-width: 960px;
+}
+h1 {
+  margin-top: 0;
+}
+.card {
+  border: 1px solid #8884;
+  padding: 1rem;
+  border-radius: 12px;
+  margin-bottom: 1rem;
+}
+.row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.row.space {
+  justify-content: space-between;
+}
+.hidden {
+  display: none;
+}
+.muted {
+  opacity: 0.7;
+  font-size: 0.9em;
+}
+button,
+input,
+select {
+  padding: 0.7rem 1rem;
+  min-height: 44px;
+  font-size: 1rem;
+  border-radius: 10px;
+}
+button {
+  cursor: pointer;
+}
+input,
+select {
+  border: 1px solid #8884;
+  background: inherit;
+  color: inherit;
+}
+.timeline {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding: 0.75rem;
+  border: 1px dashed #8886;
+  min-height: 64px;
+  border-radius: 12px;
+}
+.chip {
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid #8886;
+}
+.np {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  margin: 0.5rem 0;
+}
+.track-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid #8885;
+  border-radius: 8px;
+  padding: 0.4rem 0.6rem;
+  background: #fff;
+  color: #000;
+  box-shadow: 0 1px 2px #0001;
+}
+@media (prefers-color-scheme: dark) {
+  .track-card {
+    background: #1b1b1b;
+    color: #eee;
+    border-color: #ffffff22;
+    box-shadow: 0 1px 2px #0005;
+  }
+}
+.year-badge {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  background: #6200ee;
+  color: white;
+  border-radius: 6px;
+  padding: 0.15rem 0.4rem;
+  min-width: 3ch;
+  text-align: center;
+}
+.track-info {
+  display: grid;
+  line-height: 1.2;
+}
+.track-title {
+  font-weight: 600;
+}
+.track-artist {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+
+@media (max-width: 800px) {
+  body {
+    padding: 0.75rem;
+  }
+  h1 {
+    font-size: 1.5rem;
+  }
+  .row {
+    gap: 0.5rem;
+  }
+  .timeline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+  }
+  .track-card {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+    padding: 0.6rem 0.8rem;
+    min-width: 220px;
+  }
+  .year-badge {
+    padding: 0.2rem 0.5rem;
+  }
+  #placeArea {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    background: color-mix(in srgb, Canvas 92%, transparent);
+    backdrop-filter: blur(6px);
+    border: 1px solid #8883;
+    border-radius: 12px;
+    box-shadow: 0 -4px 12px #0002;
+    z-index: 10;
+  }
+  #placeArea button {
+    flex: 1 1 auto;
+  }
+  #placeArea select {
+    flex: 2 1 auto;
+    min-width: 40vw;
+  }
+}
+.banner-ok {
+  background: #1b5e20;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+}
+.banner-bad {
+  background: #b71c1c;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+}