/* c3-drama-class（話劇教室）more 層 v2 覆寫。
   對應：--bg→--tp-bg、--surface→--tp-surface、--fg→--tp-text、
   --muted→--tp-text-soft、--gold→--tp-subject-arts（藝文）、
   --ink→--tp-text、--paper→--tp-surface。
   寫死的金色暈染與半透明黑，改以權杖表面色與邊線分層。 */

html[data-tp-theme="v2"]:root {
  color-scheme: light;
  --bg: var(--tp-bg);
  --surface: var(--tp-surface);
  --fg: var(--tp-text);
  --muted: var(--tp-text-soft);
  --gold: var(--tp-subject-arts);
  --ink: var(--tp-text);
  --paper: var(--tp-surface);
}

@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:root:not([data-theme="light"]) { color-scheme: dark; }
}

html[data-tp-theme="v2"][data-theme="dark"]:root { color-scheme: dark; }

html[data-tp-theme="v2"] body {
  background: var(--tp-bg);
  font-family: var(--tp-font-sans);
}

html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3 {
  font-family: var(--tp-font-serif);
}

html[data-tp-theme="v2"] ::selection {
  background-color: var(--tp-subject-arts-soft);
  color: var(--tp-text);
}

/* 頂列與底部 dock：寫死的半透明深色底改為權杖背景 */
html[data-tp-theme="v2"] .top {
  border-bottom-color: var(--tp-line);
  background: var(--tp-bg);
}

html[data-tp-theme="v2"] .dock {
  border-top-color: var(--tp-line);
  background: var(--tp-bg);
}

/* 金色底元件的其上文字，統一用 accent-on 保證深淺模式對比 */
html[data-tp-theme="v2"] .skip,
html[data-tp-theme="v2"] .play-btn,
html[data-tp-theme="v2"] .btn.gold,
html[data-tp-theme="v2"] .modes button.is-on,
html[data-tp-theme="v2"] .check.on {
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .clock-pop {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-card-shadow);
}

html[data-tp-theme="v2"] .side-btn { border-radius: var(--tp-radius-ctl); }

html[data-tp-theme="v2"] .side-btn.is-active {
  background-color: var(--tp-subject-arts-soft);
  color: var(--tp-subject-arts);
}

/* 紙卷 sheet：去大陰影，改以邊線圈層 */
html[data-tp-theme="v2"] .sheet {
  border-radius: var(--tp-radius-card);
  box-shadow: 0 0 0 1px var(--tp-line-strong);
}

/* 紙上階層文字 */
html[data-tp-theme="v2"] .soft { color: var(--tp-text); }
html[data-tp-theme="v2"] .dim { color: var(--tp-text-soft); }
html[data-tp-theme="v2"] .dimmer { color: var(--tp-text-soft); }
html[data-tp-theme="v2"] .dimmest { color: var(--tp-text-faint); }
html[data-tp-theme="v2"] .synopsis { color: var(--tp-text-soft); }

html[data-tp-theme="v2"] .rule::before,
html[data-tp-theme="v2"] .rule::after {
  background: var(--tp-line-strong);
}

html[data-tp-theme="v2"] .cast {
  border-top-color: var(--tp-line);
  border-bottom-color: var(--tp-line);
}

html[data-tp-theme="v2"] .cast li { border-top-color: var(--tp-line); }

/* 按鈕群 */
html[data-tp-theme="v2"] .btn { border-radius: var(--tp-radius-ctl); }
html[data-tp-theme="v2"] .btn.ghost { border-color: var(--tp-line-strong); }
html[data-tp-theme="v2"] .btn.quiet { background-color: var(--tp-bg-deep); }
html[data-tp-theme="v2"] .btn.on-paper { border-color: var(--tp-line-strong); }
html[data-tp-theme="v2"] .btn.paper-quiet { background-color: var(--tp-bg-deep); }

/* 卡片與面板：深邊線分層、方正小圓角、無陰影 */
html[data-tp-theme="v2"] .card,
html[data-tp-theme="v2"] .panel {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-card);
  background-color: var(--tp-surface);
  box-shadow: var(--tp-card-shadow);
}

html[data-tp-theme="v2"] .panel-plain { background-color: transparent; }

html[data-tp-theme="v2"] .block-link,
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .option,
html[data-tp-theme="v2"] .drill-open {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-ctl);
  background-color: var(--tp-surface);
}

html[data-tp-theme="v2"] .choice.is-on,
html[data-tp-theme="v2"] .drill-open.is-on {
  border-color: var(--tp-subject-arts);
  background-color: var(--tp-subject-arts-soft);
}

/* 作答狀態對齊語意色 */
html[data-tp-theme="v2"] .option.right {
  border-color: var(--tp-success);
  background-color: var(--tp-success);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .option.wrong,
html[data-tp-theme="v2"] .option.role-wrong {
  border-color: var(--tp-error);
  color: var(--tp-text-soft);
}

html[data-tp-theme="v2"] .option.idle {
  border-color: var(--tp-line);
  color: var(--tp-text-faint);
}

/* 進度條與模式切換 */
html[data-tp-theme="v2"] .meter,
html[data-tp-theme="v2"] .meter.on-paper {
  background-color: var(--tp-bg-deep);
}

html[data-tp-theme="v2"] .modes {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-card);
}

html[data-tp-theme="v2"] .modes button { border-radius: var(--tp-radius-ctl); }

/* 輸入框 */
html[data-tp-theme="v2"] .field,
html[data-tp-theme="v2"] .area {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-ctl);
  background-color: var(--tp-surface);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .field.dark,
html[data-tp-theme="v2"] .area.dark {
  border-color: var(--tp-line-strong);
  background-color: var(--tp-bg);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .field.ok { border-color: var(--tp-success); }

html[data-tp-theme="v2"] .field.bad {
  border-color: var(--tp-error);
  color: var(--tp-text-soft);
}

/* 填空槽、台詞側線、提示卡 */
html[data-tp-theme="v2"] .blank-slot,
html[data-tp-theme="v2"] .mask-slot {
  border-bottom-color: var(--tp-line-strong);
  color: var(--tp-text-faint);
}

html[data-tp-theme="v2"] .line { border-left-color: var(--tp-line-strong); }

html[data-tp-theme="v2"] .check {
  border-color: var(--tp-line-strong);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .check.gold-ring { border-color: var(--tp-subject-arts); }

html[data-tp-theme="v2"] .note {
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
}

html[data-tp-theme="v2"] .divide li { border-top-color: var(--tp-line); }

html[data-tp-theme="v2"] .dashed {
  border-color: var(--tp-line-strong);
  border-radius: var(--tp-radius-card);
}

/* 聚焦環改 accent 系（原以 --gold 藝文科目色當聚焦色） */
html[data-tp-theme="v2"] :focus-visible { outline-color: var(--tp-focus-ring); }

/* 主按鈕與選取態切換鈕：藝文科目色／墨色只留識別用途，主操作底色改 accent 系 */
html[data-tp-theme="v2"] .skip,
html[data-tp-theme="v2"] .play-btn,
html[data-tp-theme="v2"] .btn.gold,
html[data-tp-theme="v2"] .btn.ink,
html[data-tp-theme="v2"] .modes button.is-on,
html[data-tp-theme="v2"] .check.on {
  background-color: var(--tp-accent);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .skip:hover,
html[data-tp-theme="v2"] .play-btn:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.gold:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.ink:hover:not(:disabled),
html[data-tp-theme="v2"] .check.on:hover:not(:disabled),
html[data-tp-theme="v2"] .play-btn:active:not(:disabled),
html[data-tp-theme="v2"] .btn.gold:active:not(:disabled),
html[data-tp-theme="v2"] .btn.ink:active:not(:disabled),
html[data-tp-theme="v2"] .check.on:active:not(:disabled) {
  background-color: var(--tp-accent-strong);
}

/* 切換鈕選取態的描邊同步 accent（原為 --gold） */
html[data-tp-theme="v2"] .check.on { border-color: var(--tp-accent); }