/* Landing, Lobby (Host), Join & Warteansicht — Referenz: design/lobby-host.html, design/join-mobile.html */

/* Die Landingpage bringt ihre eigenen Regeln mit (landing.css) — hier stehen
   nur noch Lobby, Join und Warteansicht. Der große Knopf wird auf beiden
   gebraucht, deshalb bleibt er hier. */
.btn.big { border-radius: 16px; padding: 20px 44px; font-size: 20px; letter-spacing: .1em;
  box-shadow: 0 0 32px rgba(34, 211, 238, .5), inset 0 -3px 0 rgba(0, 0, 0, .25); }

/* --- Lobby (Host) liegt jetzt in lobby.css (Arena-Redesign) --- */

/* Karten-Grundfläche, auch von Join-Formular und Rundenansicht genutzt. */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin-bottom: 14px; }

/* Modus-Vorschau: kleine 16:9-Kachel, die den Effekt geloopt zeigt. Wird im
   Einstellungs-Modal der Lobby verwendet (mode_preview_controller.js). */
.mode-preview { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #05070d; }
.mode-preview .mp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Verpixelt: Das Original liefert nur die Pixel fürs Canvas darüber. */
.mode-pixelate .mp-img { visibility: hidden; }
.mp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* Zoom: heranfahren und wieder heraus, nahtlos per alternate. */
.mp-zoom { animation: mp-zoom 3.4s ease-in-out infinite alternate; transform-origin: 58% 42%; }
@keyframes mp-zoom { from { transform: scale(3.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mp-zoom { animation: none; transform: scale(1.6); }
}

/* --- Join & Warteansicht (Handy) --- */
.join, .waiting { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 32px; text-align: center; }
.join .logo, .waiting .logo { font-size: 20px; }
.join .room, .waiting .room { margin-top: 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .18em; }
.join .room b, .waiting .room b { color: var(--lime); letter-spacing: .3em; font-size: 16px; text-shadow: 0 0 12px rgba(163, 230, 53, .5); }
.join .panel { width: 100%; max-width: 420px; margin-top: 36px; }
.join label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); text-align: left; margin-bottom: 10px; }
.join input[type="text"] { width: 100%; background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
  color: var(--text); font: 700 20px/1 ui-sans-serif, system-ui; padding: 16px; outline: none; text-align: center; }
.join input[type="text"]:focus { border-color: var(--cyan); box-shadow: 0 0 16px rgba(34, 211, 238, .35); }
/* 62 Figuren passen auf kein Handy — die Auswahl scrollt, mit fester Höhe
   damit der Mitspielen-Knopf sichtbar bleibt. Ein weiches Ausblenden am
   unteren Rand zeigt, dass es weitergeht. */
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  justify-items: center; gap: 12px; margin-top: 22px; padding: 4px 4px 12px;
  max-height: 42vh; overflow-y: auto; overscroll-behavior: contain;
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.avatars::-webkit-scrollbar { width: 6px; }
.avatars::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* `position: relative` ist Pflicht, nicht Kosmetik: Ohne positioniertes
   Elternelement verankert sich der versteckte Radio-Button am Dokument statt
   am Label. In der scrollbaren Liste landen die hinteren dadurch weit unter
   dem Sichtfeld, blähen die Seite auf — und beim Antippen springt der Browser
   dorthin. */
.avatar-pick { position: relative; }
.avatar-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.avatar-pick span { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line);
  display: grid; place-items: center; color: var(--muted); background: var(--surface); cursor: pointer; }
.avatar-pick input:checked + span { border-color: #fff; color: var(--text); box-shadow: 0 0 14px rgba(255, 255, 255, .5); }
.join .btn { width: 100%; margin-top: 32px; }
.join .hint, .waiting .sub { margin-top: 28px; font-size: 14px; color: var(--muted); }
.join .hint b { color: var(--text); }

.waiting .leave { margin-top: 28px; background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 8px 20px; font: inherit; cursor: pointer; }
.waiting .leave:hover { border-color: var(--red); color: var(--red); }

.waiting .you { margin: 48px 0 36px; }
.waiting .av.big { width: 88px; height: 88px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--bg);
  font-size: 42px; box-shadow: 0 0 30px rgba(34, 211, 238, .35); }
.waiting .name { margin-top: 16px; font-weight: 900; font-size: 22px; }
/* Dieselbe players-Partial wie die Host-Lobby, aber am Handy kompakt: die
   Arena-Kacheln werden zu einer schmalen Liste. */
.waiting #players-panel { width: 100%; max-width: 420px; text-align: left; }
.waiting .stage { margin: 0; display: block; }
.waiting .stage-head { margin-bottom: 10px; }
/* Am Handy kleiner und ohne Versalien. */
.waiting .stage-count { font-size: 14px; text-transform: none; }
.waiting .stage-grid { grid-template-columns: 1fr; gap: 8px; }
.waiting .pcard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  text-align: left; }
.waiting .pcard-av { width: 40px; margin: 0; border-width: 3px; box-shadow: none; }
.waiting .pcard-name { font-size: 16px; }
.waiting .pcard-ready { margin-left: auto; margin-top: 0; }
/* Der leere „komm dazu"-Platz gehört auf den Host-Screen; der Spieler selbst
   ist ja schon drin. */
.waiting .pcard.open { display: none; }

/* --- Spielstart-Platzhalter --- */
.playing-placeholder { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; text-align: center; }
.playing-placeholder h1 { font-size: 48px; color: var(--lime); text-shadow: 0 0 28px rgba(163, 230, 53, .5); }
.playing-placeholder .muted { color: var(--muted); }

/* Auswahl beim Beitreten: Das gezeichnete Bild füllt den Kreis vollständig. */
/* Formatfüllend wie im Spiel (siehe .av .avatar-art in game.css). */
.avatar-pick span .avatar-art { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* Schon vergeben: ausgegraut und nicht anklickbar. Aktualisiert sich live,
   sobald jemand beitritt (Turbo Stream auf den Kanal [room, :join]). */
.avatar-pick.taken span { opacity: .3; filter: grayscale(1); cursor: not-allowed; }
.avatar-pick.taken input:checked + span { border-color: var(--line); box-shadow: none; }