/* Anmeldekarte: dasselbe Holz und Gold wie die Sperre, nur größere Schrift.
   Die Startseite hat kein Spiel-Modal. Die Karte liegt deshalb selbst über der Navigation. */
#modal-signup{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(15,8,4,.62);
}
#modal-signup[hidden]{display:none !important}
#modal-signup .modal-card{
  width:min(640px,100%);
  max-height:min(92dvh,760px);
  overflow:auto;
  background:linear-gradient(170deg,#fffaf0,#efe5cf);
  color:#2a2420;
  border-radius:20px;
  padding:24px 26px;
  box-shadow:0 0 0 1px rgba(176,133,50,.5),0 0 0 7px rgba(58,36,20,.7),0 40px 80px -20px rgba(0,0,0,.85);
}
body.sf-signup-offen #zuschauen-dock{display:none !important}
.signup-card .pw-horst{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.signup-card .pw-horst img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #e9c977}
.signup-card .pw-horst-line{margin:0;font-family:var(--serif, Fraunces, Georgia, serif);font-style:italic;font-weight:500;font-size:1.15rem;line-height:1.35;color:#3a2414}
.signup-card .btn-ghost-dark{
  background:transparent;
  border:1.5px solid rgba(42,36,32,.3);
  color:#2a2420;
  border-radius:999px;
  cursor:pointer;
}
.signup-card h3{font-size:2.15rem;line-height:1.12}
.signup-card .pw-kicker{font-size:.95rem}
.signup-card .pw-lead{font-size:1.28rem;line-height:1.45}
.signup-card .pw-trust{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;font-size:1.02rem;line-height:1.4;font-weight:600;color:#5c4a32}
.signup-card .pw-trust svg{flex:none;width:18px;height:18px;margin-top:1px;color:#8a6420}
.signup-card .pw-field{display:block;font-size:1.2rem;font-weight:700;margin:14px 0}
.signup-card .pw-field input{display:block;width:100%;margin-top:6px;font:inherit;font-size:1.25rem;padding:.72em .85em;border-radius:12px;border:1.5px solid var(--line,#e3d6b8);background:#fff;color:var(--ink,#2a2420)}
.signup-card .pw-field.pw-code input{font-size:2rem;font-weight:800;letter-spacing:.22em;text-align:center}
.signup-card .btn{font-size:1.2rem;padding:.9em 1.3em}
.signup-card form .btn{width:100%;margin-top:6px}
.signup-card .pw-status{font-size:1.05rem;min-height:1.3em}
.pw-spam{margin:14px 0 4px;padding:12px 14px;border-radius:14px;background:#fff6e4;border:1px solid rgba(176,133,50,.55);color:#3a2414;font-size:1.02rem;line-height:1.45;font-weight:600}
.signup-card .pw-resend,#sf-invite-app .pw-resend{width:100%;margin-top:12px;white-space:normal}
.sf-who{display:inline-flex;align-items:center;gap:8px;margin-right:8px;color:var(--cream,#f7f1e3);font-weight:700;font-size:1rem}
.sf-who b{color:var(--gold-2,#e9c977);font-family:var(--serif,Georgia,serif);font-weight:700;font-size:1.08rem}
.sf-who button{font:inherit;font-weight:700;color:var(--cream,#f7f1e3);background:transparent;border:1.5px solid rgba(233,201,119,.75);border-radius:999px;padding:.4em .85em;cursor:pointer}
.sf-who button:hover{background:rgba(247,241,227,.1)}
.anmelden-page{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(ellipse at 50% 0%,rgba(255,170,80,.16),transparent 55%),
  linear-gradient(#3d2616,#1f130b);color:#f7f1e3}
.anmelden-page .nav{position:relative}
.anmelden-main{flex:1;display:grid;place-items:center;padding:28px 16px}
.anmelden-card{width:min(640px,100%);background:linear-gradient(170deg,#fffaf0,#efe5cf);color:#2a2420;border-radius:20px;padding:28px 26px;box-shadow:0 0 0 1px rgba(176,133,50,.5),0 0 0 7px rgba(58,36,20,.7),0 40px 80px -20px rgba(0,0,0,.85)}
.anmelden-card .btn{margin-top:8px}
@media (max-width:560px){
  .signup-card .pw-horst img{width:64px;height:64px}
  .signup-card .pw-horst-line{font-size:1.02rem}
  .signup-card h3{font-size:1.75rem}
  .signup-card .pw-lead,.signup-card .pw-field,.signup-card .pw-field input,.signup-card .btn{font-size:1.12rem}
  .pw-spam{font-size:1rem;padding:12px 12px}
  .sf-who{font-size:.88rem;gap:6px}
  .sf-who button{padding:.3em .6em}
  /* Die Kopfzeile der Tische ist ohne Logo schon voll. Name und Abmelden
     bekommen eine eigene Zeile, die Spielknöpfe bleiben auf dem Schirm. */
  .topbar:has([data-sf-account]){height:auto;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
  .topbar:has([data-sf-account]) .topbar-actions{flex-wrap:wrap;row-gap:4px}
  .topbar .sf-who{flex:1 0 100%;order:-1;justify-content:flex-end;margin:0 0 2px}
}