@charset "UTF-8";
/* index.css —— 首页：3D 轮播（手机 360×130，电脑自动铺满）+ 4 个圆形按钮 */

.carousel-wrap{margin:4px 0 14px}
.car-hero{position:relative;width:360px;max-width:100%;height:130px;margin:0 auto;perspective:900px;perspective-origin:50% 50%}
.car-hero .car-slide{
  position:absolute;left:0;top:0;width:100%;height:130px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(135deg,#2b3566,#4b2b66);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .78s cubic-bezier(.16,.84,.24,1),opacity .5s ease,filter .5s ease;
  will-change:transform,opacity,filter;transform-origin:center center;cursor:pointer;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.car-hero .car-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* ★ 海报适配：竖版海报 → 模糊背景铺满 + 原比例海报居中完整显示（不拉伸、不裁头） */
.car-hero .car-slide .car-bg{
  position:absolute;left:50%;top:50%;
  width:130%;height:130%;
  transform:translate(-50%,-50%);
  object-fit:cover;object-position:center;
  filter:blur(16px) brightness(.52) saturate(1.15);
  opacity:1;
}
.car-hero .car-slide .car-poster{
  position:absolute;left:50%;top:0;
  height:100%;width:auto;max-width:none;
  transform:translateX(-50%);
  object-fit:contain;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.car-hero .car-cap{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.car-hero .car-title{font-size:.8125rem;font-weight:800;color:#fff;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 6px #000}
.car-hero .car-sub{font-size:.625rem;color:#d7dcff;margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.car-hero .car-tag{position:absolute;top:8px;left:8px;font-size:.5625rem;font-weight:800;padding:2px 7px;border-radius:8px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--primary2))}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots span{width:7px;height:7px;border-radius:50%;background:rgba(150,160,200,.4);transition:width .3s,background .3s;cursor:pointer}
.dots span.on{width:20px;border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--primary2))}

/* 4 个圆形按钮：资源 / 短剧 / 推荐 / 电影 */
.rounds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 18px}
.round{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px;border-radius:16px;transition:transform .25s}
.round:active{transform:scale(.9);filter:brightness(.9)}
.round-ico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;color:#fff;
  border:2px solid rgba(255,255,255,.25);background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.round-name{font-size:.75rem;font-weight:600;color:var(--text)}

/* ===== 电脑端：轮播铺满、按钮变大 ===== */
@media (min-width:721px){
  .car-hero{width:100%;height:180px}
  .car-hero .car-slide{height:180px;border-radius:18px}
  .car-hero .car-title{font-size:1rem}
  .car-hero .car-sub{font-size:.75rem}
  .car-hero .car-cap{padding:14px 16px}
  .rounds{gap:16px;margin:10px 0 22px}
  .round-ico{width:64px;height:64px;font-size:1.5rem}
  .round-name{font-size:.8125rem}
}
@media (min-width:1000px){
  .car-hero{height:240px}
  .car-hero .car-slide{height:240px}
  .rounds{grid-template-columns:repeat(4,1fr);gap:20px}
  .round-ico{width:72px;height:72px;font-size:1.75rem}
  .round{padding:14px 6px}
}
@media (min-width:1400px){
  .car-hero{height:300px}
  .car-hero .car-slide{height:300px}
}