:root{--bg:#0c0d0a;--bg2:#101208;--panel:#14160f;--line:#2a2e20;--line2:#3a4030;
--ink:#e9ebda;--dim:#9aa085;--muted:#6f7560;--volt:#D4FF3D;--amber:#e8b06a;--red:#e07f86;
--mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);margin:0;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}

/* ── shell ───────────────────────────────────────────────────────────
   Phone-first. At 900px it stops being a phone marooned in the middle of a
   laptop (Danney, 15.09) and becomes picture-left / decision-right, with the
   whole deck along the bottom. */
.rv{max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 0 10px}
.rv-main{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.rv-top{display:flex;align-items:center;gap:10px;padding:14px 18px}
.rv-top b{font-family:var(--mono);font-size:11px;letter-spacing:.16em}
.rv-ring{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted)}
.rv-stack{position:relative;margin:2px 16px 0}
.rv-card{border-radius:22px;overflow:hidden;background:var(--panel);position:relative;
 box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);touch-action:none;user-select:none}
.rv-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;pointer-events:none;background:#0b0d09}
.rv-cap{padding:16px 18px 18px}
.rv-slot{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
 color:#070806;background:var(--volt);padding:3px 8px;border-radius:4px}
.rv-cap h3{margin:9px 0 5px;font-size:23px;line-height:1.08}
.rv-cap p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.45}
.rv-more{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--volt)}
/* swipe moves between cards — it is not a verdict, so these say where you are
   going, not what you think */
.rv-nav{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;
 letter-spacing:.18em;padding:9px 14px;border-radius:999px;background:rgba(8,10,6,.82);color:var(--ink);
 border:1px solid rgba(255,255,255,.2);opacity:0;pointer-events:none;transition:opacity .12s}
.rv-nav.prev{left:14px}
.rv-nav.next{right:14px}

/* ── the side panel (desktop) ───────────────────────────────────── */
.rv-side{padding:0 16px}
.rv-side-cap{display:none}
.rv-side-cap h3{margin:11px 0 8px;font-size:32px;line-height:1.04}
.rv-side-cap p{margin:0 0 16px;font-size:15px;color:var(--dim);line-height:1.5}
.rv-more-btn{background:none;border:0;padding:0 0 18px;cursor:pointer;
 font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--volt)}
.rv-already{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
 padding:0 2px 12px}
.rv-already b{letter-spacing:.14em}
.rv-already b.love{color:var(--volt)}.rv-already b.ok{color:var(--amber)}.rv-already b.no{color:var(--red)}

/* ── verdict buttons — words, so nothing is a guess ─────────────── */
.rv-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:18px 0 6px}
.rv-act{border-radius:15px;padding:17px 6px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
 border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer}
.rv-act.no{color:var(--red);border-color:rgba(224,127,134,.4)}
.rv-act.ok{color:var(--amber);border-color:rgba(232,176,106,.4)}
.rv-act.love{color:var(--volt);border-color:var(--volt);background:rgba(255,255,255,.03)}
.rv-act:hover{filter:brightness(1.12)}
.rv-hint{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
 color:rgba(255,255,255,.3);padding:10px 0 4px}
.only-wide{display:none}

/* ── the filmstrip — what stands out, and what to circle back to ── */
/* B2 — the bar folded into the deck's own heading, no extra row */
.rv-bar{flex:1;min-width:70px;height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.rv-bar i{display:block;height:100%;background:var(--volt);transition:width .25s}
.rv-stripkey{display:flex;align-items:baseline;gap:12px;padding:9px 16px 0;
 font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--muted)}
.rv-stripkey .k{margin-left:auto;display:flex;gap:12px}
.rv-stripkey .k i{font-style:normal}
.rv-stripkey .k i::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
 margin-right:5px;vertical-align:1px}
.rv-stripkey .k .l::before{background:var(--volt)}
.rv-stripkey .k .o::before{background:var(--amber)}
.rv-stripkey .k .n::before{background:var(--red)}
.rv-striphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:7px;padding:20px 16px 0;
 font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--muted)}
.rv-striphead .k{margin-left:auto;display:flex;gap:12px}
.rv-striphead .k i{font-style:normal}
.rv-striphead .k i::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
 margin-right:5px;vertical-align:1px}
.rv-striphead .k .l::before{background:var(--volt)}
.rv-striphead .k .o::before{background:var(--amber)}
.rv-striphead .k .n::before{background:var(--red)}
.rv-strip{display:flex;gap:7px;overflow-x:auto;padding:10px 16px 6px;scrollbar-width:thin}
.rv-th{flex:0 0 74px;padding:0;border:0;background:none;cursor:pointer;border-radius:7px;line-height:0;
 outline:2px solid transparent;outline-offset:1px;position:relative}
/* NOT judged = full brightness: these are the ones he is still shopping, and the
   whole point of the strip is spotting what stands out. Judged ones step back. */
.rv-th img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block;opacity:.92;
 transition:opacity .15s,transform .15s}
.rv-th:hover img{opacity:1;transform:scale(1.06)}
.rv-th.on{outline-color:var(--volt)}
.rv-th.on img{opacity:1}
.rv-th.done img{opacity:.26}
.rv-th.done:hover img{opacity:.55}


/* ── the why sheet ──────────────────────────────────────────────── */
.rv-sheet{margin:14px 0 8px;border-radius:20px;background:rgba(255,255,255,.04);
 border:1px solid rgba(255,255,255,.08);padding:16px}
.rv-sheet-head{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:11px}
.rv-sheet-head b.love{color:var(--volt)}.rv-sheet-head b.ok{color:var(--amber)}.rv-sheet-head b.no{color:var(--red)}
/* 16px is not a taste call: iOS Safari ZOOMS THE WHOLE PAGE when a focused
   input is smaller than 16px, and never zooms back out. That is the "auto zoom
   in after I submit my vote" Danney hit on 15.09. Never drop this below 16. */
.rv-why{width:100%;background:#0b0d09;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--ink);
 padding:12px 14px;font-size:16px;font-family:inherit;min-height:72px;margin-bottom:12px}
.rv-row{display:flex;gap:10px}
.rv-row button{flex:1;border-radius:14px;padding:13px;font-size:14px;border:1px solid rgba(255,255,255,.1);
 background:none;color:var(--muted);cursor:pointer}
.rv-row button.go{background:var(--volt);color:#070806;border-color:var(--volt);font-weight:700}

/* ── gate · detail · done ───────────────────────────────────────── */
/* fully opaque — at .97 the deck behind it bled through and the two layers of
   text collided */
.rv-det{position:fixed;inset:0;background:var(--bg);z-index:50;overflow:auto;
 padding:0 0 30px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rv-detbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
 padding:14px 16px;background:rgba(6,7,5,.96);border-bottom:1px solid rgba(255,255,255,.08)}
.rv-det .x{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
 color:var(--ink);border-radius:999px;padding:10px 16px;font-family:var(--mono);font-size:11px;
 letter-spacing:.14em;cursor:pointer;min-height:42px}
.rv-det .x:hover{background:rgba(255,255,255,.12)}
.rv-detbody{padding:16px}
.rv-det h3{font-size:26px;margin:0 0 6px;line-height:1.08}
.rv-detline{color:var(--dim);font-size:14.5px;margin:0 0 16px;line-height:1.5}
.rv-det img{width:100%;max-width:1400px;border-radius:14px;display:block;margin:0 auto 14px}
.rv-det .rv-mono{text-align:center;letter-spacing:.14em}
.rv-gate{padding:64px 26px;text-align:center}
.rv-gate h2{font-size:26px;margin:0 0 20px}
.rv-in{width:100%;background:#0b0d09;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:var(--ink);
 padding:15px;font-size:16px;font-family:inherit;margin-bottom:12px;text-align:center}
.rv-roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.rv-role{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px;font-size:13px;color:var(--muted);
 background:none;cursor:pointer}
.rv-role.sel{color:#070806;background:var(--volt);border-color:var(--volt);font-weight:700}
.rv-go{width:100%;background:var(--volt);color:#070806;border:0;border-radius:14px;padding:15px;font-weight:700;
 font-size:16px;cursor:pointer;box-shadow:0 0 30px rgba(212,255,61,.3)}
.rv-go[disabled]{opacity:.4;box-shadow:none}
.rv-done{padding:60px 26px;text-align:center}
.rv-tally{display:flex;gap:10px;margin:22px 0}
.rv-tally div{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px 6px}
.rv-tally b{display:block;font-size:26px}
.rv-tally span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.rv-again{margin-top:22px;background:none;border:1px solid rgba(255,255,255,.14);border-radius:14px;
 padding:13px 22px;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;cursor:pointer}

/* ── laptop and up ──────────────────────────────────────────────── */
/* ── laptop and up ──────────────────────────────────────────────────
   E2. The shell used to stop at 1180px, so a big monitor just added emptiness —
   at 1680×1050 the picture stayed 759px wide with 366px dead below it. Now the
   picture grows with the screen and the dead band becomes a two-row deck tray. */
@media (min-width:900px){
  .rv-wide{max-width:1680px;padding:0 26px;height:100dvh;overflow:hidden}
  .rv-top{padding:18px 4px 14px;flex:none}
  .rv-top b{font-size:12px;letter-spacing:.18em}
  .rv-ring{font-size:11px}
  .rv-main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1.7fr 1fr;
    gap:28px;align-items:center}
  .rv-stack{margin:0;min-height:0}
  .rv-cap{display:none}              /* the caption moves to the side panel */
  .rv-side{padding:2px 0 0;display:block}
  .rv-side-cap{display:block}
  .rv-acts{grid-template-columns:1fr;gap:10px;padding:2px 0 0}   /* right under the words */
  .rv-act{padding:19px 8px;font-size:13px}
  .rv-hint{text-align:left;padding:16px 2px 0}
  .only-wide{display:inline}
  .only-narrow{display:none}
  .rv-striphead{flex:none;padding:16px 0 0;margin-top:0}
  .rv-stripkey{flex:none;padding:8px 0 0}
  .rv-strip{flex:none;display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;
    grid-auto-columns:minmax(0,1fr);gap:8px;overflow-x:auto;padding:10px 0 18px}
  .rv-th{flex:none}
  .rv-sheet{margin:0}
}


/* ── the internal results page ──────────────────────────────────── */
.rv-res{max-width:1000px;margin:0 auto;padding:22px 18px 60px}
.rv-res table{width:100%;border-collapse:collapse;font-size:13px}
.rv-res th{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
 text-align:left;padding:10px 10px;border-bottom:1px solid var(--line)}
.rv-res td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.rv-res img{width:74px;height:42px;object-fit:cover;border-radius:6px;display:block}
.rv-v{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:6px;
 font-family:var(--mono);font-size:10px;border:1px solid rgba(255,255,255,.12);color:var(--muted);margin-right:4px}
.rv-v.love{background:var(--volt);color:#070806;border-color:var(--volt)}
.rv-v.ok{color:var(--amber);border-color:rgba(232,176,106,.45)}
.rv-v.no{color:var(--red);border-color:rgba(224,127,134,.45)}
.rv-mono{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ── short phones: give the picture the room, tighten everything else ──
   Danney, 15.09: "make uiux fix the screen better" — nothing important should
   sit below the fold on a phone. */
@media (max-width:899px) and (max-height:780px){
  .rv-top{padding:10px 16px}
  .rv-cap{padding:12px 16px 13px}
  .rv-cap h3{font-size:20px;margin:7px 0 4px}
  .rv-cap p{font-size:12.5px}
  .rv-more{margin-top:8px}
  .rv-acts{padding:12px 0 2px;gap:8px}
  .rv-act{padding:15px 4px;font-size:11.5px}
  .rv-hint{padding:8px 0 2px}
  .rv-striphead{padding:12px 16px 0}
  .rv-strip{padding:8px 16px 4px;gap:6px}
  .rv-th{flex:0 0 62px}
}
@media (max-width:899px) and (max-height:640px){
  .rv-cap h3{font-size:18px}
  .rv-more{display:none}
  .rv-th{flex:0 0 54px}
}

/* On a phone the slack goes to the bottom, not into a hole above the card:
   the deck strip sits on the bottom edge like a reel. */
/* Everything stays grouped — card, buttons, deck — so any slack falls at the
   bottom of the page instead of opening a hole in the middle of it. */
@media (max-width:899px){
  .rv-striphead{margin-top:6px}
}

/* A tall phone has slack under the buttons. Spend it on the deck: two rows of
   thumbnails scrolling sideways, so more of the 34 are in view at once —
   which is the whole reason the strip is there. */
@media (max-width:899px) and (min-height:720px){
  .rv-strip{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;
    grid-auto-columns:84px;gap:8px;align-content:end}
  .rv-th{flex:none}
  .rv-cap{padding:18px 18px 20px}
  .rv-cap h3{font-size:24px}
  .rv-cap p{font-size:14px}
  .rv-acts{padding:22px 0 6px}
  .rv-act{padding:19px 6px;font-size:12.5px}
}

/* "See it bigger" has to mean bigger. On a phone the three-panel strip is only
   ~200px tall, which shows nothing — so the detail view also stacks the three
   panels, each at full width, out of the same single image. */
/* the argument sits on the picture, not three invented per-panel captions —
   the pins do not map one-to-one to the three frames, so any per-frame label
   would be made up (Danney called the LEFT/MIDDLE/RIGHT labels misleading, 15.09) */
.rv-detshot{margin:0 0 20px;position:relative;border-radius:14px;overflow:hidden}
.rv-detshot img{margin:0;border-radius:0}
.rv-detshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;font-size:14px;
 line-height:1.45;color:var(--ink);
 background:linear-gradient(to top,rgba(6,7,5,.96) 30%,rgba(6,7,5,0))}
.rv-facts{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 22px}
.rv-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--muted);margin-top:16px}
.rv-facts dd{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.rv-facts dt.warn{color:var(--amber)}
.rv-facts dd.warn{color:var(--amber)}
.rv-caveat{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.rv-detacts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:4px 0 14px}
@media (min-width:900px){
  .rv-detbody{max-width:900px;margin:0 auto}
  .rv-facts{grid-template-columns:170px 1fr;column-gap:22px;align-items:baseline}
  .rv-facts dt{margin-top:14px}
  .rv-facts dd{margin-top:14px}
}

/* ── D1: one sliding row of performers, inside the card detail ────── */
.rv-tagwrap{margin:4px 0 20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.08)}
.rv-taghd{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:9.5px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.rv-taghd .n{margin-left:auto;color:var(--volt)}
.rv-fade{position:relative}
.rv-fade::after{content:"";position:absolute;right:0;top:0;bottom:7px;width:34px;pointer-events:none;
 background:linear-gradient(to left,var(--bg),rgba(12,13,10,0))}
.rv-tagrow{display:flex;gap:7px;overflow-x:auto;padding-bottom:7px;scrollbar-width:none;
 -webkit-overflow-scrolling:touch}
.rv-tagrow::-webkit-scrollbar{display:none}
.rv-tag{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
 color:var(--ink);border-radius:999px;padding:11px 15px;font-size:14px;white-space:nowrap;cursor:pointer;
 min-height:42px}
.rv-tag.rec{border-color:var(--volt);color:var(--volt)}
.rv-tag.on{background:var(--volt);border-color:var(--volt);color:#070806;font-weight:700}
.rv-tag.rec.on{color:#070806}
@media (min-width:900px){ .rv-fade::after{display:none} .rv-tagrow{flex-wrap:wrap;overflow:visible} }

/* ── his thinking, asked only on a yes ─────────────────────────────── */
.rv-ask{margin:0 0 14px;padding:13px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.rv-asklab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--muted);margin-bottom:10px}
.rv-asklab i{font-style:normal;opacity:.6}
.rv-rec{margin-bottom:10px}
.rv-recwhy{margin:7px 2px 0;font-size:12.5px;line-height:1.45;color:var(--dim)}
.rv-chips{display:flex;flex-wrap:wrap;gap:7px}
.rv-chip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--ink);
 border-radius:999px;padding:9px 13px;font-size:13px;cursor:pointer;min-height:38px}
.rv-chip.rec{border-color:var(--volt);color:var(--volt)}
.rv-chip.on{background:var(--volt);border-color:var(--volt);color:#070806;font-weight:700}
.rv-chip.rec.on{color:#070806}
/* 16px — iOS zooms the page on anything smaller */
.rv-songin{width:100%;margin-top:10px;background:#0b0d09;border:1px solid rgba(255,255,255,.1);
 border-radius:12px;color:var(--ink);padding:12px 14px;font-size:16px;font-family:inherit}

/* the number gate — one field until we need more */
.rv-tel{font-family:var(--mono);letter-spacing:.06em}
.rv-sig{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:2px 0 12px;color:var(--muted)}
.rv-sig.back{color:var(--volt)}
.rv-sig.new{color:var(--amber)}
.rv-fine{margin:13px 0 0;font-size:11.5px;color:var(--muted)}
@media (min-width:900px){ .rv-stripkey{padding:9px 0 0} }

/* ── who has answered — Jira/Figma marks ───────────────────────────
   The ring is WHITE, not the page colour (Danney, 15.09): on a dark picture a
   dark ring disappears and the circles read as one blob. */
.rv-avrow{display:flex}
.rv-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
 border-radius:50%;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.03em;
 border:2px solid #fff;background:#3a4030;color:var(--ink);text-transform:uppercase;box-sizing:border-box}
.rv-av + .rv-av{margin-left:-9px}
.rv-av.love{background:var(--volt);color:#070806}
.rv-av.ok{background:var(--amber);color:#070806}
.rv-av.no{background:var(--red);color:#2a0d10}
.rv-avrow.onpic{position:absolute;left:12px;bottom:12px;z-index:4;pointer-events:none}
.rv-avrow .rv-av{pointer-events:auto;cursor:default}
.rv-avrow.sm{position:absolute;right:4px;bottom:4px;z-index:2;pointer-events:none}
.rv-avrow.sm .rv-av{width:20px;height:20px;font-size:7px;border-width:1.5px}
.rv-avrow.sm .rv-av + .rv-av{margin-left:-6px}
@media (min-width:900px){ .rv-avrow.onpic{left:16px;bottom:16px} }

/* ── the answer screen ─────────────────────────────────────────────── */
.rv-said{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.rv-said b.love{color:var(--volt)} .rv-said b.ok{color:var(--amber)} .rv-said b.no{color:var(--red)}
.rv-detshot a{display:block;position:relative;line-height:0;cursor:pointer}
.rv-enlarge{position:absolute;right:9px;bottom:9px;font-family:var(--mono);font-size:9px;
 letter-spacing:.14em;color:var(--ink);background:rgba(6,7,5,.75);border:1px solid rgba(255,255,255,.2);
 border-radius:999px;padding:6px 10px;pointer-events:none}
/* enlarging sits ON TOP of the answer screen — it must never navigate away */
.rv-det .rv-why{margin-top:4px}
.rv-det .rv-row{margin-bottom:6px}

/* ── adding a concept — open to everyone ───────────────────────────── */
.rv-addth{display:grid;place-items:center;border:1px dashed rgba(212,255,61,.5)!important;
 background:rgba(212,255,61,.06);color:var(--volt);font-size:20px;line-height:1;aspect-ratio:16/9;
 border-radius:7px;min-height:0}
.rv-drop{width:100%;display:grid;place-items:center;gap:5px;aspect-ratio:16/9;margin-bottom:16px;
 border:1px dashed rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.02);
 color:var(--ink);cursor:pointer;text-align:center}
.rv-drop .i{font-size:26px}
.rv-drop .t{font-size:15px}
.rv-drop .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.rv-fl{margin-bottom:12px}
.rv-fl label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
 color:var(--muted);margin-bottom:6px}
.rv-fl input{width:100%;background:#0b0d09;border:1px solid rgba(255,255,255,.12);border-radius:12px;
 color:var(--ink);padding:13px 14px;font-size:16px;font-family:inherit}
.rv-post{width:100%;border-radius:13px;padding:16px;font-size:16px;font-weight:700;margin-top:4px;
 border:1px solid var(--volt);color:var(--volt);background:rgba(255,255,255,.03);cursor:pointer}
.rv-post[disabled]{opacity:.4;cursor:default}
.rv-who{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);
 margin:12px 0 0;text-align:center}
.rv-addedby{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
 margin:-8px 0 16px;display:flex;align-items:center;gap:10px}
.rv-rm{background:none;border:1px solid rgba(224,127,134,.5);color:var(--red);border-radius:999px;
 padding:5px 11px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;cursor:pointer}

/* ── the sign-in: the room, then both marks ────────────────────────
   The two logos sit on black BELOW the photograph — theirs is gold on black
   already and reads badly over a lit stage. */
.rv-gate{padding:0 0 30px}
.rv-hero{margin:0;position:relative;height:210px;overflow:hidden;
 border-radius:0 0 20px 20px}
.rv-hero img{width:100%;height:100%;object-fit:cover;display:block}
.rv-hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(to bottom,rgba(6,7,5,.30) 0%,rgba(6,7,5,.10) 45%,var(--bg) 99%)}
.rv-lock{display:flex;align-items:center;justify-content:center;gap:15px;padding:14px 0 6px}
.rv-lock .rx{width:34px;height:34px;flex:none;display:block}
.rv-lock .x{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.35)}
.rv-lock .kl{height:42px;width:auto;display:block;border-radius:4px}
.rv-gate h2{margin:14px 26px 2px}
.rv-when{margin:0 26px 20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--muted)}
.rv-gate .rv-in,.rv-gate .rv-roles,.rv-gate .rv-go,.rv-gate .rv-sig,.rv-gate .rv-fine{margin-left:26px;margin-right:26px}
.rv-gate .rv-in,.rv-gate .rv-go{width:calc(100% - 52px)}
@media (min-width:900px){
  .rv-hero{height:260px;border-radius:0 0 22px 22px}
  .rv-gate{max-width:470px;margin:0 auto}
}

/* one floating name tag for every avatar — fixed, so no scroll box can clip it */
.rv-tip{position:fixed;z-index:90;transform:translate(-50%,calc(-100% - 8px));white-space:nowrap;
 background:#f4f5ec;color:#0c0d0a;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;
 box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:auto}
.rv-tip::after{content:"";position:absolute;left:calc(50% + var(--arrow, 0px));bottom:-5px;transform:translateX(-50%);
 border:5px solid transparent;border-bottom:0;border-top-color:#f4f5ec}
.rv-av:hover{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,255,255,.35)}

/* ── guest mode (partner decks, 17.09) — look around freely, sign in to vote ── */
.rv-lock .rv-partner{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.22em;color:var(--ink)}
.rv-intro{margin:0 26px 20px;font-size:14px;line-height:1.5;color:var(--dim)}
.rv-guestbtn{display:block;width:calc(100% - 52px);margin:10px 26px 0;background:none;color:var(--ink);
 border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px;font-size:15px;font-weight:600;
 font-family:inherit;cursor:pointer;min-height:48px}
.rv-guestbtn:hover{background:rgba(255,255,255,.06)}
.rv-signbtn{margin-left:auto;background:var(--volt);color:#070806;border:0;border-radius:999px;padding:8px 14px;
 font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;cursor:pointer;min-height:36px}
.rv-guestnote{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.rv-signin{max-width:470px;margin:0 auto;padding-top:26px}
.rv-badge{display:inline-block;margin:0 0 6px 8px;padding:3px 8px;border-radius:999px;border:1px solid var(--volt);
 color:var(--volt);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}