/* luodiye 黄果短剧落地页 · 样式全量重写（v14 结构）
 * 页面：分类导航 + 双列卡片流 + 骨架屏 + 右侧挂件 + 沉浸播放层 */

/* ========== 基础与主题 ========== */
:root {
  --bg: #0f1115;
  --card: #1b1e26;
  --card-border: #262a35;
  --text: #f2f3f5;
  --text-dim: #9aa0ab;
  --accent: #fe2c55;
  --accent-2: #ff7a3d;
  --gold: #ffd65a;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  overflow: hidden;
  overscroll-behavior-y: none;
}
img { display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
[hidden] { display: none !important; }

/* ========== 主页骨架：顶栏(固定高) + 卡片流(弹性滚动) ========== */
#page-home { display: flex; flex-direction: column; height: 100dvh; }

#topbar {
  flex: 0 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 34px; height: 34px; border-radius: 9px; }
.guide {
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 600;
  background: linear-gradient(90deg, #fff, #ffd0da);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 分类导航条 */
#cats {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 10px;
  padding-bottom: 2px;
}
#cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto;
  font-size: 13px; color: var(--text-dim);
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  white-space: nowrap;
}
.cat.active {
  color: #ffe9a8;
  border-color: rgba(255,214,90,.75);
  background: radial-gradient(ellipse at 50% 30%, rgba(255,200,40,.35), rgba(255,160,0,.10) 75%);
  text-shadow: 0 0 8px rgba(255,210,80,.8);
}

/* ========== 双列卡片流 ========== */
#feed {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;           /* 不用 grid：auto行会被均分拉伸、aspect-ratio内容贡献被算0 */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px 90px;
  align-content: flex-start;
  scrollbar-width: none;
}
.hm-card { flex: 0 0 calc(50% - 6px); width: calc(50% - 6px); }
#feed::-webkit-scrollbar { display: none; }

.hm-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  display: block;   /* 不用 flex：grid行+列flex+aspect-ratio子项会循环塌陷 */
  cursor: pointer;
}
.hm-card:active { transform: scale(.97); }

/* 封面：padding 比例盒，固定 3:4，任何浏览器都不随图片拉伸 */
.hm-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #12141a;
  overflow: hidden;
}
@supports not (aspect-ratio: 3 / 4) {
  .hm-cover { box-sizing: content-box; height: 0; padding-top: 133.33%; }
}
.hm-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.badge-status {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 6px;
  background: var(--accent);
}
.badge-status.hot { background: var(--accent-2); }
.badge-status.serial { background: #f5a623; }
.badge-status.full { background: #3aa0ff; }
.badge-score {
  position: absolute; top: 6px; right: 6px;
  font-size: 11px; font-weight: 700; color: var(--gold);
  background: rgba(0,0,0,.55);
  padding: 2px 7px; border-radius: 6px;
}
.badge-update {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; color: rgba(255,255,255,.95);
  padding: 12px 6px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  text-align: right;
}
.hm-title {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  padding: 8px 8px 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-desc {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.45;
  padding: 4px 8px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(11.5px * 1.45 * 2 + 4px);  /* 固定两行高度，卡片等高 */
}
.hm-tags {
  display: flex; gap: 4px; flex-wrap: nowrap;
  padding: 6px 8px 9px;
  overflow: hidden;
}
.hm-tag {
  flex: 0 0 auto;
  font-size: 10px; color: var(--accent-2);
  border: 1px solid rgba(255,122,61,.45);
  border-radius: 999px; padding: 1px 7px;
  white-space: nowrap;
}

/* ========== 骨架屏 ========== */
.sk-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px; overflow: hidden;
}
.sk-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(100deg, #1b1e26 40%, #252a36 50%, #1b1e26 60%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s linear infinite;
}
@supports not (aspect-ratio: 3 / 4) {
  .sk-cover { box-sizing: content-box; height: 0; padding-top: 133.33%; }
}
.sk-line {
  height: 12px; margin: 9px 8px;
  border-radius: 6px;
  background: linear-gradient(100deg, #1b1e26 40%, #252a36 50%, #1b1e26 60%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s linear infinite;
}
.sk-line.short { width: 55%; }
@keyframes sk-shimmer { to { background-position: -200% 0; } }

/* ========== 右侧浮动挂件（本地面性图标：下载/回顶/客服） ========== */
#floatbar {
  position: fixed; right: 10px; z-index: 25;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px;
}
#floatbar button {
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgba(80,62,20,.92), rgba(28,24,14,.88));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,214,90,.7);
  box-shadow: 0 0 14px rgba(255,196,40,.38), 0 6px 18px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
#floatbar button:active { transform: scale(.92); }
/* 图标：本地png做蒙版，染成金黄渐变剪影 + 金色发光 */
.fb-ico {
  width: 26px; height: 26px;
  background: linear-gradient(180deg, #fff0a8, #ffc93d);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 0 5px rgba(255,214,90,.9));
}
.fb-phone { -webkit-mask-image: url("../icons/049_phone.png"); mask-image: url("../icons/049_phone.png"); }
.fb-play  { -webkit-mask-image: url("../icons/049_player.png"); mask-image: url("../icons/049_player.png"); }
.fb-kefu  { -webkit-mask-image: url("../icons/049_kefu.png"); mask-image: url("../icons/049_kefu.png"); }
#floatbar span { font-size: 9px; color: #ffe98a; font-weight: 800; letter-spacing: .5px; text-shadow: 0 0 6px rgba(255,210,80,.8); }

/* ========== 沉浸播放层 ========== */
#page-player { position: fixed; inset: 0; z-index: 30; background: #000; }
#player-feed {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#player-feed::-webkit-scrollbar { display: none; }
.p-item {
  height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.p-item video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.p-title {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  font-size: 14px; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
#player-back {
  position: fixed; z-index: 35;
  top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ========== toast ========== */
#toast {
  position: fixed; left: 50%; bottom: 90px;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(0,0,0,.8); color: #fff;
  font-size: 13px; padding: 8px 16px; border-radius: 999px;
  max-width: 86vw; text-align: center;
}

/* 片单加载失败占位 */
.skeleton {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-dim); font-size: 14px;
}

/* ========== 宽屏适配：双列保持不变，整体限宽居中 ========== */
@media (min-width: 768px) {
  #feed { max-width: 880px; margin: 0 auto; width: 100%; }
  #topbar { max-width: 880px; margin: 0 auto; width: 100%; }
  #page-player .p-item video { max-width: 560px; margin: 0 auto; }
  #floatbar { right: max(10px, calc(50vw - 440px + 10px)); }
}

/* ========== Safari 强制引导蒙版（iOS 非 Safari 弹出，不可关闭） ========== */
.safari-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8, 9, 12, .96);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(70px + env(safe-area-inset-top, 0px)) 24px 24px;
  animation: sf-fade .3s ease;
}
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
.sf-arrow {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 92px; height: 92px;
  animation: sf-bounce 1.2s ease-in-out infinite;
}
@keyframes sf-bounce { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,6px); } }
.sf-card {
  width: 100%; max-width: 340px;
  background: var(--card);
  border: 1px solid rgba(255,214,90,.45);
  border-radius: 16px;
  padding: 22px 20px 20px;
  box-shadow: 0 0 30px rgba(255,196,40,.18), 0 12px 40px rgba(0,0,0,.6);
}
.sf-title { font-size: 20px; font-weight: 800; color: var(--gold); text-align: center; }
.sf-sub { font-size: 13px; color: var(--text-dim); text-align: center; margin: 8px 0 18px; }
.sf-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; line-height: 1.5; }
.sf-step i { color: var(--text-dim); font-size: 12px; font-style: normal; }
.sf-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe98a, #ffc93d);
  color: #3a2a08; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.sf-dots {
  display: inline-block; padding: 0 8px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  font-weight: 800; letter-spacing: 1px;
}
.sf-copy {
  width: 100%; margin-top: 6px;
  padding: 12px 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffe98a, #ffc93d);
  color: #3a2a08; font-size: 15px; font-weight: 800;
  box-shadow: 0 0 14px rgba(255,196,40,.4);
}
.sf-copy:active { transform: scale(.96); }
#feed{display:block}#feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feed-lane{display:flex;flex-direction:column;gap:12px;min-width:0}.hm-card{flex:none;width:100%;text-align:left;padding:0;transition:transform .15s}.hm-cover img{transition:transform .35s}.hm-card:hover .hm-cover img{transform:scale(1.025)}.badge-status.preview{background:#44495c}.badge-score{font-size:13px}#sentinel{height:30px}.empty{padding:70px 15px;text-align:center;color:var(--text-dim)}.empty button{color:var(--gold);text-decoration:underline}.brand .logo{flex:none}.brand{min-width:0}.guide{font-size:clamp(12px,3.6vw,16px)}#floatbar svg{width:25px;height:25px;fill:none;stroke:#ffdb70;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #ffc83c66)}.hm-cover .poster-placeholder{position:absolute;inset:0;background:linear-gradient(160deg,#4b355e,#17223a)}.hm-title{display:block;white-space:nowrap;text-overflow:ellipsis}.hm-desc{overflow:hidden}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#page-player{overflow:hidden}#player-back{z-index:40;border:1px solid #ffffff22;padding:9px 17px}.player-wrap{width:100%;height:100dvh;position:relative;max-width:560px;margin:auto}.player-wrap video{width:100%;height:100%;object-fit:contain}.player-bottom{position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:600px;width:100%;display:flex;align-items:flex-end;justify-content:space-between;padding:60px 16px calc(24px + env(safe-area-inset-bottom));gap:20px;background:linear-gradient(transparent,#000c);pointer-events:none}.player-caption{min-width:0;text-shadow:0 2px 7px #000}.player-caption h1{font-size:21px;line-height:1.25;margin:8px 0}.player-caption p{font-size:12px;line-height:1.5;max-width:360px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.player-caption>span{font-size:11px;color:#ffd65a}.player-actions{display:flex;flex-direction:column;gap:12px;pointer-events:auto}.player-actions button{border:1px solid #ffffff38;border-radius:24px;background:#17191dcc;min-width:44px;min-height:44px;padding:10px;font-size:18px}.player-actions #episode-list{font-size:12px;white-space:nowrap}#no-video{height:100%;position:relative}#no-video>img{width:100%;height:100%;object-fit:cover;opacity:.65}.preview-shade{position:absolute;inset:0;background:linear-gradient(#0002,#0007,#000d)}.preview-copy{position:absolute;left:20px;right:20px;top:40%;text-align:center}.preview-copy h2{font-size:24px;margin:10px 0}.preview-copy p{line-height:1.7;font-size:13px;color:#d1d1d8}.preview-symbol{font-size:58px;color:#ffd65a}#video-error{position:absolute;top:40%;padding:25px;color:#ddd;text-align:center;width:100%;font-size:14px}#episode-panel{position:absolute;right:0;top:0;bottom:0;width:min(390px,90vw);background:#181b23;z-index:45;border-left:1px solid #ffffff1a;padding:20px;overflow:auto}#episode-panel>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}#episode-panel h2{font-size:18px}#close-episodes{font-size:28px}#episode-items button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;text-align:left;border-top:1px solid #ffffff0c;font-size:13px}#episode-items img{width:42px;height:56px;object-fit:cover;border-radius:5px}#episode-items .active{color:var(--gold)}#info-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 40px);max-width:360px;border:1px solid #5b5034;background:#1b1e26;color:#f2f3f5;padding:32px 24px 24px;border-radius:16px}#info-dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}#info-dialog h2{font-size:19px;color:var(--gold);margin-bottom:15px}#info-dialog p{font-size:14px;line-height:1.8;color:#bfc3cc;white-space:pre-line}#close-info{position:absolute;right:14px;top:8px;font-size:27px}#info-ok{margin-top:24px;padding:11px;width:100%;background:linear-gradient(#ffe18b,#ffc83d);color:#322a16;border-radius:24px;font-weight:700}#toast{pointer-events:none}body.player-open #floatbar{display:none}@media(min-width:768px){#feed-grid{gap:12px}#topbar{padding-top:16px;padding-bottom:12px}.hm-title{font-size:17px;padding:12px 12px 0}.hm-desc{font-size:13px;padding:6px 12px 0;min-height:44px}.hm-tags{padding:8px 12px 12px}.badge-status{font-size:12px}.badge-update{font-size:12px}.hm-tag{font-size:11px}.cat{font-size:14px;padding:7px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.badge-update{max-width:calc(100% - 16px);white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.4}

.hm-categories{flex-wrap:wrap;justify-content:flex-start;overflow:visible}.hm-categories .hm-tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}

.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar-row .brand{flex:1;min-width:0}.topbar-row .guide{font-size:clamp(11px,2.8vw,16px);line-height:1.4}#language-select{flex:none;max-width:125px;min-height:34px;border:1px solid #625331;border-radius:8px;background:#242117;color:#ffe3a0;padding:5px 7px;font:inherit;font-size:12px;line-height:1.4;color-scheme:dark;cursor:pointer}#language-select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(max-width:380px){.topbar-row{gap:7px}.topbar-row .logo{width:28px;height:28px}.topbar-row .brand{gap:6px}#language-select{max-width:105px;font-size:11px}}