/* ── 打卡牆設計主題 ──────────────────────────────────────────────
   每個主題只覆蓋變數；版面骨架寫在各頁自己的 <style> 裡。
   套用方式：<html data-theme="qixi">（由 theme.js 依場次設定寫入）
   新增主題 = 這裡加一組 [data-theme="xxx"] + theme.js 的 THEMES 加一筆
             + server.js 的 THEME_IDS 加一筆
   ────────────────────────────────────────────────────────────── */

/* 預設：CollaPlay 黃 × 深藍 neo-brutalist */
:root{
  --paper:#fff; --bg:#faf4ec; --ink:#241c4f; --gray:#8a7663; --faint:#f0e3d2;
  --yellow:#ec8a2d; --yellow-soft:#f5bd83; --yellow-pale:#fdf1e2; --red:#c0432b;
  --line:var(--ink);                   /* 框線顏色 */
  --radius:18px;                       /* 卡片圓角 */
  --sh-soft:4px 4px 0 var(--faint);    /* 卡片陰影 */
  --sh-hard:3px 3px 0 var(--ink);      /* 按鈕陰影 */
  --on-accent:#fff;                    /* 疊在 --yellow 上的字色 */
  --ff:'Chiron GoRound TC','Noto Sans TC',sans-serif;
  --ff-title:var(--ff);
  --bg-img:none;
}
body{background-image:var(--bg-img);background-attachment:fixed}

/* ── 七夕 · 限定（Pantone 699 C 粉為主調，胭脂紅只留在漸層與重點）──── */
[data-theme="qixi"]{
  --p699:#f5c6cf;                 /* Pantone 699 C */
  --paper:#fffafb; --bg:#f5c6cf; --ink:#3d0f18; --gray:#8a5a66; --faint:#eeb2c0;
  --yellow:#cf0a2c; --yellow-soft:#e88fa2; --yellow-pale:#fceaef; --red:#a8071f;
  --line:#3d0f18;
  --radius:14px;
  --sh-soft:0 6px 18px rgba(61,15,24,.12);
  --sh-hard:4px 4px 0 var(--ink);
  --ff:'Noto Sans TC','Chiron GoRound TC',sans-serif;
  --ff-title:'Noto Sans TC',sans-serif;
  --ff-en:'Jost','Noto Sans TC',sans-serif;
  --bg-img:
    radial-gradient(closest-side at 76% 86%, rgba(207,10,44,.34), rgba(207,10,44,.10) 55%, transparent 74%),
    radial-gradient(closest-side at 6% 4%, rgba(207,10,44,.14), transparent 68%),
    linear-gradient(160deg, rgba(255,255,255,.55), rgba(245,198,207,0) 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
}
/* 海報上那行淡淡的英文大字 */
[data-theme="qixi"] body::before{
  content:"VALENTINE'S DAY";
  position:fixed;top:1.5vh;left:50%;transform:translateX(-50%);
  font:800 clamp(54px,13.5vw,200px)/1 var(--ff-en);letter-spacing:.02em;
  color:rgba(207,10,44,.13);white-space:nowrap;pointer-events:none;z-index:-1}
[data-theme="qixi"] h1,
[data-theme="qixi"] .hd h1{
  font-family:var(--ff-title);font-weight:900;letter-spacing:2px;
  text-shadow:2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper)}
[data-theme="qixi"] .kicker{font-family:var(--ff-en);letter-spacing:.32em;color:var(--yellow);font-weight:700}
[data-theme="qixi"] .hl{background:linear-gradient(transparent 62%, rgba(207,10,44,.8) 62%);color:var(--ink)}
/* 按鈕：粉 → 紅的漸層，紅色留在這裡當重點 */
[data-theme="qixi"] .btn{background:linear-gradient(135deg,#e2506e,#cf0a2c);border-color:var(--ink);letter-spacing:4px}
[data-theme="qixi"] .tile .nm{letter-spacing:1px}
[data-theme="qixi"] .tile,
[data-theme="qixi"] .card{background:var(--paper)}
[data-theme="qixi"] .hd .cnt b{font-family:var(--ff-en)}
[data-theme="qixi"] .badge.on{background:var(--yellow)}
[data-theme="qixi"] .hd .sess{background:var(--paper)}

/* ── 星夜 · 深色投影 ───────────────────────────────────────── */
[data-theme="midnight"]{
  --paper:#1d2340; --bg:#0e1226; --ink:#f2eefc; --gray:#9aa3c7; --faint:#2c3557;
  --yellow:#ffc861; --yellow-soft:#ffd98f; --yellow-pale:#242c4e; --red:#ff7a6b;
  --line:#4d5788;
  --radius:20px;
  --sh-soft:0 10px 26px rgba(0,0,0,.45);
  --sh-hard:0 6px 16px rgba(0,0,0,.5);
  --on-accent:#231a05;
  --bg-img:
    radial-gradient(closest-side at 15% 12%, rgba(96,120,255,.25), transparent),
    radial-gradient(closest-side at 85% 78%, rgba(180,110,255,.22), transparent);
}
[data-theme="midnight"] .btn{color:var(--on-accent)}
[data-theme="midnight"] label .n{color:var(--on-accent)}
[data-theme="midnight"] .badge.on{color:var(--on-accent)}
[data-theme="midnight"] input,
[data-theme="midnight"] textarea,
[data-theme="midnight"] select{color:var(--ink)}
[data-theme="midnight"] input::placeholder,
[data-theme="midnight"] textarea::placeholder{color:#7c85ad}

/* ── 薄荷 · 清爽 ───────────────────────────────────────────── */
[data-theme="mint"]{
  --paper:#fff; --bg:#eefaf5; --ink:#123b32; --gray:#5f8579; --faint:#cdeee2;
  --yellow:#17a97b; --yellow-soft:#8fdcbf; --yellow-pale:#e6f8f0; --red:#c0432b;
  --line:#1c6b57;
  --radius:16px;
  --sh-soft:3px 3px 0 var(--faint);
  --sh-hard:3px 3px 0 var(--line);
  --bg-img:none;
}

/* ── 裝飾層（愛心／星星），由 theme.js 產生 ─────────────────── */
.deco{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.deco span{position:absolute;top:-8vh;will-change:transform,opacity;opacity:0}
@keyframes decoFall{
  0%{opacity:0;transform:translateY(-10vh) rotate(0deg)}
  10%{opacity:var(--o,.55)}
  90%{opacity:var(--o,.55)}
  100%{opacity:0;transform:translateY(112vh) rotate(var(--r,220deg))}
}
@keyframes decoTwinkle{
  0%,100%{opacity:.15;transform:scale(.85)}
  50%{opacity:.9;transform:scale(1.15)}
}
@media (prefers-reduced-motion: reduce){
  .deco{display:none}
}