/* 自製影片播放器（js/player.js）樣式：照搬 zhunian8h css/style.css 的播放器段落（2026-10-15），變數改用本站的。 */
.zp {
  background: var(--card-bg);
}
.zp-stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}
.zp-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}
.zp-bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* 有寫 display 的元素，hidden 屬性會被蓋掉，要自己補一條 */
.zp-bigplay[hidden],
.zp-msg[hidden] {
  display: none;
}
.zp-bigplay svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
}
.zp-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  font-size: 1.15rem;
  line-height: 1.6;
}
.zp-msg[hidden] {
  display: none;
}
.zp-bar {
  padding: 0.5rem 0.8rem 0.7rem;
}
.zp-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.zp-row-seek {
  margin-bottom: 0.3rem;
}
.zp-time {
  min-width: 3.2em;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.zp-dur {
  text-align: right;
}
/* 進度條：軌道粗、拖曳圓點大（≥ 28px），好按好拖 */
.zp-seek {
  flex: 1;
  min-width: 0;
  height: 36px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
  cursor: pointer;
}
.zp-seek::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
}
.zp-seek::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
}
.zp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--link);
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--link);
}
.zp-seek::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--link);
  border: 3px solid var(--card-bg);
}
.zp-row-btns {
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch; /* 三顆按鈕等高，字再放大也一樣高 */
}
/* 倒退、播放、快轉三顆一排（各佔三分之一），全螢幕另起一整行，文字一律不斷行 */
.zp-row-btns .zp-back,
.zp-row-btns .zp-toggle,
.zp-row-btns .zp-fwd {
  flex: 1 1 calc(33.3% - 0.5rem);
}
.zp-row-btns .zp-fs {
  flex: 1 1 100%;
  min-height: 44px;
  flex-direction: row;
  gap: 0.5rem;
}
.zp-btn span,
.zp-btn small {
  white-space: nowrap;
  display: block;
}
/* 長輩的手機常把系統字體調很大（實測會放大到約 1.5 倍），按鈕要在字放大時也裝得下：
   標籤只留兩三個字、副標「10 秒」另起一行，按鈕本身不准讓字跑出邊框 */
.zp-btn {
  overflow: hidden;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
.zp-btn small {
  font-size: 0.9em;
  font-weight: 700;
}
.zp-row-btns .zp-fs span {
  display: inline;
}
.zp-btn {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0.2rem 0.2rem;
  border: 2px solid var(--link);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--link);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.zp-btn b,
.zp-btn i {
  display: block;
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1;
}
.zp-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
.zp-main {
  background: var(--link);
  color: #fff;
}
/* 深色模式的 --link 是淺青色，按鈕上的字要改深色才看得清楚 */
:root[data-theme="dark"] .zp-main {
  color: #0d1514;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zp-main {
    color: #0d1514;
  }
}
/* 全螢幕：影片撐滿、控制列貼底 */
.zp.zp-fullscreen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}
.zp.zp-fullscreen .zp-stage {
  flex: 1 1 0;
  min-height: 0; /* 不設這個，影片會用「依寬度算出的高度」撐住，橫放時把控制列擠出畫面 */
  aspect-ratio: auto;
  overflow: hidden;
}
/* 影片脫離版面流程、鋪滿舞台，高度不再影響控制列的位置 */
.zp.zp-fullscreen .zp-video {
  position: absolute;
  inset: 0;
}
.zp.zp-fullscreen .zp-bar {
  background: #111;
}
.zp.zp-fullscreen .zp-time {
  color: #fff;
}
.zp.zp-fullscreen .zp-btn:not(.zp-main) {
  background: #111;
  color: #fff;
  border-color: #fff;
}
@media (max-width: 380px) {
  .zp-btn {
    font-size: 0.9rem;
  }
}
/* 手機橫放（高度只有約 390px）：四顆按鈕併成一排，控制列矮一點，不要把影片擠沒了 */
@media (orientation: landscape) and (max-height: 520px) {
  .zp-row-btns .zp-back,
  .zp-row-btns .zp-toggle,
  .zp-row-btns .zp-fwd,
  .zp-row-btns .zp-fs {
    flex: 1 1 calc(25% - 0.5rem);
    min-height: 44px;
  }
  /* 圖示與文字橫排，按鈕變矮，影片才有空間 */
  .zp-row-btns .zp-btn {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2rem 0.45rem;
    min-height: 40px;
  }
  .zp-bar {
    padding: 0.4rem 0.8rem 0.5rem;
  }
  .zp-row-seek {
    margin-bottom: 0.3rem;
  }
}

/* 2026-10-15 縮小版：倒退／快轉／播放三顆按鈕改成「圖示＋文字」單行，高度約 48px（原本 3 行約 97px，阿翰說太大） */
.zp-row-btns .zp-btn {
  flex-direction: row;
  gap: 0.3rem;
}
.zp-row-btns .zp-btn span {
  display: inline;
}
.zp-row-btns .zp-btn i,
.zp-row-btns .zp-btn b {
  flex: none;
}
/* 倒退／快轉：拿掉圖示只留文字（原本圖示＋文字在手機寬度擠不下）；字被系統放大時允許換成兩行，按鈕跟著變高，不切字 */
.zp-row-btns .zp-back b,
.zp-row-btns .zp-fwd b {
  display: none;
}
.zp-row-btns .zp-btn span {
  white-space: normal;
  text-align: center;
  font-size: 0.95rem;
}
.zp-btn {
  overflow: visible;
}
/* 倒退／快轉改回兩行：「倒退」在上、「10 秒」在下（一行擠不下會把「秒」孤立到下一行），播放與全螢幕維持單行 */
.zp-row-btns .zp-back,
.zp-row-btns .zp-fwd {
  flex-direction: column;
  gap: 0;
}
.zp-row-btns .zp-back span,
.zp-row-btns .zp-fwd span,
.zp-row-btns .zp-back small,
.zp-row-btns .zp-fwd small {
  display: block;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.25;
}
/* 手機橫放：控制列空間更緊，倒退／快轉回到單行（寬度夠，每顆約四分之一） */
@media (orientation: landscape) and (max-height: 520px) {
  .zp-row-btns .zp-back,
  .zp-row-btns .zp-fwd {
    flex-direction: row;
    gap: 0.3rem;
  }
}