:root {
  --amber: #FFB600;
  --amber-d: #D99400;
  --ink: #111111;
  --on-amber: #111111;
  --tip-bg: var(--amber);
  --tip-fg: var(--on-amber);
  --amber-soft: rgba(255, 182, 0, .25);
  --bar: #0d0d0d;
  --bar-fg: #f2f2f2;
  --bar-dim: #8a8a8a;
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--bar-fg); font-family: var(--font); overflow: hidden; }
button { font: inherit; }

.ig { display: flex; flex-direction: column; height: 100%; height: 100dvh; }
.ig-stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ig-stage { position: relative; overflow: hidden; background: #1a1a1a; touch-action: manipulation; }
.ig-media { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.ig-media img, .ig-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.ig-media .ig-fade { animation: igFade .35s ease; }
@keyframes igFade { from { opacity: .3; } to { opacity: 1; } }
.ig-overlay { position: absolute; inset: 0; pointer-events: none; }
.ig-overlay > * { pointer-events: auto; }

.ig-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.ig-loading.on { display: flex; }
.ig-loading span { width: 28px; height: 28px; border: 3px solid var(--amber-soft); border-top-color: var(--amber); border-radius: 50%; animation: igSpin .8s linear infinite; }
@keyframes igSpin { to { transform: rotate(360deg); } }

/* 熱點：琥珀色脈動圓點 */
.ig-dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; }
.ig-dot::before, .ig-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.ig-dot::before { background: var(--amber); box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, .35); transform: scale(.55); }
.ig-dot::after { background: var(--amber); opacity: .55; animation: igPulse 1.6s ease-out infinite; }
@keyframes igPulse { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.ig-dot.nudge::before { animation: igNudge .5s ease 2; }
@keyframes igNudge { 50% { transform: scale(.9); } }
.ig-dot:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* 提示框：頻道同款琥珀色圓角框 */
.ig-tip { position: absolute; max-width: min(calc(360px * var(--ts, 1)), 80%); background: var(--tip-bg); color: var(--tip-fg); border-radius: 14px; padding: calc(10px * var(--ts, 1)) calc(14px * var(--ts, 1)); font-size: calc(15px * var(--ts, 1)); line-height: 1.5; font-weight: 600; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); cursor: pointer; white-space: pre-line; animation: igTipIn .3s ease both; }
.ig-tip.long { font-size: calc(14px * var(--ts, 1)); max-width: min(calc(440px * var(--ts, 1)), 86%); }
.ig-tip::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--tip-bg); transform: rotate(45deg); left: var(--ax, 50%); margin-left: -6px; }
.ig-tip.below::after { top: -5px; }
.ig-tip.above::after { bottom: -5px; }
.ig-tip.noarrow::after { display: none; }
.ig-tip .ig-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--tip-fg); color: var(--tip-bg); font-size: 13px; font-weight: 700; }
@keyframes igTipIn { from { opacity: 0; transform: translateY(var(--dy, 6px)); } }

.ig-area { position: absolute; border: 3px solid var(--amber); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(17, 24, 39, .35); cursor: pointer; }
.ig-dim { position: absolute; inset: 0; background: rgba(17, 24, 39, .25); }
.ig-hit { position: absolute; inset: 0; background: transparent; cursor: default; }

/* 章節卡 */
.ig-chapter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6%; background: rgba(10, 10, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ig-card { background: var(--card-bg, #fff); color: var(--ink); border-radius: 20px; padding: clamp(20px, 4vw, 40px); max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: igTipIn .4s ease both; }
.ig-card .ig-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #6b6b6b; margin-bottom: 10px; }
.ig-card .ig-kicker i { width: 10px; height: 10px; background: var(--amber); display: inline-block; }
.ig-card h1 { margin: 0 0 8px; font-size: clamp(20px, 3.2vw, 30px); line-height: 1.3; }
.ig-card p { margin: 0 0 20px; color: #4a4a4a; line-height: 1.6; font-size: clamp(14px, 1.8vw, 16px); }
.ig-card .ig-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ig-cta { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; background: var(--amber); color: var(--on-amber); }
.ig-cta:hover { background: var(--amber-d); }
.ig-cta.ghost { background: #f1f1f1; color: var(--ink); }
.ig-cta.ghost:hover { background: #e4e4e4; }

/* 無熱點步驟的「繼續」 */
.ig-continue { position: absolute; right: 16px; bottom: 16px; }

/* 下方字幕（窄螢幕顯示） */
.ig-caption { display: none; padding: 10px 14px; background: var(--tip-bg); color: var(--tip-fg); font-weight: 600; font-size: 15px; line-height: 1.5; white-space: pre-line; min-height: 44px; }

/* 控制列 */
.ig-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bar); height: 48px; flex: none; }
.ig-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--bar-fg); cursor: pointer; }
.ig-btn:hover { background: #222; }
.ig-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.ig-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sound .ig-mute { display: none; }
#sound.off .ig-mute { display: inline; }
#sound.off .ig-wave { display: none; }
.ig-progress { flex: 1; height: 6px; background: #2a2a2a; border-radius: 999px; overflow: hidden; cursor: pointer; min-width: 40px; }
.ig-progress-fill { height: 100%; width: 0; background: var(--amber); border-radius: 999px; transition: width .3s ease; }
.ig-count { font-size: 13px; color: var(--bar-dim); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.ig-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--bar-dim); text-decoration: none; font-size: 12px; white-space: nowrap; margin-left: 4px; }
.ig-brand i { width: 8px; height: 8px; background: var(--amber); }
.ig-brand:hover { color: var(--amber); }

.ig-error { padding: 40px 20px; text-align: center; color: #ccc; }

/* 下方獨立文字區（textPos＝below）：像影片字幕帶，提示與說明框文字不蓋住畫面 */
.ig.band .ig-caption { display: block; min-height: 78px; background: #111; color: #f4f1ea; border-top: 3px solid var(--tip-bg); font-size: calc(18px * var(--ts, 1)); line-height: 1.6; padding: 14px 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
.ig.band .ig-caption:empty { background: #0d0d0d; border-top-color: transparent; }
.ig.tb .ig-tip:not(.keep) { display: none; }
/* 窄螢幕：提示文字改到下方字幕，畫面只留圓點 */
.ig.narrow .ig-tip:not(.keep) { display: none; }
.ig.narrow .ig-caption { display: block; }
.ig.narrow .ig-brand, .ig.narrow #restart { display: none; }
.ig.narrow .ig-bar { gap: 2px; padding: 6px; }
.ig-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 17px; padding: 14px 28px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.ig.narrow { justify-content: center; }
.ig.narrow .ig-stage-wrap { flex: none; }
.ig-draft { flex: none; font-size: 11px; font-weight: 700; color: #111; background: #bbb; border-radius: 5px; padding: 2px 6px; }

/* ---------- 播放模式、速度、暫停（v2） ---------- */
.ig { position: relative; }
.ig-pill { width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--bar-fg); }
.ig-pill svg { width: 18px; height: 18px; }
.ig-pill.on { color: var(--amber); }
#speedBtn { min-width: 46px; justify-content: center; font-variant-numeric: tabular-nums; }
#more { display: none; position: relative; }
#more.flag::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.ig.narrow #more { display: grid; }
.ig.narrow #modeBtn, .ig.narrow #speedBtn { display: none; }

/* 播放設定選單（從控制列往上展開） */
.ig-menu { position: absolute; bottom: 54px; z-index: 20; overflow-y: auto; width: min(300px, calc(100% - 16px)); background: #1b1b1b; color: var(--bar-fg); border: 1px solid #2e2e2e; border-radius: 14px; padding: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); animation: igTipIn .18s ease both; --dy: 6px; }
.ig-menu[hidden] { display: none; }
.ig-menu-h { font-size: 12px; color: var(--bar-dim); padding: 6px 8px 4px; letter-spacing: .04em; }
.ig-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 8px; border-radius: 10px; cursor: pointer; }
.ig-menu-item:hover, .ig-menu-item:focus-visible { background: #262626; outline: none; }
.ig-menu-item svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-menu-item b { display: block; font-size: 14px; }
.ig-menu-item small { display: block; font-size: 12px; color: var(--bar-dim); margin-top: 2px; line-height: 1.4; }
.ig-menu-item[aria-checked="true"] { color: var(--amber); }
.ig-menu-item[aria-checked="true"] small { color: #c9a14a; }
.ig-menu-plain { border-top: 1px solid #2a2a2a; border-radius: 0 0 10px 10px; margin-top: 6px; align-items: center; }
.ig-speeds { display: flex; gap: 4px; padding: 2px 4px 6px; }
.ig-speed { flex: 1; border: 0; border-radius: 8px; padding: 8px 0; background: #262626; color: var(--bar-fg); font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.ig-speed:hover, .ig-speed:focus-visible { background: #333; outline: none; }
.ig-speed[aria-checked="true"] { background: var(--amber); color: var(--on-amber); }

/* 暫停提示：畫面中央的大暫停圖示 */
.ig-pausemark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 5; }
.ig-pausemark svg { width: 76px; height: 76px; padding: 18px; border-radius: 50%; background: rgba(0, 0, 0, .62); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; box-shadow: 0 0 0 3px var(--amber); }
.ig-pausemark span { font-size: 13px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .62); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ig.paused .ig-pausemark { display: flex; animation: igTipIn .2s ease both; }
.ig.paused .ig-cd i { animation-play-state: paused; }
.ig.paused .ig-dot::after { animation-play-state: paused; }

/* 切換模式／速度時的短暫提示 */
.ig-toast { position: absolute; left: 50%; top: 12px; z-index: 32 !important; transform: translate(-50%, -8px); max-width: calc(100% - 24px); background: rgba(13, 13, 13, .88); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 6; text-align: center; }
.ig-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 章節卡倒數條（全自動）與提示 */
.ig-cd { height: 4px; background: #eee; border-radius: 999px; overflow: hidden; margin-top: 16px; }
.ig-cd i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: 0 50%; animation: igCd linear both; }
@keyframes igCd { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ig-hint { margin-top: 12px; font-size: 13px; color: #6b6b6b; }

/* 影片字幕（寬螢幕疊在畫面下方；窄螢幕改用下方字幕列） */
.ig-sub { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); max-width: 86%; width: max-content; text-align: center; background: rgba(0, 0, 0, .74); color: #fff; font-size: var(--sub-fs, 18px); line-height: 1.45; font-weight: 600; padding: .3em .8em; border-radius: 8px; white-space: pre-line; pointer-events: none; display: none; z-index: 2; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ig-sub.on { display: block; }

/* 影片定時標註：和熱點同樣式，但不能點 */
.ig-marks { position: absolute; inset: 0; pointer-events: none; }
.ig-marks * { pointer-events: none !important; cursor: default; }

/* 預估時間 */
.ig-time { flex: none; font-size: 12px; color: var(--bar-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-dur { margin: -2px 0 14px; font-size: 13px; font-weight: 700; color: #6b6b6b; }
.ig.narrow .ig-time { display: none; }

/* ---------- 系列、上一篇／下一篇、相關教學、連結元件 ---------- */
.ig-card { max-height: 100%; overflow-y: auto; box-sizing: border-box; }
.ig-media-top { pointer-events: none; }
.ig-links .igl-link { pointer-events: auto; }
.ig-nav:empty { display: none; }
.ig-nav { margin-top: 16px; display: grid; gap: 10px; }
.ig-series { justify-self: start; border: 1px solid #e3e3e3; background: #fafafa; color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ig-series:hover { border-color: var(--amber); }
.ig-navrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ig-navlink { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid #e6e6e6; background: #fff; color: var(--ink); border-radius: 12px; padding: 8px; font: inherit; cursor: pointer; min-width: 0; }
.ig-navlink:hover { border-color: var(--amber); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.ig-navlink.next { border-color: var(--amber); background: #fffaf0; }
.ig-navlink.cur { border-color: var(--amber); background: #fff6dc; }
.ig-navlink .th { flex: none; width: 64px; aspect-ratio: 16 / 9; border-radius: 6px; background: #e9e9e9 center / cover no-repeat; }
.ig-navlink .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ig-navlink small { font-size: 11px; font-weight: 700; color: #8a6400; }
.ig-navlink b { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-rel-h { font-size: 12px; font-weight: 700; color: #6b6b6b; margin-top: 4px; }
.ig-rel { display: grid; gap: 6px; }
.ig-pop { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; padding: 4%; animation: igFade .2s ease; }
.ig-pop-box { position: relative; background: #fff; color: var(--ink); border-radius: 16px; padding: 18px; width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.ig-pop.video .ig-pop-box { width: min(960px, 100%); padding: 0; background: #000; overflow: visible; }
.ig-pop.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
.ig-pop-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; cursor: pointer; }
.ig-pop.video .ig-pop-x { top: -12px; right: -12px; }
.ig-pop-h { font-size: 18px; font-weight: 800; margin: 2px 36px 6px 0; }
.ig-pop-d { margin: 0 0 12px; color: #555; font-size: 14px; line-height: 1.6; }
.ig-pop-list { display: grid; gap: 8px; }
/* ---------- 直式版面（.portrait）：畫面依焦點放大填滿，文字在下方文字區 ---------- */
.ig.portrait { justify-content: flex-start; }
.ig.portrait .ig-stage-wrap { flex: none; }
.ig.portrait .ig-caption { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #111; color: #f2f2f2; border-top: 3px solid var(--tip-bg); font-size: calc(17px * var(--ts, 1)); line-height: 1.6; padding: 14px 16px; }
.ig.portrait .ig-caption:empty { background: #0d0d0d; border-top-color: transparent; }
.ig-caplinks { display: none; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; background: #111; }
.ig.portrait .ig-caplinks:not(:empty) { display: flex; }
.ig-caplink { border: 1px solid var(--amber); background: transparent; color: var(--amber); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-fullbtn { position: absolute; top: 8px; right: 8px; z-index: 7; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; }
.ig-fullbtn[hidden] { display: none; }
.ig-fullbtn[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }

/* 文字動畫（step.textfx） */
.ig-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.ig-fx.on { opacity: 1; }
.ig-fx.card { z-index: 4; }
.ig-fx.card.on { pointer-events: auto; cursor: pointer; }
.ig.fx-bg .ig-chapter { background: rgba(10, 10, 10, .18); backdrop-filter: none; -webkit-backdrop-filter: none; }