Added lobby auto creation

public/styles.css

@@ -80,6 +80,12 @@ select {
   text-decoration: underline;
 }
 
+.template-button {
+  height: 30px;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -263,6 +269,16 @@ button.primary:hover {
   background: var(--accent-strong);
 }
 
+button.danger {
+  color: #ffffff;
+  background: var(--danger);
+  border-color: var(--danger);
+}
+
+button.danger:hover {
+  background: #7f2e2a;
+}
+
 .error {
   margin: 0 0 12px;
   padding: 10px 12px;
@@ -300,6 +316,11 @@ button.primary:hover {
   line-height: 1.2;
 }
 
+.panel-copy {
+  margin: -4px 0 14px;
+  color: var(--muted);
+}
+
 .admin-grid {
   display: grid;
   grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
@@ -311,6 +332,30 @@ button.primary:hover {
   min-width: 0;
 }
 
+.lobby-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  align-items: end;
+}
+
+.lobby-grid label {
+  min-width: 0;
+}
+
+.lobby-grid label > span {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.lobby-grid .span-2 {
+  grid-column: span 2;
+}
+
 .admin-grid label > span,
 .details dt,
 .hint {
@@ -321,7 +366,11 @@ button.primary:hover {
 }
 
 .admin-grid input[type='text'],
-.admin-grid input[type='password'] {
+.admin-grid input[type='password'],
+.admin-grid select,
+.lobby-grid input[type='text'],
+.lobby-grid input[type='number'],
+.lobby-grid select {
   width: 100%;
   height: 36px;
   padding: 0 10px;
@@ -332,11 +381,36 @@ button.primary:hover {
   outline: none;
 }
 
-.admin-grid input:focus {
+.admin-grid input:focus,
+.admin-grid select:focus {
   border-color: rgba(36, 107, 90, 0.55);
   box-shadow: 0 0 0 3px rgba(36, 107, 90, 0.12);
 }
 
+.lobby-grid input:focus,
+.lobby-grid select:focus {
+  border-color: rgba(36, 107, 90, 0.55);
+  box-shadow: 0 0 0 3px rgba(36, 107, 90, 0.12);
+}
+
+.panel-actions {
+  margin: 16px 0 14px;
+}
+
+.inline-status {
+  align-self: center;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.lobby-details {
+  margin-bottom: 10px;
+}
+
+.member-list {
+  overflow-wrap: anywhere;
+}
+
 .details {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -470,7 +544,8 @@ tbody tr:last-child td {
   }
 
   .admin-grid,
-  .details {
+  .details,
+  .lobby-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -506,9 +581,14 @@ tbody tr:last-child td {
   }
 
   .admin-grid,
-  .details {
+  .details,
+  .lobby-grid {
     grid-template-columns: 1fr;
   }
+
+  .lobby-grid .span-2 {
+    grid-column: auto;
+  }
 }
 
 @media (max-width: 460px) {