﻿/* =========================================================================
   playtest-v2.css — 設備播放測試頁自訂區塊（scope: .lc .pt-*）
   播放器本體（.lc-video / .lc-controls / .lc-play）樣式沿用 video-v2.css，
   確保播放器與影片播放頁 video.aspx 完全相同；本檔僅負責標題／說明／開始
   按鈕／結果卡／裝置資訊，並沿用 .lc 既有設計 token（--lc-*）。
   ========================================================================= */

/* 測試頁內容寬度（加寬版面） */
.lc.pt-page .pt-wrap { max-width: 1320px; width: 92%; }

/* ---- 標題區（放大易讀） ---- */
.lc .pt-head { text-align: center; margin: 8px 0 34px; }
.lc .pt-title {
  font-family: 'Noto Serif TC', Georgia, serif; color: #fff;
  font-size: 3.2rem; font-weight: 900; letter-spacing: .02em; margin: 0 0 22px;
}
.lc .pt-sub {
  font-size: 1.85rem; line-height: 1.9; color: var(--lc-text);
  margin: 0 auto; max-width: 1000px; font-weight: 500;
}
.lc .pt-sub strong { color: var(--lc-amber); font-weight: 800; }

/* ---- 開始按鈕（覆蓋播放舞台中央） ---- */
.lc .lc-video .pt-start {
  position: absolute; inset: 0; margin: auto; width: 340px; height: 86px; z-index: 6;
  font-size: 1.75rem; font-weight: 800; letter-spacing: .04em; color: #0b0b0f; background: var(--lc-amber);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 14px 40px rgba(245,215,94,.42); transition: transform .15s ease, box-shadow .15s ease;
}
.lc .lc-video .pt-start:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(245,215,94,.55); }
.lc .lc-video .pt-start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lc .lc-video .pt-start:disabled { background: #3a3a44; color: #b6b6bf; cursor: progress; box-shadow: none; transform: none; }

/* ---- 結果卡（放大） ---- */
.lc .pt-result { margin-top: 28px; padding: 28px 32px; border-radius: 14px; font-size: 1.5rem; line-height: 1.9; }
.lc .pt-result.is-ok { background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.5); color: #c9f7d5; }
.lc .pt-result.is-fail { background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.5); color: #ffd6d6; }
.lc .pt-result strong { display: block; font-size: 1.85rem; margin-bottom: 14px; }
.lc .pt-result p { margin: 10px 0 0; }
.lc .pt-result ul { margin: 12px 0 0; padding-left: 1.4em; }
.lc .pt-result li { margin: 10px 0; }
.lc .pt-errcode { margin-top: 14px; font-size: 1.2rem; opacity: .8; }

/* ---- 裝置資訊（結構化卡片列） ---- */
.lc .pt-devinfo { margin-top: 38px; }
.lc .pt-devinfo-title { font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 18px; }
.lc .pt-devgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.lc .pt-devitem { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: 12px; padding: 18px 22px; }
.lc .pt-devlabel { font-size: 1.2rem; color: var(--lc-sub); margin-bottom: 7px; }
.lc .pt-devvalue { font-size: 1.45rem; font-weight: 600; color: #fff; word-break: break-word; }

/* ---- 建議配置 ---- */
.lc .pt-rec { margin-top: 48px; }
.lc .pt-rec-title { font-size: 2rem; font-weight: 700; color: #fff; margin: 0 0 10px; }
.lc .pt-rec-lead { font-size: 1.45rem; line-height: 1.8; color: var(--lc-sub); margin: 0 0 22px; }
.lc .pt-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.lc .pt-rec-card { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: 14px; padding: 24px 26px; }
.lc .pt-rec-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 14px; }
.lc .pt-rec-card h3 .lc-icn { width: 27px; height: 27px; stroke: var(--lc-amber); }
.lc .pt-rec-card ul { margin: 0; padding-left: 1.25em; }
.lc .pt-rec-card li { font-size: 1.35rem; line-height: 1.75; color: var(--lc-text); margin: 10px 0; }
.lc .pt-rec-card li strong { color: var(--lc-amber); font-weight: 700; }
.lc .pt-rec-foot { margin-top: 20px; font-size: 1.55rem; line-height: 1.75; color: var(--lc-sub); }
.lc .pt-rec-foot a { color: var(--lc-amber); text-decoration: underline; }
.lc .pt-rec-line {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 14px 28px; border-radius: 999px; background: #06c755; color: #fff !important;
  font-size: 1.35rem; font-weight: 700; text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(6,199,85,.35); transition: transform .15s ease, box-shadow .15s ease;
}
.lc .pt-rec-line:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(6,199,85,.5); }
.lc .pt-rec-line:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lc .pt-rec-line svg { width: 28px; height: 28px; }

@media (max-width: 600px) {
  .lc.pt-page .pt-wrap { width: 92%; }
  .lc .pt-title { font-size: 2.4rem; }
  .lc .pt-sub { font-size: 1.45rem; }
  .lc .lc-video .pt-start { width: 84%; max-width: 340px; height: 76px; font-size: 1.5rem; }
  .lc .pt-result { font-size: 1.3rem; }
  .lc .pt-result strong { font-size: 1.55rem; }
  .lc .pt-devinfo-title { font-size: 1.5rem; }
  .lc .pt-devvalue { font-size: 1.3rem; }
  .lc .pt-rec-title { font-size: 1.65rem; }
  .lc .pt-rec-card h3 { font-size: 1.4rem; }
  .lc .pt-rec-card li { font-size: 1.2rem; }
  .lc .pt-rec-foot { font-size: 1.35rem; }
}
