/* ==========================================================================
   css/main.css — 布局与全局（抖音式竖屏沉浸）
   配色：黑底 / 深灰卡片 / 暖金强调 / 米白文字
   ========================================================================== */

:root{
  --bg:#0b0a09;              /* 黑 */
  --card:#1a1815;            /* 深灰卡片 */
  --card-2:#221f1b;
  --line:#2e2a24;
  --gold:#c9a227;            /* 暖金强调 */
  --gold-soft:#e8c96a;
  --ink:#f2ede1;             /* 米白文字 */
  --ink-2:#b8b0a0;
  --ink-3:#7d7565;
  --danger:#c9553f;
  --side-act:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--ink);
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;                 /* 禁掉下拉刷新与橡皮筋 */
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── 舞台：手机 100dvh 全屏；桌面居中 430px 竖屏 ── */
.stage{
  position:relative;
  width:100%;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ════ 顶部 ════ */
.topbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  padding:calc(10px + var(--safe-t)) 16px 10px;
  background:linear-gradient(180deg,rgba(11,10,9,.92),rgba(11,10,9,0));
  position:relative;z-index:6;
}
.brand{
  font-size:17px;font-weight:700;letter-spacing:.14em;
  color:var(--gold-soft);
}
.tabs{display:flex;gap:18px;font-size:14px;color:var(--ink-3)}
.tab{padding:2px 0;border-bottom:2px solid transparent;transition:.18s}
.tab.on{color:var(--ink);border-bottom-color:var(--gold);font-weight:600}
.dbg-btn{margin-left:auto;font-size:15px;color:var(--ink-3);padding:4px 8px;border-radius:8px}
.dbg-btn:hover{color:var(--gold)}

/* ════ 播放区：16:9 完整显示，不裁切 ════ */
.player-area{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.vid{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;            /* 完整显示横屏画面，不裁切填满竖屏 */
  background:#000;
  z-index:1;
}
.vid-hidden{display:none}        /* B 播放器待用 */
.tap-layer{position:absolute;inset:0;z-index:3}
.center-hint{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.play-badge{
  padding:12px 22px;border-radius:999px;
  background:rgba(11,10,9,.62);
  border:1px solid rgba(201,162,39,.5);
  color:var(--gold-soft);font-size:14px;letter-spacing:.08em;
  backdrop-filter:blur(4px);
}
.center-hint.off{display:none}

.loading,.errbox{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(11,10,9,.86);color:var(--ink-2);font-size:13.5px;text-align:center;padding:20px;
}
.errbox{color:var(--danger)}
.errbtn{
  padding:8px 20px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold-soft);font-size:13px;
}
.errbtn:active{background:rgba(201,162,39,.15)}
[hidden]{display:none !important}

/* ════ 视频下方信息 ════ */
.info{
  flex:1 1 auto;
  padding:16px 84px 12px 16px;      /* 右侧留出操作列 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.meta-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.meta-row .author{color:var(--gold);font-weight:600}
.meta-row .sep{opacity:.5}
.title{
  margin:8px 0 6px;
  font-size:18px;font-weight:600;line-height:1.5;letter-spacing:.01em;
}
.desc{font-size:13.5px;color:var(--ink-2);line-height:1.85}

/* ════ 右侧操作列 ════ */
.side-actions{
  position:absolute;
  right:8px;
  bottom:calc(108px + var(--safe-b));
  z-index:6;
  display:flex;flex-direction:column;gap:20px;align-items:center;
}
.act{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:var(--side-act);
  font-size:10.5px;color:var(--ink-2);
}
.act .ico{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  background:rgba(26,24,21,.82);
  border:1px solid var(--line);
  transition:.18s;
}
.act:active .ico{transform:scale(.92)}
.act.on .ico{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.14)}
.act.on .lbl{color:var(--gold)}

/* ════ 底部 ════ */
.bottombar{
  flex:0 0 auto;
  padding:12px 16px calc(14px + var(--safe-b));
  border-top:1px solid var(--line);
  background:var(--card);
  position:relative;z-index:6;
}
.full-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 0;border-radius:10px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#241d05;font-size:14.5px;font-weight:700;letter-spacing:.04em;
}
.full-btn:active{opacity:.88}
.full-btn .arrow{font-weight:400}
.prow{display:flex;align-items:center;gap:10px;margin-top:11px}
.ptime{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:34px}
.progress{
  flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;
}
.bar{height:100%;width:0;background:var(--gold);border-radius:2px;transition:width .12s linear}

/* ════ Toast ════ */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:9999;
  padding:11px 20px;border-radius:10px;
  background:rgba(11,10,9,.92);border:1px solid var(--line);
  color:var(--ink);font-size:13.5px;
  max-width:80vw;text-align:center;
}

/* ════ 调试面板 ════ */
.debug{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  max-height:52vh;overflow-y:auto;
  background:rgba(8,7,6,.96);
  border-top:1px solid var(--gold);
  padding:12px 14px calc(14px + var(--safe-b));
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;line-height:1.75;color:#cdd6c4;
  white-space:pre-wrap;
}
.debug .dh{color:var(--gold-soft);font-weight:700;letter-spacing:.1em;margin-bottom:6px}

/* ==========================================================================
   桌面端：中央竖屏播放器，深色背景
   ========================================================================== */
@media (min-width:861px){
  body{background:#050504;display:flex;align-items:center;justify-content:center}
  .stage{
    width:430px;max-width:430px;
    height:min(920px,100dvh);
    border-radius:22px;
    border:1px solid var(--line);
    box-shadow:0 30px 90px rgba(0,0,0,.7);
    overflow:hidden;
  }
  .side-actions{bottom:calc(112px)}
}

/* 矮屏（横屏手机）时压缩信息区 */
@media (max-height:560px){
  .info{padding-top:10px}
  .title{font-size:16px;margin:5px 0 4px}
  .desc{font-size:12.5px;line-height:1.7}
  .side-actions{gap:14px;bottom:calc(96px + var(--safe-b))}
}