/* scenes/meetup.js -- friends join an island: the chat corner, the counter, the computers over their heads. */
.gscene-meetup .gscene-stage { height: clamp(380px, 64vh, 600px);
  background: radial-gradient(ellipse 85% 70% at 50% 25%, #5d8fd6, #2c5596 45%, #142b55 80%, #0c1a36); }
.meetup-chat { position: absolute; left: 14px; bottom: 14px; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none;
  display: flex; flex-direction: column; gap: 5px; max-width: min(86%, 360px); }
.meetup-line { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 6px; border-radius: 9px;
  font: 700 0.84rem/1.3 var(--display); color: #fff; background: rgba(8, 12, 24, 0.66); border: 1px solid rgba(255, 255, 255, 0.1);
  animation: meetup-in 0.35s ease-out both; transition: opacity 0.8s; }
.meetup-line.old { opacity: 0.45; }
.meetup-line i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 900 0.9rem/1 var(--display); font-style: normal;
  color: #0b1a0b; background: var(--grass); }
.meetup-line.is-leave i { color: #2a0b0b; background: var(--red); }
.meetup-count { position: absolute; right: 14px; top: 14px; z-index: 3; pointer-events: none; display: flex; align-items: baseline; gap: 6px;
  padding: 6px 13px; border-radius: 12px; font: 800 0.8rem var(--display); color: rgba(255, 255, 255, 0.8);
  background: rgba(8, 12, 24, 0.66); border: 1px solid rgba(255, 255, 255, 0.12); }
.meetup-count span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.meetup-count b { font-size: 1.3rem; color: var(--gold); }
.meetup-count small { font-size: 0.8rem; }
.meetup-badge { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.25s;
  padding: 2px 9px; border-radius: 99px; font: 800 0.72rem var(--display); color: #08101e; background: var(--water); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.meetup-badge[data-os="windows"] { background: var(--gold); }
.meetup-badge[data-os="linux"] { background: var(--grass); }
.meetup-badge.on { opacity: 1; }
@keyframes meetup-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .meetup-line { font-size: 0.74rem; } .meetup-badge { font-size: 0.64rem; } }
@media (prefers-reduced-motion: reduce) { .meetup-line { animation: none; } }