1 files changed, 46 insertions, 0 deletions
diff --git a/public/app.css b/public/app.css
index 24bb927..153c334 100644
--- a/public/app.css
+++ b/public/app.css
@@ -258,6 +258,52 @@ html, body {
 #toast.show { opacity: 1; visibility: visible; pointer-events: auto; }
 #toast.err { border-color: rgba(248, 113, 113, .6); color: #fca5a5; }
 
+#progress {
+  position: fixed;
+  left: 50%;
+  bottom: 26px;
+  transform: translateX(-50%);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+  min-width: 280px;
+  max-width: 70vw;
+  padding: 13px 18px;
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: 10px;
+  background: rgba(14, 15, 19, .95);
+}
+#progress[hidden] { display: none; }
+#progress-track {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, .12);
+  overflow: hidden;
+}
+#progress-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 3px;
+  background: var(--ring);
+  transition: width .15s ease;
+}
+#progress.indeterminate #progress-fill {
+  width: 40%;
+  animation: progress-slide 1.1s linear infinite;
+}
+@keyframes progress-slide {
+  0%   { transform: translateX(-110%); }
+  100% { transform: translateX(360%); }
+}
+#progress-text {
+  font-size: 12px;
+  letter-spacing: .04em;
+  color: var(--muted);
+}
+
 @media (prefers-reduced-motion: reduce) {
   #world { transition: none; }
   .tile.lock { animation: none; }