/* Random one-to-one video (docs/65 §3c): two screens, a chat, four buttons — in Nuxtre's colours. */
.rv { max-width: 1100px; margin: 0 auto 28px; color: var(--nx-text, #eef1ff); font-family: var(--nx-font-body, system-ui, sans-serif); }
.rv-head h1 { margin: 2px 0 6px; font: 400 clamp(32px, 6vw, 54px)/1 var(--nx-font-display, Impact, sans-serif); text-shadow: 0 0 18px rgba(242, 9, 243, .45); }
.rv-kicker { margin: 0; font: 700 12px var(--nx-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #d6ff1f; }
.rv-lede { margin: 0 0 14px; color: #dfe4ff; max-width: 70ch; }
.rv-panel, .rv-rules { padding: 16px 18px; border-radius: 16px; background: #0b1033; border: 1px solid rgba(95, 223, 246, .25); }
.rv-rules ul { margin: 0 0 12px; padding-left: 20px; } .rv-rules li { margin: 4px 0; }
.rv-check { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.rv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 12px; border: 1px solid rgba(95, 223, 246, .35); background: #121a46; color: var(--nx-text, #eef1ff) !important; font: 600 14px var(--nx-font-body, sans-serif); text-decoration: none; cursor: pointer; }
.rv-btn.go { background: linear-gradient(180deg, #e8ff4d, #a7d600); border-color: #d6ff1f; color: #0a0b2e !important; } .rv-btn.bad { border-color: rgba(255, 77, 109, .6); color: #ffc2cd !important; }
.rv-btn.show.on { border-color: #39ff8a; color: #39ff8a !important; } .rv-btn[disabled] { opacity: .5; cursor: default; }
.rv-videos { position: relative; display: grid; grid-template-columns: 1fr; }
.rv-them, .rv-me { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #17205a, #04061a 70%); }
.rv-them { aspect-ratio: 16 / 10; border: 1px solid rgba(242, 9, 243, .4); }
.rv-them video { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(.4); opacity: .35; transition: filter .3s, opacity .3s; }
.rv-them.on video { filter: none; opacity: 1; }
.rv-me { position: absolute; right: 12px; bottom: 12px; width: 22%; min-width: 120px; aspect-ratio: 4 / 3; border: 1px solid rgba(95, 223, 246, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.rv-me video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rv-them figcaption, .rv-me figcaption { position: absolute; left: 8px; top: 8px; padding: 2px 9px; border-radius: 8px; background: rgba(2, 3, 15, .7); font-size: 13px; }
.rv-veil { position: absolute; inset: auto 0 45% 0; margin: 0; text-align: center; color: #dfe4ff; font-weight: 600; text-shadow: 0 1px 4px #000; }
.rv-status { margin: 10px 2px; color: #ffd23d; font-weight: 600; }
.rv-chat { border-radius: 14px; background: #0b1033; border: 1px solid rgba(95, 223, 246, .2); overflow: hidden; }
.rv-lines { list-style: none; margin: 0; padding: 8px 12px; height: 150px; overflow: auto; font-size: 14px; }
.rv-lines li { margin: 3px 0; } .rv-lines .sys { color: #9aa3d6; font-style: italic; } .rv-lines .mine { color: #5fdff6; } .rv-lines .theirs { color: #ff9ad5; }
.rv-chat form { display: flex; gap: 8px; padding: 8px; border-top: 1px solid rgba(95, 223, 246, .2); }
.rv-chat input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(95, 223, 246, .25); background: #070b24; color: inherit; font: inherit; }
.rv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rv.is-mutual .rv-them, .rv-app.is-mutual .rv-them { border-color: #39ff8a; box-shadow: 0 0 22px rgba(57, 255, 138, .25); }
@media (max-width: 760px) { .rv-them { aspect-ratio: 3 / 4; } .rv-me { width: 34%; } }
/* Wide screens: the picture on the left with the buttons under it, the chat beside it — everything in one view. */
@media (min-width: 900px) {
  .rv-stage:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); grid-template-areas: "v c" "s c" "a c"; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; }
  .rv-videos { grid-area: v; } .rv-status { grid-area: s; } .rv-acts { grid-area: a; }
  .rv-them { aspect-ratio: 4 / 3; max-height: 54vh; }
  .rv-chat { grid-area: c; align-self: stretch; display: flex; flex-direction: column; min-height: 380px; }
  .rv-chat .rv-lines { flex: 1 1 auto; height: auto; min-height: 200px; }
}