/*
 * HF33: 33dy-like layout
 * Note: keep selectors namespaced to avoid clobbering WP admin.
 */

/* Wider container to fit 2-row poster grid + right sidebar */
.hanfan-wrap .container{max-width:1560px!important}

/* Card */
.hf33-block{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:14px 14px 18px;margin:14px 0}
.hf33-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 10px;border-bottom:1px solid rgba(0,0,0,.06)}
.hf33-head-title{font-weight:900;font-size:20px;display:flex;align-items:center;gap:8px}
.hf33-head-title i{color:#f7b500}
.hf33-more{font-size:12px;color:#666;text-decoration:none}
.hf33-more:hover{color:#0d6efd}

/* Home sections grid */
.hf33-grid{display:grid !important;grid-template-columns:1fr 220px !important;gap:14px;margin-top:12px}
.hf33-left{min-width:0}
.hf33-right{min-width:0}

/* Poster grid (home: 2 rows, auto wrap) */
.hf33-posters{display:flex;flex-wrap:wrap;gap:12px}
.hf33-posters .hf33-poster{width:calc((100% - 12px * 4)/5);min-width:150px}
.hf33-posters .hf33-poster a{display:block;text-decoration:none;color:#222}

/* Legacy poster markup (kept for compatibility) */
.hf33-cover{position:relative;border-radius:10px;overflow:hidden;background:#f3f4f6}
.hf33-cover img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.hf33-tag{position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:6px;font-size:12px;background:rgba(255,255,255,.92)}
.hf33-tag.score{background:#ff5b5b;color:#fff}
.hf33-tag.hd{background:#111827;color:#fff}
.hf33-caption{margin-top:8px;line-height:1.25}
.hf33-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-sub{font-size:12px;color:#888;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right list */
.hf33-side{padding-left:8px}
.hf33-side-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.hf33-side-title b{font-size:14px}
.hf33-rank{list-style:none;margin:0;padding:0}
.hf33-rank li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.06)}
.hf33-rank li:last-child{border-bottom:none}
.hf33-rank .idx{width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:#e5e7eb;color:#374151;flex:0 0 auto}
.hf33-rank li:nth-child(1) .idx{background:#ff5b5b;color:#fff}
.hf33-rank li:nth-child(2) .idx{background:#ffb020;color:#fff}
.hf33-rank li:nth-child(3) .idx{background:#34c38f;color:#fff}
.hf33-rank a{flex:1 1 auto;min-width:0;color:#1f2937;text-decoration:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-rank a:hover{color:#0d6efd}
.hf33-rank .status{flex:0 0 auto;font-size:12px;color:#e11d48;white-space:nowrap}

/* Filters (taxonomy page) */
.hf33-filter{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:12px 14px;margin:14px 0}
.hf33-filter-row{display:flex;align-items:flex-start;gap:10px;margin:6px 0;flex-wrap:wrap}
.hf33-filter-row .lbl{color:#6b7280;min-width:52px;font-size:12px;padding-top:6px}
.hf33-filter-row a{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:14px;background:#f3f4f6;color:#374151;text-decoration:none;font-size:12px}
.hf33-filter-row a:hover{background:#e5e7eb}
.hf33-filter-row a.on{background:#0d6efd;color:#fff}

/* Hot recommend (landscape cards) */
.hf33-hot{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:10px}
.hf33-hot-item{display:flex;gap:10px;background:#f9fafb;border:1px solid rgba(0,0,0,.06);border-radius:10px;overflow:hidden;min-height:92px}
.hf33-hot-item img{width:150px;height:92px;object-fit:cover;flex:0 0 auto}
.hf33-hot-item .t{padding:8px 10px;min-width:0}
.hf33-hot-item .t .n{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-hot-item .t .d{font-size:12px;color:#6b7280;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Hot recommend v2 (archive-vod.php): 1 big + 2 rows small (4 per row)
   要求：小图标题在缩略图下方；并固定文字高度保证整齐。
   同时保持右侧两行总高度与左侧大图缩略图高度一致（通过让小图thumb在单元格内自适应缩短）。 */
.hf33-hot2{--hot-big-w:280px;--hot-gap:12px;--hot-cap-h:44px;display:grid;grid-template-columns:var(--hot-big-w) 1fr;gap:var(--hot-gap);margin-top:10px;align-items:start}

.hf33-hot2-big,.hf33-hot2-item{display:block;text-decoration:none;color:#111827}

/* 左侧大图：固定为 2:3 海报比例 */
.hf33-hot2-big .thumb{position:relative;display:block;border-radius:10px;overflow:hidden;background:#eef0f5;aspect-ratio:2/3}
.hf33-hot2-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hf33-hot2-big .t{display:block;margin-top:8px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 右侧小图：容器高度=左侧大图thumb高度，严格两行 */
.hf33-hot2-smalls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:var(--hot-gap);height:calc(var(--hot-big-w) * 3 / 2)}

/* 小卡片：单元格内固定“图 + 文”结构，文案高度统一 */
.hf33-hot2-item{display:flex;flex-direction:column;height:100%;min-height:0}
.hf33-hot2-item .thumb{position:relative;display:block;flex:1 1 auto;min-height:0;border-radius:10px;overflow:hidden;background:#eef0f5}
.hf33-hot2-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.hf33-hot2-item .meta{flex:0 0 var(--hot-cap-h);height:var(--hot-cap-h);margin-top:6px;min-width:0}
.hf33-hot2-item .meta .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:800;line-height:1.2;max-height:29px;color:#111827}
.hf33-hot2-item .meta .sub{display:block;margin-top:2px;font-size:11px;line-height:1.2;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width: 1180px){
  .hf33-hot2{--hot-big-w:260px}
  .hf33-hot2-smalls{grid-template-columns:repeat(3,minmax(0,1fr));height:calc(var(--hot-big-w) * 3 / 2)}
}
@media (max-width: 980px){
  .hf33-hot2{grid-template-columns:1fr}
  .hf33-hot2-smalls{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
  .hf33-hot2-item{height:auto}
  .hf33-hot2-item .thumb{aspect-ratio:2/3;flex:0 0 auto;height:auto}
  .hf33-hot2-item img{position:absolute}
}
@media (max-width: 720px){
  .hf33-hot2-smalls{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Unified episode/status badge (overlay) */
.hf33-remarks{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.35;color:#fff;background:rgba(0,0,0,.55);max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;pointer-events:none}

/* Ensure containers used in templates can hold overlay */
.hf33-search-thumb{position:relative;display:block}
.hf33-vod-poster{position:relative}
.hf33-side-big .thumb,.hf33-side-small .thumb{position:relative;display:block}

/* ============================
   Archive / Category (33dy-like)
   ============================ */

/* two-column: left posters (2 rows), right recommend list */
.hf33-archive-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}

/* Left poster matrix: 4 columns x 2 rows */
.hf33-archive-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

.hf33-archive-card a{display:block;color:inherit}
.hf33-archive-poster{position:relative;border-radius:8px;overflow:hidden;background:#f2f4f7}
.hf33-archive-poster::before{content:"";display:block;aspect-ratio:8/9}
.hf33-archive-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hf33-archive-title{margin-top:8px;font-size:14px;line-height:1.2;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-archive-meta{margin-top:4px;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-archive-cast{margin-top:4px;font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right sidebar: tag chips + ranked list */
.hf33-archive-side{border-left:1px solid #eef0f5;padding-left:14px}
.hf33-side-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hf33-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#f3f4f6;color:#374151;font-size:12px;line-height:1;white-space:nowrap}

.hf33-side-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.hf33-side-title h3{margin:0;font-size:14px;color:#111827}
.hf33-side-title a{font-size:12px;color:#2563eb;text-decoration:none}

.hf33-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hf33-rank li{display:grid;grid-template-columns:18px 1fr 56px;gap:10px;align-items:center}
.hf33-rank .no{width:18px;height:18px;border-radius:999px;background:#eef0f5;color:#374151;font-size:12px;line-height:18px;text-align:center}
.hf33-rank .t{min-width:0;font-size:13px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-rank .st{font-size:13px;color:#6b7280;text-align:right;white-space:nowrap}

/* Pagination */
.hf33-archive-pager{display:flex;justify-content:center;margin:18px 0 6px}
.hf33-archive-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;border-radius:8px;margin:0 4px;border:1px solid #eef0f5;background:#fff;color:#374151;text-decoration:none;font-size:13px}
.hf33-archive-pager .page-numbers.current{background:#2563eb;border-color:#2563eb;color:#fff}

@media (max-width: 1180px){
  .hf33-archive-grid{grid-template-columns:1fr}
  .hf33-archive-side{border-left:0;padding-left:0;border-top:1px solid #eef0f5;padding-top:12px}
}

@media (max-width: 720px){
  .hf33-archive-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Blocks used by archive-vod.php (hf33-poster-grid / hf33-poster) --- */
.hf33-poster-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%}
.hf33-card a{display:block;color:inherit;text-decoration:none}
.hf33-poster{
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  min-width:0;
  /* override home-page poster rules (which set aspect-ratio+overflow hidden) */
  aspect-ratio:auto !important;
  overflow:visible !important;
  background:transparent;
}
/* Thumb area keeps the desired ratio (reduce height by ~1/4 vs classic 2:3). */
.hf33-poster-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:8/9;
  border-radius:10px;
  overflow:hidden;
  background:#f2f4f7;
}
.hf33-poster-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hf33-poster-thumb .hf33-poster-sub{
  position:absolute;
  right:8px;
  bottom:8px;
  padding:2px 6px;
  border-radius:999px;
  font-size:12px;
  line-height:1.3;
  color:#fff;
  background:rgba(0,0,0,.55);
  max-width:calc(100% - 16px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hf33-card-title{margin-top:8px;font-size:14px;line-height:1.2;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-poster-title{margin-top:8px;font-size:14px;line-height:1.2;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-poster-actors{margin-top:4px;font-size:12px;line-height:1.2;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf33-meta{margin-top:4px;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right-side recommend list should be visually tighter like 33dy */
.hf33-side h4{font-size:14px}
.hf33-side .hf33-rec a{font-size:14px}
.hf33-side .hf33-meta{font-size:14px;color:#6b7280}

/* Category block layout (left posters + right recommend) */
.hf33-term-grid{display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:start}
.hf33-term-aside{min-width:0}
@media (max-width: 960px){
  .hf33-term-grid{grid-template-columns:1fr}
}

/* Recommend row: keep "status" typography aligned with title */
.hf33-side .hf33-rec{list-style:none;margin:0;padding:0}
.hf33-side .hf33-rec li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #eef1f4}
.hf33-side .hf33-rec li:last-child{border-bottom:0}
.hf33-side .hf33-rec .hf33-meta{font-size:inherit}

/* Ensure poster title/actors always render (avoid theme overrides) */
.hf33-poster-title,.hf33-poster-actors{display:block !important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Right-side rank: make the circled "更新至/日期" visually smaller & tighter */
.hf33-rank-item{align-items:flex-start}
.hf33-rank-link{font-size:11px !important;line-height:1.25}
.hf33-rank-tag{font-size:10px !important;line-height:1.2;opacity:.85}

@media (max-width: 1100px){
  .hf33-poster-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 900px){
  .hf33-poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 720px){
  .hf33-poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Responsive */
@media (max-width: 1200px){
  .hf33-grid{grid-template-columns:1fr}
  .hf33-side{padding-left:0}
  /* Only apply fixed-width poster sizing to the flex-based home layout.
     Archive/category pages use CSS Grid and must keep posters fluid, otherwise
     they collapse into "thin strips" inside grid cells. */
  .hf33-flex .hf33-poster{width:calc((100% - 12px * 3)/4)}
  .hf33-hot{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 780px){
  .hf33-flex .hf33-poster{width:calc((100% - 12px * 1)/2)}
  .hf33-hot{grid-template-columns:repeat(1,1fr)}
}

/* ============================
   Single VOD (match 33dy)
   仅作用于 body.single-vod
   ============================ */

body.single-vod .site-content{background:#f6f7fb}

body.single-vod .hf33-vod-container{max-width:1180px;margin:0 auto;padding:16px 12px}

body.single-vod .hf33-vod-top{background:#fff;border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,.04);padding:18px}
body.single-vod .hf33-breadcrumb{margin:0 0 12px;font-size:12px;color:#6b7280}
body.single-vod .hf33-breadcrumb a{color:#6b7280;text-decoration:none}
body.single-vod .hf33-breadcrumb a:hover{color:#2563eb}
body.single-vod .hf33-breadcrumb .sep{margin:0 6px;opacity:.6}
body.single-vod .hf33-breadcrumb .current{color:#111827;font-weight:700}
body.single-vod .hf33-breadcrumb .lbl{margin-right:6px;color:#9ca3af}
body.single-vod .hf33-vod-top-grid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}

body.single-vod .hf33-vod-poster{border-radius:6px;overflow:hidden;background:#eef0f5}
body.single-vod .hf33-vod-poster img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}

body.single-vod .hf33-vod-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
body.single-vod .hf33-vod-title{margin:0;font-size:22px;font-weight:800;color:#111827}

body.single-vod .hf33-vod-score{display:flex;align-items:center;gap:8px;flex:0 0 auto}
body.single-vod .hf33-stars{display:flex;gap:2px;opacity:.55}
body.single-vod .hf33-stars i{font-style:normal;font-size:14px}
body.single-vod .hf33-score-num{font-size:22px;font-weight:800;color:#ff5b5b;min-width:38px;text-align:right}

body.single-vod .hf33-vod-meta{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:13px;color:#374151}
body.single-vod .hf33-vod-meta b{font-weight:700;color:#6b7280;margin-right:6px}
body.single-vod .hf33-vod-meta a{color:#e11d48;text-decoration:none}
body.single-vod .hf33-vod-meta a:hover{color:#b91c1c}

body.single-vod .hf33-vod-brief{margin-top:10px;font-size:13px;line-height:1.7;color:#4b5563;max-width:860px}
body.single-vod .hf33-vod-actions{margin-top:12px;display:flex;gap:10px;align-items:center}
body.single-vod .hf33-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:6px;font-size:13px;text-decoration:none;border:1px solid transparent}
body.single-vod .hf33-btn.primary{background:#2b7bff;color:#fff}
body.single-vod .hf33-btn.primary:hover{filter:brightness(.95)}
body.single-vod .hf33-btn.ghost{background:#fff;border-color:#d1d5db;color:#374151}
body.single-vod .hf33-btn.ghost:hover{background:#f9fafb}

body.single-vod .hf33-vod-main{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
body.single-vod .hf33-card{background:#fff;border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,.04)}

/* Sidebar should follow scroll like 33dy */
body.single-vod .hf33-vod-main > aside{position:sticky;top:80px;align-self:start}
body.single-vod.admin-bar .hf33-vod-main > aside{top:112px}

/* Tabs */
body.single-vod .hf33-tabs{display:flex;gap:18px;border-bottom:1px solid #eef0f5;padding:0 16px}
body.single-vod .hf33-tab{position:relative;display:inline-flex;align-items:center;height:42px;font-size:13px;color:#6b7280;text-decoration:none}
body.single-vod .hf33-tab.on{color:#e11d48;font-weight:800}
body.single-vod .hf33-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#e11d48}

body.single-vod .hf33-pane{padding:14px 16px}

body.single-vod .hf33-panel{display:none}
body.single-vod .hf33-panel.on{display:block}

body.single-vod .hf33-empty{padding:14px 0;color:#9ca3af;font-size:13px}

/* Episode section */
body.single-vod .hf33-ep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
body.single-vod .hf33-ep-head .l{display:flex;align-items:center;gap:10px}
body.single-vod .hf33-ep-head b{font-size:14px;color:#111827}
body.single-vod .hf33-ep-head .hint{font-size:12px;color:#9ca3af}

body.single-vod .hf33-line-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
body.single-vod .hf33-line{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#374151;font-size:12px;text-decoration:none}
body.single-vod .hf33-line.on{background:#e11d48;color:#fff}

body.single-vod .hf33-ep-grid{display:flex;flex-wrap:wrap;gap:10px}
body.single-vod .hf33-ep{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:30px;padding:0 10px;border-radius:999px;background:#f3f4f6;color:#374151;font-size:12px;text-decoration:none}
body.single-vod .hf33-ep:hover{background:#e5e7eb}
body.single-vod .hf33-ep.hot{color:#e11d48;font-weight:800}

/* Right sidebar (33dy) */
body.single-vod .hf33-side-card{padding:12px 12px 14px}
body.single-vod .hf33-side-card h3{margin:0 0 10px;font-size:14px;color:#111827}

body.single-vod .hf33-hot-hero a{display:block;text-decoration:none;color:#111827}
body.single-vod .hf33-hot-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:#eef0f5}
body.single-vod .hf33-hot-hero .t{margin-top:8px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.single-vod .hf33-hot-mini{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
body.single-vod .hf33-hot-mini a{display:block;text-decoration:none;color:#111827}
body.single-vod .hf33-hot-mini img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:#eef0f5}
body.single-vod .hf33-hot-mini .t{margin-top:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.single-vod .hf33-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
body.single-vod .hf33-rank-list li{display:flex;align-items:center;gap:10px}
body.single-vod .hf33-rank-no{width:18px;height:18px;border-radius:999px;background:#eef0f5;color:#374151;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
body.single-vod .hf33-rank-list li:nth-child(1) .hf33-rank-no{background:#ff5b5b;color:#fff}
body.single-vod .hf33-rank-list li:nth-child(2) .hf33-rank-no{background:#ffb020;color:#fff}
body.single-vod .hf33-rank-list li:nth-child(3) .hf33-rank-no{background:#34c38f;color:#fff}
body.single-vod .hf33-rank-a{flex:1;min-width:0;color:#111827;text-decoration:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.single-vod .hf33-rank-a:hover{color:#0d6efd}
body.single-vod .hf33-rank-v{font-size:12px;color:#e11d48;white-space:nowrap}

/* Blocks below */
body.single-vod .hf33-block-title{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eef0f5}
body.single-vod .hf33-block-title b{font-size:14px;color:#111827}

body.single-vod .hf33-mini-grid{padding:12px 16px}
body.single-vod .hf33-mini-grid .hf33-poster-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
body.single-vod .hf33-mini-grid .hf33-poster-thumb{aspect-ratio:2/3;border-radius:8px}

@media (max-width: 1100px){
  body.single-vod .hf33-vod-main{grid-template-columns:1fr}
  body.single-vod .hf33-vod-top-grid{grid-template-columns:180px 1fr}
  body.single-vod .hf33-mini-grid .hf33-poster-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width: 640px){
  body.single-vod .hf33-vod-top{padding:12px}
  body.single-vod .hf33-vod-top-grid{grid-template-columns:1fr;}
  body.single-vod .hf33-vod-title-row{flex-direction:column;align-items:flex-start}
  body.single-vod .hf33-mini-grid .hf33-poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================
   Play Page (match 33dy) - only body.hanfan-play
   ============================ */

body.hanfan-play .site-content{background:#f6f7fb}
/* Play page should be full-width (no theme sidebar), closer to 33dy's wider feel */
body.hanfan-play #secondary,
body.hanfan-play .sidebar,
body.hanfan-play .widget-area,
body.hanfan-play .vodi-sidebar,
body.hanfan-play .site-sidebar{display:none!important}

body.hanfan-play #primary,
body.hanfan-play .content-area{width:100%!important;max-width:none!important;flex:1 1 auto!important}

body.hanfan-play .hf33-page{max-width:1320px;margin:0 auto;padding:18px 14px}
body.hanfan-play .hf33-main{min-width:0}

body.hanfan-play .hf33-play-top{padding:12px 12px 14px}
body.hanfan-play .hf33-play-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
body.hanfan-play .hf33-player-iframe{position:relative;border-radius:12px;overflow:hidden;background:#0b1220}
body.hanfan-play .hf33-player-iframe::before{content:"";display:block;aspect-ratio:16/10;min-height:420px}
body.hanfan-play .hf33-player-iframe iframe,
body.hanfan-play .hf33-player-iframe video{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}

body.hanfan-play .hf33-play-actions{display:flex;gap:10px;padding:10px 4px 0;flex-wrap:wrap}
body.hanfan-play .hf33-act{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#374151;text-decoration:none;font-size:12px}
body.hanfan-play .hf33-act:hover{background:#e5e7eb;color:#111827}

body.hanfan-play .hf33-play-panel{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.06);padding:12px}
body.hanfan-play .hf33-play-title a{font-size:18px;font-weight:900;color:#111827;text-decoration:none}
body.hanfan-play .hf33-play-title a:hover{color:#2563eb}
body.hanfan-play .hf33-play-sub{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.hanfan-play .hf33-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:999px;background:#fef2f2;color:#e11d48;font-size:12px;white-space:nowrap}
body.hanfan-play .hf33-muted{font-size:12px;color:#6b7280;white-space:nowrap}

body.hanfan-play .hf33-play-lines{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
body.hanfan-play .hf33-line{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border-radius:999px;background:#f3f4f6;color:#374151;text-decoration:none;font-size:12px}
body.hanfan-play .hf33-line.on{background:#2563eb;color:#fff}
body.hanfan-play .hf33-line:hover{background:#e5e7eb}
body.hanfan-play .hf33-line.on:hover{background:#1d4ed8}

body.hanfan-play .hf33-play-episodes{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.hanfan-play .hf33-ep{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border-radius:999px;background:#f3f4f6;color:#374151;text-decoration:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hanfan-play .hf33-ep.on{background:#fee2e2;color:#e11d48;font-weight:800}
body.hanfan-play .hf33-ep:hover{background:#e5e7eb}

/* Desktop: episode list scroll (match 33dy feel) */
@media (min-width: 981px){
  body.hanfan-play .hf33-play-episodes{padding-right:4px;scrollbar-gutter:stable;}
  body.hanfan-play .hf33-play-episodes::-webkit-scrollbar{width:8px}
  body.hanfan-play .hf33-play-episodes::-webkit-scrollbar-thumb{background:rgba(37,99,235,.35);border-radius:999px}
  body.hanfan-play .hf33-play-episodes::-webkit-scrollbar-track{background:rgba(0,0,0,.04);border-radius:999px}
}

/* Hide old dropdown UI (kept in markup for compatibility) */
body.hanfan-play .hf33-ep-select-wrap{display:none !important}

body.hanfan-play .hf33-cast-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
body.hanfan-play .hf33-cast-card{background:#f9fafb;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px 12px 10px}
body.hanfan-play .hf33-cast-card .n{font-size:13px;font-weight:900;color:#111827}
body.hanfan-play .hf33-cast-card .d{font-size:12px;color:#6b7280;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.hanfan-play .hf33-play-recs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:12px}
body.hanfan-play .hf33-play-rec-a{display:block;text-decoration:none;color:#111827}
body.hanfan-play .hf33-play-recs .hf33-cover{border-radius:10px}
body.hanfan-play .hf33-cover-empty{height:140px;background:#f3f4f6}
body.hanfan-play .hf33-play-recs .hf33-name{font-size:12px}

/* Sidebar blocks moved under the player row (align to the right column) */
body.hanfan-play .hf33-play-undergrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;margin-top:16px}
body.hanfan-play .hf33-play-under-spacer{min-height:1px}
body.hanfan-play .hf33-play-under-side{align-self:start;position:sticky;top:80px}

body.hanfan-play.admin-bar .hf33-play-under-side{top:112px}

/* Below-player layout: main content on the left, sidebar on the right (prevents blank left gap) */
body.hanfan-play .hf33-play-below{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;margin-top:16px}
body.hanfan-play .hf33-play-below-main{min-width:0}
body.hanfan-play .hf33-play-below-side{align-self:start;position:sticky;top:80px}
body.hanfan-play.admin-bar .hf33-play-below-side{top:112px}

/* "猜你喜欢" small cards above comments */
body.hanfan-play .hf33-like-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
body.hanfan-play .hf33-like-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:#f9fafb;border:1px solid rgba(0,0,0,.06);text-decoration:none;color:#111827;min-width:0}
body.hanfan-play .hf33-like-item img{width:56px;flex:0 0 56px;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:#eef0f5}
body.hanfan-play .hf33-like-item .meta{min-width:0}
body.hanfan-play .hf33-like-item .t{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.hanfan-play .hf33-like-item .a{margin-top:4px;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Play-page 猜你喜欢 / 最近更新：大海报卡片，2 行 */
body.hanfan-play .hf33-play-like .hf33-poster-grid,
body.hanfan-play .hf33-play-recent .hf33-poster-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
body.hanfan-play .hf33-play-like .hf33-poster-grid .title,
body.hanfan-play .hf33-play-recent .hf33-poster-grid .title{font-size:13px;font-weight:900}
body.hanfan-play .hf33-play-like .hf33-poster-grid .actors,
body.hanfan-play .hf33-play-recent .hf33-poster-grid .actors{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.hanfan-play .hf33-side-big,
body.single-vod .hf33-side-big{display:block;text-decoration:none;color:#111827;border-radius:10px;overflow:hidden;background:#f3f4f6;position:relative}
body.hanfan-play .hf33-side-big img,
body.single-vod .hf33-side-big img{display:block;width:100%;height:140px;object-fit:cover}
body.hanfan-play .hf33-side-big .t,
body.single-vod .hf33-side-big .t{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.hanfan-play .hf33-side-smalls,
body.single-vod .hf33-side-smalls{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}

body.hanfan-play .hf33-side-small,
body.single-vod .hf33-side-small{display:block;text-decoration:none;color:#111827;border-radius:10px;overflow:hidden;background:#f3f4f6;position:relative}
body.hanfan-play .hf33-side-small img,
body.single-vod .hf33-side-small img{display:block;width:100%;height:70px;object-fit:cover}
body.hanfan-play .hf33-side-small .t,
body.single-vod .hf33-side-small .t{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width: 1180px){
  body.hanfan-play .hf33-play-grid{grid-template-columns:1fr}
  body.hanfan-play .hf33-play-undergrid{grid-template-columns:1fr}
  body.hanfan-play .hf33-play-under-side{position:static;top:auto}
  body.hanfan-play .hf33-play-below{grid-template-columns:1fr}
  body.hanfan-play .hf33-play-below-side{position:static;top:auto}
  body.hanfan-play .hf33-play-recs{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.hanfan-play .hf33-play-like .hf33-poster-grid,
  body.hanfan-play .hf33-play-recent .hf33-poster-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 720px){
  body.hanfan-play .hf33-play-episodes{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hanfan-play .hf33-cast-cards{grid-template-columns:1fr}
  body.hanfan-play .hf33-play-recs{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.hanfan-play .hf33-play-like .hf33-poster-grid,
  body.hanfan-play .hf33-play-recent .hf33-poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}