/* ============================================================
   土砲 toopower 學習站 — 設計系統 v2 共用元件樣式
   ------------------------------------------------------------
   用途：入口頁（portal）與全站共用的元件層樣式，實作
   《design-v2-contract.md》§5 元件 class 契約之全部條目。
   載入順序：本檔必須在 tp-tokens-v2.css 之後載入；
   App 內浮動元件請另載 tp-shell-v2.css（本檔不含 shell）。
   色彩僅使用語意層（§3）與形狀層（§4）變數，禁止直接書寫
   primitive 色碼；字級、間距、陰影、動效沿用 v1 權杖。

   元件總覽（依本檔出現順序）：
     基底　　body.tp-page／.tp-container／.tp-main／
             .tp-skip-link／.tp-visually-hidden／全域焦點與動效
     頁首　　.tp-header 系列（.tp-brand、.tp-nav）
     頁尾　　.tp-footer 系列
     主視覺　.tp-hero 系列
     篩選列　.tp-filter 系列、.tp-chip、.tp-search 系列、.tp-result-count
     卡片　　.tp-grid、.tp-card 全系列（徽章、meta、stretched-link、
             版本群組展開）
     按鈕　　.tp-btn 全修飾子
     空狀態　.tp-empty 系列
     最近玩過 .tp-recent 系列（橫向捲動）
     收尾　　觸控裝置加強、@media print、375px 防溢出自檢註解
   ============================================================ */


/* ============================================================
   基底：頁面作用域、版心、無障礙工具、全域焦點與動效
   ============================================================ */

/* 頁面根：背景、文字色、內文字體與隨層級變動的內文行高。 */
body.tp-page {
  margin: 0;
  background: var(--tp-bg);
  color: var(--tp-text);
  font-family: var(--tp-font-sans);
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
}

/* 盒模型統一為 border-box，僅限 .tp-page 作用域內宣告（契約 §5）。 */
.tp-page,
.tp-page *,
.tp-page *::before,
.tp-page *::after {
  box-sizing: border-box;
}

/* hidden 屬性修復：UA 預設的 [hidden]{display:none} 特異性不足，
   會被元件自身的 display:flex/grid 規則覆蓋（如 .tp-card、.tp-grid、
   .tp-empty、.tp-recent__list），導致僅設 hidden 屬性無法隱藏；
   此處以 !important 補強，確保 body.tp-page 下所有元件的 hidden 生效。 */
.tp-page [hidden] {
  display: none !important;
}

/* 圖片與 SVG 不得撐破容器；頁面級元素禁止出現超過 100% 的固定寬。 */
.tp-page img,
.tp-page svg {
  max-width: 100%;
}

.tp-page img {
  height: auto;
}

/* 選取反白：accent-soft 淺底、墨色文字，延續紙感。 */
.tp-page::selection,
.tp-page ::selection {
  background: var(--tp-accent-soft);
  color: var(--tp-text);
}

/* 版心：最大寬度吃權杖，左右留白隨視窗縮放。 */
.tp-container {
  max-width: var(--tp-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* 主內容區：上下留白吃 section-gap（三層各自不同）。 */
.tp-main {
  padding-block: var(--tp-section-gap);
}

/* 無障礙隱藏工具：視覺上消失，螢幕閱讀器仍可讀取。 */
.tp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 跳到主內容：平時隱藏，鍵盤聚焦時浮出左上角。 */
.tp-skip-link {
  position: absolute;
  top: -100%;
  left: var(--tp-space-3);
  z-index: calc(var(--tp-z-header) + 1);
  display: inline-flex;
  align-items: center;
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-4);
  border-radius: var(--tp-radius-ctl);
  background: var(--tp-accent);
  color: var(--tp-accent-on);
  font-weight: var(--tp-fw-medium);
  text-decoration: none;
  box-shadow: var(--tp-shadow-3);
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tp-skip-link:focus {
  top: var(--tp-space-3);
  clip: auto;
  clip-path: none;
  overflow: visible;
}

/* ---------- 全域焦點（契約 §5 焦點段） ---------- */

/* 鍵盤焦點：朱砂聚焦環、偏移 2px，圓角繼承元件本身形狀。 */
.tp-page :focus-visible {
  outline: 2.5px solid var(--tp-focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

/* chip／badge 類小圓角元件：聚焦環外再疊一層柔光圈。 */
.tp-page .tp-chip:focus-visible,
.tp-page .tp-badge:focus-visible,
.tp-page .tp-nav__link:focus-visible,
.tp-page .tp-meta:focus-visible,
.tp-page .tp-recent__item:focus-visible {
  box-shadow: 0 0 0 4px var(--tp-focus-ring-soft);
}

/* ---------- 減少動態效果總開關（契約 §5） ---------- */

@media (prefers-reduced-motion: reduce) {
  .tp-page *,
  .tp-page *::before,
  .tp-page *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .tp-page {
    scroll-behavior: auto;
  }
}

/* ============================================================
   頁首：sticky 毛玻璃、品牌方印、主導覽
   ============================================================ */

/* 吸頁首：90% 透明的背景色＋背景模糊，底邊一條紙線。 */
.tp-header {
  position: sticky;
  top: 0;
  z-index: var(--tp-z-header);
  background: color-mix(in srgb, var(--tp-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tp-line);
}

/* 內層：與 .tp-container 併用，橫向排列、對齊置中。 */
.tp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tp-space-4);
  min-height: var(--tp-header-h);
}

/* 品牌區：方印＋雙行文字，整塊為回首頁連結。 */
.tp-brand {
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
  min-width: 0;
  text-decoration: none;
}

.tp-brand__logo {
  flex: none;
  width: 40px;
  height: 40px;
}

.tp-brand__logo svg,
.tp-brand__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.tp-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tp-brand__title {
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-fw-bold);
  font-size: 0.9375rem; /* 15px：站名，契約固定值 */
  line-height: var(--tp-lh-tight);
  color: var(--tp-text);
}

.tp-brand__sub {
  font-size: var(--tp-fs-caption);
  line-height: var(--tp-lh-tight);
  color: var(--tp-text-faint);
}

/* 主導覽：靠右排列；手機允許換行，不溢出。 */
.tp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2);
  margin-left: auto;
  min-width: 0;
}

/* 導覽連結：圓角隨層（kids 膠囊、more 小圓角），觸控 48px。 */
.tp-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tp-touch-min);
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-4);
  border-radius: var(--tp-radius-chip);
  color: var(--tp-text-soft);
  font-size: var(--tp-ctl-fz);
  font-weight: var(--tp-fw-medium);
  text-decoration: none;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

/* 目前頁：實心底反白。 */
.tp-nav__link.is-active,
.tp-nav__link[aria-current="page"] {
  background: var(--tp-accent);
  color: var(--tp-accent-on);
}

@media (hover: hover) and (pointer: fine) {
  .tp-nav__link:hover {
    background: var(--tp-accent-soft);
  }

  .tp-nav__link.is-active:hover,
  .tp-nav__link[aria-current="page"]:hover {
    background: var(--tp-accent);
  }
}

/* 窄螢幕：頁首允許整列換行，導覽回到左側起排，避免水平溢出。 */
@media (max-width: 35rem) {
  .tp-header__inner {
    flex-wrap: wrap;
    padding-block: var(--tp-space-2);
  }

  .tp-nav {
    margin-left: 0;
  }
}


/* ============================================================
   頁尾：署名、四區連結、宣言
   ============================================================ */

.tp-footer {
  border-top: 1px solid var(--tp-line);
  margin-top: var(--tp-section-gap);
}

.tp-footer__inner {
  padding-block: var(--tp-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--tp-space-6);
}

/* 品牌署名：小方印＋「土砲 toopower 手作」。 */
.tp-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
  min-width: 0;
  font-size: var(--tp-fs-small);
  font-weight: var(--tp-fw-medium);
  color: var(--tp-text-soft);
}

.tp-footer__brand svg,
.tp-footer__brand img {
  flex: none;
  width: 32px;
  height: 32px;
}

/* 四區連結：橫向分組排列，連結為 48px 觸控目標。 */
.tp-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2) var(--tp-space-6);
  margin-left: auto;
  min-width: 0;
}

.tp-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-2);
  border-radius: var(--tp-radius-ctl);
  color: var(--tp-text-soft);
  font-size: var(--tp-fs-small);
  text-decoration: none;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

@media (hover: hover) and (pointer: fine) {
  .tp-footer__links a:hover {
    color: var(--tp-accent-text);
    background: var(--tp-accent-soft);
  }
}

/* 宣言：免費・免註冊・不收集個人資料。 */
.tp-footer__note {
  width: 100%;
  margin: 0;
  font-size: var(--tp-fs-caption);
  color: var(--tp-text-faint);
}


/* ============================================================
   主視覺：眉題、大標、導言、說明、藝術圖
   ============================================================ */

/* 區塊：上下留白隨層；偽元素暈染裝飾受 --tp-hero-decor 控制。 */
.tp-hero {
  position: relative;
  padding-block: var(--tp-hero-py);
  overflow: clip;
}

/* 背景暈染：accent-softer 極淺底大面積暈開；more 層 --tp-hero-decor:0
   會將其完全關閉。僅作裝飾，不攔截互動。 */
.tp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--tp-hero-decor);
  background:
    radial-gradient(38rem 26rem at 88% 8%, var(--tp-accent-softer), transparent 70%),
    radial-gradient(30rem 22rem at 6% 96%, var(--tp-bg-deep), transparent 72%);
}

/* 內層：手機單欄（藝術圖排在文字之後），880px 以上改兩欄。 */
.tp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tp-space-8);
  align-items: center;
}

@media (min-width: 55rem) {
  .tp-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--tp-space-10);
  }
}

.tp-hero__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tp-space-3);
}

/* 膠囊眉題：淺底強調字，如「免費・免註冊・不收集個人資料」。 */
.tp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.9em;
  border-radius: var(--tp-radius-chip);
  background: var(--tp-accent-soft);
  color: var(--tp-accent-text);
  font-size: var(--tp-fs-caption);
  font-weight: var(--tp-fw-medium);
  line-height: var(--tp-lh-tight);
  letter-spacing: 0.04em;
}

/* 大標：字重與字距隨層（kids 900 無字距、more 700 寬字距）。 */
.tp-hero__title {
  margin: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-display);
  font-weight: var(--tp-display-weight);
  letter-spacing: var(--tp-display-ls);
  line-height: var(--tp-lh-title);
  color: var(--tp-text);
  overflow-wrap: anywhere;
}

.tp-hero__lead {
  margin: 0;
  font-size: var(--tp-fs-lead);
  font-weight: var(--tp-fw-medium);
  line-height: var(--tp-lh-tight);
  color: var(--tp-text-soft);
  overflow-wrap: anywhere;
}

.tp-hero__desc {
  margin: 0;
  max-width: 42em;
  font-size: var(--tp-fs-small);
  line-height: var(--tp-lh-body);
  color: var(--tp-text-faint);
  overflow-wrap: anywhere;
}

/* 藝術圖容器：內嵌 SVG 滿寬、等比縮放，不得撐破欄位。 */
.tp-hero__art {
  min-width: 0;
}

.tp-hero__art svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ============================================================
   篩選列：群組標籤、膠囊 chip、搜尋框、結果筆數
   ============================================================ */

.tp-filter {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-3);
}

/* 單組篩選：標籤固定於左，chips 於右換行（手機亦維持橫列）。 */
.tp-filter__group {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
}

.tp-filter__label {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--tp-touch-min); /* 與 chips 同高，視覺對齊 */
  font-size: var(--tp-fs-small);
  font-weight: var(--tp-fw-bold);
  color: var(--tp-text-soft);
}

.tp-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-2);
  min-width: 0;
}

/* 篩選 chip：白面細邊膠囊，選取時實心反白。 */
.tp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  min-width: var(--tp-touch-min);
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-chip);
  background: var(--tp-surface);
  color: var(--tp-text-soft);
  font: inherit;
  font-size: var(--tp-ctl-fz);
  font-weight: var(--tp-fw-medium);
  cursor: pointer;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    border-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

.tp-chip.is-active,
.tp-chip[aria-pressed="true"] {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-accent-on);
}

@media (hover: hover) and (pointer: fine) {
  .tp-chip:hover {
    border-color: var(--tp-accent);
    color: var(--tp-accent-text);
  }

  .tp-chip.is-active:hover,
  .tp-chip[aria-pressed="true"]:hover {
    color: var(--tp-accent-on);
  }
}

/* 搜尋列：搜尋框與結果筆數同列，窄螢幕自動換行。 */
.tp-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-3);
}

/* 搜尋容器：相對定位，承載左圖示與右清除鈕。 */
.tp-search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
}

.tp-search__icon {
  position: absolute;
  left: var(--tp-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--tp-text-faint);
  pointer-events: none;
}

/* 輸入框：左右各留 2.75rem 給圖示與清除鈕。 */
.tp-search__input {
  display: block;
  width: 100%;
  min-height: var(--tp-touch-min);
  padding: 0 2.75rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  background: var(--tp-surface);
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-ctl-fz);
  transition:
    border-color var(--tp-time-std) var(--tp-ease-std),
    box-shadow var(--tp-time-std) var(--tp-ease-std),
    background-color var(--tp-time-std) var(--tp-ease-std);
}

.tp-search__input::placeholder {
  color: var(--tp-text-faint);
}

/* 聚焦：強調色邊＋柔光聚焦環；外框由全域 :focus-visible 補上。 */
.tp-search__input:focus {
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 4px var(--tp-focus-ring-soft);
  outline: none;
}

/* 清除鈕：右側 48×48 觸控區，以 [hidden] 控制顯示。 */
.tp-search__clear {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tp-touch-min);
  height: var(--tp-touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--tp-radius-ctl);
  background: none;
  color: var(--tp-text-faint);
  cursor: pointer;
  transition:
    color var(--tp-time-std) var(--tp-ease-std),
    background-color var(--tp-time-std) var(--tp-ease-std);
}

.tp-search__clear[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .tp-search__clear:hover {
    color: var(--tp-text);
    background: var(--tp-bg-deep);
  }
}

/* 結果筆數，如「顯示 12 個互動練習」。 */
.tp-result-count {
  margin: 0;
  flex: none;
  font-size: var(--tp-fs-caption);
  color: var(--tp-text-faint);
}


/* ============================================================
   App 卡片：格網、圖示、徽章、meta、stretched-link、版本群組
   ============================================================ */

/* 卡片格網：自動填欄，最小欄寬吃 --tp-grid-min，窄於此自動單欄。 */
.tp-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tp-grid-min)), 1fr));
}

/* 卡片：白面、隨層圓角／邊線／陰影；position:relative 供
   stretched-link 的 ::after 覆滿整卡。 */
.tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-3);
  min-width: 0;
  padding: var(--tp-space-5);
  border: var(--tp-card-border);
  border-radius: var(--tp-radius-card);
  background: var(--tp-surface);
  box-shadow: var(--tp-card-shadow);
  transition:
    transform var(--tp-time-std) var(--tp-ease-std),
    box-shadow var(--tp-time-std) var(--tp-ease-std),
    border-color var(--tp-time-std) var(--tp-ease-std);
}

@media (hover: hover) and (pointer: fine) {
  .tp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-card-shadow-hover);
  }
}

/* 多版本群組卡修飾子：視覺差異由 .tp-card__versions 的頂部虛線
   分隔區承擔，本修飾子僅作語意掛鉤，不另加左緣色條。 */
.tp-card--group {
  /* 結構掛鉤：群組卡一律包含 .tp-card__versions 與 .tp-card__expand。 */
}

/* 卡頭：圖示＋標題徽章欄。 */
.tp-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  min-width: 0;
}

/* 圖示座：56×56、極淺強調底；科目修飾子改科目 soft 底與科目色。 */
.tp-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--tp-radius-ctl);
  background: var(--tp-accent-softer);
  color: var(--tp-accent-text);
}

.tp-card__icon svg {
  width: 44px;
  height: 44px;
}

.tp-card__icon--subject-zh     { background: var(--tp-subject-zh-soft);     color: var(--tp-subject-zh); }
.tp-card__icon--subject-math   { background: var(--tp-subject-math-soft);   color: var(--tp-subject-math); }
.tp-card__icon--subject-en     { background: var(--tp-subject-en-soft);     color: var(--tp-subject-en); }
.tp-card__icon--subject-sci    { background: var(--tp-subject-sci-soft);    color: var(--tp-subject-sci); }
.tp-card__icon--subject-soc    { background: var(--tp-subject-soc-soft);    color: var(--tp-subject-soc); }
.tp-card__icon--subject-arts   { background: var(--tp-subject-arts-soft);   color: var(--tp-subject-arts); }
.tp-card__icon--subject-skills { background: var(--tp-subject-skills-soft); color: var(--tp-subject-skills); }
.tp-card__icon--subject-life   { background: var(--tp-subject-life-soft);   color: var(--tp-subject-life); }

/* 標題欄：標題在上、徽章列在下，允許換行不溢出。 */
.tp-card__heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
}

.tp-card__title {
  margin: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-h4);
  font-weight: var(--tp-fw-bold);
  line-height: var(--tp-lh-tight);
  color: var(--tp-text);
  overflow-wrap: anywhere;
}

.tp-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--tp-space-1) * 1.5);
}

/* 徽章基底：深紙底、軟墨字、圓角隨層。 */
.tp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  border-radius: var(--tp-radius-badge);
  background: var(--tp-bg-deep);
  color: var(--tp-text-soft);
  font-size: var(--tp-fs-caption);
  font-weight: var(--tp-fw-medium);
  line-height: var(--tp-lh-tight);
  white-space: nowrap;
}

.tp-badge--beta {
  background: var(--tp-warning-soft);
  color: var(--tp-warning);
}

.tp-badge--versions {
  background: var(--tp-accent-soft);
  color: var(--tp-accent-text);
}

.tp-badge--new {
  background: var(--tp-success-soft);
  color: var(--tp-success);
}

/* meta 列：年級、科目、類型等標記。 */
.tp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2);
  min-width: 0;
}

/* meta 基底：純文字小標記；修飾子決定底色或描邊。 */
.tp-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  border-radius: var(--tp-radius-badge);
  color: var(--tp-text-soft);
  font-size: var(--tp-fs-caption);
  line-height: var(--tp-lh-tight);
  white-space: nowrap;
}

.tp-meta svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.tp-meta--grade {
  background: var(--tp-bg-deep);
  color: var(--tp-text-soft);
}

.tp-meta--subject-zh     { background: var(--tp-subject-zh-soft);     color: var(--tp-subject-zh); }
.tp-meta--subject-math   { background: var(--tp-subject-math-soft);   color: var(--tp-subject-math); }
.tp-meta--subject-en     { background: var(--tp-subject-en-soft);     color: var(--tp-subject-en); }
.tp-meta--subject-sci    { background: var(--tp-subject-sci-soft);    color: var(--tp-subject-sci); }
.tp-meta--subject-soc    { background: var(--tp-subject-soc-soft);    color: var(--tp-subject-soc); }
.tp-meta--subject-arts   { background: var(--tp-subject-arts-soft);   color: var(--tp-subject-arts); }
.tp-meta--subject-skills { background: var(--tp-subject-skills-soft); color: var(--tp-subject-skills); }
.tp-meta--subject-life   { background: var(--tp-subject-life-soft);   color: var(--tp-subject-life); }

/* 類型標記：透明底、細邊，附 16px 類型小圖示。 */
.tp-meta--kind {
  background: transparent;
  border: 1px solid var(--tp-line);
  color: var(--tp-text-soft);
}

/* 簡介：兩行截斷，長字串允許任意處換行。 */
.tp-card__desc {
  margin: 0;
  font-size: var(--tp-fs-small);
  line-height: var(--tp-lh-body);
  color: var(--tp-text-faint);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 動作列：永遠貼齊卡片底部。 */
.tp-card__actions {
  margin-top: auto;
  padding-top: var(--tp-space-2);
}

/* 標題連結（stretched-link）：::after 覆滿整卡，整卡可點；
   卡內其他可點元素（版本列、展開鈕）以 z-index:1 高於覆層。 */
.tp-card__link {
  color: var(--tp-text);
  text-decoration: none;
  transition: color var(--tp-time-std) var(--tp-ease-std);
}

.tp-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .tp-card__link:hover {
    color: var(--tp-accent-text);
  }
}

/* 版本展開區：頂部虛線分隔，配合 [hidden] 收合。 */
.tp-card__versions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-2);
  padding-top: var(--tp-space-3);
  border-top: 1px dashed var(--tp-line-strong);
}

.tp-card__versions[hidden] {
  display: none;
}

/* 版本列：左版本名、右 chevron，整列為連結。 */
.tp-version-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-2);
  min-width: 0;
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-3);
  border-radius: var(--tp-radius-ctl);
  background: var(--tp-bg-deep);
  color: var(--tp-text);
  font-size: var(--tp-fs-small);
  font-weight: var(--tp-fw-medium);
  text-decoration: none;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

.tp-version-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--tp-text-faint);
}

@media (hover: hover) and (pointer: fine) {
  .tp-version-row:hover {
    background: var(--tp-accent-soft);
  }
}

/* 展開版本鈕：全寬細邊；aria-expanded 為 true 時 chevron 轉 180 度。 */
.tp-card__expand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  width: 100%;
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  background: var(--tp-surface);
  color: var(--tp-accent-text);
  font: inherit;
  font-size: var(--tp-ctl-fz);
  font-weight: var(--tp-fw-medium);
  cursor: pointer;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    border-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

.tp-card__expand svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--tp-time-std) var(--tp-ease-std);
}

.tp-card__expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .tp-card__expand:hover {
    border-color: var(--tp-accent);
    background: var(--tp-accent-soft);
  }
}

/* ============================================================
   按鈕：primary／ghost／quiet／block 與禁用態
   ============================================================ */

.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  min-width: var(--tp-touch-min);
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-5);
  border: 1px solid transparent;
  border-radius: var(--tp-radius-ctl);
  font: inherit;
  font-size: var(--tp-ctl-fz);
  font-weight: var(--tp-fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--tp-time-std) var(--tp-ease-std),
    border-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std),
    box-shadow var(--tp-time-std) var(--tp-ease-std),
    transform var(--tp-time-std) var(--tp-ease-std),
    opacity var(--tp-time-std) var(--tp-ease-std);
}

.tp-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* 主按鈕：強調實心底、白字、一階陰影。 */
.tp-btn--primary {
  background: var(--tp-accent);
  color: var(--tp-accent-on);
  box-shadow: var(--tp-shadow-1);
}

@media (hover: hover) and (pointer: fine) {
  .tp-btn--primary:hover {
    background: var(--tp-accent-strong);
  }
}

/* 次按鈕：白面細邊，hover 轉強調描邊。 */
.tp-btn--ghost {
  border-color: var(--tp-line-strong);
  background: var(--tp-surface);
  color: var(--tp-text);
}

@media (hover: hover) and (pointer: fine) {
  .tp-btn--ghost:hover {
    border-color: var(--tp-accent);
    color: var(--tp-accent-text);
  }
}

/* 靜按鈕：無邊無底，hover 鋪淺底。 */
.tp-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--tp-accent-text);
}

@media (hover: hover) and (pointer: fine) {
  .tp-btn--quiet:hover {
    background: var(--tp-accent-soft);
  }
}

/* 滿寬修飾子。 */
.tp-btn--block {
  width: 100%;
}

/* 禁用態：半透明且完全禁止互動。 */
.tp-btn:disabled,
.tp-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   空狀態：插圖、標題、說明、行動
   ============================================================ */

.tp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-space-3);
  padding-block: var(--tp-space-12);
  text-align: center;
  color: var(--tp-text-faint);
}

/* 插圖容器：160×120，內嵌 SVG 滿版置中。 */
.tp-empty__art {
  width: 160px;
  height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tp-empty__art svg {
  width: 100%;
  height: 100%;
}

.tp-empty__title {
  margin: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-h4);
  font-weight: var(--tp-fw-bold);
  line-height: var(--tp-lh-tight);
  color: var(--tp-text-soft);
  overflow-wrap: anywhere;
}

.tp-empty__desc {
  margin: 0;
  max-width: 32em;
  font-size: var(--tp-fs-small);
  line-height: var(--tp-lh-body);
  overflow-wrap: anywhere;
}

/* 行動區：內放 .tp-btn--ghost。 */
.tp-empty__action {
  margin-top: var(--tp-space-2);
}


/* ============================================================
   最近玩過列：橫向捲動膠囊（頁面唯一的區域性橫捲）
   ============================================================ */

.tp-recent {
  min-width: 0;
}

.tp-recent__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tp-space-3);
  margin-bottom: var(--tp-space-3);
}

.tp-recent__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  min-width: 0;
  font-family: var(--tp-font-serif);
  font-size: var(--tp-fs-h3);
  font-weight: var(--tp-fw-bold);
  line-height: var(--tp-lh-tight);
  color: var(--tp-text);
  overflow-wrap: anywhere;
}

/* 前置時鐘小圖示。 */
.tp-recent__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--tp-text-faint);
}

/* 清除鈕：靜按鈕風格，hover 轉錯誤色警示。 */
.tp-recent__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tp-touch-min);
  padding-inline: var(--tp-space-2);
  border: 0;
  border-radius: var(--tp-radius-ctl);
  background: none;
  color: var(--tp-text-faint);
  font: inherit;
  font-size: var(--tp-fs-caption);
  cursor: pointer;
  transition:
    color var(--tp-time-std) var(--tp-ease-std),
    background-color var(--tp-time-std) var(--tp-ease-std);
}

@media (hover: hover) and (pointer: fine) {
  .tp-recent__clear:hover {
    color: var(--tp-error);
    background: var(--tp-error-soft);
  }
}

/* 橫捲清單：scroll-snap 逐項定位、細捲軸、慣性捲動。 */
.tp-recent__list {
  display: flex;
  gap: var(--tp-space-3);
  margin: 0;
  padding: 0 0 var(--tp-space-2);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--tp-line-strong) transparent;
}

.tp-recent__list::-webkit-scrollbar {
  height: 6px;
}

.tp-recent__list::-webkit-scrollbar-track {
  background: transparent;
}

.tp-recent__list::-webkit-scrollbar-thumb {
  background: var(--tp-line-strong);
  border-radius: var(--tp-radius-chip);
}

/* 單項膠囊：20px 科目小圖示＋名稱＋相對時間。 */
.tp-recent__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  min-height: 56px;
  padding-inline: var(--tp-space-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-chip);
  background: var(--tp-surface);
  color: var(--tp-text);
  font-size: var(--tp-fs-small);
  font-weight: var(--tp-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--tp-time-std) var(--tp-ease-std),
    background-color var(--tp-time-std) var(--tp-ease-std),
    color var(--tp-time-std) var(--tp-ease-std);
}

.tp-recent__item svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* 相對時間，如「昨天」「3 天前」。 */
.tp-recent__item time {
  font-size: var(--tp-fs-caption);
  font-weight: var(--tp-fw-regular);
  color: var(--tp-text-faint);
}

@media (hover: hover) and (pointer: fine) {
  .tp-recent__item:hover {
    border-color: var(--tp-accent);
  }
}

/* 無紀錄提示：「還沒有玩過的紀錄，挑一個開始吧。」 */
.tp-recent__empty {
  margin: 0;
  font-size: var(--tp-fs-caption);
  color: var(--tp-text-faint);
}


/* ============================================================
   觸控裝置加強：coarse pointer 維持 48px 底線，
   kids 層（[data-tp-level="kids"]）互動目標放大至 56px
   ============================================================ */

@media (pointer: coarse) {
  .tp-nav__link,
  .tp-chip,
  .tp-search__input,
  .tp-search__clear,
  .tp-btn,
  .tp-version-row,
  .tp-card__expand,
  .tp-recent__clear {
    min-height: var(--tp-touch-min);
  }

  /* kids 層：主要互動目標一律 56px，幼童更好點。 */
  [data-tp-level="kids"] .tp-nav__link,
  [data-tp-level="kids"] .tp-chip,
  [data-tp-level="kids"] .tp-search__input,
  [data-tp-level="kids"] .tp-search__clear,
  [data-tp-level="kids"] .tp-btn,
  [data-tp-level="kids"] .tp-version-row,
  [data-tp-level="kids"] .tp-card__expand,
  [data-tp-level="kids"] .tp-recent__item,
  [data-tp-level="kids"] .tp-recent__clear {
    min-height: var(--tp-touch-kid);
  }

  [data-tp-level="kids"] .tp-search__clear {
    width: var(--tp-touch-kid);
    height: var(--tp-touch-kid);
  }
}


/* ============================================================
   列印：隱藏裝飾與互動元件，保留內容與卡片
   ============================================================ */

@media print {
  /* 頁首不再吸附；導覽、暈染、藝術圖等純裝飾與互動控制一律隱藏。 */
  .tp-header {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tp-nav,
  .tp-skip-link,
  .tp-hero::before,
  .tp-hero__art,
  .tp-filter,
  .tp-recent,
  .tp-card__expand,
  .tp-empty__action {
    display: none !important;
  }

  /* 卡片去陰影、避免跨頁裁切。 */
  .tp-card {
    box-shadow: none;
    break-inside: avoid;
  }

  .tp-card__versions[hidden] {
    display: none;
  }
}


/* ============================================================
   375px 防溢出自檢（註解，無樣式）
   ------------------------------------------------------------
   本檔遵循契約 §5 的硬性規則，逐條落實位置如下：
   一、box-sizing:border-box 僅於 .tp-page 作用域內宣告（基底段）。
   二、帶文字的 flex／grid 子層皆設 min-width:0（brand、nav、
       hero、filter、card、recent 各容器與欄位）。
   三、標題與描述皆設 overflow-wrap:anywhere（hero 大標與導言、
       卡片標題與簡介、空狀態、recent 標題）。
   四、頁面級元素無超過 100% 的固定寬；hero 藝術 SVG 限制
       max-width:100%；版心左右留白以 clamp 隨視窗縮放。
   五、.tp-recent__list 是全頁唯一允許的區域性橫向捲動；
       其餘區塊（頁首導覽、篩選 chips、頁尾連結）皆以
       flex-wrap 換行，不產生水平捲軸。
   六、所有互動元素 min-height 與 min-width 不小於 48px；
       coarse pointer 下 kids 層提升至 56px（--tp-touch-kid）。
   ============================================================ */