/* ===========================================================================
   活動策劃系統 —— 版面樣式
   ---------------------------------------------------------------------------
   三個原則：
   1. 看得快：字級與粗細有明確層次，一眼分得出標題、內容、附註
   2. 不吵：強調色只用在「可以按的東西」和「需要注意的數字」，其餘一律灰階
   3. 有秩序：間距用同一套刻度，不隨手寫；表格數字靠右並等寬對齊
   =========================================================================== */

/* --- 設計刻度 ------------------------------------------------------------ */
:root {
  /* 間距：所有 margin/padding 都從這裡取，版面才會有節奏 */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;

  --r-sm: 9px;  --r: 14px;  --r-lg: 20px;

  /* 文字：三層灰階就夠了，再多就是混亂 */
  --ink:    #1b1a17;   /* 標題與主要內容 */
  --ink-2:  #514d46;   /* 次要內容 */
  --ink-3:  #8a847a;   /* 標籤、附註、單位 */

  --bg:       #f7f4ee;   /* 米白，比純白暖，長時間看比較不刺眼 */
  --surface:  #ffffff;
  --surface-2:#f1ede4;   /* 表頭、新增列這類「稍微退後」的底色 */
  --line:     #e5dfd2;   /* 髮絲線 */
  --line-2:   #d2cabb;   /* 需要看得清楚的分隔 */

  /* 深色的頁首與抽屜 —— 整個畫面的錨點 */
  --shell:      #2a2622;
  --shell-2:    #3a352f;
  --shell-ink:  #f4efe6;
  --shell-ink-2:#a9a196;

  --accent:      #c05a2e;   /* 陶土橘，比原本更飽和 */
  --accent-ink:  #9a4423;
  --accent-soft: #fbeee6;

  --ok:     #2d7a52;
  --warn:   #a9791b;
  --danger: #b83b33;

  /* 陰影分兩階：貼在頁面上的、浮起來的 */
  --shadow-1: 0 1px 2px rgba(43, 36, 28, .05), 0 2px 6px rgba(43, 36, 28, .04);
  --shadow-2: 0 8px 28px rgba(43, 36, 28, .12), 0 2px 6px rgba(43, 36, 28, .06);

  /* --- 字型也是主題的一部分 ---
     內文、標題、數字各一組；小標籤的大小寫與字距也可以換。
     中文網頁字型動輒好幾 MB，營地網路撐不住，所以一律用系統既有的字體，
     靠「挑不同的系統字」＋字重字距來做出差異。 */
  --font-body: system-ui, -apple-system, "PingFang TC", "Noto Sans TC",
               "Microsoft JhengHei", sans-serif;
  --font-head: var(--font-body);
  --font-num:  var(--font-body);

  --w-head:    800;      /* 大標題字重 */
  --w-h2:      750;
  --tr-head:   -.035em;  /* 大標題字距 */
  --tr-h2:     -.02em;

  --label-tr:  .04em;    /* 表頭、欄位標籤的字距 */
  --label-case: uppercase;

  --line-body: 1.7;
  --size-body: 16px;
}

/* 只有沒指定佈景主題時，才跟著系統的深色模式走。
   選了主題就以主題為準 —— 海盜營該是暗的就一直是暗的。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink:    #f0ece4;
    --ink-2:  #b8b2a7;
    --ink-3:  #8b857b;

    --bg:       #17150f;
    --surface:  #221f19;
    --surface-2:#2c2820;
    --line:     #38332a;
    --line-2:   #4c4539;

    --shell:      #100f0b;
    --shell-2:    #201d17;
    --shell-ink:  #f0ece4;
    --shell-ink-2:#8b857b;

    --accent:      #e08a58;
    --accent-ink:  #eda274;
    --accent-soft: #372520;

    --ok:     #6cc08a;
    --warn:   #d3b055;
    --danger: #e07b72;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  }
}

/* ===========================================================================
   佈景主題
   ---------------------------------------------------------------------------
   每場活動可以選一套 —— 海盜營用神祕、太空營用科技、兒童營用可愛。
   每一套都是完整的一組值（顏色、圓角、陰影、字型），不是只換色相；
   換主題時整個介面的個性都會變。
   =========================================================================== */

/* --- 暖木（淺色）：跟預設同一組值，但明確指定，不受系統深色模式影響 ---
   「跟隨系統」是沒有 data-theme 的狀態；選了這一套就固定是淺色。      */
[data-theme="warm"] {
  --ink: #1b1a17;  --ink-2: #514d46;  --ink-3: #8a847a;
  --bg: #f7f4ee;   --surface: #ffffff; --surface-2: #f1ede4;
  --line: #e5dfd2; --line-2: #d2cabb;
  --shell: #2a2622; --shell-2: #3a352f; --shell-ink: #f4efe6; --shell-ink-2: #a9a196;
  --accent: #c05a2e; --accent-ink: #9a4423; --accent-soft: #fbeee6;
  --ok: #2d7a52; --warn: #a9791b; --danger: #b83b33;
  --shadow-1: 0 1px 2px rgba(43, 36, 28, .05), 0 2px 6px rgba(43, 36, 28, .04);
  --shadow-2: 0 8px 28px rgba(43, 36, 28, .12), 0 2px 6px rgba(43, 36, 28, .06);
}

/* --- 暖木（深色）：同一套個性的夜間版，固定深色 --- */
[data-theme="warmdark"] {
  --ink: #f0ece4;  --ink-2: #b8b2a7;  --ink-3: #8b857b;
  --bg: #17150f;   --surface: #221f19; --surface-2: #2c2820;
  --line: #38332a; --line-2: #4c4539;
  --shell: #100f0b; --shell-2: #201d17; --shell-ink: #f0ece4; --shell-ink-2: #8b857b;
  --accent: #e08a58; --accent-ink: #eda274; --accent-soft: #372520;
  --ok: #6cc08a; --warn: #d3b055; --danger: #e07b72;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
}

/* --- 科技：近黑底 + 青藍霓虹。等寬字、銳角、全大寫寬字距的標籤 --- */
[data-theme="tech"] {
  --ink: #e6f1f7;  --ink-2: #9fb4c2;  --ink-3: #6b8496;
  --bg: #080c11;   --surface: #101720; --surface-2: #16202c;
  --line: #1e2c3a; --line-2: #2c4054;
  --shell: #050809; --shell-2: #0d151d; --shell-ink: #d8ecf5; --shell-ink-2: #6b8496;
  --accent: #22d3ee; --accent-ink: #67e8f9; --accent-soft: #0d2b33;
  --ok: #34d399; --warn: #fbbf24; --danger: #fb7185;
  --r-sm: 3px; --r: 5px; --r-lg: 7px;
  --shadow-1: 0 0 0 1px rgba(34, 211, 238, .07);
  --shadow-2: 0 0 30px rgba(34, 211, 238, .18), 0 8px 24px rgba(0, 0, 0, .6);

  --font-head: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --font-num:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --w-head: 700; --w-h2: 700;
  --tr-head: .02em; --tr-h2: .04em;
  --label-tr: .16em; --label-case: uppercase;
  --line-body: 1.65; --size-body: 15.5px;
}
/* 淡淡的網格底 —— 像儀表板的背景 */
[data-theme="tech"] body {
  background-image:
    linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-attachment: fixed;
}
/* 面板左上角的角標 */
[data-theme="tech"] .panel { position: relative; }
[data-theme="tech"] .panel::after {
  content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px;
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent);
  opacity: .5; border-radius: 3px 0 0 0;
}
[data-theme="tech"] button { letter-spacing: .06em; }
[data-theme="tech"] .groups { border-radius: 4px; }
[data-theme="tech"] .groups button { border-radius: 3px; }
[data-theme="tech"] #menu-btn { border-radius: 3px; }

/* --- 神祕：深紫黑 + 金。全襯線（含內文）、寬鬆行距、金色細框 --- */
[data-theme="mystic"] {
  --ink: #efe7d8;  --ink-2: #bdb098;  --ink-3: #8a7d68;
  --bg: #120f19;   --surface: #1b1626; --surface-2: #241d31;
  --line: #2e2540; --line-2: #443655;
  --shell: #0c0912; --shell-2: #191225; --shell-ink: #f0e6d2; --shell-ink-2: #8a7d68;
  --accent: #d4af37; --accent-ink: #e8c860; --accent-soft: #2a2113;
  --ok: #7bc49a; --warn: #d9b04a; --danger: #d97066;
  --r-sm: 5px; --r: 8px; --r-lg: 12px;
  --shadow-1: 0 2px 12px rgba(0, 0, 0, .5);
  --shadow-2: 0 14px 44px rgba(0, 0, 0, .72), 0 0 26px rgba(212, 175, 55, .12);

  --font-body: Georgia, "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --font-head: Georgia, "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 700; --w-h2: 700;
  --tr-head: 0; --tr-h2: .01em;
  --label-tr: .2em; --label-case: uppercase;
  --line-body: 1.85; --size-body: 16.5px;
}
/* 四周一圈暗角，像燭光下的羊皮紙 */
[data-theme="mystic"] body {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, .07), transparent 60%),
    radial-gradient(140% 100% at 50% 120%, rgba(0, 0, 0, .55), transparent 55%);
  background-attachment: fixed;
}
/* 面板內側一條金線 */
[data-theme="mystic"] .panel, [data-theme="mystic"] .table-wrap {
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(212, 175, 55, .1);
}

/* --- 可愛：奶油底 + 桃粉。圓體、超大圓角、粗邊框、實心位移陰影 --- */
[data-theme="cute"] {
  --ink: #4a3742;  --ink-2: #7d6570;  --ink-3: #a89099;
  --bg: #fff6f4;   --surface: #ffffff; --surface-2: #ffeef0;
  --line: #ffd9e0; --line-2: #ffb9c9;
  --shell: #ff8fab; --shell-2: #ff7aa0; --shell-ink: #ffffff; --shell-ink-2: #ffe0e9;
  --accent: #ff5c8a; --accent-ink: #e63e70; --accent-soft: #ffe9ef;
  --ok: #4cc98a; --warn: #ffb347; --danger: #ff5c5c;
  --r-sm: 14px; --r: 22px; --r-lg: 30px;
  --shadow-1: 0 3px 0 var(--line-2);
  --shadow-2: 0 6px 0 var(--line-2), 0 14px 30px rgba(255, 92, 138, .2);

  --font-body: "Yuanti TC", "Yuanti SC", "YuPearl", "Comic Sans MS",
               system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-head: var(--font-body);
  --font-num:  var(--font-body);
  --w-head: 800; --w-h2: 700;
  --tr-head: -.005em; --tr-h2: 0;
  --label-tr: .02em; --label-case: none;
  --line-body: 1.8; --size-body: 16.5px;
}
/* 粗邊框是可愛風的骨架 —— 邊細了就變回一般的介面 */
[data-theme="cute"] button,
[data-theme="cute"] .panel, [data-theme="cute"] .table-wrap,
[data-theme="cute"] .card, [data-theme="cute"] .summary,
[data-theme="cute"] .guide, [data-theme="cute"] .intro,
[data-theme="cute"] .themecard, [data-theme="cute"] .typecard { border-width: 2px; }
[data-theme="cute"] button { font-weight: 700; }
[data-theme="cute"] .card:hover { transform: translateY(-4px) rotate(-.4deg); }
[data-theme="cute"] td { border-bottom-style: dashed; }
[data-theme="cute"] .field input, [data-theme="cute"] .field select,
[data-theme="cute"] .field textarea { border-width: 2px; }

/* --- 山林：米底 + 深綠。標題用襯線，像野外圖鑑 --- */
[data-theme="forest"] {
  --ink: #1d2b22;  --ink-2: #4a5b50;  --ink-3: #7d8a80;
  --bg: #f3f1e7;   --surface: #fbfaf4; --surface-2: #e9e7d9;
  --line: #d9d6c4; --line-2: #c2bfa9;
  --shell: #22321f; --shell-2: #2e412a; --shell-ink: #eef0e4; --shell-ink-2: #9aa893;
  --accent: #3f7d4f; --accent-ink: #2f6a3e; --accent-soft: #e4eee2;
  --ok: #3f7d4f; --warn: #a37a1e; --danger: #a9453c;
  --r-sm: 7px; --r: 11px; --r-lg: 16px;

  --font-head: "Iowan Old Style", Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 700; --w-h2: 700;
  --tr-head: -.015em; --tr-h2: 0;
  --label-tr: .1em; --label-case: uppercase;
  --line-body: 1.75;
}
/* 極細的斜紋，像紙的纖維 */
[data-theme="forest"] body {
  background-image: repeating-linear-gradient(45deg,
    rgba(45, 70, 45, .018) 0 2px, transparent 2px 6px);
  background-attachment: fixed;
}

/* --- 海洋：淺藍白 + 深海藍。輕字重、寬行距，很透氣 --- */
[data-theme="ocean"] {
  --ink: #10242e;  --ink-2: #3f5865;  --ink-3: #7593a1;
  --bg: #eef6f9;   --surface: #ffffff; --surface-2: #dfeef4;
  --line: #cbe2ea; --line-2: #a8ccd9;
  --shell: #0d3547; --shell-2: #14465c; --shell-ink: #e8f6fb; --shell-ink-2: #8fb6c6;
  --accent: #0d7ea6; --accent-ink: #096785; --accent-soft: #dcf0f7;
  --ok: #10937a; --warn: #b07d15; --danger: #c04a45;
  --r-sm: 10px; --r: 18px; --r-lg: 26px;

  /* 幾何無襯線、輕字重 —— 跟預設那套「厚實」的感覺完全相反 */
  --font-head: "Avenir Next", "Segoe UI Variable Display", "Segoe UI",
               "Helvetica Neue", system-ui, "PingFang TC", sans-serif;
  --font-num:  "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --w-head: 600; --w-h2: 600;
  --tr-head: -.01em; --tr-h2: 0;
  --label-tr: .12em; --label-case: uppercase;
  --line-body: 1.85; --size-body: 16.5px;
}
/* 水面般的漸層 */
[data-theme="ocean"] body {
  background-image:
    radial-gradient(90% 50% at 50% 0%, rgba(13, 126, 166, .1), transparent 70%),
    linear-gradient(180deg, rgba(168, 204, 217, .18), transparent 40%);
  background-attachment: fixed;
}
[data-theme="ocean"] .panel, [data-theme="ocean"] .card {
  background: linear-gradient(170deg, var(--surface), color-mix(in srgb, var(--surface-2) 45%, var(--surface)));
}

/* --- 賽博龐克：黑紫底 + 洋紅霓虹。粗黑標題、掃描線、硬邊 --- */
[data-theme="cyber"] {
  --ink: #f4ecff;  --ink-2: #bcaadb;  --ink-3: #806f9c;
  --bg: #0a0612;   --surface: #160d24; --surface-2: #201233;
  --line: #301b49; --line-2: #4a2a6e;
  --shell: #06030c; --shell-2: #170d26; --shell-ink: #f4ecff; --shell-ink-2: #806f9c;
  --accent: #ff2e88; --accent-ink: #ff70b0; --accent-soft: #2d0a1d;
  --ok: #39ff9b; --warn: #ffd93d; --danger: #ff4d6d;
  --r-sm: 2px; --r: 3px; --r-lg: 4px;
  --shadow-1: 0 0 0 1px rgba(255, 46, 136, .1);
  --shadow-2: 0 0 34px rgba(255, 46, 136, .25), 0 0 12px rgba(57, 255, 155, .12);

  --font-head: "Arial Black", "Segoe UI Black", "Helvetica Neue", system-ui,
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-num:  ui-monospace, "Cascadia Mono", Consolas, monospace;
  --w-head: 900; --w-h2: 800;
  --tr-head: .03em; --tr-h2: .05em;
  --label-tr: .24em; --label-case: uppercase;
  --line-body: 1.6; --size-body: 15.5px;
}
/* 橫向掃描線 */
[data-theme="cyber"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    radial-gradient(90% 55% at 50% 0%, rgba(255, 46, 136, .16), transparent 65%),
    radial-gradient(70% 45% at 90% 100%, rgba(57, 255, 155, .1), transparent 60%);
  background-attachment: fixed;
}
[data-theme="cyber"] h1 { text-shadow: 0 0 18px rgba(255, 46, 136, .45); }
[data-theme="cyber"] button { letter-spacing: .08em; }
[data-theme="cyber"] .table-wrap, [data-theme="cyber"] .panel {
  box-shadow: var(--shadow-1), inset 0 0 24px rgba(255, 46, 136, .04);
}

/* --- 復古報紙：泛黃紙 + 黑墨。全襯線、直角、沒有陰影、細黑線 --- */
[data-theme="paper"] {
  --ink: #14110d;  --ink-2: #3b352c;  --ink-3: #6d6558;
  --bg: #efe9dc;   --surface: #faf6ea; --surface-2: #e4dccb;
  --line: #bdb3a0; --line-2: #3b352c;
  --shell: #16130e; --shell-2: #241f17; --shell-ink: #f5f0e2; --shell-ink-2: #9a9080;
  --accent: #8c2f24; --accent-ink: #6d2119; --accent-soft: #ece2cf;
  --ok: #2f6b46; --warn: #8a6a15; --danger: #8c2f24;
  --r-sm: 0px; --r: 0px; --r-lg: 0px;
  --shadow-1: none;
  --shadow-2: 0 3px 0 rgba(59, 53, 44, .18);

  --font-body: Georgia, "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --font-head: Georgia, "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 800; --w-h2: 700;
  --tr-head: -.02em; --tr-h2: .04em;
  --label-tr: .18em; --label-case: uppercase;
  --line-body: 1.62; --size-body: 16.5px;
}
/* 極細網點，像印刷的粒子 */
[data-theme="paper"] body {
  background-image: radial-gradient(rgba(59, 53, 44, .07) .5px, transparent .5px);
  background-size: 3px 3px;
  background-attachment: fixed;
}
[data-theme="paper"] button { border-radius: 0; border-color: var(--line-2); }
[data-theme="paper"] #menu-btn, [data-theme="paper"] .groups,
[data-theme="paper"] .groups button,
[data-theme="paper"] .pill { border-radius: 0; }
/* 報紙的雙線分隔 */
[data-theme="paper"] th { border-bottom: 3px double var(--line-2); }
[data-theme="paper"] .panel, [data-theme="paper"] .table-wrap,
[data-theme="paper"] .card, [data-theme="paper"] .summary { border-color: var(--line-2); }
/* 聳動標題現在固定是簡短一句、保證一行，用回原本大標題的字級即可，
   不用再縮小。 */
[data-theme="paper"] h1 {
  border-bottom: 3px double var(--line-2); padding-bottom: var(--s2);
}

/* --- 聖誕：深綠夜 + 紅金。襯線標題、雪點、圓潤 --- */
[data-theme="xmas"] {
  --ink: #f6f0e2;  --ink-2: #cbc0a9;  --ink-3: #94897a;
  --bg: #0d2017;   --surface: #143022; --surface-2: #1b3d2c;
  --line: #245038; --line-2: #346c4c;
  --shell: #07160e; --shell-2: #123024; --shell-ink: #fff8e7; --shell-ink-2: #94897a;
  --accent: #e0323c; --accent-ink: #f05a63; --accent-soft: #33131a;
  --ok: #5ec98a; --warn: #f0c04a; --danger: #f05a63;
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(240, 192, 74, .12);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 700; --w-h2: 700;
  --tr-head: -.01em; --tr-h2: .02em;
  --label-tr: .14em; --label-case: uppercase;
  --line-body: 1.78; --size-body: 16.5px;
}
/* 落雪 + 紅綠相間的底色（原本背景幾乎全是深綠，紅色只在強調色上，
   加一層很淡的紅綠斜紋，底色本身就有聖誕的紅綠感） */
[data-theme="xmas"] body {
  background-image:
    radial-gradient(rgba(255, 255, 255, .16) 1.1px, transparent 1.2px),
    radial-gradient(rgba(255, 255, 255, .1) .8px, transparent .9px),
    repeating-linear-gradient(45deg,
      rgba(224, 50, 60, .07) 0 22px, rgba(94, 201, 138, .06) 22px 44px),
    radial-gradient(120% 70% at 50% 0%, rgba(240, 192, 74, .09), transparent 65%);
  background-size: 130px 130px, 70px 70px, auto, auto;
  background-position: 0 0, 40px 30px, 0 0, 0 0;
  background-attachment: fixed;
}
/* 面板上緣一條金線 */
[data-theme="xmas"] .panel {
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(240, 192, 74, .22);
}
/* 標題區右下角一棵聖誕樹，樹上掛著會閃的燈—— 燈不是只掛在最上面的頁首，
   樹本身也纏著一整圈。 */
[data-theme="xmas"] .camphero { position: relative; overflow: hidden; }
[data-theme="xmas"] .camphero::after {
  content: ""; position: absolute; inset: auto 24px 0 auto; width: 90px; height: 96px;
  pointer-events: none;
  background:
    /* 樹幹 */
    linear-gradient(#4a3120, #4a3120) 50% 100% / 10px 14px no-repeat,
    /* 三層樹冠 */
    conic-gradient(from 180deg at 50% 50%, transparent 25%, #1f5a3a 25% 75%, transparent 75%) 50% 20% / 56px 40px no-repeat,
    conic-gradient(from 180deg at 50% 50%, transparent 25%, #256b45 25% 75%, transparent 75%) 50% 44% / 72px 46px no-repeat,
    conic-gradient(from 180deg at 50% 50%, transparent 25%, #2c7d50 25% 75%, transparent 75%) 50% 70% / 90px 52px no-repeat,
    /* 樹頂的星星 */
    radial-gradient(circle, #f0c04a 0 4px, transparent 4.5px) 50% 8% / 10px 10px no-repeat,
    /* 一整圈燈泡，纏在三層樹冠上 */
    radial-gradient(circle at 50% 50%, #f0c04a 2px, transparent 2.4px) 0 22% / 16px 10px,
    radial-gradient(circle at 50% 50%, #f05a63 2px, transparent 2.4px) 8px 46% / 16px 10px,
    radial-gradient(circle at 50% 50%, #5ec98a 2px, transparent 2.4px) 0 70% / 16px 10px;
  animation: twinkle 3.2s steps(2) infinite;
}

/* --- 牛皮紙：中深的牛皮底、墨綠與鍛鐵黑。像野外手帳 ------------------- */
[data-theme="kraft"] {
  --ink: #2b2118;  --ink-2: #4f4133;  --ink-3: #756550;
  --bg: #b39a76;   --surface: #c9b493; --surface-2: #bda684;
  --line: #a08a68; --line-2: #8a7455;
  --shell: #3a2e20; --shell-2: #4c3d2b; --shell-ink: #f0e6d2; --shell-ink-2: #b3a189;
  --accent: #2f6b4f; --accent-ink: #1f4d38; --accent-soft: #d3ddcb;
  --ok: #2f6b4f; --warn: #8a5a15; --danger: #9c3527;
  --r-sm: 3px; --r: 6px; --r-lg: 9px;
  --shadow-1: 0 1px 2px rgba(58, 44, 28, .16);
  --shadow-2: 0 10px 26px rgba(58, 44, 28, .3), 0 2px 5px rgba(58, 44, 28, .2);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  ui-monospace, "Cascadia Mono", Consolas, monospace;
  --w-head: 700; --w-h2: 700;
  --tr-head: -.005em; --tr-h2: .01em;
  --label-tr: .12em; --label-case: uppercase;
  --line-body: 1.72; --size-body: 16px;
}
/* 紙纖維：兩組極細的交叉線，加一圈壓暗的邊 */
/* 三道經典的牛皮紙摺痕：每道都是一條亮邊配一條暗邊，模擬紙被摺過
   之後光線在摺線兩側分別反光與陷進陰影的樣子。角度、位置都刻意不對齊，
   看起來才像真的被摺過，不是印上去的花紋。 */
[data-theme="kraft"] body {
  background-image:
    linear-gradient(97deg,
      transparent 0 18%, rgba(255, 250, 235, .16) 18% 18.4%,
      rgba(58, 44, 28, .16) 18.4% 18.8%, transparent 18.8% 100%),
    linear-gradient(15deg,
      transparent 0 46%, rgba(58, 44, 28, .14) 46% 46.5%,
      rgba(255, 250, 235, .13) 46.5% 47%, transparent 47% 100%),
    linear-gradient(125deg,
      transparent 0 74%, rgba(255, 250, 235, .14) 74% 74.4%,
      rgba(58, 44, 28, .15) 74.4% 74.9%, transparent 74.9% 100%),
    repeating-linear-gradient(52deg, rgba(90, 68, 40, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-38deg, rgba(90, 68, 40, .04) 0 1px, transparent 1px 6px),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(58, 44, 28, .18));
  background-attachment: fixed;
}
/* 面板上緣一排針腳，像縫在紙上的口袋 */
[data-theme="kraft"] .panel { border-top: 2px dashed rgba(58, 44, 28, .22); }

/* --- 苔綠：中調橄欖綠、樹皮棕與米白。自然、不抬眼 --------------------- */
[data-theme="moss"] {
  --ink: #1e2517;  --ink-2: #3c4630;  --ink-3: #5d6a4e;
  --bg: #93a37c;   --surface: #aab993; --surface-2: #9fae88;
  --line: #82936b; --line-2: #6d7e57;
  --shell: #2c3524; --shell-2: #3d4832; --shell-ink: #eef0e4; --shell-ink-2: #a8b691;
  --accent: #7a4a2b; --accent-ink: #5e3820; --accent-soft: #ddd3bd;
  --ok: #2f6b3f; --warn: #7d6110; --danger: #8c3227;
  --r-sm: 8px; --r: 14px; --r-lg: 20px;
  --shadow-1: 0 1px 3px rgba(30, 37, 23, .14);
  --shadow-2: 0 12px 30px rgba(30, 37, 23, .26), 0 2px 6px rgba(30, 37, 23, .16);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  var(--font-body);
  --w-head: 700; --w-h2: 650;
  --tr-head: -.015em; --tr-h2: 0;
  --label-tr: .08em; --label-case: none;
  --line-body: 1.8; --size-body: 16.5px;
}
/* 樹蔭下的斑駁光點 */
[data-theme="moss"] body {
  background-image:
    radial-gradient(closest-side at 18% 12%, rgba(214, 224, 186, .3), transparent),
    radial-gradient(closest-side at 76% 34%, rgba(200, 214, 168, .24), transparent),
    radial-gradient(closest-side at 42% 78%, rgba(120, 138, 96, .28), transparent),
    radial-gradient(closest-side at 88% 88%, rgba(214, 224, 186, .2), transparent);
  background-size: 46% 40%, 38% 34%, 52% 44%, 34% 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* --- 黃昏：暮紫轉暖橘的天空。比深色柔和、比淺色有氣氛 ----------------- */
[data-theme="dusk"] {
  --ink: #fdf3e7;  --ink-2: #e6d4c4;  --ink-3: #c2a68e;
  /* 原本偏藍紫（#6b5570 那組），黃橘的份量太少 —— 整體往暖橘挪，
     紫色只留在最上面那一點點天色，不再是整套主題的底色。 */
  --bg: #7a5750;   --surface: #8a6154; --surface-2: #7f584c;
  --line: #97695a; --line-2: #ac7c62;
  --shell: #33283a; --shell-2: #46374c; --shell-ink: #ffe7cf; --shell-ink-2: #d3b190;
  --accent: #f2924f; --accent-ink: #ffb377; --accent-soft: #5c4232;
  --ok: #7ac89a; --warn: #f0c46a; --danger: #ff9086;
  --r-sm: 10px; --r: 16px; --r-lg: 24px;
  --shadow-1: 0 2px 8px rgba(38, 24, 20, .3);
  --shadow-2: 0 16px 44px rgba(38, 24, 20, .5), 0 0 30px rgba(242, 146, 79, .12);

  --font-head: var(--font-body);
  --font-num:  var(--font-body);
  --w-head: 300; --w-h2: 400;
  --tr-head: -.03em; --tr-h2: -.01em;
  --label-tr: .16em; --label-case: uppercase;
  --line-body: 1.85; --size-body: 16.5px;
}
/* 地平線：紫只留在最上面一小段天空，中段是大片的金黃到暖橘，
   下面貼近地面的地方最濃 —— 黃昏該有的顏色是黃橘，不是通篇紫。 */
[data-theme="dusk"] body {
  background-image:
    linear-gradient(to bottom,
      rgba(58, 42, 62, .38) 0%,
      transparent 30%,
      rgba(240, 196, 106, .16) 55%,
      rgba(242, 146, 79, .2) 78%,
      rgba(255, 176, 106, .3) 100%);
  background-attachment: fixed;
}
/* 大標題帶一點暮光 */
[data-theme="dusk"] .camphero h1 { text-shadow: 0 2px 18px rgba(255, 196, 130, .3); }

/* --- 球場：木地板、白線、記分板黑。大數字是主角 ----------------------- */
[data-theme="court"] {
  --ink: #1a1410;  --ink-2: #3d2f22;  --ink-3: #6b5540;
  --bg: #bd8f5f;   --surface: #d0a475; --surface-2: #c69a68;
  --line: #a8794c; --line-2: #8f6339;
  --shell: #16181a; --shell-2: #23272b; --shell-ink: #ffb703; --shell-ink-2: #97a1a9;
  --accent: #e2571f; --accent-ink: #b8410f; --accent-soft: #f7ddca;
  --ok: #1d7a4a; --warn: #a86b12; --danger: #b5372a;
  --r-sm: 3px; --r: 5px; --r-lg: 7px;
  --shadow-1: 0 1px 2px rgba(26, 20, 16, .18);
  --shadow-2: 0 10px 28px rgba(26, 20, 16, .34), 0 2px 5px rgba(26, 20, 16, .2);

  --font-head: "Arial Black", "Helvetica Neue", "Microsoft JhengHei", sans-serif;
  --font-num:  ui-monospace, "Cascadia Mono", Consolas, monospace;
  --w-head: 900; --w-h2: 800;
  --tr-head: -.02em; --tr-h2: 0;
  --label-tr: .2em; --label-case: uppercase;
  --line-body: 1.62; --size-body: 15.5px;
}
/* 木紋 + 球場白線（中圈與邊線）+ 兩道從場邊打下來的探照燈，
   原本只有木地板看不太出來是「球場」，加了燈光跟看台的暗角才有現場感。 */
[data-theme="court"] body {
  background-image:
    radial-gradient(60% 40% at 8% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(60% 40% at 92% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(22, 24, 26, .1)),
    repeating-linear-gradient(90deg,
      rgba(120, 82, 44, .1) 0 2px, transparent 2px 9px, rgba(120, 82, 44, .06) 9px 10px, transparent 10px 22px),
    radial-gradient(circle at 50% 26%, transparent 0 118px, rgba(255, 255, 255, .34) 118px 121px, transparent 121px),
    linear-gradient(to right, transparent 0 5%, rgba(255, 255, 255, .24) 5% calc(5% + 3px), transparent calc(5% + 3px) 95%, rgba(255, 255, 255, .24) 95% calc(95% + 3px), transparent calc(95% + 3px));
  background-attachment: fixed;
}
/* 標題區＝記分板：黑底、琥珀色的數字 */
[data-theme="court"] .camphero {
  background: var(--shell); color: var(--shell-ink);
  border-radius: var(--r); padding: var(--s5);
  box-shadow: inset 0 0 0 3px rgba(255, 183, 3, .2), var(--shadow-2);
}
[data-theme="court"] .camphero h1,
[data-theme="court"] .camphero .summary strong { color: var(--shell-ink); }
[data-theme="court"] .camphero .sub,
[data-theme="court"] .camphero .summary div { color: var(--shell-ink-2); }
/* 分數字級再大一點 —— 這一套的主角就是數字 */
[data-theme="court"] .summary strong,
[data-theme="court"] .hero .score { font-size: 1.35em; letter-spacing: .02em; }

/* --- 暗色主題底下的模組色要換成亮版，不然在深底上看不見 --- */
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-budget   { --mod: #74c092; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-staff    { --mod: #7fb0e4; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-risks    { --mod: #e07b72; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-schedule { --mod: #9a9cf0; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-format   { --mod: #bf94e2; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-games    { --mod: #dd8055; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-cards    { --mod: #63c0cd; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-teams    { --mod: #cba86e; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-scores   { --mod: #d9b65c; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-coins    { --mod: #6cc08a; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-pages    { --mod: #9fb3c4; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-stats { --mod: #7fb0d4; }
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-manual,
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-members,
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) .mod-info     { --mod: #9c968c; }

/* 深色主題的主要按鈕用深色文字才看得清楚 */
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"], [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) button.primary { color: #0b0f14; }

/* 舊名稱的別名。各頁面的行內樣式還在用這幾個，留著才不會失效。
   （custom property 是使用時才解析，所以深色模式下也會跟著換。）*/
:root {
  --border: var(--line);
  --muted:  var(--ink-3);
  --text:   var(--ink);
  --radius: var(--r);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  -webkit-text-size-adjust: 100%;

  /* 頂端一層極淡的暖色暈染。純平的底色看久了會累，
     但又不能有花紋去搶內容 —— 一層看不太出來的漸層剛好。 */
  background:
    radial-gradient(1100px 420px at 50% -180px,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 數字一律等寬，欄位才對得齊。字型也吃主題 —— 科技風的數字是等寬字，
   神祕風的是襯線字，光看數字就知道在哪一套主題裡。 */
table, .summary, .tabs .n, input[type="number"] { font-variant-numeric: tabular-nums; }
.summary strong, .guide-head span, td input[type="number"],
.hero .score { font-family: var(--font-num); }

.wrap { max-width: 62rem; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }

/* --- 頁首 ---------------------------------------------------------------- */
/* 深色頁首 —— 整個畫面最強的錨點。內容區再怎麼換色，
   上面這條深色帶都在，人不會迷路。 */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, var(--shell), var(--shell-2));
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 12px rgba(0, 0, 0, .12);
}
header.site .wrap {
  padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s3);
}
header.site a.brand {
  font-family: var(--font-head);
  font-weight: var(--w-head); font-size: 1.05rem; letter-spacing: var(--tr-h2);
  color: var(--shell-ink); text-decoration: none; white-space: nowrap;
}
header.site .spacer { flex: 1; }

/* 頁首裡的按鈕要配合深色底 */
header.site button {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--shell-ink);
}
header.site button:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
header.site button.ghost {
  background: transparent; border-color: transparent; color: var(--shell-ink-2);
}
header.site button.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* --- 文字層次 ------------------------------------------------------------ */
h1 {
  font-family: var(--font-head);
  font-size: 2.05rem; font-weight: var(--w-head); letter-spacing: var(--tr-head);
  line-height: 1.15; color: var(--ink); margin: 0 0 var(--s2);
}
h2 {
  font-family: var(--font-head);
  font-size: 1.18rem; font-weight: var(--w-h2); letter-spacing: var(--tr-h2);
  color: var(--mod, var(--ink)); margin: var(--s6) 0 var(--s3);
  display: flex; align-items: baseline; gap: var(--s2);
}
/* h2 前面一小段色條，取代原本純文字的標題 —— 掃視時抓得住段落起點 */
h2::before {
  content: ""; flex: none; align-self: center;
  width: 3px; height: 1.05em; border-radius: 2px;
  background: var(--mod, var(--accent)); opacity: .85;
}
h2 .count { font-size: .8rem; font-weight: 400; color: var(--ink-3); }
h3 {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: var(--w-h2); letter-spacing: var(--tr-h2);
  color: var(--ink); margin: 0 0 var(--s1);
}

.sub { color: var(--ink-3); font-size: .9rem; margin: 0 0 var(--s5); }

/* --- 按鈕 ---------------------------------------------------------------- */
button {
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 99px;
  padding: .42rem .95rem; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .08s;
}
button:hover { border-color: var(--ink-3); color: var(--ink); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { border-color: var(--line-2); color: var(--ink-2); }

/* 主要按鈕吃當前模組色 —— 在預算頁是綠的、在關卡頁是橘的。
   一眼看得出「這顆按鈕屬於哪一段」。 */
button.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mod, var(--accent)) 88%, #fff),
    var(--mod, var(--accent)));
  border-color: color-mix(in srgb, var(--mod, var(--accent)) 80%, #000);
  color: #fff; font-weight: 700; letter-spacing: .01em;
  padding: .48rem 1.15rem;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mod, var(--accent)) 35%, transparent);
}
button.primary:hover {
  filter: brightness(1.08); color: #fff;
  border-color: var(--mod, var(--accent));
}
@media (prefers-color-scheme: dark) {
  /* 深色模式的模組色偏亮，白字會糊，改用深色文字 */
  button.primary { color: #17160f; }
  button.primary:hover { color: #17160f; }
}

button.ghost {
  border-color: transparent; background: transparent; color: var(--ink-3);
  padding: .25rem .5rem;
}
button.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }

#menu-btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: 1.1rem; line-height: 1; font-weight: 700;
  min-height: 2.4rem; padding: .45rem .85rem; border-radius: 99px;
}
#menu-btn .label { font-size: .87rem; }
#menu-btn:hover, #menu-btn:focus-visible {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (max-width: 30rem) {
  #menu-btn .label { display: none; }
  #menu-btn { padding: .45rem .6rem; }
}

/* --- 面板：靠底色和淡陰影分層，不靠邊框 ---------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: var(--s5);
}

/* --- 活動頁最上面的大色塊 -------------------------------------------------
   活動名稱、狀態、關鍵數字集中成一塊，用當前分頁的顏色染色。
   一打開就知道「我在哪一場活動、現在什麼狀況」。                          */
.camphero {
  position: relative; overflow: hidden;
  margin: 0 0 var(--s5); padding: var(--s6) var(--s6) var(--s5);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--mod, var(--accent)) 24%, var(--line));
  background:
    radial-gradient(680px 220px at 88% -60px,
      color-mix(in srgb, var(--mod, var(--accent)) 22%, transparent), transparent),
    linear-gradient(165deg,
      color-mix(in srgb, var(--mod, var(--accent)) 11%, var(--surface)),
      var(--surface) 60%);
  box-shadow: var(--shadow-1);
}
.camphero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg,
    var(--mod, var(--accent)),
    color-mix(in srgb, var(--mod, var(--accent)) 45%, transparent));
}
.camphero h1 { margin-bottom: var(--s1); }
.camphero .sub { margin-bottom: var(--s4); font-size: .93rem; color: var(--ink-2); }
.camphero #summary { margin-bottom: 0; }
.camphero .summary {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(2px);
  border-color: color-mix(in srgb, var(--mod, var(--accent)) 16%, var(--line));
}
@media (max-width: 34rem) {
  .camphero { padding: var(--s5) var(--s4) var(--s4); }
}

/* --- 側邊抽屜 ------------------------------------------------------------ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 19, 17, .4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: min(20.5rem, 86vw);
  background: linear-gradient(180deg, var(--shell), var(--shell-2));
  color: var(--shell-ink);
  box-shadow: var(--shadow-2);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.open { transform: none; }

.drawer .who {
  padding: var(--s5) var(--s4) var(--s4);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer .who strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--shell-ink); }
.drawer .who span { font-size: .78rem; color: var(--shell-ink-2); }

.drawer section { padding: var(--s3) 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.drawer section:last-child { border-bottom: none; }
.drawer h4 {
  margin: 0 var(--s4) var(--s2); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; color: var(--shell-ink-2); text-transform: uppercase;
}
.drawer .item {
  display: block; width: 100%; text-align: left;
  padding: var(--s2) var(--s4); margin: 0;
  border: none; border-left: 3px solid transparent; border-radius: 0;
  background: none; color: var(--shell-ink); text-decoration: none; font-size: .93rem;
}
.drawer .item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.drawer .item.current {
  background: rgba(255, 255, 255, .1); color: #fff;
  font-weight: 700; border-left-color: var(--accent);
}
.drawer .item small {
  display: block; font-weight: 400; font-size: .74rem;
  color: var(--shell-ink-2); margin-top: 1px;
}
.drawer .item.current small { color: color-mix(in srgb, var(--accent) 55%, var(--shell-ink)); }
.drawer .item.danger:hover { color: #ffb4ae; background: rgba(255, 255, 255, .05); }
.drawer .note { margin: 0 var(--s4); font-size: .78rem; color: var(--shell-ink-2); }

/* --- 佈景主題的選擇卡 -----------------------------------------------------
   每張卡自己套上該主題，所以下面那條色帶顯示的就是真的顏色。         */
.themecards {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.themecard {
  text-align: left; padding: 0; overflow: hidden;
  border: 2px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); cursor: pointer;
}
.themecard:hover { border-color: var(--accent); }
.themecard.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.themecard .swatch { display: flex; height: 2.6rem; }
.themecard .swatch span { flex: 1; }
.themecard .swatch .s-bg { background: var(--bg); }
.themecard .swatch .s-surface { background: var(--surface); }
.themecard .swatch .s-accent { background: var(--accent); flex: 1.4; }
.themecard .swatch .s-shell { background: var(--shell); }
.themecard strong {
  display: block; padding: var(--s3);
  font-size: .95rem; font-weight: 700; color: var(--ink);
}

/* --- 選項卡片（活動類型、賽制範本）--------------------------------------- */
.typecards {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.typecard {
  text-align: left; padding: var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); cursor: pointer;
}
.typecard:hover {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: var(--shadow-1);
}
.typecard strong {
  display: block; font-size: .98rem; font-weight: 650;
  color: var(--ink); margin-bottom: var(--s1);
}
.typecard span { display: block; font-size: .84rem; color: var(--ink-3); line-height: 1.55; }
.typecard .mods { margin-top: var(--s2); font-size: .76rem; color: var(--accent-ink); }

/* --- 活動卡片 ------------------------------------------------------------ */
.cards {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.card {
  position: relative; overflow: hidden;
  display: block; padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
/* 卡片頂端一條細色帶，一整排卡片才不會看起來像一堆一樣的方塊 */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  opacity: .5;
}
.card:hover {
  border-color: var(--line-2); box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card:hover::before { opacity: 1; }
.card .meta { color: var(--ink-3); font-size: .84rem; margin-bottom: var(--s3); }

/* 進行中的活動：卡片本身要跳出來，那幾天使用者只在意這一張 */
.card.live {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
}
.card.live::before { opacity: 1; height: 4px; }
.pill.live { background: var(--accent); color: #fff; font-weight: 700; }
.card .leader {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  margin-bottom: var(--s3); padding: var(--s2) var(--s3);
  background: var(--accent-soft); border-radius: var(--r-sm);
}
.card .leader .who { font-size: .88rem; font-weight: 600; color: var(--accent-ink); }
.card .leader .pts { font-size: .88rem; font-weight: 700; color: var(--accent-ink); }
.card .stats {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: .8rem; color: var(--ink-3);
  padding-top: var(--s2); border-top: 1px solid var(--line);
}

.pill {
  display: inline-block; white-space: nowrap;
  font-size: .73rem; font-weight: 650; padding: .16rem .62rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--mod, var(--ink-3)) 12%, var(--surface-2));
  color: color-mix(in srgb, var(--mod, var(--ink-2)) 70%, var(--ink-2));
}

/* --- 模組配色 -------------------------------------------------------------
   每個功能一個顏色，但只用在「指路」的地方：頁籤底線、標題前的小點。
   文字、按鈕、表格一律維持灰階 —— 顏色是幫眼睛定位用的，不是裝飾。      */
.mod-budget   { --mod: #3f7a55; }
.mod-staff    { --mod: #3a6ea5; }
.mod-risks    { --mod: #ab3b34; }
.mod-schedule { --mod: #5457c4; }
.mod-format   { --mod: #7a4fa3; }
.mod-games    { --mod: #b0532e; }
.mod-cards    { --mod: #2f7480; }
.mod-teams    { --mod: #8a6a3f; }
.mod-scores   { --mod: #a9791b; }
.mod-coins    { --mod: #2f7a4f; }
.mod-pages    { --mod: #5a6b7a; }
.mod-members  { --mod: #6b6862; }
.mod-manual   { --mod: #6b6862; }
.mod-stats    { --mod: #4f7fa8; }
.mod-info     { --mod: #6b6862; }

@media (prefers-color-scheme: dark) {
  .mod-budget   { --mod: #74c092; }
  .mod-staff    { --mod: #7fb0e4; }
  .mod-risks    { --mod: #e07b72; }
  .mod-schedule { --mod: #9a9cf0; }
  .mod-format   { --mod: #bf94e2; }
  .mod-games    { --mod: #dd8055; }
  .mod-cards    { --mod: #63c0cd; }
  .mod-teams    { --mod: #cba86e; }
  .mod-scores   { --mod: #d9b65c; }
  .mod-coins    { --mod: #6cc08a; }
  .mod-pages    { --mod: #9fb3c4; }
  .mod-members  { --mod: #9c968c; }
  .mod-manual   { --mod: #9c968c; }
  .mod-stats    { --mod: #7fb0d4; }
  .mod-info     { --mod: #9c968c; }
}

/* --- 每一頁開頭的說明 -----------------------------------------------------
   功能一多，光看名字猜不出來的東西就會沒人用。每一頁開頭一句話講清楚
   它是做什麼的、什麼時候會用到。                                          */
.intro {
  display: flex; gap: var(--s3); margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--mod, var(--accent)) 20%, var(--line));
  border-left: 4px solid var(--mod, var(--accent));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mod, var(--accent)) 9%, var(--surface)),
    var(--surface) 65%);
}
.intro .dot {
  flex: none; width: .55rem; height: .55rem; margin-top: .58rem;
  border-radius: 50%; background: var(--mod, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod, var(--accent)) 20%, transparent);
}
.intro h2 {
  margin: 0 0 .15rem; font-size: 1.16rem;
  color: var(--mod, var(--ink));
}
.intro h2::before { display: none; }
.intro p {
  margin: 0; max-width: 46rem;
  font-size: .88rem; line-height: 1.7; color: var(--ink-2);
}

/* --- 進度清單 -------------------------------------------------------------
   「這一頁是什麼」只有在你已經到了那一頁才有用。這份清單回答的是
   「我接下來該做什麼、在哪裡做」—— 每一項都直接跳到該做的地方。      */
.guide {
  margin: 0 0 var(--s5);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-1);
  overflow: hidden;
}
.guide-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
.guide-head strong { font-size: .95rem; font-weight: 750; color: var(--ink); }
.guide-head span { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.guide-item {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s5); text-align: left;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.guide-item:last-child { border-bottom: none; }
.guide-item:hover { background: var(--surface-2); }
.guide-item .mark {
  flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem;
  border-radius: 50%; border: 2px solid var(--line-2); background: none; padding: 0;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: #fff; font-family: inherit;
}
button.guide-item .mark, .guide-item button.mark { cursor: pointer; }
/* 手動標記過的圈圈跟系統自動判斷的顏色分開，一眼看得出這項是自己點的 */
.guide-item .mark.manual { border-color: var(--accent-ink); }
.guide-item.done .mark { background: var(--ok); border-color: var(--ok); }
.guide-item.done .mark.manual { background: var(--accent-ink); border-color: var(--accent-ink); }
.guide-item.key:not(.done) .mark { border-color: var(--accent); border-style: dashed; }
.guide-item .body {
  flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; text-align: left; font: inherit; cursor: pointer;
}
.guide-item .label { font-size: .93rem; font-weight: 650; color: var(--ink); }
.guide-item.done .label { color: var(--ink-2); font-weight: 600; }
.guide-item .todo { font-size: .8rem; color: var(--ink-3); line-height: 1.55; }
.guide-item .go {
  flex: none; align-self: center; white-space: nowrap;
  font-size: .8rem; font-weight: 650; color: var(--accent-ink);
}
.guide-item.done .go { color: var(--ink-3); font-weight: 500; }
.guide-item .resetauto {
  flex: none; align-self: center; font-size: .85rem; padding: .1rem .4rem;
  border-radius: 99px; background: none; border: 1px solid transparent; box-shadow: none;
  color: var(--ink-3); cursor: pointer;
}
.guide-item .resetauto:hover { background: var(--muted); border-color: var(--line-2); color: var(--ink); }
@media (max-width: 34rem) {
  .guide-head, .guide-item { padding-left: var(--s4); padding-right: var(--s4); }
  .guide-item .go { display: none; }
}

/* --- 導覽：上層大類 + 下層細項 -------------------------------------------
   功能一多，十幾個頁籤並排就變成「每次都要掃過整排才找得到」。
   分兩層之後，上層永遠只有四五個，下層只顯示當前大類底下的東西。   */
.groups {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: var(--s6) 0 var(--s3); padding: 4px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 99px; width: fit-content; max-width: 100%;
}
.groups button {
  border: none; background: transparent; border-radius: 99px;
  padding: .4rem 1.05rem; font-size: .91rem; font-weight: 650;
  color: var(--ink-3); white-space: nowrap;
}
.groups button:hover { background: transparent; color: var(--ink); }
.groups button.active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.groups button .n {
  display: inline-block; margin-left: var(--s1);
  font-size: .7rem; font-weight: 600; color: var(--ink-3);
}
.groups button .n.alert { color: var(--danger); }

.groupdesc {
  margin: 0 0 var(--s3); padding-left: 2px;
  font-size: .84rem; color: var(--ink-3);
}

/* --- 頁籤 ---------------------------------------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--s4);
}
.tabs button {
  border: none; background: none; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .5rem .85rem; font-size: .92rem; font-weight: 500;
  color: var(--ink-3); white-space: nowrap;
}
.tabs button:hover { color: var(--ink); background: transparent; }
.tabs button.active {
  color: var(--mod, var(--accent-ink));
  border-bottom-color: var(--mod, var(--accent));
  background: color-mix(in srgb, var(--mod, var(--accent)) 8%, transparent);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-weight: 700;
}
.tabs button .n {
  display: inline-block; margin-left: var(--s1);
  font-size: .72rem; font-weight: 600; padding: 0 .38rem;
  border-radius: 99px; background: var(--surface-2); color: var(--ink-3);
}
.tabs button.active .n {
  background: color-mix(in srgb, var(--mod, var(--accent)) 14%, transparent);
  color: var(--mod, var(--accent-ink));
}
.tabs button .n.alert { background: var(--danger); color: #fff; }

/* --- 統計數字 ------------------------------------------------------------ */
.summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  margin: 0 0 var(--s2); padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1);
}
.summary strong { font-weight: 750; }
/* 多排數字（小隊／區／貨幣）之間貼近一點，整組才像一塊 */
#summary { margin-bottom: var(--s5); }
.summary div { font-size: .82rem; color: var(--ink-3); }

/* 一排數字前面的分類標籤（小隊／區／營幣）*/
.summary .tag {
  align-self: center; min-width: 3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase;
  padding-right: var(--s3); border-right: 1px solid var(--line);
}
.summary strong {
  display: block; font-size: 1.45rem; font-weight: 650;
  line-height: 1.2; color: var(--ink); letter-spacing: -.02em;
}
.summary .over strong { color: var(--danger); }

/* --- 關卡清單（主從式：點一個在下面展開）---------------------------------
   .gameitem 是外層（可編輯時多一個勾選批次刪除用的勾選框），
   .gameitem-btn 才是原本那顆會展開內容的按鈕。 */
.gamelist { display: grid; gap: 2px; }
.gameitem {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid transparent; border-radius: var(--r-sm);
}
.gameitem:hover { border-color: var(--line-2); border-left-color: var(--line-2); }
.gameitem.active {
  border-color: var(--mod, var(--accent));
  border-left-color: var(--mod, var(--accent));
  background: color-mix(in srgb, var(--mod, var(--accent)) 5%, var(--surface));
}
.gameitem-btn {
  display: block; flex: 1; min-width: 0; text-align: left;
  padding: var(--s3) var(--s2) var(--s3) 0;
  background: none; border: 0;
}
.gameitem strong { display: block; font-size: .96rem; font-weight: 650; color: var(--ink); }
.gameitem span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 1px; }

/* --- 小隊連結的 QR code 清單 ----------------------------------------------- */
.qrgrid {
  display: grid; gap: var(--s3); margin-top: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.qrcard {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: var(--s3); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.qrbox { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
/* qrcodejs 生出來的是白底黑碼的 PNG，跟深色主題硬湊在一起會很刺眼，
   乾脆用白色卡片把它框起來 —— 掃描機也比較不會因為背景色而讀不到。 */
.qrbox img, .qrbox canvas { background: #fff; border-radius: 4px; }
.qrcard strong { font-size: .88rem; }

/* --- 表格 ---------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  border-top: 2px solid var(--mod, var(--line-2));
  box-shadow: var(--shadow-1);
}
table { width: 100%; border-collapse: collapse; min-width: 34rem; }
th {
  text-align: left; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: var(--label-tr);
  color: var(--ink-3); text-transform: var(--label-case);
  padding: var(--s2) var(--s3);
  background: color-mix(in srgb, var(--mod, var(--ink-3)) 7%, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
th:first-child { border-top-left-radius: var(--r); }
th:last-child { border-top-right-radius: var(--r); }
td {
  padding: .18rem var(--s1);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
td.actions { width: 2.6rem; text-align: center; white-space: nowrap; }

/* 表格裡的輸入框：平常像純文字，點到才變成輸入框 —— 減少畫面上的框線 */
td input, td select {
  font: inherit; font-size: .9rem; color: inherit;
  width: 100%; min-width: 4rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: .38rem .45rem;
}
td input:hover:not(:disabled), td select:hover:not(:disabled) { border-color: var(--line-2); }
td input:focus, td select:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
}
td input:disabled, td select:disabled { color: var(--ink-2); opacity: 1; }
td input[type="number"] { text-align: right; }
td input[type="checkbox"] { width: auto; min-width: 0; accent-color: var(--accent); }

/* 表格最後那一列「新增」。
   底色比其他列明顯一點 —— 它是一列「還沒存在的資料」，
   要看得出跟上面那些已經存在的不一樣。 */
tr.adder td { background: color-mix(in srgb, var(--mod, var(--accent)) 7%, transparent); }
tr.adder:hover td { background: color-mix(in srgb, var(--mod, var(--accent)) 11%, transparent); }

/* 那一列的送出鈕。原本是一顆很小的 ghost「＋」，
   小到看起來像裝飾而不是按鈕 —— 使用者根本沒發現可以按。 */
button.addrow {
  white-space: nowrap; font-size: .84rem; font-weight: 600;
  padding: .34rem .8rem;
  background: var(--mod, var(--accent));
  border-color: var(--mod, var(--accent));
  color: #fff;
}
button.addrow:hover:not(:disabled) { filter: brightness(1.08); }
/* 淺色的模組色配白字會看不清楚，那幾套主題改用深色字 */
:is([data-theme="tech"], [data-theme="mystic"], [data-theme="cyber"],
    [data-theme="xmas"], [data-theme="warmdark"], [data-theme="dusk"], [data-theme="jungle"], [data-theme="volcano"]) button.addrow { color: #10100e; }

/* 已作廢的紀錄：留著但劃掉 */
tr.voided td { opacity: .45; }
tr.voided td.amount { text-decoration: line-through; }

/* --- 表單 ---------------------------------------------------------------- */
.form-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
/* 關卡編輯：固定四欄，第二排左邊是備註、右邊三欄合併給關主指派用 ——
   跟上面 auto-fit 的通用表單格不一樣，這裡的位置是刻意排好的，欄數不能跟著內容亂跑。 */
.game-editor-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(4, 1fr);
}
.game-editor-grid .span3 { grid-column: span 3; }
@media (max-width: 34rem) {
  .game-editor-grid { grid-template-columns: 1fr; }
  .game-editor-grid .span3 { grid-column: span 1; }
}
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label {
  font-size: .74rem; font-weight: 700; letter-spacing: var(--label-tr);
  color: var(--ink-3); text-transform: var(--label-case);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: .93rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .48rem .65rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--surface-2); color: var(--ink-2);
}
.field.wide { grid-column: 1 / -1; }
.field .sub { margin: 0; }

/* --- 登入 / 邀請 / 重設密碼 ---------------------------------------------- */
.auth { max-width: 23rem; margin: 4.5rem auto; padding: 0 var(--s5); }
.auth .brandline { font-size: .95rem; color: var(--ink-3); }
.auth h1 { font-size: 1.4rem; margin-top: var(--s1); }
.auth .panel { margin-top: var(--s4); }
.auth .field { margin-bottom: var(--s4); }
.auth button.primary { width: 100%; padding: .55rem; margin-top: var(--s1); }
.auth .err { color: var(--danger); font-size: .85rem; min-height: 1.2rem; margin-top: var(--s2); }
.grant {
  background: var(--accent-soft); border-radius: var(--r);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  font-size: .9rem; color: var(--ink-2);
}
.grant strong { color: var(--accent-ink); }

/* --- 權限：選單底下直接說明這個選項能做什麼 ------------------------------- */
.rolecell { display: flex; flex-direction: column; gap: var(--s1); min-width: 7rem; }
.rolehelp {
  margin: 0; max-width: 13rem;
  font-size: .74rem; line-height: 1.5; color: var(--ink-3);
}

/* 成員頁的表格區塊。三個欄位軸的完整說明搬去使用手冊了 —— 欄位名稱
   本身就夠清楚，不用在這裡重講一次；.rolelegend 現在只有使用手冊那邊在用。 */
.memberlayout { margin-bottom: var(--s5); }

.rolelegend {
  padding: var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r);
  /* 用 surface 而不是 surface-2：後者在有些佈景主題底下跟頁面底色
     幾乎一樣，看起來像沒有背景。這裡要的是明確的一塊。 */
  background: var(--surface);
  border-left: 4px solid var(--mod, var(--accent));
  box-shadow: var(--shadow-1);
}
.rolelegend > strong {
  display: block; margin-bottom: var(--s3);
  font-size: .92rem; color: var(--mod, var(--ink));
}
.rolelegend p { margin: .3rem 0; font-size: .84rem; line-height: 1.65; color: var(--ink-2); }
.rolelegend p b { color: var(--ink); margin-right: .5rem; }
/* 「權限」底下那三種等級：縮排一層，看得出是它的細項 */
.rolelegend .sublist { margin: .2rem 0 .6rem 1.4rem; }
.rolelegend .sublist p { margin: .2rem 0; font-size: .83rem; }
.rolelegend .sublist p b { color: var(--mod, var(--accent-ink)); }
/* 規則底下的「那我要怎麼做」—— 縮排並加個箭頭，跟規則本身分開 */
.rolelegend p.howtodo {
  margin: .15rem 0 .6rem 1.1rem;
  color: var(--mod, var(--accent-ink)); font-size: .83rem;
}
.rolelegend p.howtodo::before { content: "→ "; }
.rolelegend p.note {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3);
}

/* --- 使用手冊 ------------------------------------------------------------- */
.axes {
  display: grid; gap: var(--s4); margin-bottom: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.axis {
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.axis h4 { margin: 0 0 var(--s3); font-size: .92rem; color: var(--mod, var(--accent-ink)); }
.axis p { margin: .35rem 0; font-size: .83rem; line-height: 1.6; color: var(--ink-2); }
.axis p b { color: var(--ink); margin-right: .4rem; }
.axis p.note { color: var(--ink-3); font-size: .78rem; }

/* 權限矩陣：欄很多，所以表頭直排 */
.matrix th.vert { padding: var(--s2) .2rem; vertical-align: bottom; }
/* 中文直排本來就是由上往下讀，不需要再轉 180 度 ——
   那是給拉丁字母用的技巧，套在中文上會變成整串顛倒。 */
.matrix th.vert span {
  display: inline-block; white-space: nowrap;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: .76rem; letter-spacing: .04em;
}
.matrix td.mark { text-align: center; padding: .45rem .2rem; font-size: 1rem; }
.matrix td.mark .ok { color: var(--ok); }
.matrix td.mark .ro { color: var(--warn); }
.matrix td.mark .no { color: var(--line-2); }
/* 細項權限的小選單：收起來只有一個圈圈，不要佔太多版面；
   展開的選單另外用 .accessmenu，貼在 body 上（見 camp.html 的 accessPicker） */
.accesspick {
  font: inherit; font-size: 1rem; font-weight: 700; border: 1px solid transparent;
  background: none; border-radius: 99px; padding: .1rem .35rem; cursor: pointer; line-height: 1;
}
.accesspick:hover { background: var(--muted); border-color: var(--line-2); }
.accesspick.ok { color: var(--ok); }
.accesspick.ro { color: var(--warn); }
.accesspick.no { color: var(--line-2); }

.accessmenu {
  position: fixed; z-index: 60; min-width: 7rem; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.accessmenu-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: .85rem; padding: .5rem .7rem; cursor: pointer; white-space: nowrap;
}
.accessmenu-item:hover { background: var(--muted); }
.accessmenu-item.ok { color: var(--ok); }
.accessmenu-item.ro { color: var(--warn); }
.accessmenu-item.no { color: var(--ink-2); }

.rolepill {
  display: inline-block; padding: .1rem .5rem; border-radius: 99px;
  font-size: .76rem; font-weight: 650; border: 1px solid var(--line-2);
}
.rolepill.r-manager { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.rolepill.r-editor  { background: var(--surface-2); color: var(--ink-2); }
.rolepill.r-viewer  { background: transparent; color: var(--ink-3); }

/* --- 賽制設計的每一段 -----------------------------------------------------
   一頁上會有七、八段，每段都有標題、提示、內容、三顆操作鈕。
   關鍵是讓「內容」是主角，操作鈕安靜地待在旁邊。            */
/* 賽制設計的總覽：段落一多，先給一份可以點的目錄，不用整頁往下捲才知道寫了什麼 */
.fmtoverview { margin-bottom: var(--s4); }
.fmtoverview-list { display: flex; flex-direction: column; }
.fmtoverview-item {
  display: flex; align-items: center; gap: .5rem;
  height: 1.6rem; padding: 0 .4rem; border-radius: var(--r-sm);
  font-size: .84rem; line-height: 1.3; color: var(--ink-2);
}
/* 標題長短不一，長的那幾筆本來會把整列撐高（或換行）—— 固定列高還不夠，
   標題本身也要能縮、超出就截斷成刪節號，行高才會每一列都一樣。 */
.fmtoverview-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmtoverview-item:hover { background: var(--surface-2); color: var(--ink); }
.fmtoverview-item .num {
  flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); font-size: .65rem; font-weight: 700;
}
/* 原本用斜體標記「還沒寫」，但中文字沒有真正的斜體字模，瀏覽器只能
   硬斜切模擬，看起來會變形、大小不一致。只靠顏色變淡就夠了。 */
.fmtoverview-item.empty { color: var(--ink-3); }

.fmtblock { margin-bottom: var(--s3); }
.fmthead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.fmthead .num {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--mod, var(--accent)) 14%, var(--surface-2));
  color: var(--mod, var(--accent-ink));
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fmttitle {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.05rem; font-weight: 650; color: var(--ink);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: .3rem .45rem;
}
.fmttitle:hover:not(:disabled) { border-color: var(--line); }
.fmttitle:focus {
  outline: none; background: var(--bg);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* 三顆鈕黏成一組、離標題遠一點 —— 才不會看起來像標題的一部分 */
.fmtacts { flex: none; display: flex; gap: .1rem; margin-left: var(--s2); }
.fmtacts button { padding: .25rem .45rem; font-size: .85rem; }
.fmtacts button.danger { margin-left: .3rem; }
.fmtacts button.danger:hover:not(:disabled) { color: var(--danger); }

/* 新增只有這一條路 —— 一顆虛線框的大按鈕，接在最後一段後面 */
.addblock {
  width: 100%; padding: var(--s4);
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: .9rem; cursor: pointer;
}
.addblock:hover {
  border-color: var(--mod, var(--accent));
  color: var(--mod, var(--accent-ink));
  background: color-mix(in srgb, var(--mod, var(--accent)) 5%, transparent);
}

/* --- 一排小圓鈕 -----------------------------------------------------------
   自由頁面的分頁列、計分的快捷按鈕都用這個。                        */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chips button { font-size: .84rem; padding: .3rem .75rem; border-radius: 99px; }

/* --- 便利貼牆 -------------------------------------------------------------
   自由頁面的第二種型態。一面可以隨手貼、拖來拖去的板子 ——
   分工討論、流程發想那種「先把點子都貼出來再整理」的場合。      */
/* --- 自由頁面：大小不限，右下角拉一下就能變大或變小 ----------------------
   .pagebox 包住頁面的內容（白紙、便利貼牆、畫布、表格都一樣），
   本身負責「能拉大小」；裡面的東西照 100% 撐滿即可，不用各自處理。 */
.pagebox {
  margin-top: var(--s3); min-width: 16rem; min-height: 10rem;
  max-width: 100%;
}
.pagebox.resizable {
  /* 只給拉高度 —— resize:both 的把手可以斜著拖，想拉高卻順手也拉窄了寬度，
     窄的那個值就這樣被存下來，下次打開永遠是窄的。寬度固定撐滿版面，只有高度給調。 */
  resize: vertical; overflow: auto; border-radius: var(--r);
}
/* .pagebox 一律有明確的高度（沒拉過就用預設值），裡面的東西才能放心用 100% 撐滿 */
.pagebox textarea { width: 100%; height: 100%; margin: 0; resize: none; box-sizing: border-box; }
.pagebox .board { height: 100%; min-height: 0; margin-top: 0; }
.pagebox .drawpage, .pagebox .tablepage { height: 100%; }

/* --- 自由頁面：畫布 --- */
.drawpage { display: flex; flex-direction: column; gap: .5rem; }
.drawtools { flex: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.drawtools input[type="color"] { width: 2.2rem; height: 2rem; padding: 2px; border-radius: 6px; }
.drawpage canvas { flex: 1; min-height: 0; width: 100%; border-radius: 8px; }

/* --- 自由頁面：表格 --- */
.tablepage { display: flex; flex-direction: column; gap: .5rem; }
.tabletools { flex: none; display: flex; gap: .5rem; }
.tablepage .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.freetable { border-collapse: collapse; table-layout: fixed; }
.freetable td {
  border: 1px solid var(--line-2); padding: 0; min-width: 3rem; position: relative;
}
.freetable td input {
  width: 100%; height: 100%; box-sizing: border-box; border: 0; background: none;
  padding: .4rem .5rem; font: inherit; color: inherit; border-radius: 0;
}
.freetable td input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 拖曳調整欄寬／列高的把手：平常看不見，滑過去才亮出來，不擋打字 */
.freetable .colgrip {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 2;
}
.freetable .rowgrip {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;
  cursor: row-resize; z-index: 2;
}
.freetable .colgrip:hover, .freetable .rowgrip:hover { background: var(--accent); opacity: .5; }

.board {
  position: relative; overflow: hidden;
  min-height: 26rem; margin-top: var(--s3);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px,
    var(--surface-2);
}
.board.empty::after {
  content: "這面板子是空的 —— 按上面的「＋ 貼一張」開始";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-3); font-size: .9rem; pointer-events: none;
}
.note {
  position: absolute; width: 11rem; min-height: 7rem;
  padding: var(--s3); border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .08);
  display: flex; flex-direction: column;
  /* 手機上拖曳要靠這個 —— 不然瀏覽器會把手勢當成捲動 */
  touch-action: none;
}
.note:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .22), 0 12px 26px rgba(0, 0, 0, .12); }
.note.dragging { z-index: 5; transform: rotate(-1.5deg) scale(1.03); cursor: grabbing; }
.note .grip {
  height: 1.1rem; margin: -.2rem -.2rem .5rem; cursor: grab;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .7rem; color: rgba(0, 0, 0, .38);
  /* 跟下面文字框隔開一條淡淡的線 —— 沒有它，握把上的名字/叉叉
     跟文字框剛好沒打字時的提示字距離太近、深淺又差不多，看起來像疊在一起。 */
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.note .grip .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note .grip button {
  border: 0; background: none; padding: 0 .2rem; cursor: pointer;
  color: rgba(0, 0, 0, .38); font-size: .8rem; line-height: 1;
}
.note .grip button:hover { color: rgba(0, 0, 0, .75); }
.note textarea {
  flex: 1; width: 100%; border: 0; background: none; resize: none;
  font: inherit; font-size: .87rem; line-height: 1.55; color: #2b2b28;
  padding: 0; outline: none;
}
/* 刻意比握把的文字（.38）淡很多，兩者才不會連成一片、分不出哪個是提示字。 */
.note textarea::placeholder { color: rgba(0, 0, 0, .2); }
.note .swatches { display: flex; gap: .2rem; margin-top: .3rem; }
.note .swatches span {
  width: .8rem; height: .8rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .15);
}

/* 便利貼的顏色刻意寫死，不跟著佈景主題走 ——
   便利貼就該是便利貼的顏色，而且分類靠的就是顏色本身。 */
.note.c-yellow { background: #fdf0a8; }
.note.c-pink   { background: #fcc9d6; }
.note.c-blue   { background: #b8dcf5; }
.note.c-green  { background: #c4e8b8; }
.note.c-orange { background: #ffd4a3; }
.note.c-purple { background: #dcc9f0; }
.sw-yellow { background: #fdf0a8; }
.sw-pink   { background: #fcc9d6; }
.sw-blue   { background: #b8dcf5; }
.sw-green  { background: #c4e8b8; }
.sw-orange { background: #ffd4a3; }
.sw-purple { background: #dcc9f0; }

/* --- 自訂欄位 -------------------------------------------------------------
   加欄位是偶爾才做一次的事，所以收在 details 裡不佔位置。      */
.fieldbox { margin-top: var(--s4); }
.fieldbox > summary { font-size: .84rem; }
.fieldpill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem .3rem .7rem;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); font-size: .85rem;
}
.fieldpill .nm { font-weight: 600; }
.fieldpill .sub { margin: 0; font-size: .75rem; }
.fieldpill button {
  border: 0; background: none; padding: 0 .15rem; cursor: pointer;
  color: var(--ink-3); font-size: .8rem; line-height: 1;
}
.fieldpill button:hover { color: var(--danger); }
/* 表頭上的自訂欄位標一下，才分得出哪些是系統給的、哪些是自己加的 */
th.customcol { color: var(--mod, var(--accent-ink)); }
th.customcol::after { content: " ✎"; font-size: .8em; opacity: .55; }

/* --- 勾選批次刪除 ---------------------------------------------------------
   平常完全不佔位置，勾了東西才長出來。                       */
.bulkbar { display: none; }
.bulkbar.on {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3); padding: var(--s2) var(--s4);
  border: 1px solid var(--danger); border-radius: var(--r);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  font-size: .87rem; font-weight: 600;
}
.bulkbar button.danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
  font-size: .84rem; padding: .3rem .9rem;
}
.bulkbar button.danger:hover:not(:disabled) { filter: brightness(1.08); }

/* 勾選欄：窄、置中、不要被輸入框的內距推開 */
th.pickcol, td.pickcol {
  width: 2.4rem; padding: .3rem .2rem .3rem .6rem; text-align: center;
}
th.pickcol input, td.pickcol input { cursor: pointer; }

/* --- 進階統計 -------------------------------------------------------------
   每一段都是獨立的一張表，不喜歡就整段刪掉不影響別段。       */
h3.substat {
  margin: var(--s5) 0 0; font-size: .95rem;
  color: var(--mod, var(--ink));
}
h3.substat::before {
  content: ""; display: inline-block;
  width: .45rem; height: .45rem; margin-right: .5rem;
  border-radius: 2px; background: var(--mod, var(--accent));
  vertical-align: middle;
}
/* 表格裡的長條圖。純 CSS，沒有圖表套件 —— 一根長條不值得多背一個相依 */
.bar {
  height: .5rem; border-radius: 99px;
  background: color-mix(in srgb, var(--mod, var(--accent)) 12%, transparent);
  overflow: hidden;
}
.bar span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--mod, var(--accent));
  min-width: 2px;
}
/* 同一張表裡兩組不同的量（分數 vs 貨幣）要看得出是兩件事 */
.bar.alt { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.bar.alt span { background: var(--ok); }
/* 需要注意的東西（例如沒人跑過的關卡） */
.warnpill {
  display: inline-block; padding: .25rem .7rem;
  border: 1px solid var(--warn); border-radius: 99px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--ink); font-size: .84rem;
}

/* --- 一排可勾選的人／項目 ------------------------------------------------- */
.picklist { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picklist label {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem .35rem .5rem;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); cursor: pointer; font-size: .87rem;
}
.picklist label:hover { border-color: var(--mod, var(--accent)); }
.picklist label:has(input:checked) {
  background: color-mix(in srgb, var(--mod, var(--accent)) 10%, var(--surface));
  border-color: var(--mod, var(--accent));
}
.picklist .nm { font-weight: 600; }
.picklist .sub { margin: 0; font-size: .78rem; }

/* --- 賽制區塊的副標 -------------------------------------------------------
   範本給的是「這一段要回答什麼」。它是提示，不是內容 ——
   放在標題底下、輸入框上面，一直看得到但不用先刪掉才能開始寫。   */
.blockhint {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: 0 0 var(--s3); padding-left: var(--s3);
  border-left: 2px solid color-mix(in srgb, var(--mod, var(--accent)) 45%, var(--line));
}
.blockhint p {
  flex: 1; margin: 0;
  font-size: .84rem; line-height: 1.65; color: var(--ink-3);
  white-space: pre-line;          /* 範本裡的換行要保留 */
}
.blockhint button { flex: none; padding: 0 .3rem; font-size: .8rem; opacity: .5; }
.blockhint button:hover { opacity: 1; }

/* --- 小對話框 -------------------------------------------------------------
   用瀏覽器內建的 <dialog>，Esc 關閉與焦點鎖定都是免費的。            */
.dlg {
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-2);
  padding: var(--s5); width: min(30rem, calc(100vw - 2rem));
}
.dlg::backdrop { background: rgba(0, 0, 0, .45); }
.dlg h3 { margin: 0 0 var(--s4); font-size: 1.05rem; }
.dlg .dlg-body { display: flex; flex-direction: column; }
.dlg .dlg-body select,
.dlg .dlg-body input {
  font: inherit; font-size: .93rem; color: var(--ink); width: 100%;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .48rem .65rem; margin-top: var(--s1);
}
.dlg .dlg-body select:focus,
.dlg .dlg-body input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.dlg .dlg-foot { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s4); }
/* 會刪掉東西的確認鈕：紅的，而且「取消」在它左邊 —— 手指往右滑不會先碰到它 */
.dlg .dlg-foot button.primary.danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.dlg .dlg-foot button.primary.danger:hover:not(:disabled) { filter: brightness(1.08); }
.dlg .err { min-height: 1.2rem; color: var(--danger); font-size: .85rem; margin-top: var(--s2); }

/* --- 密碼欄位的「顯示」鍵 ------------------------------------------------- */
.pw { position: relative; display: flex; }
.pw input { flex: 1; padding-right: 3.4rem; }
.pw .reveal {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .2rem .4rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--ink-3); cursor: pointer; border-radius: var(--r-sm);
}
.pw .reveal:hover { color: var(--accent-ink); background: var(--accent-soft); }

/* 長得像連結的按鈕。用在「還沒有帳號？註冊一個」這種句子中間的切換 */
.linky {
  background: none; border: 0; padding: 0; margin-left: .3rem;
  font: inherit; color: var(--accent-ink);
  text-decoration: underline; cursor: pointer;
}
.linky:hover { color: var(--accent); }

/* --- 操作步驟卡 -----------------------------------------------------------
   放在表單「上面」，不是下面。第一次用的人在填欄位之前就該知道
   按下去會發生什麼事、對方那一端會看到什麼。                        */
.howto {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  border: 1px dashed color-mix(in srgb, var(--mod, var(--accent)) 35%, var(--line-2));
  background: color-mix(in srgb, var(--mod, var(--accent)) 6%, var(--surface));
  font-size: .87rem; color: var(--ink-2);
}
.howto > strong {
  display: block; margin-bottom: var(--s2);
  color: var(--mod, var(--accent-ink)); font-weight: 700;
}
.howto ol { margin: 0; padding-left: 1.35rem; }
.howto li { margin: .25rem 0; line-height: 1.65; }
.howto li::marker { color: var(--mod, var(--accent)); font-weight: 700; }
.howto > p {
  margin: var(--s3) 0 0; padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: .83rem; color: var(--ink-3);
}

/* --- 雜項 ---------------------------------------------------------------- */
.empty { color: var(--ink-3); padding: var(--s5); text-align: center; }

/* 點了才展開的欄位，原本只是一行灰色小字加一個小三角，很容易被當成
   純說明文字滑過去，沒人發現點得下去。改成像按鈕一樣：有邊框、有底色、
   滑過去會變色 —— 一看就知道「這裡可以點」。 */
details > summary {
  cursor: pointer; font-size: .86rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; margin: var(--s1) 0;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  transition: background .14s, border-color .14s, color .14s;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; color: var(--ink-3); font-size: .75em; }
details[open] > summary::before { content: "▾"; }
details > summary:hover {
  background: var(--surface); border-color: var(--mod, var(--accent)); color: var(--ink);
}

/* --- 欄位底下的「再細調一點」---------------------------------------------
   掛在某個欄位下面，調的就是那個欄位帶來的設定。左邊那條線是在說
   「這一段從屬於上面那格」，不是另一個獨立的區塊。            */
.tweak { margin-top: var(--s2); }
.tweak > summary { font-size: .8rem; color: var(--accent-ink); font-weight: 600; }
.tweak > summary::before { color: var(--accent); }
.tweak[open] {
  padding: var(--s2) 0 var(--s3) var(--s3);
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.tweak > p {
  margin: var(--s1) 0 var(--s3);
  font-size: .78rem; line-height: 1.6; color: var(--ink-3);
}
.tweak .form-grid { margin-top: var(--s3); }

.toast {
  position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: .5rem 1.05rem; border-radius: 99px;
  font-size: .85rem; box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60;
}
.toast.show { opacity: 1; }

a { color: var(--accent-ink); }

@media (max-width: 34rem) {
  body { font-size: 15px; }
  .wrap { padding: var(--s5) var(--s4) var(--s7); }
  h1 { font-size: 1.45rem; }
  .panel { padding: var(--s4); }
  .summary { gap: var(--s4); padding: var(--s3) var(--s4); }
  .summary strong { font-size: 1.3rem; }
}

/* ===== THEME-LAYOUT-V2 =====================================================
   第二輪：修對比、換版面結構、加插畫與動畫。

   對比的問題出在「整片都是同一個中間調」——底色是彩色的，面板也是彩色的，
   文字就浮在一片顏色上。真正的中間調設計不是這樣做的：
   顏色是畫布，內容坐在紙上。所以底色維持中間調，但面板一律拉亮拉淡，
   文字回到深色 —— 這樣既保留了氛圍，讀起來也不吃力。
   =========================================================================== */

/* --- 牛皮紙：底是牛皮，面板是內頁 --- */
[data-theme="kraft"] {
  --surface: #f3e9d7; --surface-2: #e7dac1;
  --line: #ccb996; --line-2: #b09b74;
  --ink-2: #4a3d2f; --ink-3: #766449;
}
/* --- 苔綠：底是苔，面板是米紙 --- */
[data-theme="moss"] {
  --surface: #eff2e5; --surface-2: #e0e6d0;
  --line: #c3ccab; --line-2: #a7b38b;
  --ink-2: #3a4530; --ink-3: #63704f;
}
/* --- 球場：底是木地板，面板是白線內的場地 --- */
[data-theme="court"] {
  --surface: #f7ebda; --surface-2: #eddcc3;
  --line: #d6bc97; --line-2: #bc9d71;
  --ink-2: #3b2e21; --ink-3: #6d5941;
}
/* --- 黃昏：維持暗的氛圍，但把面板壓深一階、文字提亮，拉開對比。
       同時把色相從紫調回暖橘棕，跟上面主色盤的方向一致。          --- */
[data-theme="dusk"] {
  --ink: #fff8f0; --ink-2: #eddccb; --ink-3: #d6ad8e;
  --surface: #7a564c; --surface-2: #6e4c43;
  --line: #977059; --line-2: #b28a68;
}

/* --- 可愛：頁首原本是粉紅底配白字，只有 2.15:1，根本看不清楚。
       粉紅留在邊框與陰影上，頁首壓深到讀得動為止。            --- */
[data-theme="cute"] {
  --shell: #a83a5f; --shell-2: #963354; --shell-ink-2: #ffd6e2;
  --ink-3: #8d7480;
}

/* ===== 版面結構跟著主題走 =================================================
   到這裡為止，每一套主題換的都還是「長相」——骨架都一樣。
   下面這幾條真的會動到東西擺在哪裡。                                     */

/* --- 科技／賽博：頁籤搬到左邊直排，像儀表板 --- */
@media (min-width: 60rem) {
  :is([data-theme="tech"], [data-theme="cyber"]) main.wrap {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    grid-template-areas: "hero hero" "tabs panel";
    column-gap: var(--s5);
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .camphero { grid-area: hero; }
  :is([data-theme="tech"], [data-theme="cyber"]) #tabs { grid-area: tabs; }
  :is([data-theme="tech"], [data-theme="cyber"]) #panel { grid-area: panel; min-width: 0; }

  :is([data-theme="tech"], [data-theme="cyber"]) .groups {
    flex-direction: column; width: 100%; border-radius: var(--r);
    margin-top: 0;
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .groups button {
    border-radius: var(--r-sm); text-align: left; justify-content: flex-start;
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .tabs {
    flex-direction: column; border-bottom: 0;
    border-left: 2px solid var(--line); margin-top: var(--s3);
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .tabs button {
    border-bottom: 0; margin-bottom: 0; text-align: left;
    border-left: 2px solid transparent; margin-left: -2px;
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .tabs button.active {
    border-left-color: var(--mod, var(--accent));
    background: color-mix(in srgb, var(--mod, var(--accent)) 10%, transparent);
  }
  :is([data-theme="tech"], [data-theme="cyber"]) .groupdesc { display: none; }
}

/* --- 報紙：報頭。標題置中、上下雙線、副標拉成一條報眉 --- */
[data-theme="paper"] .camphero {
  text-align: center; background: none; border: 0;
  border-top: 5px double var(--ink); border-bottom: 3px double var(--ink);
  border-radius: 0; padding: var(--s5) var(--s4) var(--s4);
}
[data-theme="paper"] .camphero::before { display: none; }
[data-theme="paper"] .camphero h1 {
  font-size: clamp(2rem, 7vw, 3.6rem); letter-spacing: .1em;
  margin: 0 0 var(--s2);
}
[data-theme="paper"] .camphero .sub {
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  padding: .25rem 0; letter-spacing: .22em; font-size: .74rem;
  text-transform: uppercase;
}
[data-theme="paper"] .camphero .summary { justify-content: center; }
/* 內容也照報紙排：分頁列變成一條細線上的目錄 */
[data-theme="paper"] .groups {
  border-radius: 0; background: none; border: 0; border-bottom: 2px solid var(--ink);
  padding: 0; width: 100%; justify-content: center;
}
[data-theme="paper"] .groups button { border-radius: 0; }
[data-theme="paper"] .tabs { justify-content: center; }

/* --- 可愛：表格不是表格，是一疊卡片 --- */
[data-theme="cute"] table {
  border-collapse: separate; border-spacing: 0 .55rem; min-width: 30rem;
}
[data-theme="cute"] thead th {
  border: 0; background: none; color: var(--ink-3);
  font-size: .74rem; padding-bottom: 0;
}
[data-theme="cute"] tbody tr {
  background: var(--surface);
  box-shadow: 0 2px 0 var(--line-2), 0 4px 12px rgba(90, 60, 70, .08);
}
[data-theme="cute"] tbody td { border: 0; padding-top: .55rem; padding-bottom: .55rem; }
[data-theme="cute"] tbody td:first-child { border-radius: 16px 0 0 16px; padding-left: var(--s4); }
[data-theme="cute"] tbody td:last-child { border-radius: 0 16px 16px 0; padding-right: var(--s4); }
[data-theme="cute"] tbody tr:hover { transform: translateY(-1px); }
[data-theme="cute"] tbody tr { transition: transform .12s; }

/* ===== 插畫與動畫 =========================================================
   全部只用 CSS 畫，沒有圖檔、沒有套件。動畫一律只動背景層，
   不碰表格與輸入框 —— 現場急著登記分數的人不需要畫面在動。      */

/* --- 聖誕：真的會落雪 --- */
[data-theme="xmas"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(rgba(255, 255, 255, .9) 1.4px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, .6) 1px, transparent 1.2px),
    radial-gradient(rgba(255, 255, 255, .45) .8px, transparent 1px);
  background-size: 160px 160px, 110px 110px, 70px 70px;
  animation: snowfall 26s linear infinite;
}
@keyframes snowfall {
  from { background-position: 0 -160px, 40px -110px, 80px -70px; }
  to   { background-position: 0 160px, 40px 110px, 80px 70px; }
}
/* 頁首掛一排彩燈 */
[data-theme="xmas"] header.site::after {
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(90deg,
    #e0323c 0 10px, transparent 10px 20px,
    #f0c04a 20px 30px, transparent 30px 40px,
    #5ec98a 40px 50px, transparent 50px 60px);
  animation: twinkle 3.2s steps(2) infinite;
}
@keyframes twinkle { 50% { opacity: .35; } }

/* --- 賽博龐克：一道掃描線由上往下跑 --- */
[data-theme="cyber"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255, 60, 200, .05) 48%,
    rgba(255, 60, 200, .12) 50%, rgba(255, 60, 200, .05) 52%, transparent 100%);
  animation: sweep 7s linear infinite;
}
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* --- 海洋：緩慢起伏的波 --- */
[data-theme="ocean"] body {
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { background-position: 40px 12px, -30px -8px, 0 0; } }

/* --- 黃昏：太陽放到整個畫面的背景，不是關在標題區裡的小裝飾 --------------
   這是黃昏主題的主角，大小至少要佔版面的四分之一才有份量：用 vmin
   （視窗窄邊的四分之一），螢幕再窄再寬都還是「畫面的 1/4」，不會在
   小螢幕上爆版、在大螢幕上又小到看不見。下山的速度放得很慢，
   要有「時間過得很慢、天色一點一點在變」的感覺，不是快轉。 */
[data-theme="dusk"] body::before {
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  left: 50%; top: 58%; width: 25vmin; height: 25vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 221, 158, .9), rgba(255, 176, 106, .55) 55%, rgba(255, 176, 106, .15) 78%, transparent 85%);
  animation: sunset 90s ease-in infinite;
}
@keyframes sunset {
  0%   { top: 46%; opacity: .95; }
  85%  { top: 66%; opacity: .55; }
  100% { top: 70%; opacity: .35; }
}

/* --- 球場：標題區右上角一顆會彈跳的籃球 ----------------------------------
   之前用漸層硬湊縫線，兩條弧線收攏到南北極，結果長得像南瓜。
   改用真的 SVG 畫：圓球本體 + 一條橫線一條直線 + 兩條真正往外彎、
   不收攏到極點的弧線 —— 這才是籃球縫線該有的樣子。 */
[data-theme="court"] .camphero::after {
  content: ""; position: absolute; top: 14px; right: 34px;
  width: 58px; height: 58px; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%23e2571f'/><circle cx='32' cy='32' r='30' fill='none' stroke='%23a83a10' stroke-width='1.5'/><path d='M2 32H62 M32 2V62 M9 9 Q32 32 9 55 M55 9 Q32 32 55 55' stroke='%231a1410' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .28);
  border-radius: 50%;
  animation: courtbounce 1.8s cubic-bezier(.5, 0, .75, .3) infinite, roll 1s linear infinite;
}
@keyframes courtbounce {
  0%, 100% { top: 14px; }
  45%      { top: 46px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
  55%      { top: 46px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
}

/* --- 牛皮紙：右上角一枚壓印 --- */
[data-theme="kraft"] .camphero::after {
  content: ""; position: absolute; top: 14px; right: 18px;
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: .5; pointer-events: none;
}

/* --- 苔綠：底部長出幾片葉子的剪影 --- */
[data-theme="moss"] .camphero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46px;
  pointer-events: none; opacity: .28;
  background:
    radial-gradient(closest-side at 12% 100%, var(--accent) 0 60%, transparent),
    radial-gradient(closest-side at 26% 100%, var(--ink) 0 55%, transparent),
    radial-gradient(closest-side at 78% 100%, var(--accent) 0 65%, transparent),
    radial-gradient(closest-side at 91% 100%, var(--ink) 0 50%, transparent);
  background-size: 90px 60px, 70px 44px, 110px 66px, 60px 40px;
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%, 0 100%, 0 100%;
}
/* 使用者在系統裡關掉動態效果的話，一律不要動 —— 前庭敏感的人會不舒服 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="xmas"] body::after,
  [data-theme="xmas"] header.site::after,
  [data-theme="xmas"] .camphero::after,
  [data-theme="cyber"] body::after,
  [data-theme="ocean"] body,
  [data-theme="dusk"] body::before { animation: none; }
}

/* ===== THEME-CHARACTER-V3 ==================================================
   每一套主題都要有：一個會動的東西、一種花邊、一個自己的按鈕形狀。

   動畫的規矩：只動背景層與純裝飾的偽元素，絕不動表格、輸入框、按鈕的
   位置。現場急著登記分數的人，畫面不能在他手指底下移動。
   全部都在檔案最後的 prefers-reduced-motion 區塊裡一次關掉。
   =========================================================================== */

/* 暖木（含「跟隨系統」）刻意不動 —— 它是預設值，也是唯一一套
   完全不喧嘩的。每次都要有一套「什麼都沒發生」的可以退回去。 */

/* --- 科技：網格緩慢往上捲；按鈕切角 ----------------------------------- */
[data-theme="tech"] body { animation: gridscroll 40s linear infinite; }
@keyframes gridscroll { to { background-position: 44px 44px, 44px 44px; } }
[data-theme="tech"] button, [data-theme="cyber"] button {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  border-radius: 0;
}
/* 花邊：面板四角的角標（原本只有左上，補齊四個） */
[data-theme="tech"] .panel::before {
  content: ""; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px;
  border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent);
  opacity: .5;
}

/* --- 神祕：金線在標題上掃過；按鈕是細金框的長膠囊 --------------------- */
[data-theme="mystic"] .camphero h1 {
  background: linear-gradient(100deg,
    var(--ink) 0 42%, var(--accent) 50%, var(--ink) 58% 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer { 0%, 65% { background-position: 100% 0; } 100% { background-position: 0 0; } }
[data-theme="mystic"] button {
  border-radius: 99px; border-width: 1px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2));
}
/* 花邊：面板四角的金色小菱形 */
[data-theme="mystic"] .panel::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: inherit;
}
[data-theme="mystic"] .panel { position: relative; }

/* --- 可愛：按鈕會被按扁 ------------------------------------------------
   原本有一層泡泡往上飄的動畫，但這套主題本身已經夠可愛了，泡泡是多餘的
   —— 拿掉，只留按鈕的彈性回饋。 */
[data-theme="cute"] button { transition: transform .1s; }
[data-theme="cute"] button:active:not(:disabled) { transform: scale(.93); }
[data-theme="cute"] button:hover:not(:disabled) { transform: translateY(-2px) rotate(-1deg); }
/* 花邊：標題區下緣做成扇貝邊 */
[data-theme="cute"] .camphero {
  border-bottom: 0;
  -webkit-mask-image: radial-gradient(14px at 14px 100%, transparent 98%, #000 100%);
  mask-image: radial-gradient(14px at 14px 100%, transparent 98%, #000 100%);
  -webkit-mask-size: 28px 100%; mask-size: 28px 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* --- 山林：葉影慢慢搖；按鈕是不對稱的圓角，像鵝卵石 ------------------- */
[data-theme="forest"] body { animation: sway 26s ease-in-out infinite alternate; }
@keyframes sway { to { background-position: 26px 14px, -18px -10px, 0 0; } }
[data-theme="forest"] button, [data-theme="moss"] button {
  border-radius: 18px 7px 18px 7px;
}
[data-theme="forest"] button:hover:not(:disabled),
[data-theme="moss"] button:hover:not(:disabled) { border-radius: 7px 18px 7px 18px; }
[data-theme="forest"] button { transition: border-radius .18s; }
/* 花邊：面板左緣一條像樹皮的粗線 */
[data-theme="forest"] .panel {
  border-left: 4px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* --- 海洋：氣泡往上冒；一條小魚慢慢游過；按鈕全圓 --------------------- */
/* 氣泡要看得出來在動，原本兩層太稀疏、太淡。加密、加大、加深，
   而且白色藍色都要有 —— 不能整片只有白點看起來像雜訊。 */
[data-theme="ocean"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .55) 4px, transparent 5px),
    radial-gradient(circle, rgba(255, 255, 255, .4) 2.5px, transparent 3.5px),
    radial-gradient(circle, rgba(13, 126, 166, .5) 3.5px, transparent 4.5px),
    radial-gradient(circle, rgba(13, 126, 166, .35) 2px, transparent 3px);
  background-size: 140px 190px, 100px 150px, 160px 210px, 90px 130px;
  animation: bubbles 16s linear infinite;
}
@keyframes bubbles {
  from { background-position: 0 100%, 60px 100%, 30px 100%, 110px 100%; }
  to   { background-position: 14px -190px, 46px -150px, 22px -210px, 96px -130px; }
}
[data-theme="ocean"] button { border-radius: 99px; }
/* 花邊：面板上緣一道波浪 */
[data-theme="ocean"] .panel {
  border-top: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --- 賽博：標題偶爾抖一下（很短，不會讓人暈）------------------------- */
[data-theme="cyber"] .camphero h1 { animation: glitch 6s steps(1) infinite; }
@keyframes glitch {
  0%, 92%, 100% { transform: none; text-shadow: 0 0 18px rgba(255, 60, 200, .45); }
  93% { transform: translateX(-2px); text-shadow: 2px 0 var(--ok), -2px 0 var(--accent); }
  95% { transform: translateX(2px); text-shadow: -2px 0 var(--ok), 2px 0 var(--accent); }
}

/* --- 報紙：油墨慢慢暈開；按鈕是方框，按下去像蓋章 --------------------- */
[data-theme="paper"] body { animation: inkbleed 30s ease-in-out infinite alternate; }
@keyframes inkbleed { to { background-position: 3px 3px; } }
[data-theme="paper"] button {
  border-radius: 0; border-width: 2px; text-transform: uppercase; letter-spacing: .1em;
  transition: transform .08s;
}
[data-theme="paper"] button:active:not(:disabled) { transform: translate(1px, 1px); }
/* 花邊：面板上下各一條雙線，像報紙的欄框 */
[data-theme="paper"] .panel {
  border-top: 3px double var(--ink); border-bottom: 3px double var(--ink);
  border-left: 0; border-right: 0; border-radius: 0;
}

/* --- 聖誕：面板上緣一條金蔥花邊；按鈕圓潤帶雪帽 ----------------------- */
[data-theme="xmas"] .panel {
  border-top: 3px dotted color-mix(in srgb, var(--warn) 55%, transparent);
}
[data-theme="xmas"] button { border-radius: 99px; }
[data-theme="xmas"] button.primary { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }

/* --- 牛皮紙：紙面很慢地呼吸；按鈕像貼上去的標籤 ----------------------- */
[data-theme="kraft"] body { animation: papergrain 34s ease-in-out infinite alternate; }
@keyframes papergrain { to { background-position: 5px 4px, -4px 3px, 0 0; } }
[data-theme="kraft"] button {
  border-radius: 2px; border-style: solid;
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  transition: transform .1s;
}
[data-theme="kraft"] button:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
/* 花邊：面板四邊都是針腳 */
[data-theme="kraft"] .panel {
  border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
}

/* --- 苔綠：光斑很慢地移動 --------------------------------------------- */
[data-theme="moss"] body { animation: dapple 32s ease-in-out infinite alternate; }
@keyframes dapple {
  to { background-position: 24% 18%, 70% 40%, 46% 72%, 84% 82%; }
}
[data-theme="moss"] .panel {
  border-left: 4px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

/* --- 黃昏：天上的星星慢慢眨 ------------------------------------------- */
[data-theme="dusk"] body::after {
  content: ""; position: fixed; inset: 0 0 55% 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(rgba(255, 245, 230, .8) .9px, transparent 1.1px),
    radial-gradient(rgba(255, 245, 230, .5) .7px, transparent .9px);
  background-size: 140px 120px, 90px 80px;
  animation: stars 7s ease-in-out infinite alternate;
}
@keyframes stars { to { opacity: .35; } }
[data-theme="dusk"] button { border-radius: 99px; }
[data-theme="dusk"] .panel {
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- 球場：按鈕像記分板上的按鍵（球的彈跳＋旋轉動畫已經在上面定義了）--- */
@keyframes roll { to { transform: rotate(360deg); } }
[data-theme="court"] button {
  border-radius: 3px; border-bottom-width: 3px; font-weight: 700;
  transition: transform .08s, border-bottom-width .08s;
}
[data-theme="court"] button:active:not(:disabled) {
  transform: translateY(2px); border-bottom-width: 1px;
}
/* 花邊：面板左右各一條白色場線 */
[data-theme="court"] .panel {
  box-shadow: var(--shadow-1),
    inset 3px 0 0 rgba(255, 255, 255, .55), inset -3px 0 0 rgba(255, 255, 255, .55);
}

/* --- 前面幾套的動畫也一起關掉 --- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="tech"] body,
  [data-theme="mystic"] .camphero h1,
  [data-theme="cute"] body::after,
  [data-theme="forest"] body,
  [data-theme="forest"] body::after,
  [data-theme="ocean"] body::after,
  [data-theme="ocean"] body::before,
  [data-theme="cyber"] .camphero h1,
  [data-theme="paper"] body,
  [data-theme="kraft"] body,
  [data-theme="moss"] body,
  [data-theme="dusk"] body::after,
  [data-theme="court"] .camphero::after { animation: none; }
  /* 神祕的標題靠動畫才有顏色，關掉動畫要把顏色還回去 */
  [data-theme="mystic"] .camphero h1 {
    background: none; -webkit-text-fill-color: var(--ink); color: var(--ink);
  }
}

/* ===== THEME-PACK-V4 =======================================================
   六套新主題。每一套都自帶：完整色票、字型、花邊、一個會動的東西、
   一種按鈕形狀。                                                         */

/* --- 大草原：乾草黃、金合歡樹、夕陽橘 --------------------------------- */
[data-theme="savanna"] {
  --ink: #2e2515;  --ink-2: #4f4128;  --ink-3: #7a6742;
  --bg: #d9c48b;   --surface: #f7f0dc; --surface-2: #efe3c6;
  --line: #d3c197; --line-2: #b8a273;
  --shell: #4a3a1c; --shell-2: #5d4a26; --shell-ink: #f9f3e2; --shell-ink-2: #c4b189;
  --accent: #b45a1c; --accent-ink: #8c4212; --accent-soft: #f8e3ce;
  --ok: #4f7a2f; --warn: #9a7212; --danger: #a83a24;
  --r-sm: 6px; --r: 11px; --r-lg: 16px;
  --shadow-1: 0 1px 3px rgba(74, 58, 28, .16);
  --shadow-2: 0 12px 30px rgba(74, 58, 28, .26);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  var(--font-body);
  --w-head: 700; --w-h2: 650;
  --tr-head: -.01em; --tr-h2: .01em;
  --label-tr: .14em; --label-case: uppercase;
  --line-body: 1.75; --size-body: 16px;
}
/* 熱氣蒸騰的地平線 */
[data-theme="savanna"] body {
  background-image:
    linear-gradient(to bottom, rgba(255, 214, 140, .35) 0%, transparent 30%),
    repeating-linear-gradient(88deg, rgba(122, 103, 66, .05) 0 2px, transparent 2px 7px);
  background-attachment: fixed;
  animation: heathaze 20s ease-in-out infinite alternate;
}
@keyframes heathaze { to { background-position: 0 0, 6px 0; } }
/* 標題區底部一排剪影：金合歡樹＋一棵猴麵包樹（矮胖樹幹、圓蓬樹冠） */
[data-theme="savanna"] .camphero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58px; pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(ellipse 46px 16px at 14% 74%, var(--shell) 0 100%, transparent),
    linear-gradient(to top, var(--shell) 0 12px, transparent 12px),
    /* 猴麵包樹：又矮又粗的樹幹配一顆圓滾滾的樹冠 */
    radial-gradient(ellipse 30px 30px at 48% 46%, var(--shell) 0 100%, transparent),
    linear-gradient(to top, var(--shell) 0 22px, transparent 22px) 48% 100% / 20px 100% no-repeat,
    radial-gradient(ellipse 62px 20px at 62% 66%, var(--shell) 0 100%, transparent),
    radial-gradient(ellipse 34px 12px at 86% 78%, var(--shell) 0 100%, transparent);
  background-repeat: no-repeat;
}
/* 兩隻獅子從畫面左邊走到右邊，錯開時間看起來像一群。
   原本用 clip-path 自己兜形狀，兜不出獅子的樣子 —— 改用 SVG：
   一顆身體橢圓、一顆鬃毛圓、一顆頭、四條腿、一條尾巴，形狀才對得起來。 */
[data-theme="savanna"] body::before,
[data-theme="savanna"] body::after {
  content: ""; position: fixed; left: -8%; bottom: 3%; z-index: 1; pointer-events: none;
  width: 66px; height: 34px; opacity: .4;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'><g fill='%234a3a1c'><ellipse cx='42' cy='32' rx='25' ry='12'/><circle cx='73' cy='21' r='14'/><ellipse cx='80' cy='19' rx='7' ry='6'/><path d='M14 30 Q0 24 4 38' stroke='%234a3a1c' stroke-width='4' fill='none' stroke-linecap='round'/><rect x='22' y='40' width='5' height='10' rx='2'/><rect x='36' y='42' width='5' height='10' rx='2'/><rect x='56' y='42' width='5' height='10' rx='2'/><rect x='68' y='40' width='5' height='10' rx='2'/></g></svg>");
  background-repeat: no-repeat; background-size: contain;
  animation: prowl 26s linear infinite;
}
[data-theme="savanna"] body::after { bottom: 6%; width: 50px; height: 26px; opacity: .3; animation-delay: -13s; }
@keyframes prowl { to { transform: translateX(120vw); } }
[data-theme="savanna"] button { border-radius: 99px 99px 8px 8px; }
[data-theme="savanna"] .panel { border-bottom: 3px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }

/* --- 叢林：深綠、濕氣、穿過樹冠的光 ----------------------------------- */
[data-theme="jungle"] {
  --ink: #e9f4e4;  --ink-2: #b6cdae;  --ink-3: #8aa583;
  --bg: #10281a;   --surface: #1a3a26; --surface-2: #21482f;
  --line: #2c5b3b; --line-2: #3d7a51;
  --shell: #0a1c11; --shell-2: #16321f; --shell-ink: #d9f2cf; --shell-ink-2: #8aa583;
  --accent: #7fd45f; --accent-ink: #9ee87f; --accent-soft: #1c3a22;
  --ok: #7fd45f; --warn: #e3c14f; --danger: #f0776a;
  --r-sm: 9px; --r: 15px; --r-lg: 22px;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(127, 212, 95, .1);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  var(--font-body);
  --w-head: 700; --w-h2: 650;
  --tr-head: -.02em; --tr-h2: 0;
  --label-tr: .1em; --label-case: none;
  --line-body: 1.8; --size-body: 16.5px;
}
/* 穿過樹冠的光柱，慢慢移動 */
[data-theme="jungle"] body {
  background-image:
    linear-gradient(105deg, transparent 20%, rgba(190, 255, 160, .07) 26%, transparent 32%),
    linear-gradient(105deg, transparent 55%, rgba(190, 255, 160, .05) 60%, transparent 66%),
    radial-gradient(140% 90% at 50% 0%, rgba(127, 212, 95, .1), transparent 60%);
  background-attachment: fixed;
  animation: sunbeam 24s ease-in-out infinite alternate;
}
@keyframes sunbeam { to { background-position: 60px 0, -40px 0, 0 0; } }
/* 標題區四角垂下來的葉子 */
[data-theme="jungle"] .camphero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60px; pointer-events: none;
  opacity: .4;
  background:
    radial-gradient(ellipse 40px 26px at 8% 0%, var(--accent) 0 60%, transparent),
    radial-gradient(ellipse 30px 20px at 22% 0%, var(--line-2) 0 60%, transparent),
    radial-gradient(ellipse 46px 30px at 88% 0%, var(--accent) 0 55%, transparent),
    radial-gradient(ellipse 26px 18px at 74% 0%, var(--line-2) 0 60%, transparent);
  background-repeat: no-repeat;
}
[data-theme="jungle"] button { border-radius: 20px 6px 20px 6px; }
[data-theme="jungle"] .panel { border-left: 4px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* --- 寵物：奶油色、肉球、圓得不得了 ----------------------------------- */
[data-theme="pet"] {
  --ink: #43302a;  --ink-2: #6d5347;  --ink-3: #99806f;
  --bg: #fff4e6;   --surface: #fffdf9; --surface-2: #fdeedd;
  --line: #f3ddc4; --line-2: #e5c2a0;
  --shell: #8a5a3c; --shell-2: #74472e; --shell-ink: #fff6ec; --shell-ink-2: #e8cdb5;
  --accent: #e07f3e; --accent-ink: #b95f26; --accent-soft: #ffe9d5;
  --ok: #5aa86a; --warn: #b8801a; --danger: #d75c4d;
  --r-sm: 14px; --r: 22px; --r-lg: 32px;
  --shadow-1: 0 3px 0 var(--line-2);
  --shadow-2: 0 6px 0 var(--line-2), 0 16px 32px rgba(138, 90, 60, .16);

  --font-head: "Yuanti TC", "Yuanti SC", "Microsoft JhengHei", sans-serif;
  --font-num:  var(--font-body);
  --w-head: 800; --w-h2: 700;
  --tr-head: -.02em; --tr-h2: 0;
  --label-tr: .06em; --label-case: none;
  --line-body: 1.8; --size-body: 16.5px;
}
/* 一排慢慢走過去的肉球腳印 */
[data-theme="pet"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle, rgba(224, 127, 62, .16) 6px, transparent 7px),
    radial-gradient(circle, rgba(224, 127, 62, .12) 3px, transparent 4px);
  background-size: 190px 150px, 190px 150px;
  background-position: 0 0, 14px -14px;
  animation: pawwalk 40s linear infinite;
}
@keyframes pawwalk { to { background-position: 190px 0, 204px -14px; } }
[data-theme="pet"] button { border-radius: 99px; transition: transform .12s; }
[data-theme="pet"] button:hover:not(:disabled) { transform: translateY(-2px) rotate(1.5deg); }
[data-theme="pet"] button:active:not(:disabled) { transform: scale(.94); }
[data-theme="pet"] .panel { border-bottom: 4px solid var(--line-2); }

/* --- 馬戲團：紅白條紋、金色、圓弧招牌字 ------------------------------- */
[data-theme="circus"] {
  --ink: #2b1a20;  --ink-2: #543440;  --ink-3: #8a6472;
  --bg: #f6e7e2;   --surface: #fffaf6; --surface-2: #fdeee6;
  --line: #f0cfc4; --line-2: #dda596;
  --shell: #8c1c2c; --shell-2: #6f1422; --shell-ink: #ffe9b8; --shell-ink-2: #f0c39a;
  --accent: #c8202f; --accent-ink: #9c1523; --accent-soft: #ffe1de;
  --ok: #2f7d52; --warn: #c58a10; --danger: #c8202f;
  --r-sm: 8px; --r: 14px; --r-lg: 22px;
  --shadow-1: 0 2px 0 var(--line-2);
  --shadow-2: 0 6px 0 var(--line-2), 0 16px 36px rgba(140, 28, 44, .2);

  --font-head: "Bodoni 72", Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 800; --w-h2: 700;
  --tr-head: .01em; --tr-h2: .02em;
  --label-tr: .2em; --label-case: uppercase;
  --line-body: 1.72; --size-body: 16px;
}
/* 帳篷的紅白條紋，很慢地轉 */
[data-theme="circus"] body {
  background-image: repeating-conic-gradient(from 0deg at 50% -40%,
    rgba(200, 32, 47, .07) 0deg 6deg, transparent 6deg 12deg);
  background-attachment: fixed;
  animation: bigtop 60s linear infinite;
}
@keyframes bigtop { to { background-position: 0 40px; } }
/* 標題區上緣一排燈泡 */
[data-theme="circus"] .camphero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 12px; pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, var(--warn) 3px, transparent 4px);
  background-size: 26px 12px;
  animation: bulbs 2.4s steps(2) infinite;
}
@keyframes bulbs { 50% { opacity: .4; } }
/* 標題區左上角掛一根鞦韆桿，一個空中飛人盪過去、盪回來 —— 這裡借用
   本來給每套主題畫左邊那條色線的 ::before，馬戲團不缺那條線，
   有飛人比較有戲。桿子底端那個紅點就是飛人。 */
[data-theme="circus"] .camphero { overflow: visible; }
[data-theme="circus"] .camphero::before {
  content: ""; position: absolute; top: -6px; left: 20%; width: 2px; height: 56px;
  background: rgba(43, 26, 32, .4); transform-origin: top center; pointer-events: none;
  box-shadow: 0 56px 0 -2px var(--accent);
  animation: trapeze 5s ease-in-out infinite;
}
@keyframes trapeze {
  0%, 100% { transform: rotate(-32deg); }
  50%      { transform: rotate(32deg); }
}
[data-theme="circus"] button {
  border-radius: 99px; border-width: 2px; font-weight: 700;
  box-shadow: 0 2px 0 var(--line-2);
}
/* 面板花邊：原本的紅色直條紋 + 加一排爆米花般的白色小顆粒 */
[data-theme="circus"] .panel {
  border-top: 5px solid var(--accent);
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 10%, transparent) 0 12px, transparent 12px 24px),
    radial-gradient(circle at 20% 50%, #fff6df 1.6px, transparent 2px),
    radial-gradient(circle at 60% 30%, #fff6df 1.3px, transparent 1.8px),
    radial-gradient(circle at 85% 60%, #fff6df 1.6px, transparent 2px);
  background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px;
  background-repeat: no-repeat;
}

/* --- 火山：黑玄武岩、熔岩橘、灰燼 ------------------------------------- */
[data-theme="volcano"] {
  --ink: #f4e8e0;  --ink-2: #c4ada2;  --ink-3: #917d74;
  --bg: #16110f;   --surface: #241b18; --surface-2: #2f2320;
  --line: #3d2d28; --line-2: #573f37;
  --shell: #0d0a09; --shell-2: #1e1614; --shell-ink: #ff9a4d; --shell-ink-2: #917d74;
  --accent: #ff6b1f; --accent-ink: #ff8c4d; --accent-soft: #3a1f12;
  --ok: #6cc08a; --warn: #ffb703; --danger: #ff5a4d;
  --r-sm: 3px; --r: 6px; --r-lg: 9px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .55);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 107, 31, .16);

  --font-head: "Arial Black", "Helvetica Neue", "Microsoft JhengHei", sans-serif;
  --font-num:  ui-monospace, "Cascadia Mono", Consolas, monospace;
  --w-head: 900; --w-h2: 800;
  --tr-head: -.03em; --tr-h2: -.01em;
  --label-tr: .18em; --label-case: uppercase;
  --line-body: 1.65; --size-body: 15.5px;
}
/* 底部的熔岩光在呼吸；灰燼往上飄 */
[data-theme="volcano"] body {
  background-image:
    radial-gradient(120% 60% at 50% 108%, rgba(255, 107, 31, .3), transparent 60%),
    radial-gradient(90% 40% at 20% 104%, rgba(255, 183, 3, .16), transparent 60%);
  background-attachment: fixed;
  animation: lava 8s ease-in-out infinite alternate;
}
@keyframes lava { to { filter: brightness(1.18); } }
[data-theme="volcano"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(rgba(255, 150, 80, .5) 1.2px, transparent 1.5px),
    radial-gradient(rgba(255, 200, 120, .3) .8px, transparent 1px);
  background-size: 170px 190px, 110px 130px;
  animation: embers 30s linear infinite;
}
@keyframes embers {
  from { background-position: 0 100%, 60px 100%; }
  to   { background-position: 30px -190px, 90px -130px; }
}
/* 面板上緣一道熔岩裂縫 */
[data-theme="volcano"] .panel {
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 107, 31, .25);
}
[data-theme="volcano"] button {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
}
[data-theme="volcano"] button.primary { box-shadow: 0 0 18px rgba(255, 107, 31, .4); }

/* ===== 第三輪：YouTube／廚房／學生／Gospel ================================= */

/* --- YouTube：純白配警示紅與近黑。圓體粗標題，標題區下緣有一條會跑的
   播放進度條 --------------------------------------------------------------- */
[data-theme="youtube"] {
  --ink: #0f0f0f;  --ink-2: #606060;  --ink-3: #909090;
  --bg: #f9f9f9;   --surface: #ffffff; --surface-2: #f2f2f2;
  --line: #e5e5e5; --line-2: #d3d3d3;
  /* 頁首直接是紅的，不是黑的 —— 紅白要一眼就看到，不能只靠零星的
     強調色去暗示。 */
  --shell: #e00000; --shell-2: #ff0000; --shell-ink: #ffffff; --shell-ink-2: #ffd6d6;
  --accent: #ff0000; --accent-ink: #cc0000; --accent-soft: #ffe4e4;
  --ok: #2ba640; --warn: #e8a300; --danger: #cc0000;
  --r-sm: 6px; --r: 12px; --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-2: 0 10px 26px rgba(0, 0, 0, .16);

  --font-body: "YouTube Sans", Roboto, "Noto Sans TC", system-ui, sans-serif;
  --font-head: var(--font-body);
  --font-num:  Roboto, var(--font-body);
  --w-head: 800; --w-h2: 750;
  --tr-head: -.01em; --tr-h2: 0;
  --label-tr: .02em; --label-case: none;
  --line-body: 1.7; --size-body: 16px;
}
/* 播放鍵造型的主要按鈕 */
[data-theme="youtube"] button.primary {
  border-radius: 99px; padding-left: 1.3rem;
}
[data-theme="youtube"] button.primary::before { content: "▶  "; font-size: .8em; }
[data-theme="youtube"] button { border-radius: 99px; }
/* 面板也帶一條紅邊，紅白的份量不能只靠頁首撐 */
[data-theme="youtube"] .panel, [data-theme="youtube"] .table-wrap { border-top: 3px solid var(--accent); }
/* 標題區下緣一條會跑的紅色播放進度條，像影片正在播放 */
[data-theme="youtube"] .camphero { border-bottom: 3px solid var(--accent); }
[data-theme="youtube"] .camphero::after {
  content: ""; position: absolute; inset: auto 0 -3px 0; height: 3px;
  background: var(--accent); transform-origin: left; pointer-events: none;
  animation: ytseek 14s linear infinite;
}
@keyframes ytseek {
  0%   { transform: scaleX(0); }
  85%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

/* --- 廚房：奶油白配不鏽鋼灰與番茄紅。底部磁磚花邊，標題區飄著蒸氣 ------- */
[data-theme="kitchen"] {
  --ink: #2c2420;  --ink-2: #5c4f45;  --ink-3: #8c8078;
  --bg: #faf3e8;   --surface: #ffffff; --surface-2: #f1e7d6;
  --line: #e6d9c2; --line-2: #d1c0a0;
  --shell: #52585c; --shell-2: #6b7378; --shell-ink: #fff8ee; --shell-ink-2: #d3d8da;
  --accent: #d64832; --accent-ink: #b23a26; --accent-soft: #fbe2dc;
  --ok: #4a8c5c; --warn: #c98a1c; --danger: #d64832;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow-1: 0 1px 3px rgba(44, 36, 32, .12);
  --shadow-2: 0 12px 28px rgba(44, 36, 32, .18);

  --font-head: Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  var(--font-body);
  --w-head: 750; --w-h2: 700;
  --tr-head: -.01em; --tr-h2: 0;
  --label-tr: .06em; --label-case: none;
  --line-body: 1.75; --size-body: 16px;
}
/* 真的看得出來是廚房地板的黑白方格磁磚，原本那個線條淡到幾乎看不見 */
[data-theme="kitchen"] body {
  background-image:
    repeating-conic-gradient(rgba(74, 82, 87, .16) 0% 25%, transparent 0% 50%);
  background-size: 44px 44px;
  background-attachment: fixed;
}
/* 頁首加一道不鏽鋼拉絲的光澤感，跟廚房電器同一種質感 */
[data-theme="kitchen"] header.site {
  background: repeating-linear-gradient(100deg,
    var(--shell) 0 3px, var(--shell-2) 3px 4px), linear-gradient(180deg, var(--shell), var(--shell-2));
}
/* 標題區飄起來的蒸氣：兩道波浪狀的白霧慢慢往上升、變淡 */
[data-theme="kitchen"] .camphero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 100%; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent 70%) 20% 100% / 40px 90px no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .45), transparent 70%) 80% 100% / 34px 76px no-repeat;
  animation: steam 6s ease-in infinite;
}
@keyframes steam {
  0%   { background-position: 20% 100%, 80% 100%; opacity: 0; }
  15%  { opacity: .5; }
  100% { background-position: 24% -20%, 76% -10%; opacity: 0; }
}
/* 標題區右上角一副交叉的叉子跟湯匙 —— 廚房主題總要有廚具吧 */
[data-theme="kitchen"] .camphero { position: relative; }
[data-theme="kitchen"] .camphero::before {
  content: ""; position: absolute; top: 12px; right: 30px; width: 40px; height: 46px;
  pointer-events: none; color: var(--ink); opacity: .5;
  /* fill 用 currentColor，跟著 color 走 —— 主題的墨色換了，圖示會自動跟上 */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'><g fill='currentColor'><g transform='rotate(-18 14 28)'><rect x='11' y='2' width='2.4' height='14' rx='1.2'/><rect x='16' y='2' width='2.4' height='14' rx='1.2'/><rect x='21' y='2' width='2.4' height='14' rx='1.2'/><rect x='10.5' y='15' width='13' height='4' rx='2'/><rect x='15.3' y='18' width='3.4' height='30' rx='1.7'/></g><g transform='rotate(18 34 28)'><ellipse cx='34' cy='10' rx='7' ry='10'/><rect x='32.3' y='18' width='3.4' height='30' rx='1.7'/></g></g></svg>");
  background-repeat: no-repeat; background-size: contain;
}
/* 一頂廚師帽放在畫面右側的留白 —— 不用擠在標題旁邊，寬螢幕兩側本來
   就有大片空白沒在用。形狀一樣是簡單的圓形＋矩形，不用猜複雜曲線。 */
@media (min-width: 76rem) {
  [data-theme="kitchen"] body::before {
    content: ""; position: fixed; top: 18vh; right: 3vw; z-index: 1; pointer-events: none;
    width: 74px; height: 92px; opacity: .5;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'><g fill='%232c2420'><rect x='6' y='30' width='28' height='15' rx='3'/><ellipse cx='20' cy='19' rx='16' ry='19'/></g></svg>");
    background-repeat: no-repeat; background-size: contain;
  }
}
[data-theme="kitchen"] button { border-radius: 8px; }
[data-theme="kitchen"] .panel { border-top: 3px solid var(--accent); }

/* --- 學生：筆記本米白配螢光黃。橫格線背景、紅色邊界線、鉛筆感按鈕 ------- */
[data-theme="student"] {
  --ink: #262421;  --ink-2: #4c4740;  --ink-3: #7c766c;
  --bg: #fdfbf3;   --surface: #ffffff; --surface-2: #fbf6df;
  --line: #d8e2ea; --line-2: #b9c8d6;
  --shell: #2c3e50; --shell-2: #3a5068; --shell-ink: #fdfbf3; --shell-ink-2: #aab8c4;
  --accent: #2f6fed; --accent-ink: #1f56c4; --accent-soft: #fff6b0;
  --ok: #3f9a52; --warn: #d69e00; --danger: #d6483c;
  --r-sm: 4px; --r: 8px; --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(38, 36, 33, .08);
  --shadow-2: 0 10px 24px rgba(38, 36, 33, .14);

  --font-head: "Comic Sans MS", "Yuanti TC", var(--font-body);
  --font-num:  var(--font-body);
  --w-head: 750; --w-h2: 700;
  --tr-head: 0; --tr-h2: 0;
  --label-tr: .04em; --label-case: none;
  --line-body: 1.8; --size-body: 16px;
}
/* 筆記本橫格線 + 左邊界的紅線 */
[data-theme="student"] body {
  background-image:
    repeating-linear-gradient(rgba(47, 111, 237, .12) 0 1px, transparent 1px 34px),
    linear-gradient(90deg, transparent 0 78px, rgba(214, 72, 60, .28) 78px 79px, transparent 79px);
  background-attachment: fixed;
}
/* 標題底下一條螢光黃的手繪重點線，像用螢光筆畫的 */
[data-theme="student"] .camphero h1 {
  background: linear-gradient(transparent 62%, var(--accent-soft) 62% 88%, transparent 88%);
}
[data-theme="student"] button {
  border-radius: 4px; border-style: dashed; border-width: 2px;
}
[data-theme="student"] .panel { border-style: dashed; }

/* --- Gospel：暖金配奶白。標題區有緩緩流動的光束，安靜的敬拜氛圍 -------- */
[data-theme="gospel"] {
  --ink: #33271a;  --ink-2: #5c4a34;  --ink-3: #8c7a5c;
  --bg: #fbf4e4;   --surface: #fffcf4; --surface-2: #f5ead0;
  --line: #ecdcb8; --line-2: #dcc491;
  --shell: #4a3a20; --shell-2: #5e4a2a; --shell-ink: #fff6e0; --shell-ink-2: #cbb98e;
  --accent: #c9971f; --accent-ink: #a67816; --accent-soft: #f8ecc9;
  --ok: #4a8c5c; --warn: #c9971f; --danger: #b5493a;
  --r-sm: 6px; --r: 12px; --r-lg: 18px;
  --shadow-1: 0 1px 3px rgba(74, 58, 32, .12);
  --shadow-2: 0 14px 34px rgba(74, 58, 32, .18), 0 0 26px rgba(201, 151, 31, .1);

  --font-head: "Iowan Old Style", Georgia, "Songti TC", "Noto Serif TC", serif;
  --font-num:  Georgia, "Songti TC", serif;
  --w-head: 650; --w-h2: 650;
  --tr-head: 0; --tr-h2: 0;
  --label-tr: .1em; --label-case: uppercase;
  --line-body: 1.85; --size-body: 16.5px;
}
/* 標題區背後緩緩轉動的光束，加一個大十字架當背景浮水印 ------------------
   十字架要「直接在後面」，不是角落的小裝飾 —— 所以放大、置中，
   蓋在光束跟文字之間。isolation:isolate 讓 .camphero 自己形成一個
   獨立的疊層範圍，兩個裝飾用的偽元素給負的 z-index，才會確實躲到
   標題文字（h1／副標／統計數字）後面，不會蓋到看不到字。 */
[data-theme="gospel"] .camphero { position: relative; overflow: hidden; isolation: isolate; }
[data-theme="gospel"] .camphero::after {
  content: ""; position: absolute; inset: -40% -40%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg at 50% 20%,
    transparent 0deg, rgba(201, 151, 31, .16) 8deg, transparent 20deg,
    transparent 90deg, rgba(201, 151, 31, .12) 100deg, transparent 116deg,
    transparent 200deg, rgba(201, 151, 31, .14) 210deg, transparent 226deg,
    transparent 360deg);
  animation: godrays 40s linear infinite;
}
@keyframes godrays { to { transform: rotate(360deg); } }
/* 大十字架，置中蓋在整個標題區背後 —— 兩個矩形疊起來，形狀不會出錯 */
[data-theme="gospel"] .camphero::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: min(65%, 260px); aspect-ratio: 2 / 3; transform: translate(-50%, -50%);
  pointer-events: none; opacity: .16; z-index: -1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><rect x='15' y='0' width='10' height='60' rx='2' fill='%23a67816'/><rect x='0' y='14' width='40' height='10' rx='2' fill='%23a67816'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
[data-theme="gospel"] button { border-radius: 99px; }
[data-theme="gospel"] .panel { border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  [data-theme="youtube"] .camphero::after,
  [data-theme="kitchen"] .camphero::after,
  [data-theme="gospel"] .camphero::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="savanna"] body,
  [data-theme="savanna"] body::before,
  [data-theme="savanna"] body::after,
  [data-theme="jungle"] body,
  [data-theme="pet"] body::after,
  [data-theme="circus"] body,
  [data-theme="circus"] .camphero::after,
  [data-theme="circus"] .camphero::before,
  [data-theme="volcano"] body,
  [data-theme="volcano"] body::after { animation: none; }
}