/* Room (spec §22-25, §38-46, §91-92, §184, §186, §188). Cinematic, open,
   content-first — circular avatars, no nested boxed widgets. */
#roomLayer { position: fixed; inset: 0; z-index: var(--z-room); background: var(--bg); }
.room-loading { height: 100%; display: grid; place-items: center; align-content: center; gap: var(--s4); padding: var(--gutter); }

.room-view {
  position: absolute; inset: 0; display: grid;
  grid-template-areas: "header" "main" "side" "controls";
  /* Phone portrait: the chat row always keeps room for its tabs + composer; the
     main column (seats, stage, cameras) takes what is left and scrolls, so the
     composer can never be pushed over Mic | Camera | Leave. */
  grid-template-rows: auto minmax(0, auto) minmax(200px, 1fr) auto;
  background: radial-gradient(ellipse at 50% -10%, rgba(231,185,107,.10), transparent 55%), var(--bg);
  overflow: hidden;
}
.room-header { grid-area: header; display: flex; align-items: center; gap: 4px; padding: calc(var(--sat) + 6px) calc(var(--gutter) + var(--sar) - 8px) 6px calc(var(--gutter) + var(--sal) - 8px); min-width: 0; }
.rh-identity { flex: 1; min-width: 0; display: grid; padding-inline: 4px; }
.rh-title { font: 650 var(--fs-lg)/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-status { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-count { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); padding-inline: 8px; }
.rh-count .ic { width: 18px; height: 18px; }
.room-view.reconnecting .rh-status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ffb020; margin-inline-end: 6px; vertical-align: middle; animation: breathe 1.2s infinite; }

.room-body { display: contents; }
.room-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s3); padding: 0 calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal)); min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.room-side { grid-area: side; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: var(--s2) calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal)); }

/* ---------------- participants ---------------- */
.participants, .participants.waiting { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; justify-items: center; align-items: start; padding: 8px 2px 4px; overflow: visible; min-height: 0; }
/* One straight row of 8 seats on every screen (owner's layout): the seat size follows the row width. */
.p { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.p-ring { position: relative; border-radius: 50%; width: min(100%, 60px); }
.p .avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; font-size: clamp(11px, 3.4vw, 18px) !important; box-shadow: 0 0 0 2px var(--ring-member); }   /* white/light = member */
.p.host .avatar { box-shadow: 0 0 0 2.5px var(--gold), var(--gold-glow); }                                        /* gold = HOST ONLY */
.p-name { font-size: var(--fs-xs); font-weight: 600; max-width: 100%; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-crown { width: 13px; height: 13px; color: var(--gold); }
.p-mic { position: absolute; inset-block-end: -3px; inset-inline-end: -3px; width: clamp(15px, 4.4vw, 22px); height: clamp(15px, 4.4vw, 22px); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--bg); color: var(--text-3); }
.p-mic .ic { width: 60%; height: 60%; } .p-mic.on { color: var(--gold); }
/* speaking glow (voice activity) and link-quality dot (top-left of remote seats) */
.p.speaking .avatar { box-shadow: 0 0 0 2.5px var(--ok), 0 0 16px 2px rgba(76,195,138,.55) !important; }
.p-net { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: clamp(9px, 2.6vw, 12px); height: clamp(9px, 2.6vw, 12px); border-radius: 50%; border: 2px solid var(--bg); background: var(--text-3); }
.p-net.good { background: var(--ok); } .p-net.fair { background: #ffb020; } .p-net.bad { background: var(--danger); } .p-net.connecting { background: var(--text-3); }
.seat-empty { width: min(100%, 60px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.025); }
.seat-ghost { position: fixed; z-index: calc(var(--z-room) + 5); border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(231,185,107,.6); opacity: 0; }
.room-view[data-state="active"] .participants { padding-block: 4px; }

/* ---------------- stage ---------------- */
.stage-wrap { position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 46dvh; border-radius: var(--r-lg); overflow: hidden; background: #000; isolation: isolate; }
.stage-layer { position: absolute; inset: 0; display: none; }
.stage-layer.on { display: block; }
.stage-idle { display: none; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(231,185,107,.12), transparent 60%), #060606; }
.stage-idle.on { display: grid; }
.stage-idle-inner { display: grid; justify-items: center; gap: 14px; padding: var(--s4); text-align: center; }
.stage-ring { width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--gold); box-shadow: var(--gold-glow); animation: breathe 2.4s infinite; }
.stage-hint { color: var(--text-2); font-size: var(--fs-sm); max-width: 32ch; }
.stage-search { background: rgba(6,6,6,.97); padding: var(--s3); overflow: auto; }
.stage-search.on { display: flex; flex-direction: column; gap: var(--s3); }
.stage-search-bar { display: flex; align-items: center; gap: 8px; padding-inline-start: 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }
.stage-search-input { border: 0 !important; background: transparent !important; min-height: 44px; }
.stage-search-results { display: flex; flex-wrap: wrap; gap: var(--s3); }
.stage-search-results .poster { width: 104px; }
.preview-bg { position: absolute; inset: 0; background: #0c0b09; }
.preview-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-slow); }
.preview-bg img.loaded { opacity: .6; }
.preview-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15)), linear-gradient(0deg, rgba(0,0,0,.8), transparent 50%); }
[dir="rtl"] .preview-fade { background: linear-gradient(-90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15)), linear-gradient(0deg, rgba(0,0,0,.8), transparent 50%); }
.preview-info { position: absolute; inset-block-end: 0; inset-inline-start: 0; max-width: 560px; padding: var(--s4); display: grid; gap: 8px; }
.preview-title { font-size: clamp(20px, 3.4vw, 34px); }
.preview-overview { color: var(--text-2); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trailer-unavailable { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); }
.stage-player { background: #000; }
.player-box, .player-host { position: absolute; inset: 0; }
.player-host iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }   /* UNISNOV owns the controls */
.player-loading, .player-error { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: var(--s4); }
.player-error .ic { color: #ff8b8e; }
.player-controls { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); }
.pc-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; flex: none; }
.seek { flex: 1; min-width: 40px; accent-color: var(--gold); height: 24px; }
.time { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mode-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); text-transform: uppercase; }
.mode-badge.live { background: rgba(229,72,77,.9); color: #fff; }
.player-controls.locked .pc-btn, .player-controls.locked .seek { opacity: .35; pointer-events: none; }
@media (max-width: 480px) { .time { display: none; } }
.stage-fab { position: absolute; z-index: 3; inset-block-end: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: rgba(10,10,10,.8); border: 1px solid rgba(231,185,107,.45); color: var(--gold); font-weight: 600; font-size: var(--fs-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage-prompt { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0,0,0,.78); padding: var(--s4); }
.prompt-card { display: grid; gap: 10px; width: min(320px, 100%); text-align: center; }
.stage-reactions { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.reaction { position: absolute; bottom: 12px; font-size: 26px; animation: floatUp 1.7s var(--ease) forwards; }
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-160px); opacity: 0; } }
.policy-note { font-size: var(--fs-xs); color: var(--gold); text-align: center; }
.audio-unlock { align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--gold-metal); color: #1a1206; font-weight: 700; font-size: var(--fs-sm); }

/* ---------------- cameras: only live cameras become tiles ---------------- */
.cam-tiles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cam-tiles::-webkit-scrollbar { display: none; }
.cam-tile { position: relative; flex: none; width: 118px; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #000; }
.cam-tile video { width: 100%; height: 100%; object-fit: cover; }
.cam-tile.local video { transform: scaleX(-1); }
.cam-label { position: absolute; inset-inline-start: 6px; inset-block-end: 5px; font-size: 10.5px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.cam-hide { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 32px; height: 32px; opacity: 0; transition: opacity var(--t-fast); background: rgba(0,0,0,.5); }
.cam-tile:hover .cam-hide, .cam-tile:focus-within .cam-hide { opacity: 1; }
.cam-hide .ic { width: 16px; height: 16px; }

/* ---------------- chat ---------------- */
.side-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.side-tab { min-height: 42px; padding: 0 14px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.side-tab[aria-selected="true"] { color: var(--gold); border-color: var(--gold); }
.side-invite { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.side-invite .ic { width: 16px; height: 16px; }
.side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-panel { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 2px; }
.chat-list { display: flex; flex-direction: column; gap: 10px; outline: none; }
.msg { position: relative; display: grid; gap: 2px; padding-inline-end: 30px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-name { font-size: var(--fs-sm); } .msg.mine .msg-name { color: var(--gold); }
.msg-time { font-size: 10.5px; color: var(--text-3); }
.msg-body { font-size: var(--fs-md); color: #e6e3de; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-report { position: absolute; inset-inline-end: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; opacity: 0; color: var(--text-3); }
.msg:hover .msg-report, .msg-report:focus-visible { opacity: 1; } .msg-report .ic { width: 16px; height: 16px; }
.chat-older { align-self: center; display: block; margin: 0 auto 8px; font-size: var(--fs-xs); color: var(--text-2); padding: 6px 12px; }
.chat-error { display: grid; gap: 8px; justify-items: center; color: var(--text-2); font-size: var(--fs-sm); padding: 12px; }
.chat-new-pill { position: absolute; inset-inline: 0; margin-inline: auto; width: max-content; bottom: 68px; z-index: 2; padding: 7px 14px; border-radius: var(--r-pill); background: var(--gold-metal); color: #1a1206; font-weight: 700; font-size: var(--fs-xs); box-shadow: 0 8px 18px -8px rgba(0,0,0,.9); }
.chat-form { display: flex; align-items: center; gap: 4px; margin: 8px 0 10px; padding: 4px 4px 4px 6px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line); transition: border-color var(--t-fast); }   /* one stretched bar, the send button lives inside it */
.chat-form:focus-within { border-color: rgba(231,185,107,.5); }
.chat-input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none; }
.chat-send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1408; }
.chat-send .ic { width: 20px; height: 20px; }
.chat-send:disabled { opacity: .45; }
.chat-counter { font-size: 10.5px; color: var(--text-3); }

/* voting */
.vote-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: var(--fs-sm); color: var(--text-2); }
.vote-btn .ic { width: 16px; height: 16px; } .vote-btn.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.rate { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.rate-result { display: grid; gap: 8px; justify-items: center; width: 100%; } .rate-avg { font: 700 44px/1 var(--font-display); color: var(--gold); } .rate-rows { width: 100%; }

/* ---------------- controls: MIC | CAMERA | LEAVE ---------------- */
.room-controls { grid-area: controls; display: flex; justify-content: center; gap: clamp(20px, 8vw, 44px); padding: 10px calc(var(--gutter) + var(--sar)) calc(10px + var(--sab)) calc(var(--gutter) + var(--sal)); }
.rc-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); font-size: var(--fs-xs); font-weight: 600; min-width: 64px; }
.rc-btn > .ic { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); transition: all var(--t-fast); }
.rc-btn.on > .ic { background: var(--gold-soft); color: var(--gold); border-color: rgba(231,185,107,.55); box-shadow: var(--gold-glow); }
.rc-leave > .ic { background: var(--danger); border-color: transparent; color: #fff; }
.rc-btn:disabled { opacity: .4; }

/* ---------------- Room Memory sub-view ---------------- */
.room-memory { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; background: var(--bg); overflow: auto; padding: calc(var(--sat) + 6px) calc(var(--gutter) + var(--sar)) calc(var(--sab) + 24px) calc(var(--gutter) + var(--sal)); }
.room-view.show-memory .room-memory { display: flex; }
.memory-head { display: flex; align-items: center; gap: 8px; min-height: 52px; margin-bottom: var(--s4); }
.memory-head h2 { flex: 1; font-size: var(--fs-xl); }
.memory-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--gold); }
.memory-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: breathe 1.8s infinite; }
.memory-body { display: grid; gap: var(--s6); max-width: 900px; width: 100%; margin: 0 auto; }
.mem-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mem-stat { display: grid; gap: 4px; padding: var(--s4); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(231,185,107,.10), rgba(255,255,255,.02)); }
.mem-stat b { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mem-stat span { font-size: var(--fs-xs); color: var(--text-2); }
.mem-list { display: grid; gap: 4px; }
.mem-row { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mem-title { flex: 1; min-width: 160px; display: grid; }
.mem-rate { display: flex; align-items: center; gap: 10px; }
@media (min-width: 768px) { .mem-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------- tablet & desktop (not a stretched phone) ---------------- */
@media (min-width: 768px) and (min-aspect-ratio: 1/1), (min-width: 1024px) {
  .room-view { grid-template-areas: "header header" "main side" "controls side"; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .room-side { border-inline-start: 1px solid var(--line); padding-top: 0; padding-inline-start: var(--s4); margin-bottom: var(--sab); }
  .room-main { overflow: auto; padding-bottom: var(--s3); }
  .stage { max-height: none; }
  .participants, .participants.waiting { max-width: 640px; }
}
@media (min-width: 1024px) {
  .room-view { grid-template-columns: minmax(0, 1fr) var(--side-w); }
  .rh-title { font-size: var(--fs-xl); }
  /* Up to 8 cameras: rails left + right of the stage, never covering it. */
  .room-view:not([style*="--cams: 0"]) .stage-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-auto-rows: min-content; align-items: start; column-gap: 12px; }
  .stage-wrap > .stage { grid-column: 2; grid-row: 1 / span 4; }
  .cam-tiles { display: contents; }
  .cam-tile { width: clamp(120px, 11vw, 176px); }
  .cam-tile:nth-child(odd) { grid-column: 3; }
  .cam-tile:nth-child(even) { grid-column: 1; }
}

/* ---------------- Focus mode (§188) ---------------- */
.room-focus .room-view { grid-template-areas: "main"; grid-template-columns: 1fr; grid-template-rows: 1fr; background: #000; }
.room-focus .room-header, .room-focus .room-side, .room-focus .room-controls, .room-focus .participants, .room-focus .policy-note { display: none; }
.room-focus .room-main { padding: 0; justify-content: center; }
.room-focus .stage { position: fixed; inset: 0; z-index: 3; width: 100vw; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0; }   /* Enlarge = the content fills the whole screen (the player centres itself on black) */
.room-focus .player-controls { padding-inline: calc(12px + var(--sal)) calc(12px + var(--sar)); padding-bottom: calc(8px + var(--sab)); }
.room-focus .cam-tiles { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; flex-direction: column; z-index: 4; }
.room-focus .cam-tile { width: 140px; }
body.in-room .toast-host { bottom: calc(132px + var(--sab)); }   /* clear of Mic | Camera | Leave */

/* Flex children of the Room column never collapse into each other; the column scrolls instead. */
.room-main > * { flex-shrink: 0; }

/* ---------------- short landscape phones (e.g. 844×390) ---------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .room-view { grid-template-areas: "header header" "main side" "controls side"; grid-template-columns: minmax(0, 1fr) min(300px, 38vw); grid-template-rows: auto minmax(0, 1fr) auto; }
  .room-main { overflow: auto; }
  .room-side { border-inline-start: 1px solid var(--line); padding-top: 0; padding-inline-start: var(--s3); }
  .room-header { padding-block: 4px; }
  .participants, .participants.waiting { display: flex; gap: 8px; padding-block: 4px 0; overflow-x: auto; }
  .participants .p, .participants.waiting .p { width: 44px; gap: 2px; }
  .participants .p .avatar, .participants.waiting .p .avatar { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  .participants .seat-empty { width: 38px; height: 38px; }
  .participants .p-name { font-size: 10px; }
  .stage { max-height: calc(100dvh - 150px); }
  .room-controls { padding-block: 4px calc(4px + var(--sab)); }
  .room-controls .rc-label { display: none; }
  .rc-btn > .ic { width: 44px; height: 44px; padding: 12px; }
}

/* Narrow screens: a segmented choice sits under its label instead of being clipped. */
@media (max-width: 480px) {
  .set-row:has(.segmented) { flex-direction: column; align-items: stretch; gap: 8px; }
  .set-row .segmented { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ---------------- solo "Watch" (title page, no Room) ---------------- */
.solo-player { position: fixed; inset: 0; z-index: var(--z-overlay); background: #000; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--sat) + 8px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px); }
.solo-top { position: absolute; top: calc(var(--sat) + 8px); inset-inline: 8px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.solo-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-stage { width: min(100%, calc((100dvh - var(--sat) - var(--sab) - 96px) * 16 / 9)); margin: 0 auto; max-height: none; }
.solo-host iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
body.solo-open { overflow: hidden; }

.participants .p { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.participants .p:focus-visible .avatar { outline: 2px solid var(--gold); outline-offset: 3px; }
.stage-exit { position: absolute; z-index: 4; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border-radius: var(--r-pill);
  background: rgba(10,10,10,.72); border: 1px solid rgba(231,185,107,.45); color: var(--gold); font-weight: 600; font-size: var(--fs-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage-exit svg { width: 18px; height: 18px; }
.stage-exit[hidden] { display: none; }
.chat-typing { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 2px 4px; color: var(--text-2); font-size: var(--fs-xs); }
.chat-typing[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .35; animation: typingDot 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .7; } }
.cam-tile.paused video { opacity: 0; } .cam-tile.paused { background: radial-gradient(circle at 50% 40%, #1d1a14, #0a0a0a); }

/* Room clock (like Discord's call timer): gold digits with a live dot */
.room-clock { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--gold-soft); border: 1px solid rgba(231,185,107,.28); color: var(--gold); font: 600 12px/1.5 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.room-clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(231,185,107,.8); animation: breathe 2.4s infinite; }
.room-clock[hidden] { display: none; }
.room-header > .room-clock { margin-inline: 0 4px; font-size: 12px; }

/* Nominations / voting (Host starts the round; everyone nominates, then votes) */
.sr-card { display: grid; gap: 6px; align-content: start; width: 120px; }
.sr-card .poster { width: 100%; }
.sr-friends { display: flex; align-items: center; gap: 4px; min-height: 0; flex-wrap: wrap; }
.sr-friends:empty { display: none; }
.sr-friend { display: inline-flex; margin-inline-end: -8px; } .sr-friend .avatar { box-shadow: 0 0 0 2px var(--bg); }
.sr-friends small { margin-inline-start: 10px; font-size: 10px; line-height: 1.2; }
.sr-nominate { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: var(--r-pill); background: var(--gold); color: #1a1408; font-weight: 700; font-size: var(--fs-sm); }
.sr-nominate .ic { width: 16px; height: 16px; }

/* Nominations / voting inside the stage box */
.stage.voting { aspect-ratio: auto; height: auto; min-height: 176px; max-height: none; }
.stage.voting .stage-vote.on { position: relative; inset: auto; }   /* the box is only as tall as its content, so the chat keeps the room */
.stage-vote { z-index: 2; flex-direction: column; gap: 10px; padding: 12px 14px 12px; background: radial-gradient(circle at 50% 0%, rgba(231,185,107,.10), transparent 60%), #070707; }
.stage-vote.on { display: flex; }
.stage-search.on, .stage-player.on { z-index: 3; }
.vote-head { display: flex; align-items: center; gap: 10px; }
.vote-state { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); color: var(--gold); letter-spacing: .02em; }
.vote-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(231,185,107,.8); animation: breathe 2.4s infinite; }
.vote-count { margin-inline-end: auto; color: var(--text-3); font-size: var(--fs-xs); }
.vote-add { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid rgba(231,185,107,.5); color: var(--gold); font-weight: 600; font-size: var(--fs-sm); }
.vote-add .ic { width: 16px; height: 16px; }
.vote-cards { display: flex; gap: 12px; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; align-items: flex-start; padding-block: 2px; }
.vote-cards::-webkit-scrollbar { display: none; }
.vote-card { flex: none; width: 84px; display: grid; gap: 5px; align-content: start; }
.vote-card .poster { width: 100%; pointer-events: none; } .vote-card .poster-meta { display: none; }
.vc-title { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-by { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-card .vote-btn { justify-content: center; min-height: 32px; padding: 0 10px; }
.vote-empty { margin: auto; display: grid; justify-items: center; gap: 8px; color: var(--text-2); text-align: center; font-size: var(--fs-sm); }
.vote-empty p { margin: 0; max-width: 26ch; }
.vote-empty-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(231,185,107,.35); color: var(--gold); background: var(--gold-soft); } .vote-empty-ico .ic { width: 22px; height: 22px; }
.vote-foot { display: flex; justify-content: center; gap: 8px; }
.stage-vote-fab { position: absolute; z-index: 4; inset-block-start: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(10,10,10,.78); border: 1px solid rgba(231,185,107,.45); color: var(--gold); font-weight: 600; font-size: var(--fs-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage-vote-fab .ic { width: 16px; height: 16px; } .stage-vote-fab[hidden] { display: none; }

/* Episode bar (series in a Room) */
.ep-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .ep-bar[hidden] { display: none; }
.ep-pick, .ep-mark, .ep-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); border: 1px solid rgba(231,185,107,.5); color: var(--gold); background: rgba(10,10,10,.55); }
.ep-pick .ic, .ep-mark .ic { width: 16px; height: 16px; }
.ep-mark.on, .ep-mark:disabled { opacity: .7; }
.ep-picker { display: grid; gap: var(--s3); min-width: min(360px, 84vw); }
.ep-pick-list { display: grid; gap: 2px; max-height: 46dvh; overflow-y: auto; }
.ep-pick-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: var(--r-md); text-align: start; }
.ep-pick-row b { color: var(--text-3); min-width: 26px; } .ep-pick-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-pick-row.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(231,185,107,.4); } .ep-pick-row.on b { color: var(--gold); }

/* phones that refuse autoplay: our own Play button, an unmute pill, and (last resort) a tappable video */
.tap-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 10px; background: rgba(0,0,0,.35); text-align: center; }
.tap-play[hidden], .unmute-pill[hidden], .tap-play-btn[hidden], .tap-play-hint[hidden] { display: none; }
.tap-play-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #1a1408; background: linear-gradient(135deg, #f3d9a0, #c89a4a); box-shadow: 0 0 30px -6px rgba(231,185,107,.8); }
.tap-play-btn .ic { width: 22px; height: 22px; }
.tap-play-hint { margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.7); color: var(--gold); font-weight: 600; }
.player-host iframe { pointer-events: none; }
.tap-through .player-host iframe { pointer-events: auto; }
.tap-through .tap-play { pointer-events: none; background: transparent; place-items: end center; padding-bottom: 76px; }
.unmute-pill { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(10,10,10,.82); border: 1px solid rgba(231,185,107,.6); color: var(--gold); font-weight: 600; font-size: 13px; }
.unmute-pill .ic { width: 16px; height: 16px; }

.tap-wait { background: rgba(0,0,0,.72); z-index: 3; }
.player-controls { z-index: 4; }

/* the video is loaded in the background (invisible, silent, untouchable) until someone taps Join / Play */
.stage-layer.stage-player.prep { display: block; opacity: 0; pointer-events: none; z-index: -1; }

/* arrow to leave the video, auto-hiding chrome, our own pause mark */
.stage-exit { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.stage-exit svg { width: 20px; height: 20px; }
.stage-exit, .player-controls { transition: opacity 260ms ease; }
.stage.ui-off .stage-exit, .stage.ui-off .player-controls { opacity: 0; pointer-events: none; }
.paused-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.5); pointer-events: none; }
.paused-scrim[hidden] { display: none; }
.paused-scrim .ic { width: 44px; height: 44px; color: rgba(255,255,255,.85); }

/* Room Memory achievements */
.mem-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mem-stat { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 14px 12px; border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line); min-width: 0; }
.mem-stat b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-stat span { color: var(--text-2); font-size: var(--fs-xs); } .mem-stat small { color: var(--gold); font-size: var(--fs-xs); }
.mem-ic { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; color: var(--gold); opacity: .7; } .mem-ic .ic { width: 16px; height: 16px; }
.mem-avg { margin-inline-start: auto; }

/* rating card after a viewing (does not block the room) */
.rate-sheet { position: absolute; z-index: 30; inset-inline: 12px; inset-block-end: 118px; display: grid; gap: 8px; justify-items: center; padding: 14px 16px 12px; border-radius: 20px; background: rgba(14,14,16,.96); border: 1px solid rgba(231,185,107,.45); box-shadow: 0 10px 40px rgba(0,0,0,.6); text-align: center; animation: sheetIn 260ms var(--ease, ease) both; }
.rate-sheet b { font-size: var(--fs-md); } .rate-sheet .stars { justify-content: center; } .stars-md .star { font-size: 34px; min-width: 42px; min-height: 42px; }
.rate-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-3); } .rate-x .ic { width: 16px; height: 16px; }
@keyframes sheetIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }