/* World layer: nameplates projected from the 3D stage, and the lite (no-WebGL) cast. */

.labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.labels.is-disabled { display: none; }

.plate {
  --seat: var(--c-cyan);
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 170px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 6, 15, 0.78);
  border: 1.5px solid var(--seat);
  box-shadow: 0 0 12px color-mix(in srgb, var(--seat) 50%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  will-change: transform;
  /* visibility follows opacity out (hidden plates never catch taps) and snaps back in. */
  transition: opacity 0.15s ease, visibility 0.15s;
}
.plate.is-kickable { pointer-events: auto; cursor: pointer; }
.plate.is-kickable:hover { filter: brightness(1.25); }
.plate.is-me { background: color-mix(in srgb, var(--seat) 26%, rgba(6, 6, 15, 0.85)); }
.plate.is-offline { opacity: 0.55; border-style: dashed; }
.plate-name { overflow: hidden; text-overflow: ellipsis; }
.plate-icon { font-size: 0.8rem; line-height: 1; }
.plate-ready { color: var(--c-green); font-weight: 900; }
.plate-off { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-red); }
.plate-points { font-family: var(--font-display); font-size: 0.66rem; color: var(--c-yellow); }
.plate-typing { display: inline-flex; gap: 2px; }
.plate-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--seat); animation: dot-bounce 1s ease-in-out infinite; }
.plate-typing i:nth-child(2) { animation-delay: 0.15s; }
.plate-typing i:nth-child(3) { animation-delay: 0.3s; }

/* ── Lite stage ────────────────────────────────────────────────────── */

.lite {
  position: absolute;
  left: var(--safe-x);
  top: var(--safe-y);
  width: var(--safe-w);
  height: var(--safe-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vh, 28px);
  padding: calc(var(--topbar-h) + 70px) 12px 12px;
}
.lite-robot {
  font-size: clamp(3.4rem, 16vmin, 7rem);
  line-height: 1;
  filter: drop-shadow(0 0 30px rgba(255, 0, 110, 0.6));
  animation: lite-hover 3s ease-in-out infinite;
}
.lite-robot[data-mood="thinking"] { animation: lite-think 0.9s ease-in-out infinite; }
.lite-robot[data-mood="judging"] { filter: drop-shadow(0 0 36px rgba(255, 204, 0, 0.8)); }
.lite-robot[data-mood="smug"] { transform: scale(1.25); filter: drop-shadow(0 0 40px rgba(255, 51, 85, 0.9)); }
@keyframes lite-hover { 50% { transform: translateY(-8px); } }
@keyframes lite-think { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

.lite-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.lite-actor {
  --seat: var(--c-cyan);
  position: relative;
  width: clamp(40px, 11vmin, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--seat) 24%, #0a0b1c);
  border: 2px solid var(--seat);
  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--seat) 40%, #000), 0 0 16px color-mix(in srgb, var(--seat) 40%, transparent);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.3s ease;
}
.lite-avatar { font-size: clamp(1.3rem, 6vmin, 2rem); line-height: 1; }
.lite-actor.is-hot { transform: scale(1.35) translateY(-6px); z-index: 1; }
.lite-actor.is-ghost { opacity: 0.55; border-style: dashed; }
.lite-actor.is-offline { opacity: 0.35; filter: grayscale(1); }
.lite-mark {
  position: absolute;
  right: -4px; top: -4px;
  min-width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--c-green);
  color: #02140c;
  font-size: 0.66rem;
  font-weight: 900;
}

.lite-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lite-floater {
  position: absolute;
  bottom: 8%;
  font-size: 1.8rem;
  animation: lite-float 1.4s ease-out forwards;
}
@keyframes lite-float {
  from { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translateY(-46vh) scale(1.3) rotate(18deg); opacity: 0; }
}