/* 818a: --rc-chip-left keeps the model chip clear of the icon rail the
   Chaturbate desktop embed draws in ITS top-left corner. Tune this ONE
   number against the live embed if their UI shifts. Mobile keeps 8px via
   the media-query override below (their mobile player has no rail). */
:root{--rc-chip-left:64px}
/* ============================================================
   NudeLive Cam Roulette (817g) — /random-cams/ only.
   Desktop: full first-screen stage, floating glass bar.
   Mobile: /cam/-style player with drag-to-resize (up to 75% of
   the viewport) and an always-visible bottom bar.
============================================================ */
.rc-stage{position:relative;background:#000;margin-top:var(--header-h)}
.rc-ph{position:relative;background:radial-gradient(120% 120% at 50% 0%,#181120 0%,#0a0a10 70%);overflow:hidden}
.rc-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* top chip: who you landed on */
.rc-topchip{position:absolute;top:10px;left:var(--rc-chip-left,64px);z-index:6;display:flex;align-items:center;gap:9px;background:rgba(8,8,14,.72);border:1px solid #ffffff24;border-radius:999px;padding:7px 13px 7px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 20px)}
.rc-topchip .rc-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);flex:none;animation:rcPulse 1.6s infinite}
.rc-topchip b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-topchip .rc-meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.rc-openlink{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#ffd9e6;text-decoration:none;border-left:1px solid #ffffff22;padding-left:10px;white-space:nowrap}
.rc-openlink:hover{color:#fff}
@keyframes rcPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- the bar: one height rhythm, two groups (filters | actions) ---------- */
.rc-bar{display:flex;align-items:center;gap:10px}
.rc-filters,.rc-actions{display:flex;align-items:center;gap:8px;min-width:0}
.rc-div{width:1px;height:26px;background:#ffffff22;flex:none}
.rc-bar select{appearance:none;-webkit-appearance:none;height:46px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8bf' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;border:1px solid var(--border2);border-radius:13px;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:700;padding:0 31px 0 13px;cursor:pointer;max-width:172px;min-width:0;text-overflow:ellipsis}
.rc-bar select:hover{border-color:#fff4}
.rc-bar select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:13px;border:1px solid var(--border2);background:var(--card);color:var(--text);font-family:inherit;font-size:14.5px;font-weight:800;padding:0 18px;cursor:pointer;transition:transform .12s,border-color .15s}
.rc-btn:hover{border-color:#fff4}
.rc-btn:active{transform:translateY(1px)}
.rc-btn.rc-next{background:var(--grad-btn);border:0;color:#fff;box-shadow:0 8px 26px rgba(255,45,110,.34);padding:0 26px}
.rc-btn[disabled]{opacity:.45;cursor:default}
.rc-count{font-size:12px;color:var(--dim);font-weight:700;white-space:nowrap}

/* ---------- the roll: dice + slot reveal ---------- */
.rc-spin{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:radial-gradient(130% 130% at 50% 20%,rgba(24,17,32,.97) 0%,rgba(10,10,16,.98) 70%);opacity:0;pointer-events:none;transition:opacity .22s ease}
.rc-spin.on{opacity:1;pointer-events:auto}
.rc-spin-in{text-align:center;padding:18px}
.rc-dice{display:inline-flex;width:64px;height:64px;margin-bottom:16px}
.rc-dice svg{width:100%;height:100%}
.rc-spin.on .rc-dice{animation:rcTumble 1.05s cubic-bezier(.3,.1,.25,1) infinite}
@keyframes rcTumble{0%{transform:rotate(0) translateY(0)}30%{transform:rotate(112deg) translateY(-9px)}55%{transform:rotate(198deg) translateY(2px)}80%{transform:rotate(295deg) translateY(-5px)}100%{transform:rotate(360deg) translateY(0)}}
.rc-slot{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rc-slot-name{font-family:Outfit,Inter,sans-serif;font-size:clamp(22px,3.4vw,34px);font-weight:900;background:var(--grad,linear-gradient(90deg,#ff2d6e,#c93af2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.15}
.rc-slot-meta{font-size:13.5px;color:var(--muted);font-weight:600;min-height:20px}
.rc-spin-line{display:block;margin-top:14px;font-size:13px;color:var(--dim)}
.rc-spin.rc-locked .rc-dice{animation:rcLock .5s ease forwards}
@keyframes rcLock{0%{transform:rotate(340deg) scale(1)}60%{transform:rotate(365deg) scale(1.14)}100%{transform:rotate(360deg) scale(1)}}
.rc-spin.rc-locked .rc-slot-name{animation:rcNamePop .45s ease}
@keyframes rcNamePop{0%{transform:scale(.92);opacity:.4}100%{transform:scale(1);opacity:1}}
/* empty-state inside the spin overlay */
.rc-empty{max-width:340px;font-size:14px;color:var(--muted);line-height:1.55}
.rc-empty b{color:var(--text)}
.rc-empty button{margin-top:12px}

/* ---------- desktop ---------- */
@media(min-width:821px){
  .rc-stage{height:calc(100dvh - var(--header-h));min-height:520px}
  .rc-ph{position:absolute;inset:0}
  .rc-drag{display:none}
  .rc-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:7;background:rgba(10,10,16,.78);border:1px solid #ffffff22;border-radius:18px;padding:10px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
}
/* ---------- mobile: /cam/-style ---------- */
@media(max-width:820px){
  .rc-stage{display:flex;flex-direction:column}
  .rc-ph{height:var(--rc-h,56vw);min-height:200px;transition:none}
    .rc-drag{display:flex;align-items:center;justify-content:center;height:26px;background:var(--card);border-top:1px solid var(--border2);cursor:ns-resize;touch-action:none}
  .rc-drag i{width:48px;height:5px;border-radius:999px;background:#ffffff2e;pointer-events:none}
  /* two rows: quiet filters up top, the big thumb actions at the bottom edge */
  .rc-bar{display:grid;grid-template-columns:minmax(104px,34%) 1fr;gap:8px;background:var(--card);border-top:1px solid var(--border2);padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .rc-filters,.rc-actions{display:contents}
  .rc-div{display:none}
  .rc-bar select{max-width:none;width:100%;height:44px;font-size:13px}
  .rc-btn{height:52px;padding:0 14px}
  .rc-btn.rc-next{min-width:0;font-size:15.5px}
  .rc-count{display:none}
  .rc-topchip{top:8px;left:8px;padding:6px 11px 6px 9px}
  .rc-topchip b{font-size:13px}
  .rc-topchip .rc-meta{display:none}
  /* the app bottom-nav stays out of the roulette: hidden while the stage is
     on screen (html.rc-covers, set by rc.817h.js), slides back after scroll */
  .bottom-nav{transition:transform .25s ease}
  html.rc-covers .bottom-nav{transform:translateY(110%);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .rc-spin.on .rc-dice,.rc-spin.rc-locked .rc-dice,.rc-spin.rc-locked .rc-slot-name,.rc-topchip .rc-dot{animation:none}
}

/* 818d fix1: pre-paint stage height + stable spin box */
html.rc-preh #rc-ph{height:var(--rc-preh)}
.rc-spin-in{width:min(290px,88vw);min-height:207px;box-sizing:border-box}
#rc-slot-name,#rc-slot-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 818j nav slide */
@media(max-width:820px){.bottom-nav{transition:transform .28s ease}}

/* 818o mobile bar: four controls in one row; name + open-full-room live on the drag row */
@media(max-width:820px){
  .rc-bar{grid-template-columns:52px 52px 52px 1fr;grid-template-rows:auto;gap:8px;align-items:stretch;padding:10px 12px}
  .rc-filters,.rc-actions{display:contents}
  .rc-div{display:none}
  .rc-iw{position:relative;width:52px;height:46px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff1c;display:flex;align-items:center;justify-content:center}
  .rc-iw svg{width:22px;height:22px;stroke:var(--accent)}
  .rc-iw select{position:absolute;inset:0;width:100%;height:100%;opacity:.011;font-size:16px}
  #rc-prev{width:52px;min-width:52px;font-size:0;padding:0;display:flex;align-items:center;justify-content:center}
  #rc-prev svg{width:20px;height:20px}
  #rc-next{font-size:14px;min-height:46px;height:46px;padding:0 14px}
  #rc-prev{height:46px;min-height:46px}
  .rc-topchip{display:none!important}
  .rc-drag{height:42px;justify-content:space-between;gap:10px;padding:0 12px;position:relative}
  .rc-drag i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .rc-drag .rcd-name{font-weight:800;font-size:13px;color:#fff;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
  .rc-drag .rc-openlink{position:static;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--accent);max-width:46%;white-space:nowrap}
}

#rc-snd{appearance:none;border:1px solid #ffffff26;background:#ffffff0d;color:#ececf4;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-right:10px;vertical-align:middle;transition:.16s}
#rc-snd:hover{border-color:var(--accent);color:#fff}
#rc-snd svg{width:18px;height:18px}
#rc-snd[aria-pressed="false"] .sw{display:none}
#rc-snd[aria-pressed="true"] .sx{display:none}
#rc-snd[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}