/* augh yahh! -- the Live stage. Loaded after style.css, lobby.css and room.css
   on the Live page (room.css for the reactions row and the boss menu). Same
   house style: dark ground, neon glow. Violet is the stage, lime the chat. */

.stage-box { position: relative; text-align: left; align-items: stretch; gap: .5rem; padding: .7rem .7rem .75rem; }
.stage-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.stage-top .kick { margin: 0; color: var(--violet); text-shadow: 0 0 12px rgba(157,107,255,.5); }
.stage-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }

.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
/* Nobody up (round eight, mockup 1): one box over the middle of the six
   spots saying what to do first. Taps pass through it to the spots under.
   It goes the moment somebody is up and comes back when the last one steps
   down (stage.js, paint). */
.stage-spots { position: relative; }
.stage-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: .6rem; pointer-events: none; z-index: 2;
}
.stage-empty > div {
  display: flex; flex-direction: column; gap: .3rem; align-items: center; text-align: center;
  max-width: 17rem; padding: .7rem .9rem; border-radius: 8px;
  background: rgba(5,7,12,.92); border: 1px solid rgba(248,8,120,.45);
  box-shadow: 0 0 18px -4px rgba(248,8,120,.55);
}
/* Round nine: this box says NOBODY is up, so it cannot wear the colour that
   means somebody is (the tester's catch, 2026-08-19). It is an invitation
   to be first, which is you doing something, so it takes the brand. */
.stage-empty b { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); text-shadow: 0 0 10px rgba(248,8,120,.6); }
.stage-empty span { font-size: .8rem; line-height: 1.4; color: var(--text-2); }
.stage-empty.hidden { display: none; }
.spot {
  position: relative; aspect-ratio: 3 / 4; padding: 0; margin: 0;
  border: 1px dashed rgba(157,107,255,.35); border-radius: 8px; overflow: hidden;
  background: linear-gradient(150deg, #0F1626, #0A0F17); color: var(--text-3);
  font: inherit; cursor: pointer;
}
.spot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.spot.on { border-style: solid; border-color: rgba(157,107,255,.6); box-shadow: 0 0 14px -5px rgba(157,107,255,.7); }
.spot.on.me { border-color: rgba(248,8,120,.75); box-shadow: 0 0 14px -5px rgba(248,8,120,.85); }
.spot.on.cam video { display: block; }
.spot.on.cam .letter { display: none; }
.spot.held { border-color: rgba(255,228,92,.45); }
.spot .letter { font-size: 1.6rem; font-family: var(--mono); color: var(--text-2); }
.spot .nm {
  position: absolute; left: .3rem; bottom: .3rem; max-width: calc(100% - .6rem);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; color: var(--text);
  background: rgba(5,7,12,.7); padding: .12rem .35rem; border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.spot .nm:empty, .spot .mark-mic:empty { display: none; }
.spot .mark-mic { position: absolute; right: .3rem; top: .3rem; font-size: .8rem; }
.spot .hint-up { font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 0 .3rem; text-align: center; }
.spot.on .hint-up { display: none; }
.spot .rx { position: absolute; right: .3rem; bottom: .3rem; font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(255,228,92,.6)); }

.stagectl { display: flex; gap: .35rem; }
.stagectl .ctrl {
  flex: 1; font: inherit; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem .2rem; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--text-2); cursor: pointer;
}
.stagectl .ctrl.on { border-color: rgba(59,255,158,.5); color: var(--green); text-shadow: 0 0 10px rgba(59,255,158,.5); }
.stagectl .ctrl.down { border-color: rgba(255,154,60,.45); color: var(--amber); }

.hand, .sound, #login-up {
  display: block; text-align: center; text-decoration: none; box-sizing: border-box;
  font: inherit; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem; border-radius: 6px; background: none; cursor: pointer; width: 100%;
}
.hand { border: 1px solid rgba(255,228,92,.45); color: #FFE45C; text-shadow: 0 0 10px rgba(255,228,92,.45); }
#login-up { border: 1px solid rgba(198,255,61,.45); color: var(--lime); text-shadow: 0 0 10px rgba(198,255,61,.45); }
#login-up.hidden, .hand.hidden, .sound.hidden { display: none; }
.sound { border: 1px solid rgba(59,255,158,.5); color: var(--green); text-shadow: 0 0 10px rgba(59,255,158,.5); background: rgba(59,255,158,.05); }

.stage-reactions { justify-content: space-between; }
.float {
  position: absolute; bottom: 5.5rem; font-size: 1.6rem; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,228,92,.6));
  animation: floatup 3s ease-out forwards;
}
@keyframes floatup { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-9rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* The stage box takes what it needs; the chat below takes the rest. */
.live-page .stage-box { flex: 0 0 auto; }

/* Whoever is talking: a green ring that follows the sound. */
.spot.talking { border-color: rgba(59,255,158,.85) !important; box-shadow: 0 0 0 2px rgba(59,255,158,.55), 0 0 18px -2px rgba(59,255,158,.8) !important; }
.spot.talking .mark-mic { filter: drop-shadow(0 0 6px rgba(59,255,158,.9)); }

/* Your own tile is a mirror, like a selfie camera. Everyone else sees you the
   right way round (Martin's ask 2026-08-18). */
.spot.me video { transform: scaleX(-1); }

.stage-note { margin: 0; min-height: 1em; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; color: var(--text-3); text-align: center; overflow-wrap: anywhere; }
.stage-note:empty { display: none; }

/* ================= the chat under the stage: open, no box =================
   Martin's ask 2026-08-18: lines float over the dark page, no box around
   them. The lines themselves are the one pill style both rooms share since
   round eight (lobby.css, "one pill a line"); only the send row is rounder
   here. */
.chatbox.open-style { border: 0; box-shadow: none; padding: .2rem 0 0; }
.chatbox.open-style .roomtop { border-bottom: 0; padding: .1rem .2rem .3rem; opacity: .85; }
.chatbox.open-style .lines { padding: .1rem .1rem .3rem; }
.chatbox.open-style .say .field { border-radius: 999px; padding-left: 1rem; }
.chatbox.open-style .say .btn { border-radius: 999px; }
.chatbox.open-style .login-bar { border-radius: 999px; }

/* The row above the lines (count, name, Full chat) is gone from Live at
   Martin's ask 2026-08-18; the elements stay for the script but do not show,
   and the chat count is echoed, small, into the stage's top line. */
.chatbox.open-style .roomtop.quiet-top { display: none; }
.stage-count .chat-n { color: var(--text-3); }

/* Live: the faces row at the very top, like the Chat tab's */
.live-page .faces-top { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; padding: 0 .1rem; min-height: 2.2rem; }
.live-page .faces-top .cnt-btn { display: flex; align-items: center; gap: .3rem; font: inherit; color: var(--lime); background: none; border: 0; padding: .2rem 0; cursor: pointer; }
.live-page .faces-top .badge.sm { width: 1.5rem; height: 1.5rem; font-size: .7rem; }
.live-page .faces-top .badge.sm.framed { width: 2.3rem; height: 2.3rem; }
.live-page .faces-top .who-more { font-family: var(--mono); font-size: .66rem; color: var(--lime); border: 1px solid rgba(198,255,61,.45); border-radius: 999px; padding: .1rem .45rem; margin-left: .2rem; }
.live-page .faces-top .who-none { font-family: var(--mono); font-size: .62rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
.live-page .who { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; }
.live-page .who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }