/* The game page's live reviews (proto-reviews.js). Inside the widget everything is in design px (the .wg__z box is
   zoomed to the screen), measured from the Figma export (Store_Rent.svg): plates, type, icons, shadows. */
.rv {
  --rv-ivory: #EAEBE4; --rv-grey: #77808D; --rv-green: #9AC244; --rv-red: #C7493B; --rv-gold: #E1CC5A;
  --rv-ink: #616161; --rv-plate: #212121; --rv-card: #272727; --rv-lit: #353535; --rv-page: #111111;
  --rv-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--rv-ivory); font-family: var(--f-body);
}
.rv .wg__z { font: 400 16px/20px var(--f-body); }
.rv p { margin: 0; }
/* the prototype's focus ring, kept a true 2 px at any zoom */
.rv :focus-visible { outline: calc(2px / var(--s)) solid var(--crimson); outline-offset: calc(2px / var(--s)); }
.rv input:focus-visible { outline-offset: 0; }
.rv__back { position: absolute; background: var(--rv-page); }
.rv__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rv svg { display: block; overflow: visible; }

/* ---------- the filter row: funnel, sorts (a liquid pill), search, direction ---------- */
.rv__funnel, .rv__sort, .rv__tri, .rv__send, .rv__thumb, .rvv, .rv__more, .rv__opt, .rv__empty-b { position: absolute; overflow: hidden; }
.rv__funnel { border-radius: 5px; background: var(--rv-plate); transition: background-color 200ms ease; }
.rv__funnel svg { position: absolute; left: 10px; top: 10px; fill: #E8EAED; transition: fill 250ms ease; }
.rv__funnel[aria-expanded="true"] { background: var(--rv-lit); }
.rv__badge { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--rv-green); transform: scale(0); transition: transform 380ms var(--rv-spring), background-color 250ms ease; }
.rv__funnel.is-yes svg { fill: var(--rv-green); }
.rv__funnel.is-no svg { fill: var(--rv-red); }
.rv__funnel.is-yes .rv__badge, .rv__funnel.is-no .rv__badge { transform: none; }
.rv__funnel.is-no .rv__badge { background: var(--rv-red); }

.rv__pill { position: absolute; left: calc(var(--lq-l) * 1px); top: calc(var(--lq-t) * 1px); width: calc((var(--lq-r) - var(--lq-l)) * 1px); height: calc((var(--lq-b) - var(--lq-t)) * 1px); border-radius: 5px; background: var(--rv-lit); pointer-events: none; }
.rv__sort { z-index: 1; padding: 0 0 0 12px; border-radius: 5px; font: 600 16px/20px var(--f-body); text-align: left; white-space: nowrap; transition: background-color 200ms ease; }

.rv__search { position: absolute; border-radius: 5px; background: var(--rv-plate); }
.rv__search > svg { position: absolute; left: 20px; top: 11px; fill: var(--rv-ivory); pointer-events: none; }
.rv__q { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 11px 46px 11px 58px; border: 0; border-radius: 5px; background: transparent; color: var(--rv-ivory); font: 500 14px/18px var(--f-body); caret-color: var(--crimson); -webkit-appearance: none; appearance: none; user-select: text; -webkit-user-select: text; }
.rv__q::placeholder { color: var(--rv-ivory); opacity: 1; font-weight: 600; }
.rv__q::-webkit-search-cancel-button, .rv__q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.rv__clear { position: absolute; right: 8px; top: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--rv-grey); transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease, transform 220ms var(--rv-spring); }
.rv__clear[hidden] { display: grid; opacity: 0; transform: scale(0.6); pointer-events: none; }
.rv__clear svg { stroke: currentColor; }

.rv__tri { border-radius: 5px; }
.rv__tri svg { position: absolute; fill: var(--rv-ink); transition: fill 250ms ease; }
.rv__tri--up svg { left: 6.63px; top: 8.44px; }
.rv__tri--down svg { left: 6.13px; top: 9.25px; }
.rv__tri.is-on svg { fill: var(--rv-ivory); }

/* ---------- the funnel's menu ---------- */
.rv__menu { position: absolute; z-index: 8; padding: 6px; border-radius: 6px; background: var(--rv-plate); transform-origin: 20px 0;
  box-shadow: 0 0 0 1px #2C2C2C, 2px 2px 6px rgba(0, 0, 0, 0.35), 9px 8px 12px rgba(0, 0, 0, 0.3), 20px 17px 16px rgba(0, 0, 0, 0.18), 36px 30px 19px rgba(0, 0, 0, 0.06); }
.rv__menu[hidden] { display: none; }
.rv__mpill { position: absolute; left: calc(var(--lq-l) * 1px); top: calc(var(--lq-t) * 1px); width: calc((var(--lq-r) - var(--lq-l)) * 1px); height: calc((var(--lq-b) - var(--lq-t)) * 1px); border-radius: 4px; background: var(--rv-lit); pointer-events: none; }
.rv__opt { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 232px; height: 40px; padding: 0 14px 0 12px; border-radius: 4px; font: 600 14px/18px var(--f-body); text-align: left; white-space: nowrap; transition: background-color 160ms ease; }
.rv__opt i { flex: none; width: 22px; display: grid; place-items: center; }
.rv__opt b { margin-left: auto; font-weight: 500; color: var(--rv-grey); }
.rv__opt svg { fill: #E8EAED; }
.rv__opt .is-yes { fill: var(--rv-green); }
.rv__opt .is-no { fill: var(--rv-red); }

/* ---------- writing a review ---------- */
.rv__compose { position: absolute; margin: 0; border-radius: 10px; background: var(--rv-card); }
.rv__field { position: absolute; left: 15px; top: 15px; width: 1408px; height: 56px; margin: 0; padding: 16px 232px 18px 15px; border: 0; border-radius: 5px; background: var(--rv-plate); color: var(--rv-ivory); font: 500 18px/22px var(--f-body); caret-color: var(--crimson); user-select: text; -webkit-user-select: text;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2), 9px 8px 12px rgba(0, 0, 0, 0.17), 20px 17px 16px rgba(0, 0, 0, 0.1), 36px 30px 19px rgba(0, 0, 0, 0.03); }
.rv__field::placeholder { color: var(--rv-ivory); opacity: 1; font-weight: 600; transition: opacity 200ms ease; }
.rv__field:focus::placeholder { opacity: 0.55; }
.rv__rate { position: absolute; left: 1203.12px; top: 24.62px; width: 146px; height: 36px; }
.rv__star { position: absolute; top: 0; width: 29px; height: 36px; border-radius: 4px; }
.rv__star svg { position: absolute; left: 4.88px; top: 8.38px; width: 19.24px; height: 19.24px; transition: transform 220ms var(--rv-spring); }
.rv__star .o { fill: none; stroke: #E5E5DF; }
.rv__star .f { fill: #D9D9D9; opacity: 0; transition: opacity 180ms ease; }
.rv__star.is-on .f { opacity: 1; }
.rv__rate.is-pre .rv__star.is-hint .f { opacity: 0.6; }
.rv__rate.is-pre .rv__star.is-on:not(.is-hint) .f { opacity: 0.28; }
.rv__rate.is-pre .rv__star.is-on.is-hint .f { opacity: 1; }
.rv__send { left: 1356px; top: 19px; width: 62px; height: 48px; border-radius: 5px; color: var(--rv-grey); transition: color 250ms ease; }
.rv__send svg { position: absolute; left: 21px; top: 11px; fill: currentColor; }
.rv__send.is-ready { color: var(--rv-ivory); }
.rv__plate, .rv__thumb { top: 15px; width: 56px; height: 56px; border-radius: 5px; }
.rv__plate { position: absolute; background: var(--rv-plate); }
.rv__plate--up { left: 1438px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 1px 2px 3px rgba(0, 0, 0, 0.17), 3px 5px 4px rgba(0, 0, 0, 0.1), 4px 10px 4px rgba(0, 0, 0, 0.03); }
.rv__plate--down { left: 1509px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 1px 2px 3px rgba(0, 0, 0, 0.17), 2px 5px 3px rgba(0, 0, 0, 0.1), 4px 9px 4px rgba(0, 0, 0, 0.03); }
.rv__pick { position: absolute; left: calc(var(--lq-l) * 1px); top: calc(var(--lq-t) * 1px); width: calc((var(--lq-r) - var(--lq-l)) * 1px); height: calc((var(--lq-b) - var(--lq-t)) * 1px); border-radius: 5px; opacity: 0; pointer-events: none;
  background: rgba(154, 194, 68, 0.16); box-shadow: inset 0 0 0 1.5px rgba(154, 194, 68, 0.8);
  transition: var(--lq-tr), background-color 300ms ease, box-shadow 300ms ease, opacity 220ms ease; }
.rv__pick.is-up, .rv__pick.is-down { opacity: 1; }
.rv__pick.is-down { background: rgba(199, 73, 59, 0.16); box-shadow: inset 0 0 0 1.5px rgba(199, 73, 59, 0.85); }
.rv__thumb--up { left: 1438px; }
.rv__thumb--down { left: 1509px; }
.rv__thumb svg { position: absolute; left: 14px; top: 14px; transition: opacity 250ms ease, filter 250ms ease; }
.rv__thumb--up svg { fill: var(--rv-green); }
.rv__thumb--down svg { top: 16px; fill: var(--rv-red); }
.rv__compose.has-pick .rv__thumb[aria-pressed="false"] svg { opacity: 0.32; filter: grayscale(1); }

/* ---------- the two columns ---------- */
.rv__col { position: absolute; overflow-x: hidden; overflow-y: auto; background: var(--rv-page); scrollbar-width: thin; scrollbar-color: #3A3A3A transparent; }
.rv__col.fade-t { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px); mask-image: linear-gradient(to bottom, transparent, #000 30px); }
.rv__col.fade-b { -webkit-mask-image: linear-gradient(to top, transparent, #000 30px); mask-image: linear-gradient(to top, transparent, #000 30px); }
.rv__col.fade-t.fade-b { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.rv__list { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.rv__more { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; background: var(--rv-plate); font: 600 14px/18px var(--f-body); transition: background-color 200ms ease, opacity 250ms ease, visibility 250ms; }
.rv__more svg { stroke: currentColor; transition: transform 420ms var(--liquid); }
.rv__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.rv__more.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.rv__empty { position: absolute; left: 0; top: 0; width: 974px; height: 193px; border-radius: 10px; background: var(--rv-card); display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.rv__empty[hidden] { display: none; }
.rv__empty-i { width: 46px; height: 46px; border-radius: 5px; background: var(--rv-plate); display: grid; place-items: center; margin-bottom: 4px; }
.rv__empty-i svg { fill: var(--rv-grey); }
.rv__empty-t { font: 600 16px/20px var(--f-body); }
.rv__empty-s { font: 400 14px/18px var(--f-body); color: var(--rv-grey); }
.rv__empty-b { position: relative; margin-top: 6px; height: 36px; padding: 0 16px; border-radius: 5px; background: var(--rv-lit); font: 600 14px/18px var(--f-body); }

/* ---------- a review card: Reviews' wide one (m) and Recent Reviews' narrow one (r) ---------- */
.rvc { position: relative; flex: none; padding: 96px 0 var(--pb); border-radius: 10px; background: var(--rv-card); transform-origin: 50% 0; }
.rvc--m { width: 974px; --pb: 15px; --lines: 1; --tx: 86px; --tw: 873px; --hw: 873px; --av-x: 96px; --av-y: 24px; --nm-x: 129px; --nm-y: 28px; --rc-x: 95px; --meta-r: 28.13px; --score-y: 0px; }
.rvc--r { width: 586px; --pb: 17px; --lines: 2; --tx: 95px; --tw: 420px; --hw: 485px; --av-x: 97px; --av-y: 22px; --nm-x: 130px; --nm-y: 26px; --rc-x: 96px; --meta-r: 27.13px; --score-y: 10px; }
.rvc.is-leaving { position: absolute; pointer-events: none; }
.rvc__thumb { position: absolute; left: 15px; top: 15px; width: 56px; height: 56px; border-radius: 3px; background: var(--rv-plate); }
.rvc__thumb svg { position: absolute; left: 14px; top: 14px; }
.rvc__thumb .is-yes { fill: var(--rv-green); }
.rvc__thumb .is-no { fill: var(--rv-red); }
.rvc__head { position: absolute; left: 86px; top: 15px; width: var(--hw); height: 56px; border-radius: 3px; background: var(--rv-plate); }
.rvc__av { position: absolute; left: var(--av-x); top: var(--av-y); width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--rv-lit); }
.rvc__av--i { display: grid; place-items: center; font: 700 10px/1 var(--f-body); color: var(--rv-ivory); background: var(--av-c); }
.rvc__name, .rvc__rec, .rvc__meta { position: absolute; font-size: 12px; line-height: 16px; white-space: nowrap; }
.rvc__name { left: var(--nm-x); top: var(--nm-y); max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.rvc__rec { left: var(--rc-x); top: 48px; font-weight: 500; }
.rvc__rec.is-yes { color: var(--rv-green); }
.rvc__rec.is-no { color: var(--rv-red); }
.rvc__meta { right: var(--meta-r); top: 47px; display: flex; gap: 14.55px; color: var(--rv-grey); }
.rvc__count { font-weight: 600; }
.rvc__date { font: 600 12px/16px "Nunito Sans", var(--f-body); }
.rvc__body { margin-left: var(--tx); width: var(--tw); }
.rvc__txt { position: relative; min-height: calc(var(--lines) * 20px); font: 400 16px/20px var(--f-body); overflow-wrap: break-word; }
.rvc__txt.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); line-clamp: var(--lines); max-height: calc(var(--lines) * 20px); overflow: hidden; }
.rvc__more { padding: 0 2px; border-radius: 3px; font: 600 14px/20px var(--f-body); color: var(--rv-grey); white-space: nowrap; transition: color 160ms ease; }
.rvc__more[hidden] { display: none; }
.rvc__txt.is-clamped .rvc__more { position: absolute; right: 0; bottom: 0; padding-left: 52px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(39, 39, 39, 0), var(--rv-card) 44px); }
.rvc__txt:not(.is-clamped) .rvc__more { margin-left: 8px; vertical-align: top; }
.rvc__foot { position: relative; height: 37px; margin-top: 25px; }
.rvc__ask { position: absolute; left: 25px; top: 10px; font: 500 12px/16px var(--f-body); }
.rvc__votes { position: absolute; left: 86px; top: 0; }
.rvv { top: 0; height: 37px; border-radius: 5px; background: var(--rv-plate); transition: background-color 200ms ease; }
.rvv--yes { left: 0; width: 82px; }
.rvv--no { left: 88px; width: 82px; }
.rvv--funny { left: 176px; width: 93px; }
.rvv svg { position: absolute; fill: var(--rv-ink); transition: fill 250ms ease; }
.rvv--yes svg { left: 11.25px; top: 9.88px; }
.rvv--no svg { left: 12.25px; top: 10.5px; }
.rvv--funny svg { left: 10px; top: 12px; fill: var(--rv-grey); }
.rvv__l, .rvv__n { position: absolute; top: 14px; font: 400 10px/12px var(--f-body); white-space: nowrap; }
.rvv--yes .rvv__l { left: 36px; }
.rvv--yes .rvv__n { left: 59px; color: var(--rv-green); }
.rvv--no .rvv__l { left: 37px; }
.rvv--no .rvv__n { left: 58px; color: var(--rv-red); }
.rvv--funny .rvv__l { left: 31.3px; }
.rvv--funny .rvv__n { left: 69.55px; color: var(--rv-gold); }
.rvv[aria-pressed="true"] { background: var(--rv-lit); }
.rvv--yes[aria-pressed="true"] svg { fill: var(--rv-green); }
.rvv--no[aria-pressed="true"] svg { fill: var(--rv-red); }
.rvv--funny[aria-pressed="true"] svg { fill: var(--rv-gold); }
.rvc__score { position: absolute; right: 14.76px; top: var(--score-y); width: 175.24px; height: 37px; }
.rvc__score b { position: absolute; left: 0; top: 10px; font: 800 16px/20px "Nunito Sans", var(--f-body); }
.rvc__score svg { position: absolute; left: 39px; top: 8px; }
.rvc__score .f { fill: #D9D9D9; }
.rvc__score .o { fill: none; stroke: #E5E5DF; }

@media (hover: hover) and (pointer: fine) {
  .rv__funnel:hover, .rv__more:hover { background: #2A2A2A; }
  .rv__sort[aria-pressed="false"]:hover { background: rgba(53, 53, 53, 0.45); }
  .rv__tri:not(.is-on):hover svg { fill: #8E8E8E; }
  .rv__clear:hover { color: var(--rv-ivory); background: #2A2A2A; }
  .rv__opt:hover { background: rgba(53, 53, 53, 0.45); }
  .rv__star:hover svg { transform: scale(1.14); }
  .rv__send:hover { color: var(--rv-ivory); }
  .rvv[aria-pressed="false"]:hover { background: #2A2A2A; }
  .rvc__more:hover { color: var(--rv-ivory); }
}
@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::placeholder { transition: none !important; }
}