/* Privater Tisch: Ergänzung zum Stammtisch-Look. */
body.tisch-home{overflow:auto}
body.tisch-home .app{height:auto;min-height:100vh;min-height:100dvh}
.gate{padding:28px 16px 64px}
.gate-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.gate-card{background:linear-gradient(170deg,var(--paper),var(--cream-2));color:var(--ink);border-radius:22px;padding:26px 26px 22px;box-shadow:0 0 0 1px rgba(176,133,50,.45),0 0 0 7px rgba(58,36,20,.45),0 30px 60px -20px rgba(0,0,0,.75)}
.gate-card h1,.gate-card h2{font-family:var(--serif);color:var(--wine);line-height:1.05;margin:4px 0 8px}
.gate-card h1{font-size:clamp(2rem,4vw,2.7rem)}
.gate-card h2{font-size:1.8rem}
.gate-card .lead,.gate-card .fine{color:var(--ink-2);margin:0 0 12px}
.gate-card .fine{font-size:.88rem;margin-top:12px}
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-weight:700;font-size:.92rem}
.field input,.field select{font:inherit;font-weight:500;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--gold);border-color:var(--gold-3)}
.field.rules{border:0;padding:0}
.field.rules legend{font-weight:700;margin-bottom:6px}
.radio{display:flex;align-items:center;gap:8px;font-weight:600;margin:4px 0}
.form-error,.warn{color:var(--wine);font-weight:700;text-align:center;min-height:1.2em;margin:14px auto 0;max-width:640px}
.lobby .warn{text-align:left;margin-top:8px}
.code-xl{font-family:var(--serif);font-size:clamp(1.8rem,6vw,2.6rem);letter-spacing:.22em;color:var(--wine);margin:6px 0 4px;font-weight:700}
.invite-line{font-size:.82rem;word-break:break-all;color:var(--ink-2);margin-bottom:10px}
.lobby{width:min(520px,calc(100% - 24px))}
#lobby.intro{top:50%;max-height:calc(100% - 16px);overflow:auto;padding:16px 18px 14px}
#lobby.intro p{margin-bottom:8px}
#lobby .code-xl{margin:0 0 2px;line-height:1.05}
#lobby .seat-row{padding:6px 0}
#lobby .fine{margin-top:4px}
.seat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);text-align:left}
.seat-row b{font-family:var(--serif);font-size:1.05rem}
.seat-row .who{flex:1;min-width:120px}
.seat-row small{display:block;color:var(--ink-2);font-weight:600}
.lobby-rules{color:var(--ink-2);font-size:.9rem;margin:8px 0}
.ava-fallback{display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--gold-2);background:#3a2616}
.table-legal{padding:14px 16px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(247,241,227,.72);font-size:.82rem}
.table-legal a{color:var(--gold-2);font-weight:700}
#lobby-seats{margin:12px 0}
.more-partner{font:inherit;border:1.5px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff;color:var(--ink)}
.checks{color:var(--ink)}

@media (max-width:800px){
  .gate-grid{grid-template-columns:1fr}
  .gate{padding:16px 12px 40px}
  .gate-card{padding:20px 16px}
  .code-xl{letter-spacing:.12em}
  .topbar-title{display:none}
  .btn{width:100%}
  .seat-row .btn{width:auto}
}
@media (max-width:1000px){
  body.in-play{overflow:auto}
  body.in-play .app{height:auto;min-height:100vh;min-height:100dvh}
}

/* Der Holztisch liegt absolut im Raum. Auf der Startseite darf die Seite
   scrollen, deshalb hat .app dort keine feste Höhe und die Lobby würde
   zusammenfallen. Sobald der Tisch offen ist, bekommt die Bühne eine Höhe,
   und die Einladungskarte scrollt in sich, wenn sie höher ist als der Tisch. */
@media (min-width:1001px){
  body[data-screen="lobby"],
  body[data-screen="game"],
  body[data-screen="ended"]{overflow:hidden}
  body[data-screen="lobby"] .app,
  body[data-screen="game"] .app,
  body[data-screen="ended"] .app{height:calc(100vh - 46px);height:calc(100dvh - 46px);min-height:0}
  body[data-screen="lobby"] .table-legal,
  body[data-screen="game"] .table-legal,
  body[data-screen="ended"] .table-legal{padding:8px 16px}
}