/* ==========================================================================
   tp-portal-v2.css — 入口頁（/kids/apps/、/junior/、/more/）對 K1 元件的整合補充（WP-D2a）

   K1 三支 CSS（tp-tokens-v2、tp-components-v2、tp-shell-v2）原樣出貨、不改 Kimi 的檔；
   凡是「頁面整合」才需要、K1 沒有涵蓋的規則，全部放在本檔。
   載入順序固定：tokens → components → 本檔。只用 v2 語意層與形狀層變數，
   不寫 primitive 色碼，所以三個年齡層與深色模式自動生效。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 品牌連結觸控高度 ≥ 48px
   K1 的 .tp-brand 只有 40px 方印高，量測為 169×40。補上 min-height，
   圓角與聚焦環跟著控制項圓角走。
   -------------------------------------------------------------------------- */
.tp-brand {
  min-height: var(--tp-touch-min);
  border-radius: var(--tp-radius-ctl);
}

/* --------------------------------------------------------------------------
   2. 區塊間距（K1 範本用行內 style，這裡改成 class）
   -------------------------------------------------------------------------- */
.tp-portal-block {
  margin-block-end: var(--tp-space-10);
}

/* --------------------------------------------------------------------------
   3. 卡片圖示：Kimi 的 App／科目插圖自帶紙底圓角外框，
   卡片圖示座改成透明，避免「框中框」；尺寸沿用 K1 的 56×56。
   -------------------------------------------------------------------------- */
.tp-card__icon--art {
  background: transparent;
  color: inherit;
}

.tp-card__icon--art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 類型小圖示（Kimi kindIcon，currentColor 線稿）：16px 容器，
   SVG 本身帶 width:100% 行內樣式，由容器決定實際大小。 */
.tp-card__kind-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.tp-card__kind-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   4. 群組卡版本列：版本徽章＋標題＋年級／測試版說明
   -------------------------------------------------------------------------- */
.tp-version-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-1) var(--tp-space-2);
  min-width: 0;
  padding-block: var(--tp-space-2);
}

.tp-version-row__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tp-version-row__meta {
  font-size: var(--tp-fs-caption);
  font-weight: var(--tp-fw-regular);
  color: var(--tp-text-faint);
}

/* --------------------------------------------------------------------------
   5. 最近玩過：K1 的 <time> 位置放「所屬區名」（本站 tp_recent 記的是 section）
   -------------------------------------------------------------------------- */
.tp-recent__meta {
  font-size: var(--tp-fs-caption);
  font-weight: var(--tp-fw-regular);
  color: var(--tp-text-faint);
}

/* --------------------------------------------------------------------------
   6. 搜尋框：type="search" 在 WebKit 會自帶清除叉，和 K1 的 .tp-search__clear 重複，關掉原生的
   -------------------------------------------------------------------------- */
.tp-search__input::-webkit-search-cancel-button,
.tp-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* --------------------------------------------------------------------------
   7. 主視覺插圖：深色模式
   Kimi 手繪插圖用固定色票（墨線 #3B352C），直接放在深色底上墨線會糊掉。
   深色時給插圖一塊紙色底板（圓角跟卡片），亮色不變。
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .tp-hero__art:not([hidden]) {
    padding: var(--tp-space-3);
    border-radius: var(--tp-radius-card);
    background: var(--tp-paper);
  }
}

/* --------------------------------------------------------------------------
   8. 主視覺標題斷行（D2b）
   「國中生！」「小學生！」「我想變強」這類詞不在中間斷開：整段 CJK 視為不可斷，
   只在空白處（TooPower 之後）換行。K1 的 overflow-wrap:anywhere 保留，
   極窄螢幕整段放不下時才會強制折行，不會撐破版面。
   -------------------------------------------------------------------------- */
.tp-hero__title {
  word-break: keep-all;
}