website is now phone

style/bucketlist.css

@@ -1,6 +1,4 @@
-/* Bucketlist tab — password gated, baked-in left panel, internal scroll only */
-
-/* ── Lock screen (pitch black, centered form) ─────────────── */
+/* lock screen */
 .bl-lock {
     width: 100%;
     height: 100vh;
@@ -61,14 +59,14 @@
     min-height: 1.2em;
 }
 
-/* ── Lock section to viewport so body never scrolls ────────── */
+/* lock section to viewport so body never scrolls */
 #bucketlist.tab-content {
     padding: 0;
     height: 100vh;
     overflow: hidden;
 }
 
-/* ── Panel (framed, no extra space) ────────────────────────── */
+/* panel */
 .bl-panel {
     width: 420px;
     height: calc(100vh - 210px);
@@ -83,7 +81,7 @@
     overflow: hidden;
 }
 
-/* ── Scrollable list (fills the frame exactly) ────────────── */
+/* scrollable list */
 .bl-list {
     display: flex;
     flex-direction: column;
@@ -93,7 +91,7 @@
     padding: 14px 16px;
 }
 
-/* ── Item card ────────────────────────────────────────────── */
+/* item card */
 .bl-item {
     padding: 14px 18px;
     background: rgba(35, 35, 41, 0.75);
@@ -107,7 +105,7 @@
     box-shadow: 0 3px 16px rgba(184, 68, 87, 0.08);
 }
 
-/* Completed items */
+/* done items */
 .bl-item.bl-done { opacity: 0.5; }
 .bl-item.bl-done .bl-title { text-decoration: line-through; }
 
@@ -128,7 +126,7 @@
     line-height: 1.5;
 }
 
-/* ── Empty state ─────────────────────────────────────────── */
+/* empty state */
 .bl-empty {
     text-align: center;
     color: rgba(244, 242, 245, 0.3);
@@ -136,3 +134,14 @@
     font-family: Arial, sans-serif;
     font-size: 0.82rem;
 }
+
+/* mobile */
+@media (max-width: 900px) {
+    .bl-panel {
+        width: auto;
+        height: calc(100vh - 84px);
+        margin: 68px 12px 16px;
+    }
+    .bl-lock-box input,
+    .bl-lock-box button { width: min(260px, 80vw); }
+}