/* Lobby (hub.html) – baut auf style.css und den Startseiten-Bausteinen (sp-*) auf */
body.hubpage { display: block; height: auto; min-height: 100dvh; overflow-y: auto; padding: 22px 16px 40px;
  background: radial-gradient(ellipse at 50% -10%, rgba(255,194,74,.10), transparent 55%), var(--bg); }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hub-top .sp-logo { font-size: 34px; }
.hub-who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hub-sub { color: var(--muted); margin: 4px 0 18px; }
.hub-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: #3a2a10; border: 1px solid #6b5020; color: #ffd27a; }
.hub-auth { max-width: 420px; margin: 20px auto; display: flex; flex-direction: column; gap: 10px; }
.hub-auth form { display: flex; flex-direction: column; gap: 10px; }
.hub-auth input { width: 100%; box-sizing: border-box; }
.hub-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.hub-tabs button { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-weight: 700; }
.hub-tabs button.on { color: var(--accent); border-color: var(--accent); background: #2a2414; }
.hub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }
.hub-create { display: flex; flex-direction: column; gap: 8px; }
.hub-create .scen-grid { grid-template-columns: 1fr 1fr; }
.hub-l { margin-top: 4px; }
.hub-side { display: flex; flex-direction: column; gap: 14px; }
.g-list { display: flex; flex-direction: column; gap: 6px; }
.g-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2); }
.g-row.mine { border-color: #5c4a1e; }
.g-main { min-width: 0; }
.g-main b { word-break: break-word; }
.g-act { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.g-act a.primary { text-decoration: none; padding: 6px 12px; border-radius: 7px; font-weight: 700; }
.g-tag { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: #2a2414; color: var(--accent); font-weight: 700; }
.code-row { display: flex; gap: 6px; }
.code-row input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; letter-spacing: .1em; }
.hubpage input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.hubpage #toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); }
@media (max-width: 860px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-create .scen-grid { grid-template-columns: 1fr; }
  .g-row { flex-direction: column; align-items: stretch; }
  .g-act { justify-content: flex-end; }
}
@media (max-width: 860px) { .hub-side { order: -1; } }   /* Handy: erst offene Partien und Code, dann Erstellen */
.codeshow { font-family: ui-monospace, monospace; font-size: 26px; letter-spacing: .12em; text-align: center; padding: 14px;
  margin: 10px 0; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent); background: #1a160c; user-select: all; }
.acct-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.acct-form input { flex: 1 1 160px; }
.hubpage .modal-card h3 { margin-top: 12px; }
#a-forgot { align-self: center; }
.name-row { display: flex; gap: 6px; }
.name-row input { flex: 1; min-width: 0; font-size: 17px; padding: 10px 12px; }
.name-row .btn { font-size: 18px; padding: 0 14px; }