change layout

static/css/styles.css

@@ -312,3 +312,127 @@ tr:hover td { background: #1e1e40; }
     font-size: 0.72rem;
   }
 }
+
+/* ==========================================================================
+   Building Picker Modal
+   ========================================================================== */
+#building-modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+#building-modal-overlay.open { display: flex; }
+
+#building-modal {
+  background: #16213e;
+  border: 2px solid #c8a44a;
+  border-radius: 10px;
+  padding: 20px 24px;
+  width: min(860px, 96vw);
+  max-height: 88vh;
+  overflow-y: auto;
+  position: relative;
+  animation: modalIn 0.18s ease-out;
+}
+@keyframes modalIn {
+  from { transform: scale(0.92); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+}
+#building-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #2a4a6a;
+}
+#building-modal-header h3 {
+  color: #c8a44a;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+}
+#building-modal-close {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 1.4rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+}
+#building-modal-close:hover { color: #fff; }
+
+#building-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.bld-card {
+  background: #0f2a50;
+  border: 2px solid #2a4a6a;
+  border-radius: 8px;
+  padding: 10px 8px 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.1s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 4px;
+  position: relative;
+}
+.bld-card:hover { border-color: #c8a44a; transform: translateY(-2px); }
+.bld-card.bld-selected { border-color: #c8a44a; background: #1a4070; }
+.bld-card.bld-maxed   { border-color: #2a6a2a; opacity: 0.7; cursor: default; }
+.bld-card.bld-locked  { border-color: #6a2a2a; opacity: 0.6; cursor: default; }
+
+.bld-level {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  background: #1a1a2e;
+  color: #c8a44a;
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+.bld-icon { font-size: 1.6rem; line-height: 1; margin-top: 4px; }
+.bld-name { font-size: 0.72rem; font-weight: 600; color: #ddd; margin-top: 2px; }
+.bld-status {
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  border-radius: 8px;
+  margin-top: 2px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.bld-status.can-build    { background: #1a4a1a; color: #6fcf6f; }
+.bld-status.no-resources { background: #4a2a00; color: #ffaa44; }
+.bld-status.queue-warn   { background: #3a3a00; color: #cccc44; }
+.bld-status.locked       { background: #4a0a0a; color: #ff6666; }
+.bld-status.maxed        { background: #1a3a1a; color: #44aa44; }
+.bld-cost { font-size: 0.62rem; color: #666; margin-top: 2px; }
+
+#building-modal-queue {
+  margin-top: 16px;
+  padding-top: 10px;
+  border-top: 1px solid #2a4a6a;
+  font-size: 0.75rem;
+  color: #888;
+}
+#building-modal-queue-title {
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+/* Responsive: 2 columns on small screens */
+@media (max-width: 600px) {
+  #building-grid { grid-template-columns: repeat(2, 1fr); }
+}