/* 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(138,43,226,.5); }
.stage-count { font-family: var(--round); font-size: .68rem; letter-spacing: .06em; 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: var(--r);
  background: rgba(0,0,0,.92); border: 1px solid rgba(240,41,108,.45);
  box-shadow: 0 0 18px -4px rgba(240,41,108,.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(--round); font-size: .74rem; letter-spacing: .08em; color: var(--brand); text-shadow: 0 0 10px rgba(240,41,108,.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(138,43,226,.35); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(150deg, #1C1C20, #151518); 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(138,43,226,.6); box-shadow: 0 0 14px -5px rgba(138,43,226,.7); }
.spot.on.me { border-color: rgba(240,41,108,.75); box-shadow: 0 0 14px -5px rgba(240,41,108,.85); }
.spot.on.cam video { display: block; }
.spot.on.cam .letter { display: none; }
.spot.held { border-color: rgba(255,215,0,.45); }
.spot .letter { font-size: 1.6rem; font-family: var(--sans); color: var(--text-2); }
.spot .nm {
  position: absolute; left: .3rem; bottom: .3rem; max-width: calc(100% - .6rem);
  font-family: var(--sans); font-size: .58rem; letter-spacing: .04em; color: var(--text);
  background: rgba(0,0,0,.7); padding: .12rem .35rem; border-radius: var(--r-sm);
  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(--sans); font-size: .55rem; letter-spacing: .1em; 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,215,0,.6)); }

.stagectl { display: flex; gap: .35rem; }
.stagectl .ctrl {
  flex: 1; font: inherit; font-family: var(--sans); font-size: .62rem; letter-spacing: .08em;
  padding: .55rem .2rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer;
}
.stagectl .ctrl.on { border-color: rgba(46,204,113,.5); color: var(--green); text-shadow: 0 0 10px rgba(46,204,113,.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(--sans); font-size: .66rem; letter-spacing: .08em;
  padding: .55rem; border-radius: var(--r-sm); background: none; cursor: pointer; width: 100%;
}
.hand { border: 1px solid rgba(255,215,0,.45); color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,.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(46,204,113,.5); color: var(--green); text-shadow: 0 0 10px rgba(46,204,113,.5); background: rgba(46,204,113,.05); }

/* .stage-reactions is gone from the page (2026-08-21). */
.float {
  position: absolute; bottom: 5.5rem; font-size: 1.6rem; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.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(46,204,113,.85) !important; box-shadow: 0 0 0 2px rgba(46,204,113,.55), 0 0 18px -2px rgba(46,204,113,.8) !important; }
.spot.talking .mark-mic { filter: drop-shadow(0 0 6px rgba(46,204,113,.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(--sans); 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(--sans); 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(--sans); font-size: .62rem; color: var(--text-3); letter-spacing: .06em; }
.live-page .who { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .6rem; }
.live-page .who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }

/* ==========================================================================
   Round twelve (2026-08-20): the Live tab rebuilt to Martin's picture.
   The stage fills the screen edge to edge and everything else floats over
   it: the LIVE pill and the watcher count top left, whoever is in top right,
   four things you can do down the right edge, the chat as see-through
   bubbles over the bottom, and the send bar as a pill along the very bottom.

   The one thing that cannot match the picture: his Live is six spots anybody
   can tap into, not one person filling the screen. So the overlays sit over
   the six tiles rather than over one video.
   ========================================================================== */

/* the stage fills the page; nothing boxes it in any more */
.live-page .stage-box {
  position: absolute; inset: 0;
  border: 0; border-radius: 0; background: none; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.live-page .stage-spots { flex: 1; display: flex; align-items: flex-start; padding-top: 4.4rem; }
/* The grid used to sit dead centre, which on a tall phone left a big empty
   black gap above it (tester and Martin, round seventeen). It starts under
   the top row now and the chat gets the room below. */
.live-page .stage-grid { width: 100%; }

/* Black fades top and bottom, so white words sit on something whatever the
   tiles are showing. They take no taps. */
.live-page::before, .live-page::after {
  content: ''; position: absolute; left: 0; right: 0; height: 8.5rem;
  pointer-events: none; z-index: 2;
}
.live-page::before { top: 0; background: linear-gradient(180deg, rgba(0,0,0,.85), transparent); }
.live-page::after  { bottom: 0; height: 15rem; background: linear-gradient(0deg, rgba(0,0,0,.9) 30%, transparent); }

/* ---- top left: the LIVE pill and the watcher count ---- */
.live-page .lo-top {
  position: absolute; top: .7rem; left: .8rem; right: .8rem; z-index: 4;
  display: flex; align-items: center; gap: .4rem;
}
.lo-live {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--brand); color: #FFFFFF;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  box-shadow: 0 0 16px -3px var(--brand);
}
.lo-live i { width: .42rem; height: .42rem; border-radius: 50%; background: #FFFFFF; }
.lo-live:not(.off) i { animation: lo-beat 1.4s ease-in-out infinite; }
.lo-live.off { background: rgba(0,0,0,.55); color: var(--text-2); box-shadow: none; border: 1px solid var(--line); }
.lo-live.off i { background: var(--text-3); }
@keyframes lo-beat { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce) { .lo-live i { animation: none; } }

.lo-eye {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.16); color: #FFFFFF;
  font-size: .68rem; font-weight: 700;
}
.lo-eye svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* whoever is in, pushed to the right of the same row */
.live-page .lo-top .faces-top { margin-left: auto; background: none; border: 0; padding: 0; }

/* The four-icon rail down the right edge is gone (round seventeen,
   Martin's call): its styles went with its markup. */

/* ---- the chat, floating over the bottom left ---- */
.live-page .chatbox {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: none; border: 0; border-radius: 0; padding: 0 .7rem .55rem;
  max-height: 58%;
}
.live-page .chatbox .lines {
  max-height: 9.5rem; overflow-y: auto;   /* short enough to stay off the tiles */
  padding-right: .4rem;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 12%);
  mask: linear-gradient(180deg, transparent, #000 12%);
}
.live-page .chatbox .lines::-webkit-scrollbar { display: none; }
/* The chat over the stage is the SAME bubble the Chat tab draws (Martin's
   option 2, 2026-08-21: one chat style everywhere). The one difference on a
   live screen is below: no timestamps. */
/* No timestamps over a live stage (round seventeen, Martin's call): the
   moment is now; the Chat tab keeps its times. */
.live-page .lines .line-when { display: none; }
.live-page .lines .line.note-line { background: none; }

/* the nobody-up box floats in the middle of the tiles, not in a card */
.live-page .stage-empty { z-index: 3; }

/* The gift sits on the send bar next to the play coin (round seventeen,
   Martin's call), the same as the Chat tab. */

/* Round seventeen, Martin's call: your mic, camera and step down live behind
   a tap on your own tile (#me-menu), so the standing row of three buttons is
   gone from the screen. The buttons stay in the page unseen because the
   stage script writes their state words, and the menu mirrors them. */
.live-page .stagectl { display: none !important; }

/* The reactions row left this screen (Martin's call 2026-08-21); its rules
   went with its markup. */
.live-page .chatbox .lines { padding-bottom: .3rem; }
/* the menu's mic and camera go green while they are on, like the old row */
#me-menu .menu-btn.on { color: var(--green); border-color: rgba(46,204,113,.5); }

/* ==========================================================================
   Round twenty (2026-08-21), Martin's calls: the faces row is gone, a close
   button sits on the row's right, and the eye slides the people into THE
   SAME ROW -- faces only, sideways-scrollable, tap one for their card.
   ========================================================================== */
.live-page .lo-eye { font: inherit; cursor: pointer; }
.live-page .lo-eye:active { background: rgba(0,0,0,.8); }
.live-page .lo-top .faces-top.hidden-row { display: none; }
.live-page .lo-x {
  margin-left: auto; flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.16); color: #FFFFFF;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.live-page .lo-x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.live-page .lo-x:active { background: rgba(0,0,0,.85); }
/* One capsule: the eye alone when closed; eye plus faces when open. */
.live-page .lo-people {
  display: inline-flex; align-items: center; gap: .3rem;
  flex: 0 1 auto; min-width: 0;
}
.live-page .lo-people.open {
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 0 .55rem 0 0;
}
/* inside the capsule the eye stops being its own bubble */
.live-page .lo-people.open .lo-eye { background: none; border-color: transparent; }
/* the people, in the row itself */
.live-page .lo-top .who {
  flex: 1 1 auto; min-width: 0; max-height: none;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.live-page .lo-top .who.hidden { display: none; }
.live-page .lo-top .who ul {
  display: flex; flex-direction: row; align-items: center; gap: .3rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: .1rem 0;
}
.live-page .lo-top .who ul::-webkit-scrollbar { display: none; }
.live-page .lo-top .who li { flex: 0 0 auto; padding: 0; }
/* like a drop-down, but it goes to the RIGHT (Martin's call): the faces
   slide out from the eye when it opens */
.live-page .lo-top .who:not(.hidden) ul { animation: who-out .22s ease-out; transform-origin: left center; }
@keyframes who-out {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .live-page .lo-top .who:not(.hidden) ul { animation: none; } }
/* faces only in the row; the name and level live on the card a tap away */
.live-page .lo-top .who li .who-name,
.live-page .lo-top .who li .lv { display: none; }

/* the crown on whoever started this live (round twenty, Martin's call: like
   a room's host) */
.spot.starter::before {
  content: "\1F451"; position: absolute; top: .3rem; right: .35rem;
  font-size: .95rem; z-index: 3;
  filter: drop-shadow(0 0 4px rgba(255,215,0,.6));
}