/**
 * RI-首页模块 : 精选与推荐（Steam 风格）
 *
 * 卡片是一个整体的深色块：底层铺当前大图的模糊放大版，右侧面板用半透明毛玻璃盖在上面。
 * 所以面板内的文字颜色不跟明暗主题走（卡片始终是深底），只有卡片外的圆点需要两套。
 */

/* 破出 .container 铺满视口：100vw 含滚动条宽度，多出来的由外层 .section 裁掉 */
.rizhuti_v2-widget-featured {
  overflow-x: hidden;
}

.xy-featured {
  position: relative;
  /* --xy-sb 是纵向滚动条宽度，由 JS 量出来；100vw 是含滚动条的，不扣掉会横向滚动 17px */
  width: calc(100vw - var(--xy-sb, 0px));
  margin-left: calc(50% - 50vw + var(--xy-sb, 0px) / 2);
  /* 两侧预览朝页面底色淡出，所以这里必须和 body 的背景色一致（app.css 是 rgb(240,244,245)）。
     渐变终点要写成同色 0 透明度，写 transparent 在部分浏览器会经过灰色。 */
  --xy-page: #f0f4f5;
  --xy-page-0: rgba(240, 244, 245, 0);
}

body.dark-open .xy-featured {
  --xy-page: #202634;
  --xy-page-0: rgba(32, 38, 52, 0);
}

/* ===== 舞台：[左预览][主卡][右预览] ===== */
.xy-featured-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.xy-featured-frame {
  flex: 0 0 auto;
  /**
   * 两侧各留 100px 给预览和箭头 —— Steam 的卡片就是比屏幕窄一大截，预览是常态而不是超宽屏福利。
   * 1366 / 1536 这些主流宽度下也就都有预览可点了。
   */
  width: min(1440px, 100% - 200px);
  position: relative;
  /**
   * 2.57:1 跟 Steam 那条同比例。
   * min-height 兜住窄屏，不然面板那一列会被压扁到互相重叠 —— 底部入口占掉 124px，
   * 这个下限必须连它一起算进去。
   */
  aspect-ratio: 1440 / 560;
  min-height: 530px;
  overflow: hidden;
  background: #151c27;
  /* 有预览时必须方角：圆角会在接缝处露出背后预览的暗色，形成一个小黑楔 */
  border-radius: 0;
}

/* 窄到放不下预览时，主卡铺开、恢复圆角和阴影 */
@media (max-width: 1199px) {
  .xy-featured-frame {
    width: min(1440px, 100% - 32px);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  }
}

/* 卡片底噪：当前大图的模糊放大版，让毛玻璃面板背后有东西可糊 */
.xy-featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.xy-featured-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  /* 面板和主图右缘都靠这一层显色，亮度不能压太狠，否则亮图旁边的右栏还是一块死黑 */
  filter: blur(48px) brightness(.62) saturate(1.2);
}

/* 两侧预览：窄屏没有富余空间，直接收掉 */
.xy-featured-peek {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

.xy-featured-peek img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) saturate(.9);
  transition: filter .3s ease;
}

.xy-featured-peek:hover img {
  filter: brightness(.9) saturate(1);
}

/* src 由 JS 空闲时才填；没填之前浏览器会画一个裂图标 */
.xy-featured-peek img:not([src]) {
  visibility: hidden;
}

/**
 * 预览朝页面底色淡出（不是压黑）。
 * 页面是浅底，压黑会在页面上留两条脏黑条 —— Steam 敢压黑是因为它整站深蓝。
 * 两层渐变：上层管上下边缘，下层管远离主卡的那一侧。
 */
.xy-featured-peek::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--xy-page), var(--xy-page-0) 18px, var(--xy-page-0) calc(100% - 18px), var(--xy-page)),
    linear-gradient(to right, var(--xy-page) 0%, var(--xy-page-0) 60%);
}

.xy-featured-peek-next::after {
  background:
    linear-gradient(to bottom, var(--xy-page), var(--xy-page-0) 18px, var(--xy-page-0) calc(100% - 18px), var(--xy-page)),
    linear-gradient(to left, var(--xy-page) 0%, var(--xy-page-0) 60%);
}

/**
 * 箭头画在预览区里（Steam 就是这个位置），比贴在主图边缘清爽、也不遮画面。
 * 要靠主卡那一侧放：预览的外半边被遮成页面底色了，白箭头放那儿看不清。
 */
/**
 * 白色实心切角三角，形状和尺寸照着 Steam 的 cut_arrow.svg（50×100，opacity .7 → hover 1）。
 * 描边款在浅色页面上试过，深灰配白光晕怎么调都发灰；实心白配一层黑投影才立得住 —— 箭头压
 * 在预览的画面上而不是页面底色上，白色反而是最稳的。
 */
.xy-featured-peek::before {
  content: '';
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 25px;
  height: 50px;
  margin-top: -25px;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 100' fill='%23ffffff'><polygon points='0,0.093 0,25.702 24.323,50.026 0,74.349 0,99.955 49.929,50.026'/></svg>");
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .75));
  opacity: .7;
  transition: opacity .2s ease;
}

.xy-featured-peek-prev::before {
  right: 34px;
  transform: rotate(180deg);
}

.xy-featured-peek-next::before {
  left: 34px;
}

.xy-featured-peek:hover::before {
  opacity: 1;
}

.xy-featured-peek-prev img {
  object-position: right center;
}

.xy-featured-peek-next img {
  object-position: left center;
}

@media (max-width: 1199px) {
  .xy-featured-peek {
    display: none;
  }
}

/* ===== 幻灯片 ===== */
.xy-featured-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}

.xy-featured-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* 大图区 */
.xy-featured-media {
  position: relative;
  /* 必须允许收缩：面板有 320px 下限，主图不让位的话面板会被顶出卡片右边 */
  flex: 1 1 72%;
  max-width: 72%;
  display: block;
  overflow: hidden;
}

/**
 * 主图右缘用 mask 直接淡成透明，露出背后那层模糊放大的同一张图（.xy-featured-bg）。
 *
 * 之前是拿一个固定色的渐变盖在主图上、面板也用同一个固定色，两块确实无缝了，但固定色没法
 * 同时伺候亮图和暗图：碰上明亮的实拍封面，右栏就是页面上一块突兀的重色。
 * 现在主图和面板共用同一层底噪显色，右栏的颜色永远跟着当前这张图走，亮图偏亮、暗图偏暗。
 */
.xy-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent);
}

/**
 * 悬浮时静音播放的预告片，铺满主图区盖在大图上（大图天然就是它的 poster）。
 *
 * mask 必须和上面的大图逐字一致：少了它右缘就是一条硬边，和右栏面板接不上。
 * pointer-events 关掉，点击要原样落到外层 <a> 上（顺带省掉视频的右键菜单）。
 */
.xy-featured-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent);
}

/* 真的开始播了才淡入，否则会先闪一帧黑 */
.xy-featured-video.is-playing {
  opacity: 1;
}

/**
 * 面板压了一层暗化保证白字能读，主图淡出区不压的话交界处会突然暗一档。
 * 所以把同一层暗化在这 180px 里从 0 渐增到和面板一样的 .4，两边正好接上。
 */
.xy-featured-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(9, 13, 19, 0) calc(100% - 180px), rgba(9, 13, 19, .4));
}

.xy-featured-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  background: rgba(245, 137, 7, .95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ===== 右侧信息面板（毛玻璃，不随明暗主题变） ===== */
.xy-featured-panel {
  /**
   * basis 必须是 0。写 auto 的话基准宽度按面板里最长的那行文字（简介的 max-content）算，
   * 能有 800px 往上，直接把主图从 72% 抢到 45%。
   */
  flex: 1 1 0;
  /* 窄屏兜底：主图让位给面板，别让 2×2 小图和标题挤成一团 */
  min-width: 320px;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  overflow: hidden;
  /**
   * 只压一层暗化，显色交给背后的底噪 —— 面板于是和主图右缘是同一片颜色，不再是一块贴上去的黑。
   * .46 是给白字兜底的下限：再透，碰上很亮的封面文字就糊了。
   * 顶上那层极淡的白色渐变是给大块暗色一点层次，Steam 的右栏也是上亮下暗。
   */
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 150px),
    rgba(9, 13, 19, .4);
}

/* 面板里任何一项都不许被压扁：压扁不会让文字变少，只会让它溢出压到下一项上面 */
.xy-featured-panel > * {
  flex-shrink: 0;
}

.xy-featured-name {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  /* 中文长标题很常见（带｜官方中文｜英文名），截一行太丑，给两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xy-featured-name:hover {
  color: #ffb648;
}

.xy-featured-rating {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.xy-featured-rating span {
  color: rgba(255, 255, 255, .55);
}

.xy-featured-rating-good {
  color: #66c0f4;
}

.xy-featured-rating-mixed {
  color: #f0c14b;
}

.xy-featured-rating-bad {
  color: #ef8a80;
}

.xy-featured-rating-none {
  color: rgba(255, 255, 255, .62);
}

/* 2×2 小图铺满整栏，跟 Steam 一样：留白让给下面，别让小图缩在角上 */
.xy-featured-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.xy-featured-shots img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  cursor: pointer;
  opacity: .78;
  transition: opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.xy-featured-shots img:hover,
.xy-featured-shots img.is-current {
  opacity: 1;
  outline-color: #f58907;
}

.xy-featured-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 没填小图的条目，把腾出来的空间给简介，别让面板中间空一大块 */
.xy-featured-slide.is-noshot .xy-featured-desc {
  -webkit-line-clamp: 9;
}

/* 标签只留一行、超出裁掉：换行会把下面的价格顶下去 */
.xy-featured-tags {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 5px;
  margin-bottom: auto;
}

/* 尺寸和配色照 Steam 的 .taglist > span：半透明白底、白字、2px 圆角 */
.xy-featured-tags a {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.7;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  transition: background .2s ease, color .2s ease;
}

.xy-featured-tags a:hover {
  color: #fff;
  background: #f58907;
}

/**
 * ===== 右栏底部入口（2×2） =====
 * 在卡片内、幻灯片外，所以只有一份、切换幻灯片时不动。
 * 宽度必须和右栏面板同一个算法：主图 max-width 72%、面板 min-width 320px，
 * 于是面板实际宽度就是 max(28%, 320px)。
 */
.xy-featured-links {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: max(28%, 320px);
  padding: 0 24px 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

/* 面板得给这块让出位置，不然标签和入口会叠在一起 */
.xy-featured-frame.has-links .xy-featured-panel {
  padding-bottom: 124px;
}

/* 和标签胶囊同一套语言（半透明白底 + 小圆角），只是底色浅一档以示区分 */
.xy-featured-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .09);
  transition: background .2s ease, color .2s ease;
}

a.xy-featured-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.xy-featured-link i {
  flex: 0 0 auto;
  font-size: 15px;
  opacity: .85;
}

/* 标题超过栏宽就省略，别换行把格子撑高 */
.xy-featured-link span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 * 搜索框浮在大图左下角。
 * 之前是 300×46 的全圆胶囊 + 一圈白描边，压在明亮的主图上很像贴上去的控件：
 * 卡里其它元素都没有描边，圆角也只有 2~4px，全圆胶囊和白边是两处语言不一致。
 * 现在收窄压扁、去描边、跟卡片一样用小圆角，聚焦时才明显浮起来。
 */
.xy-featured-search {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 274px;
  height: 42px;
  padding: 0 5px 0 14px;
  border-radius: 4px;
  background: rgba(8, 11, 16, .34);
  border: 0;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: width .28s ease, background .2s ease, box-shadow .2s ease;
}

/* 用内阴影而不是 border 描出聚焦态：border 会改变盒子尺寸，输入框跟着跳一下 */
.xy-featured-search:focus-within {
  width: 356px;
  background: rgba(8, 11, 16, .66);
  box-shadow: inset 0 0 0 1px rgba(245, 137, 7, .8);
}

.xy-featured-search .xy-featured-search-icon {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .65);
  pointer-events: none;
}

.xy-featured-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #fff;
}

.xy-featured-search input::placeholder {
  color: rgba(255, 255, 255, .6);
}

.xy-featured-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(245, 137, 7, .85);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}

.xy-featured-search button:hover {
  background: #f58907;
}

.xy-featured-search button:active {
  transform: scale(.94);
}

.xy-featured-search button svg {
  pointer-events: none;
}

/* ===== 圆点 ===== */
/* 主图上不放任何切换按钮（Steam 也没有）：宽屏切换靠两侧预览，窄屏靠圆点、滑动和方向键 */
.xy-featured-dots {
  width: min(1440px, 100% - 32px);
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.xy-featured-dots button {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, .16);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}

.xy-featured-dots button:hover {
  background: rgba(0, 0, 0, .3);
}

.xy-featured-dots button.is-active {
  width: 32px;
  background: #f58907;
}

/* 卡片内始终是深底，只有卡片外的圆点要跟着主题走 */
body.dark-open .xy-featured-dots button {
  background: #3a4356;
}

body.dark-open .xy-featured-dots button:hover {
  background: #4d586e;
}

body.dark-open .xy-featured-dots button.is-active {
  background: #f58907;
}

body.dark-open .xy-featured-frame {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

/* ===== 手机端：上下堆叠 + 滑动切换 ===== */
@media (max-width: 992px) {
  .xy-featured-frame {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 10px;
    touch-action: pan-y;
  }

  .xy-featured-slide {
    position: relative;
    inset: auto;
    display: none;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
  }

  .xy-featured-slide.is-active {
    display: flex;
  }

  .xy-featured-media {
    flex: 0 0 auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* 竖排时主图要往下淡出，不是往右 */
  .xy-featured-media img,
  .xy-featured-video {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
  }

  .xy-featured-media::after {
    background: linear-gradient(to bottom, rgba(9, 13, 19, 0) calc(100% - 70px), rgba(9, 13, 19, .4));
  }

  .xy-featured-panel {
    padding: 12px 14px;
    /* 竖排时面板就是整屏宽，320 的下限会在 320px 的小屏上溢出 */
    min-width: 0;
    /* 竖排后 flex 主轴变成纵向，横排用的 basis 0 会把面板高度压到 0、内容被裁掉 */
    flex: 0 0 auto;
    display: grid;
    /* 必须是 minmax(0,1fr)：游戏名会撑成整行宽，把右边那列挤出屏幕 */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 6px;
    column-gap: 10px;
  }

  /* 价格去掉之后第一行没有右列了，标题直接横跨整行 */
  .xy-featured-name {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    font-size: 16px;
    -webkit-line-clamp: 1;
  }

  .xy-featured-rating {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    font-size: 12px;
  }

  .xy-featured-tags {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    justify-content: flex-end;
  }

  .xy-featured-tags a:nth-child(n+4) {
    display: none;
  }

  /* 小图和简介是桌面专属，手机上只留两行信息 */
  .xy-featured-shots,
  .xy-featured-desc {
    display: none;
  }

  /**
   * 入口块改成静态，跟在面板后面（绝对定位在竖排里会盖住画面）。
   * 这时它已经在面板外面，背后只有底噪 —— 碰上明亮的封面白字就没法看了，
   * 所以要补一层和面板同色的暗化，两块同色正好接成一片。
   */
  /**
   * 必须是 relative 而不是 static：底噪层是 absolute，static 元素的绘制顺序排在所有定位元素
   * 之前，会被底噪整块盖掉（背景和文字全没了，只剩图标透出来）。
   */
  .xy-featured-links {
    position: relative;
    width: auto;
    padding: 2px 14px 12px;
    gap: 6px;
    background: rgba(9, 13, 19, .4);
  }

  .xy-featured-frame.has-links .xy-featured-panel {
    padding-bottom: 10px;
  }

  /* 搜索框从图上移到卡片底部，别压着画面 */
  .xy-featured-search {
    position: static;
    width: auto;
    height: 42px;
    margin: 0 12px 12px;
  }

  .xy-featured-search:focus-within {
    width: auto;
  }

  .xy-featured-search button {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xy-featured-slide,
  .xy-featured-peek img,
  .xy-featured-search,
  .xy-featured-video {
    transition: none;
  }
}