/* ============================================================================
   Cats War 官網技能攻略頁 — skills.css（/skills）
   ----------------------------------------------------------------------------
   只放**這一頁自用**的元件；token、字型、頁首／頁尾／按鈕／FAQ 全部繼承 site.css。
   設計語言與首頁一致：暖棕描邊（--edge）、紙底（--paper／--cream）、
   Baloo 2 標題＋Nunito 正文、rarity 色票對應遊戲內的稀有度顏色。
   由 tools/gen_skills_page.py 產出的 skills.html 消費 —— 改 class 要同步改產生器。
   ========================================================================== */

/* ------------------------------- rarity 色票 -------------------------------
   與遊戲內稀有度顏色一致（白／綠／藍／紫／金）。white 本身太淺，
   當邊框用時會看不到 ⇒ 另外給一個可見的深色變體。 */
:root  {
  --rar-white:      #EBEBF0;
  --rar-white-line: #C9C9D2;
  --rar-green:      #60C878;
  --rar-green-deep: #3E9450;
  --rar-blue:       #4696FF;
  --rar-blue-deep:  #2F6FD0;
  --rar-purple:     #B46EFF;
  --rar-purple-deep:#8348CC;
  --rar-gold:       #FFBE3C;
  --rar-gold-deep:  #D99514;
  /* 統計表的「好／壞」語意色（遊戲語境，非股價） */
  --good: #4E8F3F;
  --bad:  #C0532F;
}

/* ============================== HERO ============================== */
/* 與首頁 .hero 同一片天空，但內容是技能圖示牆 —— 漸層只取上半段，
   底部直接交給草丘過渡帶（hills--hero）。 */
.skills-hero  {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
}
/* 山丘與下一節之間不留 1px 接縫（與 .hills--footer 同一個理由） */
.hills--hero  { margin-bottom: -1px; }
.skills-hero__inner  {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(56px, 6.5vw, 88px) clamp(48px, 5vw, 64px);
}
.skills-hero__copy > * + *  { margin-top: 20px; }

.skills-hero__title  {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--ink);
}
.skills-hero__sub  {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: clamp(16.5px, 0.8vw + 13.4px, 17.5px);
}
.skills-hero__cta  { display: flex; flex-wrap: wrap; gap: 16px; }

/* 四個統計 pill（21 支技能／裝備欄／租用制／實測場次） */
.skills-hero__stats  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skills-hero__stat  {
  background: var(--cream);
  border: 2px solid var(--edge);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--edge);
}

/* 右側技能圖示牆：2×2 編排，每張略旋 ── 與首頁 .hero__art 同一個「相框」語彙 */
.skills-hero__art  {
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--cream);
  border: 3px solid var(--edge);
  border-radius: 30px;
  transform: rotate(1.2deg);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.skills-hero__icon  {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 22px;
  background: var(--paper-grass);
  border: 2px solid var(--line-strong);
  padding: 8%;
}
/* 四張圖各有一點角度與稀有度底色 —— 刻意不对称，避免「貼齊的無趣感」 */
.skills-hero__icon--a  { transform: rotate(-2.4deg); border-color: var(--rar-purple); background: #F6EDFF; }
.skills-hero__icon--b  { transform: rotate(1.8deg);  border-color: var(--rar-gold);   background: #FFF6DF; }
.skills-hero__icon--c  { transform: rotate(2.2deg);  border-color: var(--rar-gold);   background: #FFF6DF; }
.skills-hero__icon--d  { transform: rotate(-1.6deg); border-color: var(--rar-gold);   background: #FFF6DF; }

/* 兩張並排大卡（被動／主動）＋ 兩張表格卡（稀有度／喵幣）＋ 一張寬卡（AI） */
.rules-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
}
.rules-grid--tables  { margin-top: 24px; }

.rules-card  {
  background: var(--cream);
  border: 3px solid var(--line-strong);
  border-radius: 24px;
  padding: clamp(22px, 2.6vw, 30px);
}
.rules-card--passive  { border-color: var(--grass); background: #FBFDF6; }
.rules-card--active   { border-color: var(--blue);  background: #F5FAFF; }
.rules-card--wide  { grid-column: 1 / -1; }

.rules-card__title  {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.6vw + 14px, 24px);
  line-height: 1.25;
  color: var(--ink);
}
.rules-card__desc  { margin: 0 0 16px; color: var(--ink-soft); font-size: 15.5px; }
.rules-card__note  {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* key-value 列（<dl class="kv">）：標籤左、值右，列間細線 */
.kv  { margin: 0; }
.kv__row  {
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
}
.kv__row:last-child  { border-bottom: 0; }
.kv__row dt  { margin: 0; font-weight: 700; color: var(--ink-soft); }
.kv__row dd  { margin: 0; color: var(--ink); }

.field-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
}
.field-card  {
  background: var(--cream);
  border: 2px solid var(--line-soft);
  border-radius: 22px;
  padding: clamp(20px, 2.2vw, 26px);
}
.field-card--wide  { grid-column: 1 / -1; }
.field-card__title  {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.2vw + 12.5px, 20px);
  line-height: 1.3;
  color: var(--ink);
}
.field-card__p  { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.field-card__p:last-child  { margin-bottom: 0; }
.field-card__note  { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); }

/* 流程帶（出兵四步）：pill 之間用箭頭串起來 */
.flow-strip  {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-strip li  {
  display: flex;
  align-items: center;
  background: var(--paper-grass);
  border: 2px solid var(--grass);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.flow-strip li + li  { position: relative; }
.flow-strip li + li::before  {
  content: "→";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: var(--grass-deep);
  background: var(--cream);
  border-radius: 999px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
}

/* ============================== 技能卡 ============================== */
/* 兩欄（卡內容密：底層數值＋實測條＋心得）⇒ 桌機 2 欄、平板 1 欄 */
.skill-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  margin: clamp(36px, 4.5vw, 56px) 0 0;
}

.skill-card  {
  background: var(--cream);
  border: 3px solid var(--line-strong);
  border-radius: 26px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* rarity 邊框：卡的「階級」一眼可辨 */
.skill-card--white   { border-color: var(--rar-white-line); }
.skill-card--green   { border-color: var(--rar-green); }
.skill-card--blue    { border-color: var(--rar-blue); }
.skill-card--purple  { border-color: var(--rar-purple); }
.skill-card--gold    { border-color: var(--rar-gold); }

.skill-card__top  {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.skill-card__icon  {
  display: block;
  width: clamp(76px, 8vw, 96px);
  height: clamp(76px, 8vw, 96px);
  border-radius: 20px;
  background: var(--paper-grass);
  border: 2px solid var(--line-strong);
  padding: 6%;
  flex: none;
}
.skill-card--white  .skill-card__icon  { border-color: var(--rar-white-line); }
.skill-card--green  .skill-card__icon  { border-color: var(--rar-green); background: #F1FAEC; }
.skill-card--blue   .skill-card__icon  { border-color: var(--rar-blue);  background: #EFF6FF; }
.skill-card--purple .skill-card__icon  { border-color: var(--rar-purple);background: #F8F0FF; }
.skill-card--gold   .skill-card__icon  { border-color: var(--rar-gold);  background: #FFF8E6; }
.skill-card__ident  { min-width: 0; }
.skill-card__idline  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.skill-card__price  {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--edge);
  font-variant-numeric: tabular-nums;
}
.skill-card__coin  { width: 15px; height: 15px; flex: none; display: block; }
.skill-card__meta  {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-grass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
}
.skill-card__name  {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.4vw + 13px, 22px);
  line-height: 1.25;
  color: var(--ink);
}
.skill-card__desc  { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* rarity chip（小藥丸） */
.chip  {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1.5px solid;
}
.chip--white   { background: #F4F4F8; border-color: var(--rar-white-line); color: #6E6E78; }
.chip--green   { background: #E4F6E7; border-color: var(--rar-green);      color: var(--rar-green-deep); }
.chip--blue    { background: #E3EFFF; border-color: var(--rar-blue);       color: var(--rar-blue-deep); }
.chip--purple  { background: #F1E4FF; border-color: var(--rar-purple);     color: var(--rar-purple-deep); }
.chip--gold    { background: #FFF1D2; border-color: var(--rar-gold);       color: var(--rar-gold-deep); }

/* 卡本體：底層數值盒 ＋ 心得（實測盒已移除 ⇒ 單欄即可） */
.skill-card__boxes  { display: grid; gap: 16px; }

/* UNDER THE HOOD：label / value 兩列細線表 */
.hood  {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
}
.hood__head,  .notes__head  {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--ink-mute);
}
.hood__row  {
  display: grid;
  grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.hood__row:last-child  { border-bottom: 0; }
.hood__k  { margin: 0; font-weight: 700; color: var(--ink-soft); }
.hood__v  { margin: 0; color: var(--ink); }


/* FIELD NOTES / COMBOS */
.notes ul  {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notes li  {
  position: relative;
  padding: 4px 0 4px 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
}
/* 腳印 bullet —— 與頁尾 paw-trail 同一個意象 */
.notes li::before  {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--grass);
  box-shadow: 3px -4px 0 -1px var(--grass), -3px -4px 0 -1px var(--grass);
}




/* FAQ 之後的收尾 CTA */
.skills-cta  {
  margin-top: clamp(36px, 4.5vw, 56px);
  text-align: center;
}

/* ============================== 收尾 CTA ============================== */
/* 主動技能看完就直接接下載動線：左邊文案＋按鈕，右邊官網二維碼。
   二維碼是「桌面看網頁、手機掃了帶走」的唯一橋樑 ⇒ 不能只在窄屏出現。 */
.skills-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.skills-cta__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2vw + 18px, 38px);
  line-height: 1.2;
  color: var(--ink);
}
.skills-cta__desc {
  margin: 0 0 22px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.75;
}
.skills-cta__qr {
  margin: 0;
  text-align: center;
}
.skills-cta__qr img {
  width: clamp(132px, 13vw, 168px);
  height: auto;
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-radius: 16px;
  padding: 8px;
}
.skills-cta__qr figcaption {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ============================== 響應式 ============================== */
/* ── ① 寬度：格線重排 ─────────────────────────────────────────────── */
@media (max-width: 1080px)  {
}

@media (max-width: 1000px)  {
  .skills-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .skills-hero__art { max-width: 520px; margin-inline: auto; transform: none; }
  .skills-hero__sub { max-width: none; }
}

@media (max-width: 900px)  {
  .skill-grid { grid-template-columns: minmax(0, 1fr); }
  /* 卡內「數值＋實測」改上下堆疊 —— 兩欄在 390px 都會擠成一條縫 */
  .skill-card__boxes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px)  {
  .skills-cta__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .skills-cta__desc { margin-inline: auto; }
  .skills-cta__qr { order: -1; }
}

@media (max-width: 640px)  {
  .hood__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .skill-card { padding: 20px; border-radius: 22px; }
  .skills-hero__stats { gap: 8px; }
  .skills-hero__stat { font-size: 12.5px; padding: 6px 12px; }
  .flow-strip li { font-size: 13.5px; padding: 8px 12px; }
}

/* ── ② 連續縮放 ───────────────────────────────────────────────────── */
.rules-card__title   { font-size: clamp(19px, 1.4vw + 13.5px, 24px); }
.rules-card__desc    { font-size: clamp(14.5px, 0.6vw + 12.2px, 15.5px); }
.field-card__title   { font-size: clamp(16.5px, 1.0vw + 12.4px, 20px); }
.field-card__p       { font-size: clamp(14.5px, 0.6vw + 12.2px, 15px); }
.skill-card__name    { font-size: clamp(18px, 1.2vw + 13px, 22px); }
.skill-card__desc    { font-size: clamp(14.5px, 0.6vw + 12.2px, 15px); }
.hood__row           { font-size: clamp(13.5px, 0.4vw + 12.2px, 14px); }
.notes li            { font-size: clamp(13.5px, 0.5vw + 12px, 14.5px); }

/* ── ③ 觸控：hover 會黏住 ⇒ 只留底色回饋 ─────────────────────────── */
@media (hover: none)  {
  .data-table tbody tr:hover { background: transparent; }
}

/* ── ④ 減少動態 ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce)  {
  .skills-hero__icon, .skills-hero__art { transform: none; }
}