UI: move backup and migration actions into a sidebar tools menu

styles.css

@@ -24,6 +24,57 @@ body {
   min-height: 100vh;
 }
 
+.tools-toggle-btn {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 30;
+  background: var(--accent-2);
+  box-shadow: var(--shadow);
+}
+
+.tools-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: min(360px, 92vw);
+  height: 100vh;
+  background: #f9fbff;
+  border-left: 1px solid var(--border);
+  box-shadow: -8px 0 24px rgba(17, 36, 57, 0.14);
+  padding: 1rem;
+  transform: translateX(102%);
+  transition: transform 180ms ease;
+  z-index: 40;
+  overflow: auto;
+}
+
+.tools-drawer.open {
+  transform: translateX(0);
+}
+
+.tools-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.tools-header h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.tools-close-btn {
+  padding: 0.45rem 0.7rem;
+}
+
+.tools-subtitle {
+  margin: 0.6rem 0 0.9rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
 .app-shell {
   width: min(1100px, 94vw);
   margin: 2rem auto;
@@ -81,13 +132,12 @@ h1 {
 }
 
 #migrateBtn {
-  width: fit-content;
+  width: 100%;
   margin-bottom: 0.9rem;
 }
 
 .backup-controls {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 0.5rem;
   margin-bottom: 0.9rem;
 }
@@ -256,6 +306,12 @@ button {
     grid-template-columns: 1fr;
   }
 
+  .tools-toggle-btn {
+    top: auto;
+    bottom: 1rem;
+    right: 1rem;
+  }
+
   .game-card {
     align-items: flex-start;
     flex-direction: column;