/* Reviews Block V2 (PC) — smaller typography + tighter spacing
   Scope: .fm-rv2 only
*/

.fm-rv2 *{ box-sizing:border-box; }
.fm-rv2{
  margin-top: 20px;
  color:#111827;

  /* ===== knobs (快速微调) ===== */
  --rv2-card-r: 32px;
  --rv2-card-pad-y: 22px;
  --rv2-card-pad-x: 24px;

  --rv2-title: 18px;
  --rv2-title-w: 750;
  --rv2-total: 16px;

  --rv2-avg-num: 36px;
  --rv2-avg-lbl: 12.5px;
  --rv2-star: 16px;

  --rv2-pill: 13px;
  --rv2-pill-pad-y: 8px;
  --rv2-pill-pad-x: 12px;

  --rv2-name: 13px;
  --rv2-content: 13px;
  --rv2-date: 13px;

  --rv2-like: 13px;

  --rv2-avatar: 40px;
  --rv2-gap: 14px;
}

.fm-rv2-card{
  background:#fff;
  border-radius: var(--rv2-card-r);
  padding: var(--rv2-card-pad-y) var(--rv2-card-pad-x);
  box-shadow: 0 10px 34px rgba(0,0,0,.055);
}

/* =========================
   Header
   ========================= */
.rv2-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}

.rv2-headL{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: var(--rv2-title-w);
  font-size: var(--rv2-title);
  letter-spacing: -0.01em;
}
.rv2-ico{ display:inline-flex; width:22px; height:22px; }
.rv2-ico svg{ display:block; width:22px; height:22px; }

.rv2-total{
  font-weight: 700;
  font-size: var(--rv2-total);
  opacity:.82;
}

.rv2-headR{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 6px;
  min-width: 170px;
}
.rv2-avgNum{
  font-size: var(--rv2-avg-num);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.rv2-avgMeta{ display:flex; flex-direction:column; align-items:flex-end; gap: 6px; }
.rv2-avgLbl{
  font-size: var(--rv2-avg-lbl);
  color: rgba(17,24,39,.55);
  margin-top: -2px;
}

.rv2-avgStars,
.rv2-stars{
  display:flex;
  align-items:center;
  gap: 5px;
}
.rv2-starWrap{ display:inline-flex; }
.rv2-star{
  width: var(--rv2-star);
  height: var(--rv2-star);
  display:block;
}
.rv2-starWrap.is-on .rv2-star path{ fill:#fbbf24; }
.rv2-starWrap.is-off .rv2-star path{ fill: rgba(17,24,39,.14); }

/* =========================
   Filters (pill group)
   ========================= */
.rv2-filters{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 6px;
  background: rgba(17,24,39,.06);
  padding: 6px;
  border-radius: 14px;
  width: fit-content;
  max-width: 860px;
  flex-wrap: wrap;
}
.rv2-pill{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(17,24,39,.72);
  font-weight: 650;
  font-size: var(--rv2-pill);
  padding: var(--rv2-pill-pad-y) var(--rv2-pill-pad-x);
  border-radius: 12px;
  cursor:pointer;
  line-height: 1;
  user-select:none;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.rv2-pill:hover{ color: rgba(17,24,39,.92); }
.rv2-pill.is-active{
  background:#fff;
  border-color: rgba(17,24,39,.085);
  color: rgba(17,24,39,.92);
  box-shadow: 0 6px 14px rgba(0,0,0,.075);
}

.rv2-divider{
  margin-top: 14px;
  height: 1px;
  background: rgba(17,24,39,.08);
}

/* =========================
   List
   ========================= */
.rv2-listwrap{ margin-top: 4px; }
.rv2-empty{
  padding: 18px 0;
  color: rgba(17,24,39,.55);
  font-size: 13px;
}

.rv2-item{
  display:flex;
  align-items:flex-start;
  gap: var(--rv2-gap);
  padding: 18px 0;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.rv2-item:last-child{ border-bottom: 0; }

.rv2-avatar{
  width: var(--rv2-avatar);
  height: var(--rv2-avatar);
  border-radius: 999px;
  overflow:hidden;
  flex: 0 0 var(--rv2-avatar);
  background: rgba(17,24,39,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.rv2-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rv2-initial{
  font-weight: 800;
  font-size: 14px;
  color: rgba(17,24,39,.7);
}

.rv2-body{ flex: 1 1 auto; min-width: 0; }

.rv2-name{
  font-size: var(--rv2-name);
  font-weight: 700;
  color: rgba(17,24,39,.56);
  margin-bottom: 6px;
}
.rv2-content{
  font-size: var(--rv2-content);
  font-weight: 550;
  color: rgba(17,24,39,.92);
  line-height: 1.28;
  margin-bottom: 8px;
  word-break: break-word;
}

.rv2-subrow{
  display:flex;
  align-items:center;
  gap: 12px;
}
.rv2-stars .rv2-star{
  width: 15px;
  height: 15px;
}
.rv2-date{
  font-size: var(--rv2-date);
  color: rgba(17,24,39,.45);
}

/* =========================
   Photos (optional)
   ========================= */
.rv2-photos{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.rv2-photo{
  width: 50px;
  height: 50px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.04);
  display:inline-flex;
  padding:0;
  cursor:pointer;
}
.rv2-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rv2-more{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}

/* =========================
   Like (right side)
   ========================= */
.rv2-like{
  flex: 0 0 auto;
  margin-left: 14px;
  align-self: center;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.rv2-like:hover{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.08);
}
.rv2-like:active{ transform: scale(.98); }

.rv2-heart{ display:inline-flex; }
.rv2-likeCnt{
  font-weight: 750;
  font-size: var(--rv2-like);
  color: rgba(17,24,39,.55);
}

.rv2-like .rv2-heart--on{ display:none; }
.rv2-like.is-liked .rv2-heart--on{ display:inline-flex; }
.rv2-like.is-liked .rv2-heart--off{ display:none; }

/* =========================
   Pager
   ========================= */
.rv2-pager{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
.rv2-pbtn{
  appearance:none;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  padding: 9px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 750;
  font-size: 13px;
}
.rv2-pbtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.rv2-pmeta{
  font-size: 13px;
  color: rgba(17,24,39,.6);
}

/* =========================
   Image preview overlay (JS)
   ========================= */
.fm-img-preview{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.fm-img-preview__img{
  max-width: min(900px, 92vw);
  max-height: 86vh;
  border-radius: 16px;
  box-shadow: 0 24px 86px rgba(0,0,0,.32);
  background:#fff;
}
.fm-img-preview__x{
  position: fixed;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

/* =========================
   Slightly tighter on smaller desktops
   ========================= */
@media (max-width: 1100px){
  .fm-rv2{
    --rv2-avg-num: 32px;
    --rv2-content: 15.5px;
    --rv2-card-pad-x: 20px;
  }
  .rv2-head{ gap: 14px; }
  .rv2-headR{ min-width: 150px; }
}
/* =========================================================
   PATCH: Reviews width align with .fm-mainGrid left column
   (append to BOTTOM of reviews-block-v2.pc.css)
========================================================= */

/* 让 include 的根节点撑满左列，不要任何居中/限宽 */
.fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 卡片也必须撑满（有些人会给 card 设 max-width） */
.fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2-card{
  width: 100% !important;
  max-width: none !important;
}

/* 如果模板里还有一层“inner/container”，一刀切清掉（不影响你现有类名） */
.fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2 :where(.inner,.container,.wrap){
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   MOBILE PATCH: Reviews Block V2 (phone layout like screenshot)
   Append to VERY BOTTOM of game-show-v2.pc.css
========================================================= */
@media (max-width: 900px){

  /* 让 reviews 区块在手机下也有左右内边距（不依赖外层 container） */
  .fm-gsv2 .fm-gsv2ReviewsGrid{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* 重要：你 reviews-block 里面还有 <div class="fm-container">，手机下把它的 padding 清掉，
     避免“二次缩进”导致看起来左右不一致 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2 > .fm-container{
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 卡片：更贴合手机，圆角稍小一点，padding 更紧 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2{
    margin-top: 12px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2-card{
    border-radius: 22px !important;
    padding: 16px 14px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.05) !important;
  }

  /* ===== Header: 评分居中（4.8 / Average(xxx) / stars） ===== */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-head{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-headL{
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 20px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-ico{ width:20px !important; height:20px !important; }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-ico svg{ width:20px !important; height:20px !important; }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-total{ font-size: 14px !important; }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-headR{
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgNum{
    font-size: 49px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgMeta{
    align-items: center !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgLbl{
    font-size: 16px !important;
    color: rgba(17,24,39,.55) !important;
    margin-top: 0 !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars{
    justify-content: center !important;
    gap: 8px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars .rv2-star{
    width: 38px !important;
    height: 30px !important;
  }

  /* ===== Pills: 一行横滑（截图效果）===== */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-filters{
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    padding: 8px 2px !important;
    border-radius: 0 !important;

    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    scrollbar-width: none;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-filters::-webkit-scrollbar{ display:none; }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-pill{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border: 1px solid rgba(17,24,39,.10) !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: rgba(17,24,39,.82) !important;
    box-shadow: none !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-pill.is-active{
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-divider{
    margin-top: 8px !important;
  }

  /* ===== List item: 手机排版（头像左，点赞右）===== */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-item{
    position: relative !important;
    padding: 16px 0 !important;
    gap: 12px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avatar{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-name{
    font-size: 15px !important;
    font-weight: 800 !important;
    color: rgba(17,24,39,.65) !important;
    margin-bottom: 6px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-content{
    font-size: 18px !important;       /* 截图里标题句更大更醒目 */
    line-height: 1.25 !important;
    font-weight: 550 !important;
    margin-bottom: 10px !important;
  }

  /* 图片缩略图更大一点，贴近截图 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-photos{
    margin-top: 6px !important;
    gap: 12px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-photo{
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
  }

  /* 星星 + 时间：更靠近内容底部 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-subrow{
    margin-top: 8px !important;
    gap: 10px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-stars{
    gap: 6px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-stars .rv2-star{
    width: 18px !important;
    height: 18px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-date{
    font-size: 14px !important;
    color: rgba(17,24,39,.45) !important;
  }

  /* 点赞：固定在右侧中间（类似截图右边心形 + 数字） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-like{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;

    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* 给内容右侧留空间，避免被点赞遮住 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-body{
    padding-right: 72px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-likeCnt{
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  /* pager 手机下更紧凑 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-pager{
    margin-top: 12px !important;
  }
}
/* =========================================================
   MOBILE TIGHTER PATCH (override) — make everything smaller
   Append AFTER previous MOBILE PATCH
========================================================= */
@media (max-width: 900px){

  /* ✅ 一把梭：整体缩放（包含字体/星星/头像/图片/点赞） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2-card{
    --rv2S: .74; /* 0.62~0.78 都可以：越小越“瘦” */
    transform: scale(var(--rv2S)) !important;
    transform-origin: top left !important;
    width: calc(100% / var(--rv2S)) !important;  /* 视觉上仍然满宽 */
  }

  /* ✅ 缩放后再压一下容器/间距，避免“缩小但仍显松” */
  .fm-gsv2 .fm-gsv2ReviewsGrid{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .fm-rv2-card{
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-head{
    gap: 8px !important;
  }

  /* ✅ filters 更小、更紧凑（你特别强调这块） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-filters{
    padding: 4px 0 !important;
    gap: 8px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-pill{
    padding: 7px 26px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
  }

  /* ✅ 列表行更紧凑一点 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-item{
    padding: 25px 0 !important;
    gap: 25px !important;
  }
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-body{
    padding-right: 64px !important; /* 给右侧点赞留空间（缩放后也更合理） */
  }

  /* ✅ 图片略小一点 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-photo{
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
  }
}


/* =========================================================
   FINAL PATCH: mobile reviews headL remove + bigger active stars
========================================================= */
@media (max-width: 900px){

  /* 1) 去掉左侧 Reviews 标题行 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-headL{
    display: none !important;
  }

  /* 只保留中间评分区 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-head{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-headR{
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgMeta{
    align-items: center !important;
    gap: 4px !important;
  }

  /* 2) 平均评分那排星星：左右间距减少 3px（原来 8 -> 5） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars{
    gap: 5px !important;
    justify-content: center !important;
  }

  /* 3) 顶部平均评分：亮星放大（更明显，大约接近 1 倍视觉增量） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars .rv2-starWrap.is-on{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars .rv2-starWrap.is-on .rv2-star{
    width: 68px !important;
    height: 54px !important;
  }

  /* 灰星也稍微跟上，不然反差太怪 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-avgStars .rv2-starWrap.is-off .rv2-star{
    width: 34px !important;
    height: 26px !important;
  }

  /* 列表里的星星也顺手收紧一点（原来 6 -> 3） */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-stars{
    gap: 3px !important;
  }

  /* 列表里的亮星也稍微放大一点，但不要像顶部那么夸张 */
  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-stars .rv2-starWrap.is-on .rv2-star{
    width: 24px !important;
    height: 24px !important;
  }

  .fm-gsv2 .fm-gsv2ReviewsLeft .rv2-stars .rv2-starWrap.is-off .rv2-star{
    width: 16px !important;
    height: 16px !important;
  }
}