/* ───── Smartphone-Feinschliff (nach style.css geladen) ───── */
html, body { overscroll-behavior: none; }
.screen { height: 100dvh; }
@media (max-width: 700px) {
  #lobby { padding: 10px; align-items: flex-start; }
  .lobby-panel { padding: 14px 12px 16px; border-radius: 18px; }
  .title { margin-bottom: 8px; }
  .kicker { font-size: 10px; letter-spacing: 0.22em; }
  h1 { font-size: clamp(19px, 6vw, 26px); margin: 4px 0 2px; }
  .sub { font-size: 14px; }
  .namebox { margin: 8px auto 12px; gap: 8px; }
  .namebox span { font-size: 11px; }
  .namebox input { font-size: 18px; padding: 8px 12px; width: min(220px, 56vw); }
  .rooms { grid-template-columns: 1fr 1fr; gap: 10px; }
  .room { padding: 12px 11px 11px; border-radius: 15px; min-height: 148px; }
  .room .rname { font-size: 14px; }
  .room .rdesc { font-size: 12px; min-height: 0; }
  .room .seats { margin: 9px 0 8px; gap: 6px; }
  .room .seat { width: 28px; height: 28px; font-size: 14px; }
  .room .pill { font-size: 12px; padding: 3px 9px; }
  .room .who { font-size: 12px; margin-top: 7px; min-height: 0; }
  .room .go { display: none; }
  .lobby-foot { margin-top: 12px; gap: 8px; }
  .lobby-foot .hint { font-size: 12px; }
  .ghost { padding: 9px 13px; font-size: 15px; }
  .count span { font-size: clamp(80px, 16vh, 150px); }
  .hintline { font-size: 15px; min-height: 22px; }
  .picker { padding: 8px; gap: 6px; border-radius: 22px; }
  .pick { width: calc((100vw - 24px - 16px - 24px) / 5); max-width: 84px; border-radius: 16px; }
  .banner { top: 60%; width: 94vw; }
  .b-title { font-size: clamp(26px, 9vw, 44px); }
  .b-text { font-size: 17px; }
  .nextbar { width: 94vw; }
  .modal-card { padding: 16px; }
  .modal-card h2 { font-size: 19px; }
  #rules-list { font-size: 15px; }
}
@media (max-width: 380px) {
  .scoreboard .side { min-width: 66px; padding: 5px 8px; }
  .pname { font-size: 11px; max-width: 66px; }
  .pick .lbl { font-size: 10px; letter-spacing: 0.02em; }
}
/* Querformat am Handy */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { padding-top: 6px; }
  .scoreboard .side { padding: 3px 14px; min-width: 90px; }
  .pscore { font-size: 22px; }
  .banner { top: 30%; padding: 6px 14px 8px; }
  .b-title { font-size: clamp(22px, 7vh, 40px); }
  .b-text { font-size: 15px; }
  .count { top: 36%; }
  .count span { font-size: clamp(60px, 22vh, 120px); }
  .status { bottom: 0; padding: 8px 14px; grid-template-columns: 1fr auto; grid-template-areas: "title btn" "text btn"; }
  .status .radar { display: none; }
  .picker { padding: 6px; }
  .bottom { padding-bottom: 6px; }
  .nextbar { width: min(420px, 60vw); }
  .rooms { grid-template-columns: repeat(4, 1fr); }
  .room { min-height: 0; }
}

/* Statuskarte: Einladen-Button und kompaktes Layout am Handy */
.status .ghost { grid-area: btn; margin: 0; padding: 12px 20px; font-size: 17px; }
@media (max-width: 700px) {
  .status { grid-template-columns: 1fr; grid-template-areas: "title" "text" "btn"; text-align: center; padding: 12px 14px 14px; row-gap: 4px; bottom: 2px; }
  .status .radar { display: none; }
  .s-title { font-size: 17px; }
  .s-text { font-size: 14px; }
  .status .primary, .status .ghost { justify-self: stretch; margin-top: 8px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .status { grid-template-columns: 1fr auto; grid-template-areas: "title btn" "text btn"; text-align: left; }
  .status .primary, .status .ghost { margin-top: 0; justify-self: end; }
}

/* Querformat am Handy: Symbolleiste als Spalte am rechten Rand, Hände bekommen die volle Höhe */
@media (max-height: 520px) and (orientation: landscape) {
  .bottom { position: fixed; inset: 0; padding: 0; flex-direction: row; align-items: center; justify-content: flex-end; pointer-events: none; z-index: 6; }
  .picker { flex-direction: column; padding: 6px; gap: 6px; margin-right: calc(8px + env(safe-area-inset-right)); }
  .pick { width: 48px; max-width: none; aspect-ratio: 1; border-radius: 14px; }
  .pick .lbl { display: none; }
  .pick .ico { font-size: 26px; }
  .pick kbd { display: none; }
  .hintline { position: fixed; left: 50%; bottom: 5px; transform: translateX(-50%); min-height: 0; font-size: 13px; white-space: nowrap; text-shadow: 0 2px 10px #000; }
  .nextbar { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(340px, 46vw); pointer-events: auto; }
  .status { bottom: 30px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  /* Ergebnis links neben die eigene Hand, damit beide Gesten sichtbar bleiben */
  .banner { left: 24%; top: 50%; width: 40vw; padding: 6px 10px 8px; }
  .b-title { font-size: clamp(20px, 6.5vh, 34px); }
  .b-text { font-size: 14px; }
}

/* Touch-Ziele mindestens 44 px */
.ghost.small, .ghost.icon { min-width: 44px; min-height: 44px; }
@media (max-width: 700px) {
  .topbar #btn-leave { width: 44px; height: 44px; }
  .ghost.icon { width: 44px; height: 44px; }
  .pscore { font-size: 28px; }
}