/* ===== 輪迴刃 Samsara Blade — 水墨暗黑武俠 UI =====
   視覺依 kimi 原型(proto/index.html)落地:輪迴朱印 + 書法標題 + 全屏世界背景 +
   HUD 卡片組 + 朱砂邊條卷軸 + ◆ 選項 + 底部頁籤 + GM/玩家對話氣泡。
   字體:--font-display / --font-body 由 assets/fonts/fonts.css 定義,此處只提供 fallback。 */
/* 主題:預設暗色(墨夜)。淺色(宣紙)喺檔尾「淺色主題」一節,見 :root[data-theme="light"]。
   鐵律:全份 CSS 唔准再寫死顏色,一律經下面嘅變量;
        半透明用 rgba(var(--c-XXX),α) 三元組,咁樣一換主題連疊底方向都跟住反。 */
:root{
  --ink:#0b0908;
  --ink2:#16110f;
  --paper:#f0e7d4;          /* 宣紙 */
  --paper-dim:#b3a68f;
  --edge:#c1272d;           /* 刀鋒朱砂 */
  --edge-dim:#8a1f22;
  --gold:#c9a24b;           /* 墨金 */
  --gold-dim:#8f7433;
  --jade:#5fa88f;
  --cyan-neon:#38e1ff;      /* 霓虹江湖 */
  --amber:#f0a83c;          /* 恩怨江湖 */
  --panel:rgba(20,16,14,.74);
  --panel2:rgba(34,27,24,.88);
  --line:rgba(201,162,75,.26);
  --shadow:0 12px 40px rgba(0,0,0,.55);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* ---- RGB 三元組:畀 rgba() 疊色用 ----
     --c-surface = 卡片/面板疊落背景嗰層(暗色=黑,淺色=近白宣紙),α 越大越突出;
     --c-fg      = 文字/細線色(暗色=米白,淺色=墨),低 α 即係髮絲線同淡底。 */
  --c-surface:0,0,0;
  --c-fg:240,231,212;
  --c-gold:201,162,75;
  --c-edge:193,39,45;
  --c-jade:95,168,143;

  /* ---- 語意色(狀態/提示) ---- */
  --pos:#7bc47b;            /* 好感上升 / 正聲望 */
  --neg:#e89aa0;            /* 好感下降 / 負聲望 / 敵方 */
  --note-good:#a7e3c6;
  --note-bad:#f0b3b3;
  --note-omen:#ecd79a;
  --on-edge:#fff;           /* 朱砂底上面嘅字 */

  /* ---- 主題化組件值(淺色只需覆蓋變量,唔使覆蓋規則) ---- */
  --bg-img-filter:brightness(.42) saturate(.85);
  --bg-img-opacity:1;
  --bg-overlay:
    radial-gradient(circle at 50% 26%, rgba(0,0,0,.22), rgba(0,0,0,.78) 80%),
    linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,.9));
  --grain-opacity:.1;
  --grain-blend:normal;
  --toast-bg:rgba(20,16,14,.95);
  --btn-primary-bg:rgba(193,39,45,.82);
  --tab-idle:rgba(240,231,212,.55);

  /* ---- 光暈 / 投影(暗底先有霓虹感,淺色會收細甚至取消) ---- */
  --tx-shadow:0 2px 10px rgba(0,0,0,.7);
  --title-shadow:0 0 32px rgba(193,39,45,.4),0 4px 22px rgba(0,0,0,.85);
  --glow-edge:0 0 14px rgba(193,39,45,.55);
  --glow-edge-lg:0 0 30px rgba(193,39,45,.6);
  --glow-gold:0 0 28px rgba(201,162,75,.5);
  --glow-seal:0 0 22px rgba(193,39,45,.35);
  --glow-btn:0 6px 22px rgba(193,39,45,.42);

  /* ---- 世界卡底圖(淺色會退成紙上淡水印) ---- */
  --card-img-filter:brightness(.5) saturate(.8);
  --card-img-opacity:1;
  --card-overlay:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.4) 100%);

  /* ---- 次要文字透明度(淺色底要調高先夠對比) ---- */
  --op-faint:.5;
  --op-soft:.72;
  --op-strong:.9;
  color-scheme:dark;

  /* ---- 向量圖標(自繪幾何裝飾,內嵌 data-URI,零外部請求) ---- */
  --ico-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 97 50 50 97 3 50Z'/%3E%3C/svg%3E");
  --ico-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 1c5.5 27.4 21.1 43 48.5 49-27.4 6-43 21.6-48.5 49-5.5-27.4-21.1-43-48.5-49 27.4-6 43-21.6 48.5-49z'/%3E%3C/svg%3E");
  /* ---- 向量圖標(game-icons.net,CC BY 3.0,見 assets/CREDITS.md) ---- */
  --ico-tab-story:url("assets/icons/tab-story.svg");
  --ico-tab-live:url("assets/icons/tab-live.svg");
  --ico-tab-chapters:url("assets/icons/tab-chapters.svg");
  --ico-tab-saves:url("assets/icons/tab-saves.svg");
  --ico-tab-settings:url("assets/icons/tab-settings.svg");
  --ico-locked:url("assets/icons/locked.svg");
  /* 六種天賦圖標(拳/盾/劍/翼足/書/錢) */
  --ico-t-might:url("assets/icons/might.svg");
  --ico-t-tough:url("assets/icons/tough.svg");
  --ico-t-sword:url("assets/icons/sword.svg");
  --ico-t-swift:url("assets/icons/swift.svg");
  --ico-t-lore:url("assets/icons/lore.svg");
  --ico-t-fortune:url("assets/icons/fortune.svg");
}
/* 圖標通用:用 mask 上色,顏色一律跟 currentColor / CSS 變量 */
.icon-mask{
  display:inline-block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
html,body{min-height:100%;}
body{
  font-family:var(--font-body,"Noto Serif TC","Noto Serif SC","Songti SC","SimSun",serif);
  color:var(--paper);background:var(--ink);
  display:flex;flex-direction:column;min-height:100vh;
  overflow-x:hidden;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 背景三層 ---------- */
#bg-image{
  position:fixed;inset:0;z-index:-3;background-color:var(--ink);
  background-size:cover;background-position:center;
  filter:var(--bg-img-filter);opacity:var(--bg-img-opacity);
  transition:filter .5s ease,opacity .5s ease;
}
#bg-overlay{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:var(--bg-overlay);
}
#bg-grain{
  position:fixed;inset:0;z-index:-1;opacity:var(--grain-opacity);pointer-events:none;
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 頂欄 ---------- */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  border-bottom:1px solid rgba(var(--c-fg),.1);
  background:linear-gradient(180deg,rgba(var(--c-surface),.78),rgba(var(--c-surface),.15));
  position:sticky;top:0;z-index:20;backdrop-filter:blur(4px);
}
.brand{
  font-family:var(--font-display,"Ma Shan Zheng","ZCOOL XiaoWei",cursive);
  font-size:26px;letter-spacing:.14em;cursor:pointer;user-select:none;
  text-shadow:var(--tx-shadow);
}
.brand .edge{color:var(--edge);text-shadow:var(--glow-edge);}
.top-right{display:flex;gap:8px;}
.lang-btn,.menu-btn{
  font-family:inherit;cursor:pointer;color:var(--paper);
  background:rgba(var(--c-surface),.45);border:1px solid rgba(var(--c-fg),.28);border-radius:4px;
  padding:6px 12px;font-size:13px;transition:.18s;letter-spacing:.06em;
}
.lang-btn{min-width:42px;font-weight:700;color:var(--gold);border-color:var(--gold-dim);}
.lang-btn:hover,.menu-btn:hover{border-color:var(--gold);background:rgba(var(--c-gold),.14);}

/* ---------- 舞台 ---------- */
#stage{flex:1;width:100%;max-width:900px;margin:0 auto;padding:20px 16px 40px;}
body.has-tabs #stage{padding-bottom:calc(96px + var(--safe-bottom));}
#foot{text-align:center;color:var(--paper-dim);font-size:11.5px;padding:10px;opacity:var(--op-faint);}

/* ---------- 底部頁籤 ---------- */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;align-items:stretch;
  padding:6px 4px calc(6px + var(--safe-bottom));
  background:linear-gradient(to top,rgba(var(--c-surface),.95),rgba(var(--c-surface),.72));
  border-top:1px solid rgba(var(--c-fg),.12);backdrop-filter:blur(8px);
}
#tabbar.hidden{display:none;}
#tabbar .tab{
  flex:1;background:transparent;border:none;cursor:pointer;
  color:var(--tab-idle);font-family:inherit;font-size:11.5px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-top:2px solid transparent;transition:.18s;letter-spacing:.08em;
}
/* 頁籤圖標:SVG mask,顏色跟 .tab 的 currentColor(未選=米白半透,選中=金) */
#tabbar .tab .ti{
  display:block;width:21px;height:21px;flex-shrink:0;
  background-color:currentColor;transition:background-color .18s;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:var(--i);mask-image:var(--i);
}
#tabbar .tab .ti-story{--i:var(--ico-tab-story);}
#tabbar .tab .ti-live{--i:var(--ico-tab-live);}
#tabbar .tab .ti-chapters{--i:var(--ico-tab-chapters);}
#tabbar .tab .ti-saves{--i:var(--ico-tab-saves);}
#tabbar .tab .ti-settings{--i:var(--ico-tab-settings);}
#tabbar .tab:hover{color:var(--paper);}
#tabbar .tab.active{color:var(--gold);border-top-color:var(--gold);}

/* ---------- 標題頁 ---------- */
/* 標題頁採「一屏放得晒」預算:標題區收細、tagline 加大、掣高收窄。
   手機(≤480px)再收多一輪,目標 8 個掣都唔使捲。 */
.title-wrap{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:calc(100vh - 120px);padding:12px 0;
  animation:fade .6s ease;
}
.seal{
  width:56px;height:56px;border:3px solid var(--edge);color:var(--edge);
  display:grid;place-items:center;border-radius:3px;
  font-family:var(--font-display,"Ma Shan Zheng",cursive);font-size:24px;line-height:1;
  transform:rotate(-6deg);box-shadow:var(--glow-seal);
  margin-bottom:14px;
}
.big-title{
  font-family:var(--font-display,"Ma Shan Zheng","ZCOOL XiaoWei",cursive);
  font-size:clamp(48px,14vw,100px);letter-spacing:.12em;line-height:1.04;
  margin:0 0 4px;text-shadow:var(--title-shadow);
}
.big-title .edge{color:var(--edge);text-shadow:var(--glow-edge-lg);}
.subtitle{color:var(--gold);letter-spacing:.42em;font-size:13px;margin-bottom:3px;opacity:var(--op-strong);}
/* 四行 tagline:字加大到 15px(手機睇得清),行距同上下留白收窄補返高度 */
.title-poem{
  color:var(--paper-dim);font-size:15px;line-height:1.85;margin:12px auto 14px;max-width:430px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 8px;
  white-space:pre-wrap;
}
.title-btns{display:flex;flex-direction:column;gap:8px;width:100%;max-width:330px;margin:0 auto;}
.title-btns .btn{text-align:center;padding:11px 16px;line-height:1.5;}
.account-bar{margin:12px auto 0;font-size:13px;color:var(--paper-dim);}
.acct-link{color:var(--gold);cursor:pointer;border-bottom:1px dashed var(--gold-dim);}
.acct-link:hover{color:var(--paper);}
.title-wrap .mini{margin-top:9px;}
.tagline{margin-top:12px;font-size:12.5px;letter-spacing:.2em;opacity:var(--op-faint);}

/* ---------- 通用面板 ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:18px 16px;box-shadow:var(--shadow);animation:fade .4s ease;backdrop-filter:blur(4px);
}
/* 注意:--font-display 係 241 字子集(見 assets/fonts/fonts.css),只夠固定短 UI 字串。
   凡係「動態內容」(角色名/敵人名/結局標題)或含子集外字元嘅標題,一律用內文襯線,
   免得同一句字一半書法體一半宋體。已驗證安全嘅有:輪迴刃 / 卷言章存設 / 現代古代仙俠。 */
.section-title{
  font-size:26px;color:var(--paper);letter-spacing:.08em;margin:0 0 4px;font-weight:400;
}
.section-sub{color:var(--paper-dim);font-size:13px;margin:0 0 16px;line-height:1.7;}
.divider{height:1px;background:var(--line);margin:16px 0;}
.tip{color:var(--paper-dim);font-size:12px;text-align:center;margin-top:10px;line-height:1.7;}
.mini{color:var(--paper-dim);font-size:12px;text-align:center;margin-top:14px;line-height:1.8;max-width:460px;}
.row-btns{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto;}
.row-btns .btn{text-align:center;}
.hidden{display:none !important;}

/* ---------- 輸入 ---------- */
.acct-input{
  font-family:inherit;background:rgba(var(--c-surface),.5);color:var(--paper);
  border:1px solid rgba(var(--c-fg),.22);border-radius:4px;
  padding:12px 13px;font-size:15px;text-align:center;transition:.18s;
}
.acct-input::placeholder{color:rgba(var(--c-fg),.38);}
.acct-input:focus{outline:none;border-color:var(--gold);}
.cap-row{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;}
/* 驗證碼圖片底:兩個主題都要純白,因為 PNG 本身係白底黑字,唔跟主題 */
.cap-img{background:rgba(255,255,255,.9);border-radius:4px;min-width:120px;min-height:44px;
  display:grid;place-items:center;overflow:hidden;}

/* ---------- 按鈕 ---------- */
.btn{
  font-family:inherit;cursor:pointer;color:var(--paper);
  background:rgba(var(--c-surface),.55);border:1px solid rgba(var(--c-fg),.2);border-radius:3px;
  padding:14px 16px;font-size:15.5px;text-align:left;transition:.2s;position:relative;
  width:100%;display:block;line-height:1.6;backdrop-filter:blur(3px);
}
.btn:hover:not(:disabled){background:rgba(var(--c-gold),.13);border-color:var(--gold);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:disabled{opacity:.38;cursor:not-allowed;}
.btn.primary{
  background:var(--btn-primary-bg);border-color:var(--edge);text-align:center;
  font-weight:700;letter-spacing:.14em;color:var(--on-edge);
}
.btn.primary:hover:not(:disabled){background:var(--edge);box-shadow:var(--glow-btn);}
.btn.ghost{text-align:center;background:rgba(var(--c-surface),.35);}
.btn .hint{color:var(--gold);font-size:12px;margin-left:6px;}
.btn .lock{color:var(--edge);font-size:12px;float:right;}
.btn .roll{color:var(--jade);font-size:13px;float:right;font-weight:700;}

/* ---------- 世界選擇(大卡 + 眉題) ---------- */
.bg-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:820px){.bg-grid{grid-template-columns:repeat(3,1fr);}}
.world-card{
  position:relative;min-height:210px;border-radius:4px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(var(--c-fg),.14);transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.world-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold);}
.world-card .wc-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--ink2);filter:var(--card-img-filter);opacity:var(--card-img-opacity);
  transition:transform 6s ease;
}
.world-card:hover .wc-bg{transform:scale(1.06);}
.world-card .wc-overlay{
  position:absolute;inset:0;background:var(--card-overlay);
}
.world-card .wc-content{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:16px;min-height:210px;
}
.wc-tag{font-size:11.5px;letter-spacing:.24em;margin-bottom:6px;}
.wc-name{
  font-family:var(--font-display,"Ma Shan Zheng",cursive);
  font-size:30px;line-height:1.1;margin-bottom:6px;
}
.wc-desc{font-size:13px;opacity:var(--op-strong);line-height:1.75;}
.wc-worlds{list-style:none;font-size:12px;opacity:var(--op-soft);margin-top:8px;}
.wc-worlds li{padding:1px 0;}
.world-modern .wc-tag{color:var(--cyan-neon);}
.world-ancient .wc-tag{color:var(--amber);}
.world-xianxia .wc-tag{color:var(--jade);}

/* ---------- 角色選擇 ---------- */
.char-head{margin-bottom:14px;}
.char-grid{display:grid;grid-template-columns:1fr;gap:11px;}
@media(min-width:640px){.char-grid{grid-template-columns:repeat(2,1fr);}}
.char-card{
  cursor:pointer;border:1px solid rgba(var(--c-fg),.15);border-radius:4px;padding:14px;
  background:rgba(var(--c-surface),.7);transition:.22s;position:relative;
  display:flex;gap:13px;backdrop-filter:blur(4px);
}
.char-card:hover{border-color:var(--gold);background:rgba(var(--c-surface),.86);}
.char-card.sel{border-color:var(--gold);background:rgba(var(--c-surface),.9);
  box-shadow:0 0 0 1px var(--gold),var(--shadow);}
.char-avatar{
  width:60px;height:60px;flex-shrink:0;border-radius:50%;
  background:rgba(var(--c-fg),.08);border:2px solid rgba(var(--c-gold),.38);
  display:grid;place-items:center;font-size:28px;
}
.char-info{flex:1;min-width:0;}
.char-card h4{
  margin:0;font-size:22px;letter-spacing:.06em;font-weight:400;
}
.char-gender{font-size:12px;color:var(--gold);margin:2px 0 4px;opacity:var(--op-strong);}
.char-persona{font-size:12px;color:var(--jade);margin-bottom:5px;}
.char-desc{font-size:12.5px;color:var(--paper-dim);line-height:1.65;}
.stat-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:9px;
  font-size:11px;text-align:center;color:var(--paper-dim);
}
.stat-row span{background:rgba(var(--c-fg),.06);border-radius:2px;padding:4px 1px;}
.stat-row b{display:block;color:var(--gold);font-size:14px;font-weight:700;}

/* ---------- HUD 卡片組 ---------- */
.hud{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px;}
@media(min-width:640px){.hud{grid-template-columns:repeat(4,1fr);}}
.hud-block{
  background:rgba(var(--c-surface),.5);border:1px solid rgba(var(--c-fg),.1);border-radius:4px;
  padding:8px 10px;font-size:12.5px;line-height:1.55;backdrop-filter:blur(3px);
}
.hud-block.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px;}
.hud-block label{display:block;opacity:var(--op-faint);font-size:10.5px;letter-spacing:.1em;margin-bottom:2px;}
.hud-block b{color:var(--paper);}
.hud-name{
  font-size:20px;color:var(--gold);letter-spacing:.06em;
}
.hud-av{font-size:22px;}
.hp-bar{height:6px;border-radius:3px;background:rgba(var(--c-fg),.12);overflow:hidden;margin-top:5px;}
.hp-fill{height:100%;background:linear-gradient(90deg,var(--edge-dim),var(--edge));transition:width .4s;}
.persona-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;}
.persona-chips span{background:rgba(var(--c-fg),.1);border-radius:2px;padding:1px 5px;font-size:11px;}
.aff-up{color:var(--pos);}
.aff-down{color:var(--neg);}

/* ---------- 劇情 ---------- */
.chapter-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.14em;
  color:var(--gold);margin-bottom:10px;padding:5px 11px;border-radius:2px;
  border:1px solid rgba(var(--c-gold),.35);background:rgba(var(--c-surface),.4);
}
.story-text{
  background:rgba(var(--c-surface),.55);border:1px solid rgba(var(--c-fg),.08);
  border-left:3px solid var(--edge);border-radius:2px;
  padding:18px 17px;font-size:17.5px;line-height:2;margin-bottom:14px;
  white-space:pre-wrap;text-align:justify;animation:fade .4s ease;
  backdrop-filter:blur(3px);transition:opacity .26s ease;
}
.story-text.emb-fading{opacity:0;}
/* 潤飾標示改為只留文末 ✦(用戶:邊條變色太搶眼) —— 邊條保持朱砂 */
/* ✦ 由向量圖標取代:元素本身當遮罩,原字元用 text-indent 推走 */
.emb-mark{
  display:inline-block;width:.78em;height:.78em;overflow:hidden;text-indent:-4em;
  background-color:var(--gold);opacity:.85;margin-left:.3em;vertical-align:.02em;
  -webkit-mask:var(--ico-spark) no-repeat center/contain;
  mask:var(--ico-spark) no-repeat center/contain;
}
.event-note{
  background:rgba(var(--c-jade),.12);border:1px solid rgba(var(--c-jade),.4);border-radius:3px;
  padding:10px 14px;color:var(--note-good);font-size:13.5px;margin-bottom:10px;line-height:1.8;
  animation:fade .4s ease;
}
.event-note.bad{background:rgba(var(--c-edge),.12);border-color:rgba(var(--c-edge),.45);color:var(--note-bad);}
.event-note.omen{background:rgba(var(--c-gold),.12);border-color:var(--gold-dim);color:var(--note-omen);}

/* ◆ 選項列 */
.choices{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.choices .btn{padding-left:38px;}
.choices .btn::before{
  content:'';position:absolute;left:15px;top:21px;width:9px;height:9px;
  background-color:var(--gold);opacity:.7;
  -webkit-mask:var(--ico-diamond) no-repeat center/contain;
  mask:var(--ico-diamond) no-repeat center/contain;
}
.choices .btn:hover:not(:disabled){padding-left:42px;}
.choices .btn.primary{padding-left:16px;}
.choices .btn.primary::before{content:none;}

/* ---------- 戰鬥 ---------- */
.enemy-box{background:rgba(var(--c-surface),.6);border:1px solid var(--edge-dim);border-radius:4px;
  padding:14px;margin-bottom:12px;backdrop-filter:blur(3px);}
.enemy-top{display:flex;justify-content:space-between;align-items:center;}
.enemy-top .en{
  font-size:22px;color:var(--edge);letter-spacing:.08em;
}
.enemy-top .stat{font-size:13px;color:var(--paper-dim);}
.combat-log{background:rgba(var(--c-surface),.5);border:1px solid rgba(var(--c-fg),.1);border-radius:4px;
  padding:11px 14px;font-size:13px;line-height:1.9;max-height:170px;overflow-y:auto;
  margin-bottom:12px;color:var(--paper-dim);}
.combat-log .me{color:var(--jade);}
.combat-log .foe{color:var(--neg);}
.combat-log .crit{color:var(--gold);font-weight:700;}
.combat-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.combat-actions .btn{text-align:center;}

/* ---------- 死亡 / 結局 ---------- */
.result-wrap{text-align:center;padding:26px 0;animation:fade .6s ease;
  display:flex;flex-direction:column;align-items:center;}
.result-title{
  font-size:clamp(38px,12vw,60px);letter-spacing:.24em;margin:10px 0;line-height:1.2;
}
.result-title.death{color:var(--edge);text-shadow:var(--glow-edge-lg);}
.result-title.win{color:var(--gold);text-shadow:var(--glow-gold);}
.result-desc{color:var(--paper-dim);line-height:2;max-width:470px;margin:14px auto 22px;
  font-size:14.5px;white-space:pre-wrap;}
.unlock-note{background:rgba(var(--c-gold),.1);border:1px solid var(--gold-dim);border-radius:3px;
  padding:12px;color:var(--gold);margin:0 auto 20px;max-width:430px;font-size:13.5px;line-height:1.8;}

/* ---------- 章節 / 存檔 ---------- */
.chap-sec-title{text-align:left;font-size:18px;color:var(--gold);margin-bottom:8px;
  letter-spacing:.14em;}
.chap-list{display:flex;flex-direction:column;gap:9px;}
.chap-card{
  display:flex;align-items:center;gap:13px;text-align:left;
  background:rgba(var(--c-surface),.5);border:1px solid rgba(var(--c-fg),.12);border-radius:3px;
  padding:12px 13px;cursor:pointer;transition:.22s;backdrop-filter:blur(3px);
}
.chap-card:hover{background:rgba(var(--c-surface),.72);border-color:var(--gold);}
.chap-card.locked{opacity:.45;cursor:default;}
.chap-card.locked:hover{border-color:rgba(var(--c-fg),.12);background:rgba(var(--c-surface),.5);}
.chap-num{
  width:42px;height:42px;flex-shrink:0;border:1px solid rgba(var(--c-fg),.2);border-radius:2px;
  display:grid;place-items:center;color:var(--gold);font-size:19px;
}
/* 未解鎖篇章的 ◇ 換成鎖頭圖標(原字元用 text-indent 推走) */
.chap-card.locked .chap-num{position:relative;font-size:0;}
.chap-card.locked .chap-num::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;background-color:currentColor;
  -webkit-mask:var(--ico-locked) no-repeat center/contain;
  mask:var(--ico-locked) no-repeat center/contain;
}
.chap-body{flex:1;min-width:0;}
.chap-card h4{margin:0 0 3px;font-size:15.5px;letter-spacing:.04em;font-weight:400;}
.chap-card .meta{font-size:12px;color:var(--paper-dim);line-height:1.6;}
.chap-card .done{flex-shrink:0;font-size:11px;padding:3px 7px;border-radius:2px;
  border:1px solid rgba(var(--c-jade),.5);color:var(--jade);}

.save-grid{display:grid;grid-template-columns:1fr;gap:11px;}
@media(min-width:640px){.save-grid{grid-template-columns:repeat(2,1fr);}}
.save-card{background:rgba(var(--c-surface),.5);border:1px solid rgba(var(--c-fg),.12);border-radius:3px;
  padding:14px;cursor:pointer;transition:.22s;backdrop-filter:blur(3px);}
.save-card:hover{border-color:var(--gold);background:rgba(var(--c-surface),.68);}
.save-card.empty{opacity:.55;border-style:dashed;cursor:default;}
.save-card.empty:hover{border-color:rgba(var(--c-fg),.12);background:rgba(var(--c-surface),.5);}
.save-time{font-size:11.5px;opacity:var(--op-faint);margin-bottom:5px;letter-spacing:.06em;}
.save-title{font-size:16px;margin-bottom:4px;}
.save-detail{font-size:12.5px;opacity:var(--op-soft);line-height:1.7;}

/* ---------- AI 即時劇情:對話氣泡 ---------- */
#live-scroll{display:flex;flex-direction:column;gap:16px;margin:6px 0 14px;}
.live-turn{
  max-width:88%;padding:14px 16px;font-size:17px;line-height:1.9;border-radius:3px;
  white-space:pre-wrap;position:relative;animation:fade .36s ease;
}
.live-turn.gm{
  align-self:flex-start;background:rgba(var(--c-surface),.62);border-left:3px solid var(--gold);
  backdrop-filter:blur(3px);
}
/* 敘事氣泡唔加任何標籤(「GM」「主持」都出戲) —— 靠左對齊+紙色底+金色左邊條已足夠識別 */
.live-turn.you{
  align-self:flex-end;background:rgba(var(--c-edge),.2);border-right:3px solid var(--edge);
  text-align:right;
}
.live-turn.you::before{
  content:'你';position:absolute;top:-8px;right:10px;background:var(--edge);color:var(--on-edge);
  font-size:9.5px;font-weight:700;padding:1px 6px;letter-spacing:.1em;border-radius:2px;
}
.live-turn.sys{
  align-self:center;max-width:94%;text-align:center;
  background:rgba(var(--c-jade),.12);border:1px dashed var(--jade);color:var(--jade);
  font-size:13px;padding:6px 14px;border-radius:14px;
}
.cursor{color:var(--edge);animation:blink 1s step-start infinite;margin-left:1px;}
@keyframes blink{50%{opacity:0;}}

/* 擲言輸入 + 快速行動 chips */
.live-input-row{display:flex;gap:8px;margin:12px 0 8px;}
.live-input-row .live-act-input{flex:1;min-width:0;text-align:left;margin:0;}
.live-input-row .live-send-btn{width:auto;flex:0 0 auto;padding:12px 20px;white-space:nowrap;}
.quick-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.quick-actions button{
  background:rgba(var(--c-fg),.06);border:1px solid rgba(var(--c-fg),.16);
  color:rgba(var(--c-fg),.78);padding:7px 12px;font-family:inherit;font-size:13px;
  cursor:pointer;border-radius:3px;transition:.18s;text-align:left;line-height:1.5;
}
.quick-actions button:hover{color:var(--paper);border-color:var(--gold);background:rgba(var(--c-gold),.12);}

/* 摺疊狀態面板 */
.live-panel-wrap{margin:0 0 12px;}
.live-state-toggle{width:auto;display:inline-block;padding:7px 14px;font-size:13px;letter-spacing:.12em;}
.live-panel{margin-top:8px;background:rgba(var(--c-surface),.55);border:1px solid rgba(var(--c-fg),.12);
  border-radius:4px;padding:13px 15px;box-shadow:var(--shadow);animation:fade .3s ease;
  backdrop-filter:blur(3px);}
.lp-sec{padding:8px 0;border-bottom:1px solid rgba(var(--c-gold),.14);}
.lp-sec:last-child{border-bottom:none;}
.lp-label{color:var(--gold);font-size:12px;letter-spacing:.14em;margin-bottom:5px;}
.lp-hp-row{display:flex;justify-content:space-between;color:var(--paper);font-size:13.5px;margin-bottom:5px;}
.lp-hpbar{height:6px;border-radius:3px;background:rgba(var(--c-fg),.12);overflow:hidden;}
.lp-hpfill{height:100%;background:linear-gradient(90deg,var(--edge-dim),var(--edge));transition:width .3s ease;}
.lp-stats{display:flex;flex-wrap:wrap;gap:5px 15px;font-size:13.5px;color:var(--paper-dim);}
.lp-stats b{color:var(--paper);}
.lp-item{font-size:13.5px;color:var(--paper);line-height:1.7;}
.lp-event{font-size:12.5px;color:var(--paper-dim);line-height:1.7;}

/* ---------- 開放世界 ---------- */
#open-scroll{display:flex;flex-direction:column;gap:16px;margin:6px 0 14px;}

/* 頂部狀態條 */
.ow-top{
  background:rgba(var(--c-surface),.58);border:1px solid var(--line);border-left:3px solid var(--edge);
  border-radius:3px;padding:9px 12px 11px;margin-bottom:10px;backdrop-filter:blur(3px);
}
.ow-top-row{display:flex;flex-wrap:wrap;gap:5px 12px;margin-bottom:7px;}
.ow-chip{font-size:13px;color:var(--paper);white-space:nowrap;}
.ow-chip i{font-style:normal;color:var(--paper-dim);opacity:var(--op-soft);font-size:11px;letter-spacing:.1em;margin-right:3px;}
.ow-chip.ow-life{color:var(--gold);}

/* 分頁 tab */
.ow-tabs{display:flex;gap:4px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ow-tab{
  flex:1 0 auto;background:rgba(var(--c-surface),.42);border:1px solid rgba(var(--c-fg),.14);border-bottom:none;
  color:var(--tab-idle);font-family:inherit;font-size:13px;letter-spacing:.12em;
  padding:8px 10px;cursor:pointer;border-radius:3px 3px 0 0;transition:.18s;white-space:nowrap;
}
.ow-tab:hover{color:var(--paper);border-color:var(--gold-dim);}
.ow-tab.active{color:var(--gold);border-color:var(--gold-dim);background:rgba(var(--c-gold),.14);}
.ow-tabs + .live-panel{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;}
.ow-dim{color:var(--paper-dim);font-size:12px;}

/* 人物 */
.ow-npc{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;line-height:1.9;}
.ow-npc-n{color:var(--paper);}
.ow-npc-card,.ow-asset,.ow-quest,.ow-past,.ow-save{
  background:rgba(var(--c-surface),.4);border:1px solid rgba(var(--c-fg),.1);border-left:2px solid var(--gold-dim);
  border-radius:3px;padding:8px 10px;margin-bottom:8px;
}
.ow-npc-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--paper);}
.ow-npc-h b{font-weight:400;letter-spacing:.05em;}
.ow-npc-h .ow-affv{margin-left:auto;font-size:12px;}
.ow-npc-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.ow-mini{
  background:rgba(var(--c-fg),.06);border:1px solid rgba(var(--c-fg),.18);color:rgba(var(--c-fg),.8);
  font-family:inherit;font-size:12.5px;padding:5px 11px;border-radius:3px;cursor:pointer;transition:.18s;
}
.ow-mini:hover{color:var(--paper);border-color:var(--gold);background:rgba(var(--c-gold),.12);}
.ow-mini.gold{color:var(--gold);border-color:var(--gold-dim);}
.ow-mini.danger{color:var(--neg);border-color:rgba(var(--c-edge),.45);}
.ow-mini.danger:hover{border-color:var(--edge);background:rgba(var(--c-edge),.16);}
.ow-tagz{
  margin-left:auto;font-size:11px;letter-spacing:.08em;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:2px;padding:1px 6px;white-space:nowrap;
}

/* 聲望 */
.ow-rep{margin-bottom:10px;}
.ow-rep-h{display:flex;justify-content:space-between;font-size:13.5px;color:var(--paper);margin-bottom:4px;}
.ow-rep-v.pos{color:var(--pos);}
.ow-rep-v.neg{color:var(--neg);}
.ow-rep-v.zero{color:var(--paper-dim);}
.ow-hostile{color:var(--edge);font-weight:700;font-size:11.5px;letter-spacing:.08em;}
.ow-rep-bar{height:5px;border-radius:3px;background:rgba(var(--c-fg),.1);overflow:hidden;}
.ow-rep-fill{height:100%;transition:width .3s ease;}
.ow-rep-fill.pos{background:linear-gradient(90deg,rgba(var(--c-jade),.5),var(--jade));}
.ow-rep-fill.neg{background:linear-gradient(90deg,var(--edge-dim),var(--edge));}
.ow-rep-fill.zero{background:rgba(var(--c-fg),.2);}

/* 產業 / 任務 */
.ow-asset.ow-cs-unowned,.ow-asset.ow-cs-closed{opacity:.62;border-left-color:var(--paper-dim);}
.ow-asset.ow-cs-seized{border-left-color:var(--edge);}
.ow-quest{border-left-color:var(--jade);}
.ow-reward{color:var(--gold);}
.ow-karma{color:var(--neg);font-size:13px;line-height:1.8;}

/* 世界卡 / 存檔卡 */
.ow-world{
  background:rgba(var(--c-surface),.52);border:1px solid var(--line);border-left:3px solid var(--edge);
  border-radius:3px;padding:13px 15px;margin-bottom:12px;transition:.2s;
}
.ow-world:hover{border-color:var(--gold);background:rgba(var(--c-surface),.66);}
.ow-world-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.ow-world-h h4{margin:0;font-size:17px;font-weight:400;letter-spacing:.06em;color:var(--paper);}
.ow-world-d{font-size:13px;color:var(--paper-dim);line-height:1.85;margin-top:7px;white-space:pre-wrap;}
.ow-world .ow-enter{width:auto;padding:9px 22px;}
.ow-save.ended{opacity:.55;border-left-color:var(--paper-dim);}
/* 玩家創建世界 */
.ow-create{
  background:rgba(var(--c-surface),.45);border:1px solid var(--line);border-left:3px solid var(--gold-dim);
  border-radius:3px;padding:12px 14px;margin-bottom:14px;
}
.ow-desc{width:100%;min-height:84px;resize:vertical;line-height:1.8;}
.ow-mine-tag{margin-left:0;color:var(--jade);border-color:var(--jade);}

/* 轉世過場 */
.ow-reincarn{max-width:480px;margin:0 auto;}
.ow-pastcard{
  background:rgba(var(--c-surface),.55);border:1px solid var(--edge-dim);border-radius:3px;
  padding:12px 14px;text-align:left;margin:6px 0 4px;
}
.ow-legacy-list{display:flex;flex-direction:column;gap:10px;text-align:left;}
.ow-legacy{
  background:rgba(var(--c-surface),.5);border:1px solid var(--line);border-left:3px solid var(--gold-dim);
  border-radius:3px;padding:12px 14px;cursor:pointer;transition:.2s;
}
.ow-legacy:hover{border-color:var(--gold);background:rgba(var(--c-gold),.12);transform:translateY(-2px);}
.ow-legacy-t{color:var(--gold);font-size:15px;letter-spacing:.08em;margin-bottom:4px;}
.ow-legacy-d{color:var(--paper-dim);font-size:12.5px;line-height:1.8;}

/* 此生志向 */
.ow-asp-card,.ow-asp-cur{
  background:rgba(var(--c-surface),.5);border:1px solid var(--line);border-left:3px solid var(--gold-dim);
  border-radius:3px;padding:11px 13px;margin-bottom:10px;text-align:left;transition:.2s;
}
.ow-asp-card:hover{border-color:var(--gold);background:rgba(var(--c-gold),.1);}
.ow-asp-i{color:var(--gold);margin-right:5px;font-size:15px;}
.ow-mile{
  font-size:13px;color:var(--paper-dim);line-height:1.9;
  display:flex;gap:7px;align-items:flex-start;
}
.ow-mile-b{color:var(--gold);opacity:var(--op-strong);flex:0 0 auto;font-size:12px;line-height:1.9;}
.ow-mile.done{color:var(--jade);text-decoration:line-through;text-decoration-color:rgba(var(--c-jade),.5);}
.ow-mile.done .ow-mile-b{color:var(--jade);}
#asp-list .tip{text-align:left;}
select.acct-input{appearance:none;-webkit-appearance:none;cursor:pointer;}

/* 志向達成:一世成就過場 */
.ow-celebrate{max-width:480px;margin:0 auto;}
.result-title.gold{color:var(--gold);text-shadow:var(--glow-gold);}
.ow-celebrate-t{
  color:var(--gold);font-size:20px;letter-spacing:.12em;margin:6px 0 10px;
  animation:fade .5s ease;
}

/* 好感 slider */
.ow-aff-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--paper-dim);}
.ow-aff-row label{flex:0 0 auto;letter-spacing:.08em;}
.ow-aff-row b{flex:0 0 34px;text-align:right;color:var(--gold);font-size:15px;}
.ow-range{flex:1;min-width:0;accent-color:var(--edge);background:transparent;}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg);border:1px solid var(--gold);color:var(--gold);
  padding:10px 20px;border-radius:22px;font-size:14px;opacity:0;pointer-events:none;
  transition:.25s;z-index:60;box-shadow:var(--shadow);max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- 動畫 / 捲軸 ---------- */
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:rgba(var(--c-surface),.2);}
::-webkit-scrollbar-thumb{background:rgba(var(--c-fg),.2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--c-fg),.35);}

@media(max-width:480px){
  #stage{padding:16px 12px 34px;}
  .story-text{font-size:15px;padding:15px 14px;}
  .live-turn{max-width:92%;}
  .ow-chip{font-size:12.5px;}
  .ow-tab{font-size:12px;letter-spacing:.06em;padding:7px 8px;}
  .ow-world-h h4{font-size:16px;}
  .ow-world{padding:12px 13px;}
}

/* ===== 角色頭像(自家生成水墨立繪) ===== */
.char-avatar.has-portrait{padding:0;overflow:hidden;background:var(--ink2);
  border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.char-avatar.has-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.av-inline{display:inline-block;width:1.5em;height:1.5em;border-radius:50%;overflow:hidden;
  vertical-align:-0.35em;background:var(--ink2);border:1px solid var(--line)}
.av-inline img{width:100%;height:100%;object-fit:cover;display:block}
.av-inline-em{display:inline-block;vertical-align:-0.1em}

/* ===== HUD 摺疊態 ===== */
.hud-mini{display:flex;align-items:center;gap:9px;margin-bottom:12px;cursor:pointer;
  background:rgba(var(--c-surface),.5);border:1px solid var(--line);border-radius:3px;padding:9px 13px;
  font-size:13.5px;transition:background .18s ease}
.hud-mini:hover{background:rgba(var(--c-surface),.66)}
.hud-mini .hud-name{font-size:15px}
.hm-hp{color:var(--edge);font-weight:700}
.hm-res{color:var(--gold)}
.hm-w{opacity:.85}
.hm-arrow{margin-left:auto;opacity:var(--op-faint);font-size:12px}

/* ===== 字級(玩家可調:小/中/大) ===== */
:root[data-fs="s"] .live-turn,:root[data-fs="s"] .ow-turn{font-size:15px}
:root[data-fs="s"] .story-text{font-size:16px}
:root[data-fs="l"] .live-turn,:root[data-fs="l"] .ow-turn{font-size:19.5px;line-height:1.95}
:root[data-fs="l"] .story-text{font-size:20px;line-height:2.05}
:root[data-fs="xl"] .live-turn,:root[data-fs="xl"] .ow-turn{font-size:22px;line-height:2}
:root[data-fs="xl"] .story-text{font-size:22.5px;line-height:2.1}
.fs-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.fs-row label{opacity:var(--op-soft);font-size:12px;letter-spacing:.08em;margin-right:4px}
/* .btn 本身係 width:100% 直排大掣;字級/主題呢類細掣要收返做一行藥丸仔 */
.fs-btn{padding:6px 14px !important;font-size:13px !important;min-width:auto !important;width:auto !important;display:inline-block !important;text-align:center !important}
.fs-btn.on{border-color:var(--gold) !important;color:var(--gold) !important;background:rgba(var(--c-gold),.12) !important}

/* ===== 標題頁緊湊化(手機一屏睇晒;用戶反映太長要捲兩屏) ===== */
@media (max-width:520px){
  .title-wrap{min-height:auto;padding:10px 0 6px;justify-content:flex-start}
  .seal{width:44px;height:44px;font-size:19px;border-width:2px;margin-bottom:10px}
  .big-title{font-size:clamp(40px,12.5vw,64px);margin:0 0 2px;letter-spacing:.1em}
  .subtitle{font-size:12px;letter-spacing:.32em;margin-bottom:3px}
  /* 題詩:字加大(用戶嫌細)但上下留白收窄 */
  .title-poem{font-size:15px;line-height:1.75;margin:11px auto 13px;padding:9px 8px;max-width:340px}
  .title-btns{gap:7px;max-width:320px}
  .title-btns .btn{padding:10px 14px;font-size:15px}
  .account-bar{margin-top:11px;font-size:13px}
  .mini{font-size:12.5px;line-height:1.6;margin-top:8px}
  .tagline{margin-top:10px;font-size:11.5px}
}
/* 細屏(≤380px)再收多啲 */
@media (max-width:380px){
  .big-title{font-size:clamp(36px,11.5vw,52px)}
  .title-poem{font-size:14px;margin:9px auto 11px}
  .title-btns .btn{padding:9px 12px;font-size:14.5px}
}
/* 第二輪收窄:最壞情況(8 個掣:繼續/新遊戲/開放世界/章節/許願/AI角色/潤飾/語言)
   喺 390×844 都要一屏睇晒。實測用 Playwright 量 body.scrollHeight。 */
@media (max-width:520px){
  /* 冇底部頁籤嘅畫面(標題/選世界/選角)唔需要留 34px 頁籤位 */
  body:not(.has-tabs) #stage{padding-bottom:14px;}
  /* 朱印同下面嘅「輪迴刃」大標題重複,手機一屏預算內優先讓位畀掣 */
  /* 朱印保留(品牌元素) */
  .title-wrap .big-title{font-size:clamp(38px,11.5vw,60px);}
  .title-wrap .title-poem{line-height:1.7;padding:8px 8px;margin:9px auto 11px;}
  .title-wrap .title-btns{gap:6px;}
  .title-wrap .title-btns .btn{padding:9px 14px;}
  .title-wrap .mini{font-size:11.5px;line-height:1.55;margin-top:7px;}
  /* 底部 tagline「三世輪迴 · 一刃斬因果」同上面副題重複,手機收起 */
  .title-wrap .tagline{display:none;}
}


/* ============================================================
   淺色主題 · 宣紙水墨(Light / Rice-paper)
   ------------------------------------------------------------
   兩個入口:
     1) 手動   :root[data-theme="light"]        ← JS 設 document.documentElement.dataset.theme
     2) 跟系統 @media (prefers-color-scheme:light) 但只限未手動設定嘅 :root:not([data-theme])
   所以 data-theme 永遠贏過系統偏好,兩個方向都成立
   (data-theme="dark" 喺系統淺色下照樣暗,因為 :not([data-theme]) 唔中)。
   ⚠️ 下面兩個 palette block 內容必須逐字一致,改一處要同步另一處。
   淺色只覆蓋變量,唔覆蓋任何組件規則 —— 新增組件只要用返變量就自動兩色通用。
   ============================================================ */
:root[data-theme="light"]{
  /* 底色:生宣紙(暖米白),文字:松煙墨 */
  --ink:#efe5d0;            /* 紙底 */
  --ink2:#ded0b0;           /* 紙背/凹陷 */
  --paper:#1e1913;          /* 墨(正文) */
  --paper-dim:#443a2a;      /* 淡墨(次要文字) */
  --edge:#a02a20;           /* 朱砂印泥 */
  --edge-dim:#c8705f;       /* 朱砂暈開 */
  --gold:#6e5215;           /* 赭石(取代暗色嘅墨金) */
  --gold-dim:#8e7130;
  --jade:#25604a;           /* 石綠 */
  --cyan-neon:#166a83;      /* 石青 */
  --amber:#8a5810;          /* 藤黃 */
  --panel:rgba(255,253,247,.84);
  --panel2:rgba(255,253,247,.94);
  --line:rgba(110,82,21,.34);
  --shadow:0 10px 30px rgba(96,74,44,.16);

  /* 疊色三元組整套反向:surface 由「黑」變「近白宣紙」,
     所以原本 α 越大越暗嘅卡片,喺紙上就係 α 越大越白越突出,層次方向唔使改。 */
  --c-surface:255,253,247;
  --c-fg:32,26,18;
  --c-gold:110,82,21;
  --c-edge:160,42,32;
  --c-jade:37,96,74;

  --pos:#22713a;
  --neg:#a33b34;
  --note-good:#125138;
  --note-bad:#96271f;
  --note-omen:#6b5210;
  --on-edge:#fff6ef;

  /* 古畫背景:唔用 invert(會變鬼片),改為降透明度 + 提高白度,
     令五張古畫變成紙上淡淡水印,墨字浮喺上面照樣清楚。 */
  --bg-img-filter:grayscale(.46) sepia(.3) brightness(1.2) contrast(.56);
  --bg-img-opacity:.45;
  /* 罩色留返約四成通透,古畫先至見到「暈喺紙度」;
     外圍用暖赭壓深少少,似卷軸紙邊受潮,中間留白畀正文。 */
  --bg-overlay:
    radial-gradient(circle at 50% 26%, rgba(255,253,246,.4), rgba(231,219,194,.82) 86%),
    linear-gradient(to bottom, rgba(253,249,240,.3), rgba(241,232,211,.64));
  /* 顆粒噪點喺紙上要用 multiply 先似紙纖維,唔會變白霧 */
  --grain-opacity:.13;
  --grain-blend:multiply;
  --toast-bg:rgba(255,252,244,.97);
  --btn-primary-bg:rgba(160,42,32,.94);
  --tab-idle:rgba(32,26,18,.84);

  /* 淺色唔要霓虹光暈,改用極輕墨影 + 紙面高光 */
  --tx-shadow:0 1px 0 rgba(255,255,255,.6);
  --title-shadow:0 1px 0 rgba(255,255,255,.55),0 6px 20px rgba(120,84,44,.18);
  --glow-edge:0 1px 0 rgba(255,255,255,.5);
  --glow-edge-lg:0 2px 14px rgba(160,42,32,.22);
  --glow-gold:0 2px 14px rgba(110,82,21,.24);
  --glow-seal:0 3px 12px rgba(160,42,32,.22);
  --glow-btn:0 6px 18px rgba(160,42,32,.3);

  /* 世界卡:古畫退成淡水印,漸變 overlay 由黑轉紙白,墨字先讀得到 */
  --card-img-filter:grayscale(.42) sepia(.2) brightness(1.28) contrast(.6);
  --card-img-opacity:.5;
  --card-overlay:linear-gradient(to top,rgba(253,250,242,.96) 0%,rgba(253,250,242,.62) 60%,rgba(253,250,242,.76) 100%);

  --op-faint:.8;
  --op-soft:.9;
  --op-strong:1;
  color-scheme:light;
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    /* 底色:生宣紙(暖米白),文字:松煙墨 */
    --ink:#efe5d0;            /* 紙底 */
    --ink2:#ded0b0;           /* 紙背/凹陷 */
    --paper:#1e1913;          /* 墨(正文) */
    --paper-dim:#443a2a;      /* 淡墨(次要文字) */
    --edge:#a02a20;           /* 朱砂印泥 */
    --edge-dim:#c8705f;       /* 朱砂暈開 */
    --gold:#6e5215;           /* 赭石(取代暗色嘅墨金) */
    --gold-dim:#8e7130;
    --jade:#25604a;           /* 石綠 */
    --cyan-neon:#166a83;      /* 石青 */
    --amber:#8a5810;          /* 藤黃 */
    --panel:rgba(255,253,247,.84);
    --panel2:rgba(255,253,247,.94);
    --line:rgba(110,82,21,.34);
    --shadow:0 10px 30px rgba(96,74,44,.16);

    /* 疊色三元組整套反向:surface 由「黑」變「近白宣紙」,
       所以原本 α 越大越暗嘅卡片,喺紙上就係 α 越大越白越突出,層次方向唔使改。 */
    --c-surface:255,253,247;
    --c-fg:32,26,18;
    --c-gold:110,82,21;
    --c-edge:160,42,32;
    --c-jade:37,96,74;

    --pos:#22713a;
    --neg:#a33b34;
    --note-good:#125138;
    --note-bad:#96271f;
    --note-omen:#6b5210;
    --on-edge:#fff6ef;

    /* 古畫背景:唔用 invert(會變鬼片),改為降透明度 + 提高白度,
       令五張古畫變成紙上淡淡水印,墨字浮喺上面照樣清楚。 */
    --bg-img-filter:grayscale(.46) sepia(.3) brightness(1.2) contrast(.56);
    --bg-img-opacity:.45;
    /* 罩色留返約四成通透,古畫先至見到「暈喺紙度」;
       外圍用暖赭壓深少少,似卷軸紙邊受潮,中間留白畀正文。 */
    --bg-overlay:
      radial-gradient(circle at 50% 26%, rgba(255,253,246,.4), rgba(231,219,194,.82) 86%),
      linear-gradient(to bottom, rgba(253,249,240,.3), rgba(241,232,211,.64));
    /* 顆粒噪點喺紙上要用 multiply 先似紙纖維,唔會變白霧 */
    --grain-opacity:.13;
    --grain-blend:multiply;
    --toast-bg:rgba(255,252,244,.97);
    --btn-primary-bg:rgba(160,42,32,.94);
    --tab-idle:rgba(32,26,18,.84);

    /* 淺色唔要霓虹光暈,改用極輕墨影 + 紙面高光 */
    --tx-shadow:0 1px 0 rgba(255,255,255,.6);
    --title-shadow:0 1px 0 rgba(255,255,255,.55),0 6px 20px rgba(120,84,44,.18);
    --glow-edge:0 1px 0 rgba(255,255,255,.5);
    --glow-edge-lg:0 2px 14px rgba(160,42,32,.22);
    --glow-gold:0 2px 14px rgba(110,82,21,.24);
    --glow-seal:0 3px 12px rgba(160,42,32,.22);
    --glow-btn:0 6px 18px rgba(160,42,32,.3);

    /* 世界卡:古畫退成淡水印,漸變 overlay 由黑轉紙白,墨字先讀得到 */
    --card-img-filter:grayscale(.42) sepia(.2) brightness(1.28) contrast(.6);
    --card-img-opacity:.5;
    --card-overlay:linear-gradient(to top,rgba(253,250,242,.96) 0%,rgba(253,250,242,.62) 60%,rgba(253,250,242,.76) 100%);

    --op-faint:.8;
    --op-soft:.9;
    --op-strong:1;
    color-scheme:light;
  }
}

/* ---------- 關於 · 素材授權面板(暗淺兩色通用,全部走變量) ---------- */
.about-panel{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--edge);
  border-radius:3px;padding:15px 16px;margin-bottom:12px;text-align:left;
  box-shadow:var(--shadow);backdrop-filter:blur(3px);animation:fade .4s ease;
}
.about-panel h4{
  margin:0 0 8px;font-size:15px;font-weight:400;letter-spacing:.14em;color:var(--gold);
}
.about-sec{padding:10px 0;border-bottom:1px solid rgba(var(--c-gold),.16);}
.about-sec:last-child{border-bottom:none;}
/* 唔用 text-align:justify —— 中英夾雜再加授權標籤會拉到字距鬆散 */
.credit-line{
  font-size:13px;line-height:1.95;color:var(--paper-dim);margin:0 0 6px;
}
.credit-line:last-child{margin-bottom:0;}
.credit-line b{color:var(--paper);font-weight:400;}
.credit-line em{font-style:normal;color:var(--gold);}
.credit-line a,.about-link{
  color:var(--gold);text-decoration:none;border-bottom:1px dashed var(--gold-dim);
  transition:.18s;word-break:break-all;
}
.credit-line a:hover,.about-link:hover{color:var(--edge);border-bottom-color:var(--edge);}
.credit-en{font-size:12px;line-height:1.85;color:var(--paper-dim);opacity:var(--op-soft);letter-spacing:.01em;}
.about-lic{
  display:inline-block;font-size:11px;letter-spacing:.1em;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:2px;padding:1px 6px;margin-left:4px;white-space:nowrap;
}

/* ---------- 主題切換掣(設定頁,同字級 .fs-btn 一樣款) ---------- */
.theme-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.theme-row label{opacity:var(--op-soft);font-size:12px;letter-spacing:.08em;margin-right:4px;}

/* ---------- 天賦圖標(data-talent → mask SVG,顏色跟 currentColor,大小用 em 跟字級) ----------
   只有六個已知天賦先出圖標;未知/空值嘅 data-talent 唔會中選擇器,唔會出黑方塊。 */
[data-talent="might"]::before,
[data-talent="tough"]::before,
[data-talent="sword"]::before,
[data-talent="swift"]::before,
[data-talent="lore"]::before,
[data-talent="fortune"]::before{
  content:"";display:inline-block;width:1.05em;height:1.05em;
  vertical-align:-.16em;margin-right:.3em;flex-shrink:0;
  background-color:currentColor;opacity:var(--op-strong);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:var(--ico-t);mask-image:var(--ico-t);
}
[data-talent="might"]{--ico-t:var(--ico-t-might);}
[data-talent="tough"]{--ico-t:var(--ico-t-tough);}
[data-talent="sword"]{--ico-t:var(--ico-t-sword);}
[data-talent="swift"]{--ico-t:var(--ico-t-swift);}
[data-talent="lore"]{--ico-t:var(--ico-t-lore);}
[data-talent="fortune"]{--ico-t:var(--ico-t-fortune);}