/* Kometenkirmes – Online-Mehrspieler: Lobby-Seite (online.html) und Online-Teile im Spiel (js/netz.js). */

/* ---------- Im Spiel ---------- */
.netz #app{grid-template-areas:"top" "netz" "hud" "board" "panel";grid-template-rows:auto auto auto minmax(0,1fr) auto}
.netzbar{grid-area:netz;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.netz-chip{color:var(--lantern);border-color:rgba(255,201,74,.35)}
.netz-code{font-weight:800;font-size:13px;color:var(--faint);margin-right:auto;letter-spacing:.06em}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .netz #app{grid-template-areas:"top top" "board netz" "board hud" "board panel";grid-template-rows:auto auto auto minmax(0,1fr)}
}
.die.spin{animation:none}
.emo-pop{position:fixed;z-index:40;display:grid;grid-template-columns:repeat(4,44px);gap:6px;padding:8px;border-radius:16px}
.emo-pop button{width:44px;height:44px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);font-size:24px;line-height:1;padding:0}
.emo-pop button:hover{background:rgba(255,255,255,.12)}
.emo-layer{position:fixed;inset:0;pointer-events:none;z-index:45}
.emo-bubble{position:fixed;font-size:30px;line-height:1;padding:6px 8px;border-radius:16px 16px 16px 4px;background:var(--ink);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);animation:emo 2.6s ease-out forwards}
@keyframes emo{0%{transform:scale(.4) translateY(10px);opacity:0}12%{transform:scale(1.1);opacity:1}20%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-18px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .emo-bubble{animation:none} }

/* ---------- Lobby-Seite ---------- */
.on-main{max-width:640px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:16px}
.on-main h1{font-size:clamp(34px,9vw,48px);margin:0}
.on-row{display:flex;flex-direction:row;gap:8px;align-items:center}
.on-row .inp{flex:1 1 140px;min-width:0}
.on-row .btn{flex:0 0 auto;width:auto}
.code-inp{text-transform:uppercase;letter-spacing:.2em;font-weight:900}
.on-list{display:flex;flex-direction:column;gap:8px}
.on-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(10,8,34,.45);border:1px solid var(--stroke)}
.on-item .nm{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.on-item small{display:block;color:var(--muted);font-weight:700;font-size:12px;white-space:normal}
.on-item .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.on-item .face,.on-item svg{width:36px;height:36px}
.on-faces{display:flex}
.on-faces > *{width:30px;height:30px;margin-right:-8px}
.dot-on,.dot-off{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot-on{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.dot-off{background:var(--faint);opacity:.5}
.on-empty{color:var(--faint);font-size:14px;margin:0}
.big-code{font-family:var(--f-display);font-size:44px;letter-spacing:.14em;color:var(--lantern);line-height:1;text-shadow:0 0 24px rgba(255,201,74,.35)}
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seat{display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--stroke);background:rgba(10,8,34,.45);min-width:0}
.seat.free{border-style:dashed;color:var(--faint);justify-content:space-between}
.seat .nm{font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.seat small{display:block;color:var(--muted);font-size:11px;font-weight:800}
.seat .face,.seat svg{width:38px;height:38px;flex:none}
.seat .x{background:none;border:0;color:var(--faint);font-size:18px;padding:4px 6px}
.on-sec-title{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--coral);color:#1a1440;font-weight:900;font-size:12px;text-align:center}
.on-main .seg{display:flex;gap:6px}
.on-main .seg button{flex:1;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);padding:9px 6px;font-weight:900;color:var(--muted)}
.on-main .seg button[aria-pressed="true"]{background:var(--lantern);color:#1a1440;border-color:transparent}
.on-main .seg button:disabled{opacity:.6;cursor:default}
.on-set{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.on-set .full{grid-column:1/-1}
@media (max-width:420px){ .seats{grid-template-columns:1fr} .on-set{grid-template-columns:1fr} }

/* Schmale Handys: Logo ohne Schriftzug, damit „Konto“ und „Am Gerät“ ganz in die Leiste passen. */
@media (max-width:400px){.nav .logo-txt{display:none}}