/* 顏色的分工（對比度以 WCAG 算，深底 #0d0b09）： --ink 本文與主要文字 15 : 1 --dim 次要文字、說明、標籤 5.1 : 1 ← 小字的下限 --gold 標題、時間、目前所在 8.1 : 1 --gold-dim 暗金「文字」用：回合 meta、分組標、章號 5.0 : 1 --gold-soft 暗金只給「邊框與底色」用（當文字只有 2.9 : 1，12px 根本看不清） --danger 紅色的邊框與底色；紅色「文字」一律用 --danger-text（4.9 : 1） */ :root { --bg: #0d0b09; --bg2: #15120f; --ink: #e8e0d2; --dim: #a09684; /* 2026/09/27 他說太淡，調亮一階 */ --gold: #c9a227; --gold-dim: #9a7e2e; --gold-soft: #6b5a1f; --line: #2a241d; --danger: #b4483c; --danger-text: #d25b4d; /* 字體（2026/09/27 他說明體辨識度低）：介面一律黑體；明體只留給故事本文與大標題 */ --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; --serif: "Noto Serif TC", "Source Han Serif TC", Georgia, "PingFang TC", serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.85; -webkit-text-size-adjust: 100%; } .hidden { display: none !important; } .spacer { flex: 1; } .muted { color: var(--dim); font-size: 13px; font-weight: normal; } .screen { display: flex; flex-direction: column; min-height: 100dvh; } /* 置中卡片：登入 */ #view-login { align-items: center; justify-content: center; } .card { text-align: center; padding: 40px 28px; max-width: 360px; } .seal { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 6px; display: grid; place-items: center; font-size: 34px; background: var(--gold); color: #1a1509; font-weight: 700; } .card h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: 6px; } .card .sub { color: var(--dim); margin: 0 0 28px; font-size: 15px; } .login-about { margin: 22px 0 0; font-size: 13px; } .login-about a { color: var(--dim); } .topbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; } .brand { color: var(--gold); letter-spacing: 3px; font-size: 16px; } .who { color: var(--dim); font-size: 13px; } .link { color: var(--dim); text-decoration: none; font-size: 14px; } .link:hover { color: var(--gold); } .panel { padding: 24px 18px 60px; max-width: 620px; width: 100%; margin: 0 auto; } .panel h2 { font-size: 19px; letter-spacing: 2px; color: var(--gold); margin: 8px 0 18px; } /* 欄位標題（2026/09/25 他說區塊黏在一起、標題比內容還不顯眼）：暗金、字距拉開，跟底下的內容分得出來 */ label { display: block; margin: 22px 0 8px; font-size: 14px; color: var(--gold-dim); letter-spacing: 1px; } label .muted { font-size: 12px; letter-spacing: 0; } input, textarea { width: 100%; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.6; } input:focus, textarea:focus { outline: none; border-color: var(--gold-soft); } textarea { resize: vertical; } .hint { color: var(--dim); font-size: 13px; margin-top: 12px; } .btn { display: inline-block; text-align: center; cursor: pointer; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); padding: 11px 18px; border-radius: 4px; font: inherit; font-size: 15px; text-decoration: none; } .btn:hover { border-color: var(--gold-soft); } .btn.primary { background: var(--gold); color: #1a1509; border-color: var(--gold); width: 100%; margin-top: 26px; } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { padding: 11px 14px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* 存檔列表：一局一張卡。作品名稱最大，右上是第幾回，下面主角、類別、最後編輯 */ .save-list { display: flex; flex-direction: column; gap: 12px; } .save-row { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 12px; cursor: pointer; background: var(--bg2); } .save-row:hover { border-color: var(--gold-soft); } .sr-head { display: flex; align-items: flex-start; gap: 12px; } .sr-title { flex: 1; min-width: 0; color: var(--gold); font-size: 19px; line-height: 1.45; letter-spacing: 1px; overflow-wrap: anywhere; } .sr-turn { flex: none; margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 4px; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .sr-hero { margin-top: 4px; font-size: 15px; color: var(--ink); } .sr-hero .k { color: var(--dim); font-size: 13px; margin-right: 10px; } .sr-genre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .sr-none { color: var(--dim); font-size: 12px; } .sr-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); } .sr-time { flex: 1; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; } .sr-more { font-size: 15px; line-height: 1; padding: 5px 10px; letter-spacing: 1px; } .sr-menu { justify-content: flex-end; margin-top: 8px; } /* 狀態列：固定在頂，時間永遠看得到 */ .statusbar { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--bg) 70%, transparent); border-bottom: 1px solid var(--line); padding: 10px 16px; font-size: 13px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 14px; line-height: 1.5; } .statusbar .clock { color: var(--gold); } .statusbar .warn { color: var(--danger-text); } .read { display: flex; flex: 1; min-height: 0; min-width: 0; } .story { flex: 1; overflow-y: auto; padding: 22px 18px 24px; max-width: 680px; width: 100%; margin: 0 auto; } /* 站主自己的局：選項框、輸入框換粉色調（右邊原本的「在場」欄 2026/09/26 他說拿掉） */ body.adult .options .opt { border-color: #3a2430; } body.adult .dock textarea:focus { border-color: #6e3550; } .turn { margin-bottom: 30px; } .turn .meta { color: var(--gold-dim); font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 14px; } .turn .choice { color: var(--dim); font-size: 14px; margin-bottom: 10px; } /* 本文兩端對齊：中文每個字都是斷行點，右緣才不會參差； overflow-wrap 是保險，遇到長串英數也不會把版面撐破 */ .turn p { margin: 0 0 15px; text-align: justify; overflow-wrap: anywhere; hanging-punctuation: first allow-end; } .turn .ledger { font-size: 13px; color: var(--dim); margin-top: 10px; } .turn .ledger .ok { color: var(--gold); } .turn .ledger .no { color: var(--danger-text); } .turn .ledger { border-top: 1px solid var(--line); padding-top: 8px; } .turn .ledger .lh { font-size: 12px; letter-spacing: .3em; color: var(--dim); margin-bottom: 4px; } /* 系統面板：同一份記帳列，換成主角眼前的系統視窗 */ .turn .ledger.sys { border: 1px solid rgba(120, 180, 255, .35); border-top-width: 1px; border-radius: 6px; background: linear-gradient(180deg, rgba(40, 70, 110, .22), rgba(20, 35, 60, .18)); box-shadow: inset 0 0 18px rgba(80, 140, 255, .12), 0 0 8px rgba(80, 140, 255, .08); padding: 10px 14px; margin-top: 14px; font-family: ui-monospace, Menlo, Consolas, "Noto Sans Mono CJK TC", monospace; font-size: 13px; color: #d6e6ff; letter-spacing: .02em; } .turn .ledger.sys .lh { color: #8fb8ff; letter-spacing: .25em; margin-bottom: 6px; } .turn .ledger.sys .ok { color: #e3eeff; } .turn .ledger.sys .no { color: #ffb4a8; opacity: .85; } #statusbar.sys span { border: 1px solid rgba(120, 180, 255, .28); background: rgba(40, 70, 110, .2); border-radius: 4px; padding: 1px 7px; color: #d6e6ff; } #statusbar.sys span.warn { border-color: rgba(255, 120, 100, .5); color: #ffb4a8; } #statusbar.sys span.clock { color: #8fb8ff; } .dos-meta { color: var(--dim); font-size: 12px; margin: 2px 0 4px; } .act:disabled { opacity: .45; cursor: not-allowed; } .dossier-text { white-space: pre-wrap; font-size: 14px; line-height: 1.9; color: var(--ink); margin: 8px 0 4px; max-height: 60vh; overflow-y: auto; } textarea.dossier-edit { width: 100%; margin: 8px 0 4px; font-size: 15px; line-height: 1.8; } .turn .fired { border-left: 2px solid var(--danger); padding-left: 12px; color: #d8a49c; font-size: 14px; margin: 14px 0; } /* 選項直接長在劇情裡，可以點。不再另外放一排數字按鈕。 */ .options { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; } .opt { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 4px; padding: 13px 14px; cursor: pointer; background: var(--bg2); } .opt:hover { border-color: var(--gold-soft); background: #1b1713; } .opt .n { flex: none; width: 22px; height: 22px; border-radius: 3px; background: var(--gold-soft); color: var(--ink); display: grid; place-items: center; font-size: 12px; margin-top: 3px; } .opt .body { flex: 1; } .opt .txt { line-height: 1.6; } .opt .tag { color: var(--dim); font-size: 12px; margin-top: 3px; } .opt .tag .cost { color: var(--gold-dim); } /* 五個格子的職責（承轉線離奇）：一枚小印，跟品階章同一個規格 */ .opt .tag .slot { display: inline-block; min-width: 1.6em; text-align: center; margin-right: 6px; border: 1px solid var(--gold-soft); border-radius: 3px; color: var(--gold-dim); font-size: 12px; line-height: 1.6; padding: 0 3px; } .statusbar .focus { color: var(--gold-dim); } /* 未了之事：一條一列，專注的那條標亮 */ .slotrow.line { align-items: flex-start; gap: 8px; } .slotrow.line > .nm2 { line-height: 1.55; } .slotrow.line > .nm2 .num { margin: 0; } .slotrow.line.focus > .nm2 { color: var(--gold); } .dock { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); max-width: 680px; width: 100%; margin: 0 auto; } .dock input { flex: 1; font-size: 16px; } .dock-sel { max-width: 108px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); color: var(--dim); font: inherit; font-size: 13px; padding: 0 6px; cursor: pointer; } .dock-sel:hover { border-color: var(--gold-soft); } .dock-sel:disabled { opacity: .45; cursor: not-allowed; } .dock-sel option { background: var(--bg2); color: var(--ink); } .tools { padding: 18px 16px 60px; max-width: 680px; width: 100%; margin: 0 auto; display: grid; gap: 14px; } .tool-card { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; background: var(--bg2); } .tool-card h3 { margin: 0 0 10px; font-size: 15px; color: var(--gold); letter-spacing: 2px; } .tool-card .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; } .tool-card .row .sub { color: var(--dim); font-size: 13px; } .tool-card .empty { color: var(--dim); font-size: 14px; } .busy { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--gold-soft); color: var(--ink); padding: 9px 18px; border-radius: 20px; font-size: 14px; z-index: 90; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 8px; animation: pulse 1.1s infinite; } @keyframes pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } } .toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #2a1a17; border: 1px solid var(--danger); color: #f0d5d0; /* 永遠壓在所有視窗上面（視窗 40、Jev 警告 45）：2026/09/26 他在結緣視窗裡被擋，提示卻跳在視窗後面 */ padding: 11px 18px; border-radius: 4px; font-size: 14px; z-index: 100; max-width: 90vw; } .tool-card .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .tool-card .ch h3 { margin: 0; } .tool-card .cap { color: var(--dim); font-size: 12px; } .tool-card .ch .mini { margin-left: auto; cursor: pointer; font: inherit; font-size: 13px; background: transparent; color: var(--gold); border: 1px dashed var(--gold-soft); border-radius: 4px; padding: 4px 10px; } .tool-card .ch .mini:hover { background: #1f1a12; } .grp { color: var(--gold-dim); font-size: 12px; letter-spacing: 2px; margin: 12px 0 4px; border-bottom: 1px solid var(--line); padding-bottom: 3px; } .grp:first-child { margin-top: 0; } /* 境界顏色：灰白綠藍紫橙，照《魔獸世界》裝備品質的脈絡往上爬 */ :root { --r1: #9d9d9d; --r2: #ece6da; --r3: #4fc24a; --r4: #3d8fe6; --r5: #b163ee; --r6: #ff8a1f; --k0: #a8563f; --k1: #3f8a92; --k2: #7d8f3c; --k3: #7a5aa8; /* 2026/09/25 從四色擴成八色：仙術、自定義的武學分類，背包八類、關係的分類都要各有一色 */ --k4: #b0872c; --k5: #4a70a8; --k6: #8a6446; --k7: #a3486c; } .r1 { color: var(--r1); --rc: var(--r1); } .r2 { color: var(--r2); --rc: var(--r2); } .r3 { color: var(--r3); --rc: var(--r3); } .r4 { color: var(--r4); --rc: var(--r4); } .r5 { color: var(--r5); --rc: var(--r5); } .r6 { color: var(--r6); --rc: var(--r6); text-shadow: 0 0 8px rgba(255,138,31,.35); } /* 四類各自一個框，左邊一條色帶加一枚印記 */ .kind { --kc: var(--gold-soft); border: 1px solid var(--line); border-left: 3px solid var(--kc); border-radius: 4px; padding: 8px 12px 4px; margin-top: 14px; background: rgba(255,255,255,.015); } .kind:first-child { margin-top: 0; } .kind-0 { --kc: var(--k0); } .kind-1 { --kc: var(--k1); } .kind-2 { --kc: var(--k2); } .kind-3 { --kc: var(--k3); } .kind-4 { --kc: var(--k4); } .kind-5 { --kc: var(--k5); } .kind-6 { --kc: var(--k6); } .kind-7 { --kc: var(--k7); } /* 框底也帶一點點那一類的顏色，整頁才不會一片同色 */ .kind { background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 13%, transparent), rgba(255,255,255,.012) 55%); } .kind .kind-name { color: color-mix(in srgb, var(--kc) 45%, var(--ink)); } .kind-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .kind-seal { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 3px; background: var(--kc); color: #120f0b; font-size: 13px; font-weight: 700; } .kind-name { font-size: 15px; letter-spacing: 3px; color: var(--ink); } .kind-count { font-size: 12px; color: var(--dim); } .kind-desc { flex-basis: 100%; font-size: 12px; color: var(--dim); line-height: 1.5; } .sk { padding: 12px 14px; margin: 10px 0; border: 1px solid #3a3228; border-radius: 5px; background: #1b1713; } .sk:first-child { margin-top: 8px; } .kind .sk { background: #1d1914; } .sk .top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sk .nm { font-size: 16px; } .sk .realm { margin-left: auto; font-size: 13px; color: var(--gold); } .sk .realm[class*=" r"], .sk .nm[class*=" r"] { color: var(--rc); } .sk .num { color: var(--dim); font-size: 12px; margin: 2px 0 4px; } .sk .top .num { margin: 0; } /* 品階是印章，不跟境界搶顏色：越高越實、邊越亮 */ .grade { font-size: 12px; letter-spacing: 1px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--dim); line-height: 1.7; } .grade.g2 { border-color: #4a4032; color: #b3a893; } .grade.g3 { border-color: var(--gold-soft); color: var(--gold); } .grade.g4 { border-color: var(--gold); color: var(--gold); background: rgba(201,162,39,.12); } .grade.g5 { border-color: var(--gold); color: #1a1509; background: var(--gold); font-weight: 700; } .pips { display: flex; align-items: center; gap: 4px; margin: 6px 0 4px; } .pip { flex: 1; max-width: 46px; height: 6px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; } .pip.done { background: var(--rc); opacity: .85; } .pip.now { background: #2e2820; box-shadow: inset 0 0 0 1px var(--rc); } .pip.now i { display: block; height: 100%; background: var(--rc); } .pip.locked { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 5px); opacity: .6; } .pips .pct { margin-left: 6px; font-size: 12px; white-space: nowrap; } .sk .ds { color: var(--dim); font-size: 13px; line-height: 1.7; } .sk .attr { font-size: 12px; color: var(--gold-dim); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; } .sk .ds.secret-ds { color: #9b8fd4; margin-top: 4px; } .sk .fx { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--gold-dim); } .lock { color: var(--gold-dim); font-size: 12px; } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; } .sheet { background: var(--bg2); border: 1px solid var(--gold-soft); border-radius: 6px; width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto; padding: 22px; } .sheet h2 { text-align: center; color: var(--gold); margin: 0 0 6px; font-size: 19px; letter-spacing: 3px; } .sheet label { text-align: left; } select { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 11px 12px; font: inherit; font-size: 16px; } .count { text-align: right; color: var(--dim); font-size: 12px; margin-top: 4px; } .sheet .note { border: 1px dashed var(--line); border-radius: 4px; padding: 10px 12px; color: var(--dim); font-size: 12px; line-height: 1.8; margin-top: 14px; } .sheet .secret { border: 1px dashed #4a3f7a; border-radius: 4px; padding: 10px 12px; margin-top: 16px; } .sheet .secret label { color: #9b8fd4; } .acts { display: flex; gap: 10px; margin-top: 18px; } .acts .btn { flex: 1; margin: 0; } .btn.danger { background: #8e1f1a; border-color: #8e1f1a; color: #f4e8e6; } .btn.danger:hover { filter: brightness(1.15); } .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; } .chip { cursor: pointer; font: inherit; font-size: 13px; background: var(--bg2); color: var(--dim); border: 1px solid var(--line); border-radius: 14px; padding: 5px 13px; } .chip:hover { border-color: var(--gold-soft); color: var(--ink); } .chip.on { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); } .chip.add { border-style: dashed; color: var(--gold); } .traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .trait { font-size: 12px; color: var(--ink); background: #241f17; border: 1px solid var(--gold-soft); border-radius: 3px; padding: 3px 9px; position: relative; } /* 標籤右上角的 ×：點了直接刪掉那一條 */ .trait.has-x { padding-right: 14px; } .tag-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--dim); font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; } .tag-x:hover { color: var(--danger-text); border-color: var(--danger-text); } /* 標籤左上角的鎖（2026/09/25）：鎖住的邊框亮金、沒有 × */ .trait.has-lock { padding-left: 14px; } /* 左右角各一顆小圓鈕，相鄰的標籤要拉開，不然前一個的 × 會壓到後一個的鎖 */ .traits:has(.has-lock) { gap: 12px 18px; margin-top: 12px; } .tag-lock { position: absolute; top: -7px; left: -7px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); font-size: 10px; line-height: 16px; text-align: center; cursor: pointer; opacity: .55; } .tag-lock:hover { opacity: 1; border-color: var(--gold-soft); } .trait.locked { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,162,39,.18) inset; } .trait.locked .tag-lock { opacity: 1; border-color: var(--gold); } span.tag-lock { cursor: default; } /* 錢袋卡：背包最上面，每種錢一列 */ .kind.wallet .acts-row { margin: 8px 0 6px; } .wallet-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 2px 0; } .wallet-k { color: var(--dim); font-size: 13px; letter-spacing: 1px; min-width: 4em; } .wallet-v { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; } /* 設定頁：錢袋 */ #money-settings input.in-sm { padding: 7px 10px; font-size: 15px; line-height: 1.5; } #money-settings input[type=number] { -moz-appearance: textfield; appearance: textfield; } #money-settings input[type=number]::-webkit-outer-spin-button, #money-settings input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cur .grp2 { margin-top: 12px; } .cur-unit { display: grid; grid-template-columns: 1fr auto 6em auto auto; gap: 6px; align-items: center; margin: 6px 0; } .cur-unit:first-child { grid-template-columns: 1fr; } .cur-eq { color: var(--dim); font-size: 13px; white-space: nowrap; } .cur-unit .act { margin: 0; } label.cur-amt { margin-top: 10px; } @media (max-width: 520px) { .cur-unit { grid-template-columns: 1fr auto 5em auto; } .cur-unit .cur-eq:nth-of-type(2) { display: none; } } .tag-edit .traits { margin: 6px 0 8px; min-height: 8px; } .tag-add { display: flex; gap: 8px; } .tag-add input { flex: 1; } .tag-add .act { flex: none; } .np-sheet { max-width: 560px; } /* 人物編輯頁的分頁與性開發狀態（2026/09/25） */ .np-sheet .subtabs { margin: 4px 0 6px; justify-content: center; } #np-dev { margin-top: 10px; } #np-dev input.in-sm { padding: 7px 10px; font-size: 15px; line-height: 1.5; } .dev-row { display: grid; grid-template-columns: 7em 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); } .dev-row:last-of-type { border-bottom: none; } .dev-k { color: var(--dim); font-size: 13px; letter-spacing: 1px; } /* 開發那一面：初體驗、當前狀態、區域敏感（2026/09/27） */ .dv-first { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 6px 0; } .dv-ft { color: var(--gold); font-size: 14px; margin-bottom: 6px; } .dv-kv { display: grid; grid-template-columns: 44px 1fr; gap: 3px 8px; font-size: 13px; line-height: 1.6; } .dv-kv i { font-style: normal; color: var(--dim); } .dv-never { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; font-size: 13px; } .dv-nt { color: var(--dim); margin-right: 4px; } .dv-pill { border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; color: var(--dim); } .dv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } html.m .dv-two { grid-template-columns: 1fr; } .dv-panel { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; } .dv-bar { margin: 4px 0 10px; } .dv-bl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; } .dv-bl em { font-style: normal; color: var(--dim); } .dv-track { position: relative; height: 7px; background: rgba(255,255,255,.07); border-radius: 99px; } .dv-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5a3d86, #8a6bb8); } .dv-fill.fat { background: linear-gradient(90deg, #5a4a32, #b08a4a); } .dv-fill.sat { background: linear-gradient(90deg, #3d5a3a, #7d9a6a); } .dv-base { position: absolute; top: -2px; width: 2px; height: 11px; background: var(--gold); } .dv-stages { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .dv-st { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); } .dv-st.on { border-color: var(--gold); color: var(--gold); } .dv-zone { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center; font-size: 13px; margin: 5px 0; } .dv-zn { color: var(--dim); font-size: 12px; min-width: 28px; text-align: right; } .dev-closed {border: 1px dashed var(--line); border-radius: 4px; padding: 12px 14px; color: var(--dim); font-size: 13px; line-height: 1.8; } .dev-tpl-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .dev-tpl-row .t-label { flex: 1; } .dev-tpl-row .chips { margin: 0; flex: none; } .dev-tpl-row .act { margin: 0; } #np-dev .act { margin-top: 10px; } #np-dev .grp2 { margin-top: 16px; } #np-dev .tag-add { margin-top: 14px; } /* 性開發狀態講白（2026/09/25 他說看不懂「次數」「文字」） */ .dev-empty, .dev-help { border: 1px dashed var(--line); border-radius: 4px; padding: 10px 14px; color: var(--dim); font-size: 13px; line-height: 1.8; margin-bottom: 10px; } .dev-help-t { color: var(--ink); font-size: 14px; margin-bottom: 2px; } .dev-help ul { margin: 4px 0 4px 1.2em; padding: 0; } .dev-help b { color: var(--gold); font-weight: normal; } .dev-grp { display: flex; align-items: baseline; gap: 10px; } .dev-grp .dev-grp-n { color: var(--dim); font-size: 12px; letter-spacing: 0; } .dev-row.is-count { grid-template-columns: 7em 1fr auto; } .dev-unit { color: var(--dim); font-size: 13px; } .dev-tpl-acts { margin-top: 16px; } .dev-tpl-acts .btn { flex: 1; margin: 0; } #np-dev .acts-row .act { margin-top: 0; } .jev-alert .jm { white-space: pre-line; } #np-dev .tag-add .act { margin-top: 0; } #np-dev .traits .ps-note { margin: 0; } .np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } @media (max-width: 520px) { .np-grid { grid-template-columns: 1fr; } } .acts-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } /* 設定頁：數值與時間（2026/09/25 重排）。只用站上既有的語彙：chip、grp2、虛線分隔的列 */ #pool-settings input.in-sm { padding: 7px 10px; font-size: 15px; line-height: 1.5; } #pool-settings input[type=number] { -moz-appearance: textfield; appearance: textfield; } #pool-settings input[type=number]::-webkit-outer-spin-button, #pool-settings input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #pool-settings .chips { margin: 0; } .ps-row, .ps-pool { display: grid; grid-template-columns: 5.5em 1fr; gap: 4px 14px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--line); } .ps-row .ps-k { color: var(--dim); font-size: 13px; letter-spacing: 1px; padding-top: 5px; } .ps-v { min-width: 0; } .ps-note { color: var(--dim); font-size: 12px; line-height: 1.6; margin-top: 5px; } .ps-sys { font-size: 14px; color: var(--ink); line-height: 1.6; } /* 力量：左邊一顆開關 chip，右邊名字欄。關著的整列淡掉 */ .ps-pool .ps-toggle { justify-self: start; min-width: 4.6em; text-align: center; margin-top: 2px; } .ps-pool.off .ps-v { opacity: .45; } .ps-pool.off .ps-v:focus-within { opacity: 1; } .ps-custom .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 8px; } .ps-custom .ps-grid .wide { grid-column: 1 / -1; } .ps-custom.off .ps-v > .ps-v, .ps-custom.off .ps-grid, .ps-custom.off #ps-talent-custom { display: none; } .ps-custom:not(.off) .ps-custom-off { display: none; } .ps-custom.off .ps-v { opacity: 1; } /* 自訂數值：一條一小塊，名字一行、四個數字一行、規則一行 */ .ps-grp { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; } .ps-grp .ps-cap { color: var(--dim); font-size: 12px; letter-spacing: 0; } .ctr { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin: 8px 0; background: rgba(255,255,255,.012); } .ctr-top { display: flex; gap: 8px; align-items: center; } .ctr-top .c-name { flex: 1; } .ctr-top .act { flex: none; margin: 0; } .ctr-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; } label.ctr-f { display: block; margin: 0; font-size: 12px; color: var(--dim); } label.ctr-f span { display: block; margin-bottom: 3px; letter-spacing: 1px; } @media (max-width: 520px) { .ps-row { grid-template-columns: 1fr; } /* 力量那幾列：開關 chip 窄，跟名字欄並排放得下 */ .ps-pool { grid-template-columns: 4.6em 1fr; gap: 4px 10px; } .ps-pool .ps-toggle { min-width: 0; width: 100%; padding: 5px 6px; } .ps-row .ps-k { padding-top: 0; } .ps-custom .ps-grid { grid-template-columns: 1fr; } .ctr-nums { grid-template-columns: repeat(2, 1fr); } } /* 下場：不在世上的人灰掉留著；回來過的掛金色標記 */ .sk.gone { opacity: .55; border-style: dashed; } .gone-row { opacity: .5; font-size: 14px; padding: 4px 2px; cursor: pointer; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gone-row .nm { margin-right: 10px; color: var(--ink); } .sk .fate-tag { font-size: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; color: var(--dim); } .sk .fate-tag.back { color: var(--gold); border-color: var(--gold-soft); } .sk .fate-line { color: #9b8fd4; } .trait.npc-mem { border-color: var(--line); color: var(--dim); } /* 人物卡上的癖好（玫紅）、性徵（紫），跟性格的金色分得開 */ .trait.dev-kink { color: #f0b6cc; border-color: #6e3550; background: rgba(190,80,120,.12); } .trait.dev-body { color: #cdb8f0; border-color: #4f3f7a; background: rgba(130,100,200,.12); } .trait.dev-kink.locked, .trait.dev-body.locked { border-color: var(--gold); } .fate-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fate-row #np-fate { flex: 1 1 200px; } .fate-row #np-fate-mark { width: 6em; flex: none; } .fate-row label.inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin: 0; } .np-gone-row { display: flex; align-items: center; gap: 8px; color: var(--ink); letter-spacing: 0; margin: 14px 0 10px; } .np-gone-row input { width: auto; } /* 人物編輯頁的區塊：身分、外在、內在、此刻與過往、下場、備註各一框 */ .np-sec { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 2px 16px 16px; margin-top: 14px; } .np-sec > h4 { margin: 12px 0 0; padding-bottom: 8px; border-bottom: 1px dashed var(--line); color: var(--gold); font-size: 15px; font-weight: normal; letter-spacing: 3px; } .np-sec > h4 + label, .np-sec > h4 + .sec-hint + label { margin-top: 14px; } .np-sec .sec-hint { color: var(--dim); font-size: 12px; line-height: 1.7; margin: 10px 0 0; } .np-sec .sec-hint + textarea { margin-top: 10px; } .gender-chips.locked { pointer-events: none; opacity: .55; } .act { cursor: pointer; font: inherit; font-size: 12px; padding: 4px 10px; background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; } .act:hover { border-color: var(--gold-soft); color: var(--ink); } .act.key { color: var(--gold); border-color: var(--gold-soft); } .act.bad:hover { border-color: var(--danger); color: #e0a49c; } .slotrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 15px; } .slotrow:last-child { border-bottom: none; } .slotrow .lb { color: var(--dim); font-size: 13px; min-width: 56px; } .slotrow .nm2 { flex: 1; } .slotrow .empty2 { flex: 1; color: #4a4239; } .toc { position: fixed; top: 0; right: 0; bottom: 0; width: 260px; z-index: 25; background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -14px 0 40px rgba(0,0,0,.55); } .toc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); color: var(--gold); letter-spacing: 3px; font-size: 15px; } #toc-list { flex: 1; overflow-y: auto; padding: 6px 0 24px; } .toc-row { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; cursor: pointer; border-bottom: 1px dashed var(--line); } .toc-row:hover { background: #1c1813; } .toc-row .no { color: var(--gold-dim); font-size: 12px; min-width: 42px; } .toc-row .ti { flex: 1; font-size: 14px; line-height: 1.5; } .toc-row .dy { color: var(--dim); font-size: 11px; } .toc-row.here { background: #241f17; } .toc-row.here .ti { color: var(--gold); } @media (max-width: 720px) { .toc { width: 82vw; } } /* （原本這裡有一段分頁式工具列 .tabs 的樣式，HTML 早就沒有那排分頁了，已清掉） */ input[type=range] { width: 100%; accent-color: var(--gold); } /* ── 三欄版面：三欄當成一組置中，側欄貼著本文、留一點間隙 ───── */ .layout { display: grid; /* 目錄那一欄 2026/09/26 放寬成兩倍（回目一行擺得下，不再被擠成直的）；電腦視窗窄一點就跟著縮。 同一天再改：本文放在整個視窗的正中間，左右兩欄一樣寬，側欄靠著本文往左長、目錄往右長 */ grid-template-columns: minmax(136px, 1fr) minmax(0, 700px) minmax(136px, 1fr); gap: 0 34px; min-height: 100dvh; } .center { display: flex; flex-direction: column; min-width: 0; } html.pc .layout > .sidenav { justify-self: end; min-width: 136px; } html.pc .layout > .toc { justify-self: start; width: min(400px, 28vw); max-width: 100%; } /* 側欄不要底色、不要邊框，就是文字 */ .sidenav { padding: 26px 0; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; text-align: right; } .sidenav button { cursor: pointer; font: inherit; font-size: 15px; text-align: right; background: transparent; color: var(--dim); border: none; padding: 9px 2px; } .sidenav button:hover { color: var(--ink); } .sidenav button.on { color: var(--gold); } .sidenav .sep { height: 14px; } /* 展卷永遠在側欄最上面（2026/09/27 他定的）：側欄捲到哪、在哪一頁都一樣。底色要不透明，捲上來的字才不會疊在上面 */ .sidenav .nav-pin { position: sticky; top: 0; z-index: 2; background: var(--bg); } html.m .sidenav .nav-pin { background: var(--bg2); } /* 這兩條是 sticky 的，底色不能透明，否則捲動時下面的字會疊上來 */ .statusbar { justify-content: center; background: var(--bg); } .dock { background: var(--bg); align-items: flex-end; } .tools { padding: 20px 0 60px; max-width: none; } .toc { position: sticky; top: 0; height: 100dvh; overflow-y: auto; width: auto; background: transparent; border: none; box-shadow: none; padding: 26px 0; } .toc-head { border: none; padding: 0 0 10px; } #toc-list { padding: 0; } .toc-row { border-bottom: none; padding: 7px 0; gap: 8px; } .toc-row:hover { background: transparent; } .toc-row:hover .ti { color: var(--ink); } .toc-row .ti { color: var(--dim); } .toc-row .dy { display: none; } .toc-row.here { background: transparent; } .only-narrow { display: none; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ html.m .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; } html.m .only-narrow { display: inline-block; } html.m .sidenav, html.m .toc { position: fixed; top: 0; bottom: 0; z-index: 25; height: 100dvh; background: var(--bg2); box-shadow: 0 0 40px rgba(0,0,0,.6); padding: 20px 16px; } html.m .sidenav { left: 0; width: 180px; text-align: left; } html.m .sidenav button { text-align: left; } html.m .toc { right: 0; width: 82vw; max-width: 300px; } html.m .sidenav.hidden, html.m .toc.hidden { display: none; } .grp2 { color: var(--gold-dim); font-size: 12px; letter-spacing: 2px; margin: 10px 0 4px; } /* 輸入列一個規格：輸入框、行動、模型選單、選單、目錄全部同一個高度。 輸入框固定高度不再長高，字多了就在框裡捲。 */ .dock { align-items: center; } .dock > textarea, .dock > .btn, .dock > select { height: 48px; min-height: 48px; max-height: 48px; margin: 0; box-sizing: border-box; } .dock textarea { flex: 1; resize: none; overflow-y: auto; font-size: 16px; line-height: 1.5; padding: 11px 12px; } .dock > .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; white-space: nowrap; } /* ⚠️ 上面那條 display 會蓋掉 .only-narrow 的隱藏——電腦版冒出「選單／目錄」， 按下去還會把本來開著的側欄關掉。這兩顆只屬於窄螢幕。 */ .dock > .btn.only-narrow { display: none; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ html.m .dock > .btn.only-narrow { display: inline-flex; } .dock-sel { align-self: center; } /* ── 捲軸：跟著整體配色，不要 Windows 預設那一條 ───────── */ * { scrollbar-width: thin; scrollbar-color: #332d24 transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #332d24; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #4b4131; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-corner { background: transparent; } textarea, input { scrollbar-width: thin; } .toc-row .back { opacity: 0; padding: 2px 6px; font-size: 13px; } .toc-row:hover .back { opacity: 1; } .toc-row .back:hover { border-color: var(--danger); color: #e0a49c; } /* ── 說明書的表格 ─────────────────────────────────── */ table.man { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; } table.man th { text-align: left; padding: 6px 8px; color: var(--gold); border-bottom: 1px solid var(--gold-soft); font-weight: normal; white-space: nowrap; } table.man td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } table.man td.k { color: var(--ink); white-space: nowrap; } table.man tr:last-child td { border-bottom: none; } @media (max-width: 720px) { table.man { font-size: 13px; } table.man td, table.man th { padding: 5px 4px; } } /* ── 窄螢幕：固定在最上面的一列 ────────────────────────── 桌機看不到這一列（側欄本來就一直在）。窄螢幕上它是唯一穩定的出口， 所以它不能跟著分頁一起被藏起來。 */ .mobilebar { display: none; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ html.m .mobilebar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 12; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 12px calc(8px) ; margin: 0 -16px; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); } html.m .mb-title { flex: 1; text-align: center; color: var(--gold); font-size: 14px; letter-spacing: 2px; } html.m .mbtn { cursor: pointer; font: inherit; font-size: 14px; background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; min-height: 40px; white-space: nowrap; } html.m .mbtn:active { border-color: var(--gold-soft); color: var(--ink); } /* 狀態列改成橫向捲，不要在手機上折成三行把本文擠下去 */ /* 橫向捲藏得太深，你根本不會知道右邊還有疲勞跟銀兩。 改成折兩行但字小一點，全部看得見。 */ html.m .statusbar { flex-wrap: wrap; gap: 2px 10px; padding: 6px 12px; font-size: 12px; line-height: 1.45; justify-content: flex-start; } html.m .statusbar span { white-space: nowrap; } /* 本文的左右留白：外層版面已經留了 16px，本文自己再留 18px 就是一邊 34px， 375 寬的手機一行只剩 18 個字。收到一邊 24px，一行約 19～20 字。 */ html.m .story { padding: 18px 8px 24px; } /* 頂上那一塊與底下的輸入列貼滿整個寬度，邊線才不會兩頭各短 16px */ html.m .topstack { margin: 0 -16px; padding: 0 16px; } html.m .dock { margin: 0 -16px; width: auto; max-width: none; } html.m .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 24; } html.m .sidenav button { padding: 13px 4px; font-size: 16px; } html.m .toc-row { padding: 11px 8px; } /* 手指點得到：面板上的小按鈕在手機上放大 */ html.m .act { font-size: 13px; padding: 7px 12px; } html.m .mini { padding: 7px 11px; font-size: 13px; } html.m .slotrow { flex-wrap: wrap; gap: 6px; } html.m .tool-card { padding: 14px 13px; } html.m .sheet { max-height: 92dvh; padding: 18px 16px; } html.m .acts { position: sticky; bottom: 0; background: var(--bg2); padding-top: 12px; } /* 說明書的表格在手機上橫向捲，不要硬擠成一團 */ html.m table.man { display: block; overflow-x: auto; white-space: nowrap; } html.m table.man td:last-child { white-space: normal; min-width: 200px; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ html.m .dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } /* dock 裡原本那兩顆選單／目錄改由上方固定列取代，手機上省下空間給輸入框 */ /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ html.m #btn-nav, html.m #btn-toc { display: none; } /* 試玩額度。站主看不到這一條（他是不限的） */ .quota { position: sticky; top: 0; z-index: 11; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 7px 16px; font-size: 13px; color: var(--dim); text-align: center; } .quota.warn { color: var(--danger-text); border-color: var(--danger); } /* 大事記：一條一張小卡。淡出的（主持人這一回讀不到）變暗，但還在 */ .chron-cap { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 18px; font-size: 13px; color: var(--dim); padding: 7px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-variant-numeric: tabular-nums; } .chron-cap .nw { white-space: nowrap; } .chron-card { border: 1px solid var(--line); border-left: 3px solid var(--gold-soft); border-radius: 4px; padding: 9px 12px 8px; margin: 8px 0; background: #1b1713; } .chron-card.memo { border-left-color: var(--gold); } .chron-card.faded { border-left-color: var(--line); } .chron-card.faded .chron-text { color: var(--dim); } .chron-head { display: flex; align-items: center; gap: 8px; min-height: 28px; } .chron-day { color: var(--gold-dim); font-size: 12px; letter-spacing: 1px; } .chron-card.memo .chron-day { color: var(--gold); } .chron-fade { color: var(--dim); font-size: 12px; border: 1px dashed var(--line); border-radius: 3px; padding: 0 6px; } .chron-acts { margin-left: auto; display: flex; gap: 6px; } .chron-acts .act { padding: 2px 9px; font-size: 12px; } .chron-text { font-size: 15px; line-height: 1.75; margin-top: 3px; color: var(--ink); } /* 主角性別：兩顆大一點的按鈕，選了的那顆亮起來 */ .gender-chips .chip { font-size: 15px; padding: 7px 26px; } .gender-chips .chip.on { background: var(--gold-soft); color: var(--ink); border-color: var(--gold); } /* 建角的快速模板 */ .tpl-box { border: 1px dashed var(--gold-soft); border-radius: 6px; padding: 10px 12px 2px; margin: 4px 0 6px; } .tpl-head { color: var(--dim); font-size: 13px; margin-bottom: 8px; } .tpl-box .chip { font-size: 14px; padding: 6px 16px; } /* 建角頁的字數：跟在輸入框下面 */ .panel .count { margin-top: 4px; } /* 等待中的提示放在所有畫面之外，任何一頁都看得到；字長了會換行，不要撐出螢幕 */ .busy { max-width: calc(100vw - 32px); text-align: center; } /* 站主的朋友視角：存檔列表與建角畫面最上面一條。遊戲裡改由額度列上的「回到站主」 */ .preview-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 16px; font-size: 13px; color: var(--gold); text-align: center; background: rgba(201,162,39,.08); border-bottom: 1px solid var(--gold-soft); } .preview-bar .quota-buy { margin-left: 0; } body:has(#view-game:not(.hidden)) .preview-bar { display: none; } /* 試玩看不到的東西 */ body.guest #btn-cult { display: none; } body.guest .owner-only { display: none; } /* 儲值、帳號卡的登出只給朋友：站主不用儲值，登出在左側選單（2026/09/25） */ body:not(.guest) .guest-only { display: none; } /* 設定頁的次分頁（只有站主）。朋友沒有這排、也不會有 sub-off，整頁照舊 */ .subtabs { display: flex; border-bottom: 1px solid var(--line); margin: 0; } .subtabs button { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--dim); font: inherit; font-size: 15px; letter-spacing: 2px; padding: 8px 18px; cursor: pointer; } .subtabs button:hover { color: var(--ink); } .subtabs button.on { color: var(--gold); border-bottom-color: var(--gold); } body:not(.guest) [data-pane="set"] .tool-card.sub-off { display: none; } /* 設定頁的卡片之間留間距（隱藏的卡不佔位，所以用 gap 不用相鄰選擇器） */ [data-pane="set"] { display: flex; flex-direction: column; gap: 14px; } /* 角色與世界（唯讀）：每一欄一個框，標題在框外 */ .pf-view .pf-row { margin: 4px 0 18px; } .pf-view .pf-k { color: var(--gold-dim); font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; } .pf-view .pf-v { white-space: pre-wrap; line-height: 1.85; color: var(--ink); font-size: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; } .pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 6px 0 12px; } .pager .pg { color: var(--dim); font-size: 12px; margin-right: auto; } /* 設定頁的帳號資訊 */ .acct-info { margin-bottom: 12px; font-size: 14px; } .acct-row { display: flex; gap: 12px; padding: 3px 0; } .acct-row .k { color: var(--dim); min-width: 5em; } /* 狀態頁：數值與備註分開。備註換成無襯線、暗一階的顏色 */ .stat { display: grid; grid-template-columns: 3.2em auto 1fr; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } .stat .k { color: var(--dim); font-size: 13px; letter-spacing: 1px; } .stat .v { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat .n { color: var(--dim); font-size: 12px; line-height: 1.6; font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; } .stat .n:not(:empty)::before { content: '— '; color: var(--line); } .stat .n.warn { color: var(--danger-text); } /* 屬性這種很長的一列（2026/09/27：魔法十一個屬性超出手機畫面）：值可以換行，說明排到下一行 */ .stat.long { grid-template-columns: 3.2em 1fr; } .stat.long .v { white-space: normal; overflow-wrap: anywhere; line-height: 1.7; } .stat.long .n { grid-column: 2; } @media (max-width: 480px) { .stat { grid-template-columns: 3.2em 1fr; row-gap: 0; } .stat .n { grid-column: 2; } } /* Jev 掛掉的提示：不自動消失 */ .jev-alert { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 45; width: min(460px, calc(100vw - 32px)); background: #2a1a17; border: 1px solid var(--danger); border-radius: 6px; padding: 16px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.6); } .jev-alert .jt { color: #f0a89c; font-size: 16px; letter-spacing: 2px; margin-bottom: 6px; } .jev-alert .jm { color: #f0d5d0; font-size: 13px; line-height: 1.7; word-break: break-all; margin-bottom: 12px; } /* 關係頁的分類框：按鈕靠右 */ .kind-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .kind-tools .act { margin: 0; } .kind-empty { font-size: 13px; padding: 10px 2px; } /* 說明書：標出目前所在的那一列 */ table.man tr.hl td { color: var(--gold); background: rgba(201,162,39,.08); } /* 目錄：冊 → 章 → 回 */ .toc-part { margin: 2px 0; } .toc-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; cursor: pointer; padding: 7px 0; } .toc-ph .tw { color: var(--gold-dim); width: 12px; text-align: center; font-size: 13px; } .toc-ph .pn { flex: 1; color: var(--gold-dim); font-size: 12px; letter-spacing: 1px; } .toc-ph .pti { flex-basis: 100%; padding-left: 18px; color: var(--ink); font-size: 14px; line-height: 1.45; } .toc-ph .pr { color: var(--dim); font-size: 11px; white-space: nowrap; } .toc-ph .back { opacity: 0; padding: 2px 6px; font-size: 12px; } .toc-ph:hover .back { opacity: 1; } .toc-volume > .toc-ph .pti { color: var(--gold); font-size: 15px; } .toc-volume > .toc-ph { border-bottom: 1px solid var(--line); } .toc-body { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 5px; } .toc-sum-btn { font: inherit; font-size: 12px; color: var(--dim); background: none; border: none; padding: 2px 0 6px; cursor: pointer; } .toc-sum-btn:hover { color: var(--ink); } .toc-sum { font-size: 12px; color: var(--dim); line-height: 1.7; padding: 4px 6px 8px 0; } .dos-ladder { font-size: 13px; line-height: 1.75; margin: 4px 0 8px; color: var(--ink); } .dos-ladder b { color: var(--gold-dim); font-weight: normal; margin-right: 6px; } .toc-open { color: var(--dim); font-size: 11px; letter-spacing: 2px; margin: 12px 0 2px; } @media (hover: none) { .toc-ph .back, .toc-row .back { opacity: 1; } } /* 本文裡的章名、冊名 */ .chap-head { text-align: center; margin: 34px 0 26px; } .chap-head .cn { color: var(--gold-dim); font-size: 13px; letter-spacing: 6px; } .chap-head .ct { color: var(--gold); font-size: 20px; letter-spacing: 3px; margin-top: 4px; } .chap-head.volume { margin-top: 48px; padding: 16px 0; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); } .chap-head.volume .ct { font-size: 24px; } /* 試玩：風格只能點選，不能改字 */ textarea.locked { color: var(--dim); cursor: default; } /* 對話框裡的勾選框：不要被 label 的置中樣式拉歪 */ .sheet label.chk { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); } .sheet label.chk input { width: auto; } /* 器物品階章：用那一階的顏色 */ .grade.qg { color: var(--rc); border-color: var(--rc); } /* 還沒看透的器物：了解度 */ .sk .lore { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; } .sk .lore .bar { flex: 1; max-width: 220px; height: 5px; background: var(--line); border-radius: 2px; margin: 0; } .sk .lore .bar i { display: block; height: 100%; background: #6f6659; border-radius: 2px; } .sk .lore .pct { color: var(--dim); font-size: 12px; } /* 大事記裡玩家用 /記 交代的條目 */ .slotrow.memo .lb { color: var(--gold); } .slotrow.memo .nm2 { color: var(--ink); } /* 書寫風格的三顆按鈕 */ .style-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .style-acts .btn { margin: 0; } /* 儲值 */ .quota-buy { font: inherit; font-size: 12px; cursor: pointer; margin-left: 4px; padding: 1px 10px; background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 3px; } .sub-cycle { margin: 0 0 6px; } .act.back.locked { opacity: .45; } .shop-test { border: 1px dashed #6b5520; color: #e0b050; font-size: 12px; border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.6; } /* 每一檔一個顏色（2026/09/25 他嫌單調）：沿用稀有度那組色，越貴越亮。--tc 由 .tc-* 給 */ .shop-pack { --tc: var(--gold); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; margin: 10px 0; padding: 12px 14px; border-radius: 6px; color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 24%, #1c1813) 0%, #1c1813 75%); border: 1px solid color-mix(in srgb, var(--tc) 70%, var(--line)); } .shop-pack:hover { border-color: var(--tc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); } /* 停用（購買關著、已經訂了、條件不夠）：照樣看得清楚，只是按不下去 */ .shop-pack:disabled { opacity: .9; cursor: not-allowed; } .shop-pack:disabled:hover { box-shadow: none; } .shop-pack .sp-name { font-size: 17px; color: color-mix(in srgb, var(--tc) 80%, #fff); font-weight: 700; } .shop-pack .sp-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: color-mix(in srgb, var(--tc) 80%, #fff); font-size: 18px; font-weight: 700; text-align: right; } .shop-pack .sp-price small { display: block; font-size: 12px; font-weight: 400; color: var(--ink); opacity: .8; } .shop-pack .sp-badge { position: absolute; top: -9px; right: 10px; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 3px; background: var(--tc); color: #140f08; font-weight: 700; letter-spacing: 1px; } .tc-1 { --tc: var(--r1); } .tc-2 { --tc: var(--r3); } .tc-3 { --tc: var(--r4); } .tc-4 { --tc: var(--r5); } .tc-5 { --tc: var(--r6); } .tc-6 { --tc: #e5484d; } .shop-pack .sp-turns { color: var(--ink); font-size: 13px; } .shop-pack .sp-note { grid-column: 1 / span 2; color: #c9bfae; font-size: 12px; } .shop-order { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); padding: 3px 0; } .shop-order .so-st.paid { color: var(--gold); } /* ── 頂部：一整塊，不要各自浮 ───────────────────────────── 之前三條橫條各自 position:sticky、各自寫死 top 偏移， 只要其中一條的高度跟預期差一點，中間就會露出縫，內文從縫裡穿過去。 包成一塊之後只有一個 sticky，沒有偏移可以算錯。 */ .topstack { position: sticky; top: 0; z-index: 12; background: var(--bg); border-bottom: 1px solid var(--line); } .topstack > * { position: static !important; top: auto !important; } .topstack .statusbar, .topstack .mobilebar, .topstack .quota { border-bottom: none; background: transparent; } .topstack .mobilebar { border-bottom: 1px solid var(--line); } .topstack .quota { border-bottom: 1px dashed var(--line); } .topstack .mobilebar { margin: 0; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ /* 選單鍵只留圖示，中間留給分頁名稱。 這一列加狀態列本來共 105px、佔掉手機螢幕八分之一，按鈕縮到 34px 高就夠按。 */ html.m .mobilebar { padding: 4px 10px; gap: 8px; } html.m .mbtn { padding: 5px 10px; min-height: 34px; } html.m .mb-title { font-size: 15px; } /* 輸入列：一行放得下。原本擠三個控制項＋兩行提示文字， 在手機上會長到被瀏覽器的工具列切掉。 */ html.m .dock { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); } html.m .dock textarea { min-height: 42px; max-height: 96px; padding: 9px 10px; font-size: 16px; } html.m .dock .btn.ghost { padding: 10px 12px; white-space: nowrap; } html.m .dock-sel { max-width: 92px; height: 42px; font-size: 12px; } /* ── 手機的輸入列：照聊天 App 的做法 ─────────────────────── 原本一行擠三個控制項，輸入框被壓到剩一小條，連短提示都換行。 現在輸入框吃滿整行，送出鍵疊在框裡面，模型下拉搬去設定頁。 */ /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ /* ⚠️ 一定要留 sticky。寫 relative 會蓋掉基礎規則的 position: sticky， 輸入列就會掉到文件最底下（四萬像素外），手機上等於整個消失。 sticky 一樣能當絕對定位子元素的容器。 */ html.m .dock { position: sticky; bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } html.m .dock textarea { flex: 1 1 100%; min-height: 46px; max-height: 120px; padding: 12px 74px 12px 14px; font-size: 16px; line-height: 1.5; border-radius: 22px; } html.m .dock textarea:focus { border-color: var(--gold-soft); outline: none; } html.m .dock #btn-free { position: absolute; right: 19px; bottom: calc(15px + env(safe-area-inset-bottom)); /* 固定高度。不指定的話它會跟著 body 的 line-height 1.85 長到 48px， 比輸入框還高，上緣就凸出框外。 */ height: 32px; line-height: 1; padding: 0 14px; font-size: 14px; border-radius: 16px; background: var(--gold); color: #1a1509; border-color: var(--gold); min-height: 0; } html.m .dock #sel-model { display: none; } /* 搬到設定頁之後要吃滿寬度，不要還是那個 92px 的小格子 */ html.m #model-host select { max-width: none; width: 100%; height: 44px; font-size: 15px; } /* 記憶頁 */ .memo-card .memo-text { font-size: 15px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; } .memo-card .acts-row { align-items: center; } .memo-card .acts-row .num { margin: 0 auto 0 0; } /* 人物誌：狀態（受傷、中毒、被催眠……） */ .trait.npc-state { color: #f0b8a8; border-color: #6b3a30; background: rgba(180,72,60,.12); } /* 人物側寫 */ .npc-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: 13px; margin: 4px 0 6px; } .npc-profile .pf-row { display: flex; gap: 8px; line-height: 1.6; } .npc-profile .pf-k { color: var(--dim); flex: none; min-width: 4.5em; } .npc-profile .pf-v { color: var(--ink); } .npc-profile .unknown .pf-v { color: #6f6659; } /* 說話方式、本事、秘密通常比較長，佔滿一整行 */ .npc-profile .pf-row.wide { grid-column: 1 / -1; } /* 還不知道的欄位收成一行，不要一欄一列寫「未知」 */ .pf-unknown { color: var(--dim); font-size: 12px; line-height: 1.6; margin: 2px 0 6px; } @media (max-width: 480px) { .npc-profile { grid-template-columns: 1fr; } } /* 多人房（2026/09/26） */ .room-head { margin-bottom: 8px; } .room-status { color: var(--gold); font-weight: 600; } .room-members { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; } .room-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; } .room-member.me { border-color: var(--gold-dim); } .room-member .rm-name { flex: 1; } .room-member .rm-acct { color: var(--dim); font-size: 12px; } .room-member .rm-state { color: var(--dim); font-size: 12px; } .room-member .rm-state.ok { color: var(--gold); } .room-invite { display: flex; gap: 6px; align-items: center; } .room-invite input { flex: 1; min-width: 0; font-size: 12px; } .room-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .wait-bar { border: 1px dashed #6b5520; color: #e0b050; font-size: 12px; border-radius: 4px; padding: 6px 10px; margin: 0 0 6px; } .save-card.room-card .sc-sub { color: var(--dim); font-size: 12px; } .room-box { border: 1px dashed #6b5520; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; } .mode-seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .mode-seg button { flex: 1; background: none; border: none; color: var(--dim); padding: 10px 0; font-size: 15px; cursor: pointer; } .mode-seg button + button { border-left: 1px solid var(--line); } .mode-seg button.on { background: rgba(212, 175, 55, .16); color: var(--gold); font-weight: 600; } #room-opts { margin-top: 10px; } /* 文字連結樣式的按鈕（‹ 目錄、‹ 回書架、去買席位包……）：全站一樣，不要瀏覽器預設的白色按鈕 */ .link-btn { background: none; border: none; color: var(--gold); cursor: pointer; padding: 4px 0; font: inherit; font-size: 14px; } .link-btn:hover { text-decoration: underline; } .hint .link-btn { text-decoration: underline; padding: 0; font-size: inherit; } /* 勾選框：全站的 input 都是 width 100%，勾選框被一起拉寬擠到中間（2026/09/26 他截圖說醜）。改成整列可點的樣式 */ input[type=checkbox], input[type=radio] { width: auto; padding: 0; margin: 0; } label.age-ok { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #1c1813; color: var(--ink); font-size: 15px; letter-spacing: 0; line-height: 1.5; cursor: pointer; } label.age-ok:hover { border-color: var(--gold-dim); } label.age-ok:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, #1c1813); } label.age-ok:has(input:disabled) { opacity: .45; cursor: not-allowed; } label.age-ok input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; border: 2px solid var(--gold-dim); border-radius: 4px; background: transparent; position: relative; cursor: pointer; } label.age-ok input:checked { background: var(--gold); border-color: var(--gold); } label.age-ok input:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #140f08; border-width: 0 2px 2px 0; transform: rotate(45deg); } .row2 { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .row2 .act { text-decoration: none; } .room-member { flex-wrap: wrap; } .room-member .rm-act { flex-basis: 100%; color: var(--ink); font-size: 12px; padding-left: 2px; opacity: .85; } .wait-bar .wb-head { color: var(--gold-dim); margin-bottom: 2px; } .wait-bar .wb-act { color: var(--ink); padding-left: 8px; } .wait-bar .wb-wait { margin-top: 2px; } .cf-msg { color: #e0b050; line-height: 1.6; } .room-pool { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; } .room-pool .pool-bal { color: var(--gold); font-weight: 600; } .room-pool .pool-donate { display: flex; gap: 6px; margin: 6px 0; } .room-pool .pool-donate input { width: 110px; } .room-pool .pool-log { color: var(--dim); font-size: 12px; } /* 藏經閣（2026/09/26） */ .lib-panel { max-width: 720px; } .lib-panel .mode-seg { margin: 8px 0 10px; } .lib-r18 { color: #e0b050; font-size: 12px; border: 1px dashed #6b5520; border-radius: 4px; padding: 6px 10px; margin: 6px 0; } .lib-card { display: flex; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: #1c1813; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 8px 0; } .lib-card:hover { border-color: var(--gold-dim); } .lib-rank { color: var(--gold); font-weight: 700; min-width: 20px; } .lib-body { flex: 1; min-width: 0; } .lib-title { font-size: 17px; font-weight: 700; color: var(--ink); } .lib-blurb { color: #c9bfae; font-size: 13px; margin: 4px 0; } .lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .lib-tag { font-size: 12px; border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 12px; padding: 2px 8px; } .lib-tag.mode { border-color: var(--line); color: #c9bfae; } .lib-meta { color: #a89e8d; font-size: 12px; } .lib-earn { color: var(--gold); margin: 8px 0; } .book-title { margin: 10px 0 4px; } .ch-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 10px; } .ch-row { display: flex; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; padding: 11px 14px; cursor: pointer; text-align: left; } .ch-row:hover { background: #1c1813; } .ch-row.fail { color: #8a8073; } .ch-row .ch-side { color: #a89e8d; font-size: 12px; white-space: nowrap; } .ch-note { color: #e0b050; font-size: 12px; padding: 4px 14px 8px; border-bottom: 1px solid var(--line); } .my-book { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; } .pub-form { display: flex; flex-direction: column; gap: 4px; } .pub-form .act.key { margin-top: 10px; } .lib-read { max-width: 680px; } .read-top { display: flex; gap: 10px; align-items: center; color: #a89e8d; font-size: 13px; } .read-title { text-align: center; margin: 18px 0; } .read-p { text-indent: 2em; line-height: 2; font-size: 17px; margin: 0 0 1em; } .read-nav { display: flex; justify-content: space-between; gap: 10px; margin: 24px 0; } .read-nav .act { flex: 1; } .shop-tabs { margin: 4px 0 8px; position: sticky; top: -1px; z-index: 2; background: var(--bg2, #16120e); } .shop-pane { min-height: 120px; } /* 左側選單的商城：跟其他字一樣，只換成金色（2026/09/26 他嫌原本那顆橘色大按鈕太搶眼） */ #sidenav [data-nav="shop"] { color: #e0a060; } #sidenav [data-nav="shop"]:hover { color: #f2b87a; } .shop-pack .sp-need { color: #9fd49a; } .shop-pack .sp-need.no { color: #e0b050; } /* 月費卡：名字底下一句＋權益清單（2026/09/26 照刀鋒的樣子）。比便宜一級多出來的權益標亮 */ .shop-pack .sp-tag { color: #c9bfae; font-size: 13px; } .shop-pack .sp-perks { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); } .shop-pack .sp-perk { font-size: 13px; line-height: 1.55; color: var(--ink); padding-left: 1.3em; text-indent: -1.3em; } .shop-pack .sp-perk::before { content: '✓'; display: inline-block; width: 1.3em; text-indent: 0; color: color-mix(in srgb, var(--tc) 80%, #fff); } .shop-pack .sp-perk.hi { color: color-mix(in srgb, var(--tc) 70%, #fff); font-weight: 700; } .mod-world { white-space: pre-wrap; color: #d8cfbf; line-height: 1.8; background: #1c1813; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; } .mod-go { width: 100%; margin: 16px 0; } .mod-npcs { display: flex; flex-direction: column; } /* 洞天：自己的樣子（不照刀鋒）——排序做成底線分頁、題材一排小籤 */ .mods-tools { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .mods-tools > input { flex: 1; min-width: 160px; } .mods-code { display: flex; gap: 6px; align-items: center; } .mods-code input { width: 110px; text-transform: uppercase; letter-spacing: 2px; } .mods-sort { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 6px 0 8px; } .mods-sort button { background: none; border: none; color: #a89e8d; font: inherit; padding: 8px 2px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .mods-sort button.on { color: var(--gold); border-bottom-color: var(--gold); } .mods-genre { flex-wrap: wrap; margin: 4px 0 8px; } .mod-card { border-left: 3px solid var(--gold-dim); } .mod-badge { font-size: 11px; font-weight: 600; border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; } .mod-badge.official { background: var(--gold); color: #1a1208; } .mod-badge.demo { border: 1px dashed #a89e8d; color: #a89e8d; } .mod-guide { margin: 8px 0; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; } .mod-guide summary { cursor: pointer; color: var(--gold); } .mods-code button { background: none; border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 4px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px; } .mods-code button:hover { border-color: var(--gold); } .unlock-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; margin: 10px 0; padding: 12px 14px; border-radius: 8px; color: var(--ink); background: linear-gradient(135deg, rgba(224,120,60,.22), #1c1813 70%); border: 1px solid #c9731f; } .unlock-bar .ub-t { color: #f0a060; font-weight: 700; font-size: 16px; } .unlock-bar .ub-s { color: #c9bfae; font-size: 12px; grid-column: 1; } .unlock-bar .ub-p { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #f0a060; font-weight: 700; font-size: 18px; } /* 分潤：要一眼看到 */ .fenrun { border: 1px solid #c9a227; border-radius: 8px; padding: 12px 14px; margin: 10px 0; background: linear-gradient(135deg, rgba(201,162,39,.20), #1c1813 70%); } .fenrun .fr-t { color: #f2c94c; font-weight: 700; font-size: 16px; } .fenrun .fr-s { color: #d8cfbf; font-size: 13px; margin: 4px 0; line-height: 1.6; } .fenrun .fr-n { color: var(--gold); font-size: 13px; } .fr-inline { color: #f2c94c; } /* 書的分級（台灣分級的配色：普綠、輔黃、限紅） */ .rt-badge { font-size: 11px; font-weight: 700; border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; } .rt-general { background: #2f8a3a; color: #fff; } .rt-guide { background: #e0b020; color: #1a1208; } .rt-restricted { background: #c0392b; color: #fff; } .lib-r18.rt-guide-note { color: #e0b020; border-color: #7a6320; } /* ── 手機巡檢（2026/09/26）：手機上擋手、擋眼的地方 ─────────────────── */ /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ /* 點數併進最上面那一列（#mb-points），遊戲畫面頂上少一行；底下那一條只留給販售版視角（上面有切換級距的鍵） */ html.m .topstack .quota:not(.has-preview) { display: none; } html.m .mb-points { color: var(--gold); border-color: var(--gold-dim); font-variant-numeric: tabular-nums; } html.m .mb-points.warn { color: var(--danger-text); border-color: var(--danger); } /* iPhone 上輸入框的字小於 16px，點進去整個畫面會自動放大、還不會自己縮回來 */ html.m #money-settings input.in-sm, html.m #np-dev input.in-sm, html.m #pool-settings input.in-sm, html.m textarea.dossier-edit, html.m #model-host select, html.m .room-invite input { font-size: 16px; } /* 存檔列表、藏經閣、洞天、建角的頂列：連結原本只有 28×26，「儲值」跟「登出」緊貼，手指容易點錯 */ html.m .topbar { gap: 2px; padding: 6px 8px 6px 14px; } html.m .topbar .brand { flex-shrink: 0; } html.m .topbar .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; } html.m .topbar .link { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 40px; padding: 0 8px; } html.m .topbar .link[href="/auth/logout"] { margin-left: 10px; } /* 目錄裡的「收章」「⟲ 回退」：原本 26×30、只隔 8px */ html.m .toc-row .back, html.m .toc-ph .back { min-height: 36px; min-width: 40px; padding: 4px 10px; } html.m .toc-row { gap: 10px; } /* 等待提示：「2 秒」的「秒」不要自己掉到第二行 */ html.m .busy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 洞天：搜尋框自己一行，提示字才不會被私密代碼擠掉一半 */ html.m .mods-tools > #mods-q { flex-basis: 100%; } /* 很窄的手機（320 寬）：頂列放不下名字，擠到只剩半個字母，乾脆不顯示（名字在設定頁看得到） */ @media (max-width: 340px) { .topbar .who { display: none; } } /* 點數面板與分享管理（2026/09/26） */ .pts-total { font-size: 22px; color: var(--gold); margin: 4px 0 10px; } .pts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .pts-card { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--bg); } .pts-card .pts-k { font-size: 13px; color: var(--dim); letter-spacing: 2px; } .pts-card .pts-v { font-size: 22px; margin: 2px 0 4px; } .pts-card .pts-n { font-size: 12px; color: var(--dim); line-height: 1.6; } .pts-sub .pts-v { color: var(--r4); } .pts-gift .pts-v { color: var(--r3); } .pts-paid .pts-v { color: var(--gold); } .pts-reward .pts-v { color: var(--r5); } .pts-log td { font-size: 13px; padding: 4px 6px; } .pts-log .dim { color: var(--dim); white-space: nowrap; } .pts-in { color: var(--r3); text-align: right; } .pts-out { color: var(--danger-text); text-align: right; } .sh-ref { border: 1px solid var(--gold-soft); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; } .sh-item { border-top: 1px dashed var(--line); padding: 10px 0; } .sh-item.closed { opacity: .55; } .sh-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .sh-badge { font-size: 12px; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--line); color: var(--r3); } .sh-badge.restricted { color: var(--danger-text); border-color: var(--danger); } .sh-badge.guide { color: #e0b050; } .sh-badge.fail { color: var(--danger-text); border-color: var(--danger); } .sh-link { display: flex; gap: 6px; margin: 6px 0; } .sh-link input { flex: 1; min-width: 0; font-size: 16px; } .sh-gift { display: flex; align-items: center; gap: 6px; } .sh-gift input { width: 90px; font-size: 16px; } .sh-fail { color: var(--danger-text); } .shop-offset { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink); margin: 4px 0 6px; cursor: pointer; } .shop-offset input { margin-top: 4px; } .shop-pack .sp-old { color: var(--dim); font-weight: normal; font-size: 13px; } .shop-pack .sp-offset { color: var(--r5); } .pts-ex { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 14px; margin: 4px 0 12px; } /* 稱號（2026/09/26） */ .tt-on { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .tt-on select { font-size: 16px; flex: 1; min-width: 0; } .tt-on > span { white-space: nowrap; } .tt-special { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .tt-card { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--bg); } .tt-card.mine, .tt-item.mine { border-color: var(--gold); } .tt-name { font-size: 16px; color: var(--gold); font-weight: 600; } .tt-n { font-size: 12px; color: var(--dim); line-height: 1.7; } .tt-tier { color: var(--dim); font-size: 13px; margin: 12px 0 6px; letter-spacing: 2px; } .tt-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .tt-item { --tc: var(--gold); border: 1px solid color-mix(in srgb, var(--tc) 50%, var(--line)); border-radius: 6px; padding: 8px 10px; background: var(--bg); } .tt-item .tt-name { color: var(--tc); } .tt-item .mini { margin-top: 6px; } /* ── 手機巡檢二（2026/09/26）：實際在 390 寬的手機上把整個流程走一遍抓到的 ───────────── */ /* 面板頁是 grid 的格子，格子預設不肯比內容窄：點數頁的收支表一寬，整頁跟著撐出螢幕、右半邊被切掉 */ .tools > .pane { min-width: 0; } /* 側欄的分隔線在手機上被擠成 0 高（側欄是會捲動的 flex 欄，項目一多，分隔就被壓扁），分組看不出來 */ .sidenav > * { flex-shrink: 0; } /* 說明框裡的連結原本是瀏覽器預設的深藍，在深底上幾乎看不見 */ .sheet .note a, .hint a, .note a { color: var(--gold); } /* 按下去的那個選項標亮、其他淡掉：手機沒有滑鼠停留，不然看不出剛才選了哪一個、現在在等 */ .options.waiting .opt { cursor: default; } .options.waiting .opt:not(.picked) { opacity: .4; } .opt.picked { border-color: var(--gold); background: #221c12; } .opt.picked .n { background: var(--gold); color: #1a1509; } /* 建角少填一欄：捲過去、那一欄亮紅框兩秒 */ .need { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(180, 72, 60, .35); border-radius: 6px; } /* 儲值視窗的分頁黏在上面時，上緣那條留白會露出底下捲過去的字 */ .shop-tabs { box-shadow: 0 -20px 0 0 var(--bg2, #16120e); } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ /* 選單鍵原本 35 寬，比手指還窄 */ html.m #btn-menu2 { min-width: 44px; } html.m .sidenav button { padding: 11px 4px; } html.m .sidenav .sep { height: 12px; border-bottom: 1px solid var(--line); margin: 0 4px 10px; } /* 小字的下限拉到 13px：說明、字數、欄位旁的小注、分組標題。12px 的襯線中文在手機上要瞇眼 */ html.m label .muted, html.m .count, html.m .sheet .note, html.m .kind-desc, html.m .sk .num, html.m .sk .fx, html.m .ps-note, html.m .np-sec .sec-hint, html.m .pts-card .pts-n, html.m .tt-n, html.m .tool-card .cap, html.m .grp, html.m .grp2, html.m .shop-pack .sp-note, html.m .shop-order, html.m .lib-meta, html.m .ch-row .ch-side, html.m .dos-meta, html.m .toc-row .no { font-size: 13px; } /* 點數頁的收支表：說明書那套「最後一欄至少 200px、整張不換行」是給大表格的，套在這裡會撐破版面 */ html.m table.man.pts-log { display: table; white-space: normal; } html.m table.man.pts-log td:last-child { min-width: 0; white-space: nowrap; } /* 目錄：每一回三顆按鈕把回目擠成一行兩個字。回目自己一整行，按鈕排到下一行靠右 */ html.m .toc-row { flex-wrap: wrap; row-gap: 6px; align-items: baseline; border-bottom: 1px dashed var(--line); padding: 12px 4px 10px; } html.m .toc-row .no { min-width: 52px; } html.m .toc-row .ti { flex: 1 1 calc(100% - 70px); min-width: 0; font-size: 15px; } html.m .toc-row .dy + .act { margin-left: auto; } html.m .toc-row .back { min-height: 34px; font-size: 13px; } /* 人物卡標籤角上的 × 與鎖：原本 18×18，手指按不準。看起來大一點，能按的範圍再往外擴 */ html.m .tag-x, html.m .tag-lock { width: 22px; height: 22px; line-height: 20px; } html.m .tag-x::after, html.m .tag-lock::after { content: ''; position: absolute; inset: -7px; } html.m .traits:has(.has-lock), html.m .traits:has(.has-x) { gap: 16px 26px; margin-top: 14px; } /* 小按鈕（.mini）原本只在卡片標題列裡有樣式；分享的「複製」、稱號的「購買」、多人房的「複製／重發／捐進去」、 洞天的「複製連結」都落在標題列外面，變成瀏覽器預設的白底黑字按鈕，在深色畫面上很刺眼 */ button.mini { cursor: pointer; font: inherit; font-size: 13px; line-height: 1.4; white-space: nowrap; background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 4px; padding: 6px 12px; min-height: 34px; } button.mini:hover { background: #1f1a12; } button.mini:disabled { opacity: .45; cursor: not-allowed; } /* 手機版（看裝置，不看視窗寬：html.m 由 index.html 開頭那段判斷） */ /* 站主的頂列多了「控制台」「販售版視角」，一行放不下，「儲值」被切一半、「登出」整個看不到。放不下就換到第二行 */ html.m .topbar { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; } /* 多人房成員捏角：先看到這一局的世界與房主的主角 */ .sheet .note.char-world { white-space: pre-wrap; max-height: 28dvh; overflow-y: auto; color: #c9bfae; font-size: 13px; margin: 10px 0 0; } /* 多人房等別人時，輸入列上方那塊「已經送出的行動」原本跟輸入框擠在同一行：手機上兩邊都被壓成一條窄縫，「行動」鍵也浮在框外。自己佔一整行 */ .dock { flex-wrap: wrap; } .dock > .wait-bar { flex: 1 1 100%; margin: 0; } /* 藏經閣的閱讀頁：跟遊戲本文一樣兩端對齊（原本右緣參差不齊）；上一章、下一章是讀書時最常按的，字放大、按鈕加高 */ .read-p { text-align: justify; overflow-wrap: anywhere; } .read-nav .act { font-size: 15px; min-height: 48px; } /* 登入頁的「服務介紹與價目」原本只有 19px 高 */ .login-about a { display: inline-block; padding: 10px 8px; } /* 分段按鈕（公開／私密、原文／精簡／濃縮……）原本左右沒有留白，長一點的字貼著框邊擠成一條。留白、放不下就換行 */ .mode-seg button { padding: 10px 8px; line-height: 1.4; } /* 出書的「開始整理」、洞天的「發布」是整張表單最後那一下，原本跟旁邊的小按鈕一樣 13px */ .pub-form .act.key { font-size: 16px; min-height: 48px; margin-top: 18px; } /* ── PC 版與手機版（2026/09/26）：html.pc／html.m 由 index.html 開頭看裝置決定 ───────────── */ /* 側欄的「書房」：點上層展開、再點收起。子項目縮小一號、往內縮一點，看得出是一串 */ /* 三角形用 CSS 畫，不用「▸」字元：字元在字框裡不置中，轉 90 度就往旁邊跑（2026/09/27 手機上展開時位移）。 方框固定大小、三角形畫在正中間，繞中心轉就不會動 */ .sidenav .grp-head .tw { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 10px; font-size: 0; vertical-align: -1px; transition: transform .15s; transform-origin: 50% 50%; } .sidenav .grp-head .tw::before { content: ''; display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--gold-dim); } .sidenav .nav-grp.open .grp-head .tw { transform: rotate(90deg); } .sidenav .nav-grp:not(.open) .nav-sub { display: none; } .sidenav .nav-grp.has-on:not(.open) .grp-head { color: var(--gold); } .sidenav .nav-sub { display: flex; flex-direction: column; gap: 1px; } .sidenav .nav-sub button { font-size: 14px; padding: 6px 2px; color: #a89d8c; } /* 跟上層一樣靠右對齊（2026/09/27），縮小一號、暗一階看得出是一串 */ html.m .sidenav .nav-sub button { padding-right: 4px; padding-left: 18px; } /* 側欄一排擺完、不要捲：螢幕矮的筆電把間距收緊 */ @media (max-height: 820px) { html.pc .sidenav { padding: 16px 0; } html.pc .sidenav button { padding: 6px 2px; } html.pc .sidenav .sep { height: 8px; } } /* 每一回最後的分享：靠右一行小字，不搶本文 */ .turn-share { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; } .turn-share .ts-range { color: var(--dim); font-size: 13px; } .turn-share .act { font-size: 13px; padding: 4px 14px; } html.m .turn-share .act { min-height: 40px; padding: 8px 18px; } /* 存檔列表的「朋友開的房」原本是瀏覽器預設的白底按鈕，在深色畫面上很刺眼：照存檔卡的樣子 */ button.save-card.room-card { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 12px; background: var(--bg2); color: var(--ink); } button.save-card.room-card:hover { border-color: var(--gold-soft); } .save-card.room-card .sc-title { color: var(--gold); font-size: 19px; line-height: 1.45; letter-spacing: 1px; } .save-card.room-card .sc-sub { font-size: 13px; margin-top: 4px; } /* 人物卡名字右邊的「基本／開發」檢視切換（站主與名家） */ .npc-vt { display: inline-flex; margin-left: 2px; border: 1px solid var(--line, #3a3226); border-radius: 4px; overflow: hidden; vertical-align: middle; } .npc-vt-b { background: transparent; border: 0; color: var(--dim, #8a7f6c); font: inherit; font-size: 13px; padding: 2px 10px; cursor: pointer; } .npc-vt-b + .npc-vt-b { border-left: 1px solid var(--line, #3a3226); } .npc-vt-b.on { background: var(--gold, #b8962e); color: #1a1510; } /* 裝備併進背包：最上面的 4×4 格子（2026/09/27） */ .eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; } .eq-cell { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; min-height: 52px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .eq-cell .eq-lb { font-size: 12px; color: var(--dim); } .eq-cell .eq-nm { font-size: 14px; color: #4a4239; overflow-wrap: anywhere; line-height: 1.35; } .eq-cell.on { cursor: pointer; border-color: var(--gold); } .eq-cell.on .eq-nm { color: var(--gold); } .eq-cell.spare { border-style: dashed; opacity: .45; } html.m .eq-cell { padding: 4px 5px; min-height: 46px; } html.m .eq-cell .eq-nm { font-size: 13px; } /* 狀態頁兩欄式（2026/09/27）：一格一個數值，備註收進 data-tip（電腦滑過、手機長按） */ .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .stat-cell { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; } .stat-cell.wide { grid-column: 1 / -1; } .stat-cell .k, .stat-sys .k, .attr-h, .attr-cell .k { color: var(--dim); font-size: 13px; letter-spacing: 1px; white-space: nowrap; } .stat-cell .v { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .stat-cell.warn .v { color: var(--danger-text); } .has-tip { cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .has-tip > .k { text-decoration: underline dotted var(--line); text-underline-offset: 4px; } .stat-sys { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding: 7px 0; border-bottom: 1px solid var(--gold); } .stat-sys .k { color: var(--gold); } .stat-sys .v { color: var(--ink); font-size: 16px; } .stat-sys .n { color: var(--dim); font-size: 12px; } /* 屬性：一塊大格子，3 欄，有幾個排幾個；沒有屬性就整塊不出現 */ .attr-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; } .attr-h { margin-bottom: 6px; } .attr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .attr-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; } .attr-cell .v { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; } /* 跟網站的卡片同一套：深底、細金框、黑體、不擋滑鼠 */ .tip-bubble { position: absolute; z-index: 9999; max-width: 280px; padding: 8px 12px; border-radius: 4px; background: var(--bg2); color: var(--ink); border: 1px solid var(--gold-soft); font-family: var(--sans); font-size: 13px; line-height: 1.7; letter-spacing: .5px; box-shadow: 0 6px 18px rgba(0,0,0,.55); pointer-events: none; } /* 側欄改黑體、字重加粗、顏色調亮（2026/09/27 他說太淡太細） */ .sidenav button { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; font-weight: 500; color: #bdb2a1; letter-spacing: 1px; } .sidenav button:hover { color: #f1e9dc; } .sidenav button.on { color: var(--gold); font-weight: 700; } /* 狀態頁數值上色：只留兩色（2026/09/27 他說太五顏六色）——血量一色、能量池與屬性一色，其他照本色 */ .stat-cell.c-hp .v { color: #d9897f; } .stat-cell.c-po .v, .attr-cell .v { color: #8db4d9; } /* 人物誌索引：名字的矩陣，點一下跳到那張卡 */ .npc-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; } html.m .npc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } .npc-index:empty { display: none; } .npc-ix { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font: inherit; font-size: 14px; padding: 5px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .npc-ix:hover { border-color: var(--gold); color: var(--gold); } .npc-ix.hero { color: var(--gold); } .npc-ix.gone { color: var(--dim); text-decoration: line-through; } .npc-ix.on { border-color: var(--gold); background: var(--gold); color: #15120f; } .sk.flash { box-shadow: 0 0 0 2px var(--gold); transition: box-shadow .3s; } /* 明體只留在讀故事的地方：本文段落、大標題、書名 */ .turn p, .read-p, .brand, .sheet h2, .tool-card .ch h3, h1, h2 { font-family: var(--serif); } button, input, textarea, select { font-family: var(--sans); } /* ── 說明書（2026/09/27）：每一頁標題旁的「？」、彈出的那一章、書房裡的整本 ── */ .help-q { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); font: inherit; font-size: 13px; line-height: 22px; text-align: center; vertical-align: middle; } .help-q:hover { border-color: var(--gold); background: rgba(201, 162, 39, .08); } .sheet h2 .help-q { margin-left: 8px; letter-spacing: 0; } .topbar .help-q { margin-left: -6px; } /* 輸入列那一顆跟「行動」同高；手機版改用上方固定列那一顆，輸入列不再擠 */ .dock > .help-dock { width: 48px; border-radius: 4px; padding: 0; font-size: 16px; line-height: 1; } html.m .dock > .help-dock { display: none; } .mobilebar .help-mb { display: none; } html.m .mobilebar .help-mb { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; padding: 0; border-radius: 4px; height: auto; } /* 每一組一個主色：開始金、角色青、市集朱、書房紫、其他灰藍 */ [data-grp] { --mc: #c9a227; --mc-bg: rgba(201, 162, 39, .10); } [data-grp="role"] { --mc: #4fb3a9; --mc-bg: rgba(79, 179, 169, .10); } [data-grp="market"] { --mc: #e07b52; --mc-bg: rgba(224, 123, 82, .10); } [data-grp="study"] { --mc: #a391e0; --mc-bg: rgba(163, 145, 224, .10); } [data-grp="other"] { --mc: #8fa7c0; --mc-bg: rgba(143, 167, 192, .10); } /* 彈窗：內文自己捲，按鈕固定在底下一條，不再蓋住字 */ .man-sheet { max-width: 640px; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-color: var(--mc, var(--gold-soft)); border-top: 3px solid var(--mc, var(--gold)); } .man-sheet .man-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 8px; -webkit-overflow-scrolling: touch; } .man-sheet .acts, html.m .man-sheet .acts { position: static; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg2); flex: none; } .man-sheet .acts .btn { min-height: 42px; padding: 0 10px; font-size: 14px; } html.m .man-sheet { max-height: 88dvh; padding: 0; } #manual, .man-body { font-size: 15px; } .man-crumb { color: var(--dim); font-size: 12px; margin-bottom: 6px; } .man-crumb a.man-link { border-bottom: none; } .man-title { display: flex; align-items: center; gap: 10px; color: var(--mc); font-size: 20px; letter-spacing: 2px; margin: 2px 0 12px; } .man-seal { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--mc); color: #15120f; font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 0; } .man-body .grp, #manual .grp { color: var(--mc); font-size: 14px; font-weight: 700; letter-spacing: 1px; margin: 20px 0 8px; padding: 3px 0 3px 10px; border-left: 3px solid var(--mc); border-bottom: none; } .man-p { margin: 8px 0; line-height: 1.8; } .man-p b, .man-ul b, .man-note b { color: var(--mc); font-weight: 700; } .man-ul { margin: 6px 0 10px; padding-left: 1.2em; line-height: 1.8; } .man-ul li { margin: 4px 0; } .man-ul li::marker { color: var(--mc); } a.man-link { color: var(--mc); text-decoration: none; border-bottom: 1px dotted var(--mc); cursor: pointer; } a.man-link:hover { border-bottom-style: solid; } .man-note { margin: 10px 0; padding: 9px 12px; border-left: 3px solid var(--mc); background: var(--mc-bg); border-radius: 0 6px 6px 0; color: var(--ink); font-size: 13px; line-height: 1.75; } /* 表格：佔滿寬度、圓角框、表頭上色；欄位太多時才在框裡橫捲 */ .man-tw { margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .man-tw table.man, html.m .man-tw table.man { display: table; width: 100%; margin: 0; border-collapse: collapse; white-space: normal; font-size: 14px; } .man-tw table.man th { background: var(--mc-bg); color: var(--mc); font-weight: 700; font-size: 13px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .man-tw table.man td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .man-tw table.man tr:last-child td { border-bottom: none; } .man-tw table.man tr:nth-child(even) td { background: rgba(255, 255, 255, .02); } .man-tw table.man td.k { color: var(--ink); font-weight: 500; white-space: nowrap; } html.m .man-tw table.man td:last-child { min-width: 0; white-space: normal; } .man-tw table.man td.num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; color: color-mix(in srgb, var(--mc) calc(var(--h, .5) * 100%), var(--ink)); } .man-tw table.man td.nil { text-align: center; color: #4a4238; } .man-tw table.man th.hc { background: var(--mc); color: #15120f; text-align: center; } .man-tw table.man td.hc { background: var(--mc-bg) !important; } .man-tw table.man.man-wide th:not(:first-child) { text-align: center; } .man-tw table.man tr.hl td { background: var(--mc-bg); color: var(--mc); } /* 指令、括號例子：第一欄排成按鍵的樣子 */ .man-tw table.man.man-code td.k span, .man-tw table.man.man-code td.k { white-space: nowrap; } .man-tw table.man.man-code td.k { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--mc); } html.m .man-tw table.man { font-size: 13px; } html.m .man-tw table.man th, html.m .man-tw table.man td { padding: 7px 8px; } .man-nav { display: flex; justify-content: space-between; gap: 8px; margin: 22px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; } .man-nav a.man-link { border-bottom: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--mc); } .man-nav > :nth-child(2) { text-align: center; } /* 首頁目錄：一組一塊，每一章一顆籤 */ .man-toc { display: grid; gap: 10px; margin: 8px 0; } .man-toc-grp { border: 1px solid var(--line); border-left: 3px solid var(--mc); border-radius: 8px; padding: 10px 12px; background: var(--mc-bg); } .man-toc-g { color: var(--mc); font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; } .man-toc-l { display: flex; flex-wrap: wrap; gap: 8px; } a.man-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; cursor: pointer; } a.man-chip:hover { border-color: var(--mc); } a.man-chip .man-seal { width: 24px; height: 24px; font-size: 13px; border-radius: 50%; } /* 登入即同意的說明（2026/09/28） */ .login-terms { margin: 18px 0 0; font-size: 12px; line-height: 1.7; color: var(--dim); text-align: left; } .login-terms b { font-weight: 500; color: var(--ink); } .login-terms a { color: var(--gold); } /* 全站頁尾（2026/09/28）：在 #app 裡、所有畫面之後，捲到最下面就看得到 */ .site-foot { border-top: 1px solid var(--line); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--dim); font-size: 12px; line-height: 1.7; text-align: center; } .site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; } .site-foot a { color: var(--dim); text-decoration: underline; } .site-foot a:hover { color: var(--gold); } /* 頁面剛打開、還沒決定進哪個畫面時不顯示，免得頁尾先跳在最上面 */ body:not(:has(.screen:not(.hidden))) .site-foot { display: none; } /* 問題回報單（2026/09/28） */ .rp-mine { margin-top: 18px; text-align: left; } .rp-mine h3 { color: var(--gold-soft); font-size: 14px; letter-spacing: 2px; margin: 0 0 6px; font-weight: normal; } .rp-mine .r { border-top: 1px solid var(--line); padding: 10px 0; font-size: 14px; } .rp-mine .r .h { color: var(--dim); font-size: 12px; } .rp-mine .r .h .done { color: var(--gold); } .rp-mine .r .x { white-space: pre-wrap; margin-top: 4px; line-height: 1.7; } .rp-mine .r .re { white-space: pre-wrap; margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--gold-soft); color: var(--ink); line-height: 1.7; }