/* R46 · 标题页 / 界面管理：全部组件用 Blender 渲染贴图（assets/ui/kit/*.webp），CSS 只做排版与动效 */
:root { --k: 1; --gold: #d8b06a; --gold2: #f0d29a; --ink: #120d0a; --txt: #eadcbd; --txt2: #b9a582; --dim: #85765e; --cin: #b8432a; --jade: #7fc4a2; }
.ts-root { position: absolute; inset: 0; overflow: hidden; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; color: var(--txt); user-select: none; -webkit-user-select: none; }
.ts-root canvas.ts-bg, canvas.ts-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; pointer-events: none; }
/* 读字区：左侧压一条柔和的暗幕，保证菜单清晰；不压全屏 */
.ts-root .ts-veil { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(14, 9, 6, .62) 0%, rgba(14, 9, 6, .36) 26%, rgba(14, 9, 6, 0) 46%),
  linear-gradient(0deg, rgba(14, 9, 6, .45) 0%, rgba(14, 9, 6, 0) 22%); }
.ts-root.sub .ts-veil { background: rgba(14, 9, 6, .34); transition: background .5s; }
.ts-ui { position: absolute; inset: 0; pointer-events: none; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.ts-k { width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); background: center / 100% 100% no-repeat; }

/* ---------------------------------------------------------------- 首页 */
.ts-home > *, .ts-panel, .ts-ft, .ts-dlg, .ts-last { pointer-events: auto; }
.ts-home { pointer-events: none; align-items: center; position: absolute; left: calc(max(18px, env(safe-area-inset-left)) + 2.5vw); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(10px * var(--k)); transition: opacity .45s, transform .45s; }
.ts-root.sub .ts-home { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.ts-logo { --w: 360; --h: 211; background-image: url(../assets/ui/kit/plaque.webp); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); transform-origin: 50% 0; animation: ts-sway 7s ease-in-out infinite; margin-bottom: calc(4px * var(--k)); }
@keyframes ts-sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.ts-tag { font-size: calc(12.5px * var(--k)); letter-spacing: .42em; color: var(--txt2); text-shadow: 0 1px 2px #000; margin: calc(-2px * var(--k)) 0 calc(6px * var(--k)); text-align: center; padding-left: .42em; }
.ts-menu { display: flex; flex-direction: column; gap: calc(5px * var(--k)); }
.ts-btn { --w: 300; --h: 43.5; position: relative; display: flex; align-items: center; padding: 0 calc(34px * var(--k)) 0 calc(36px * var(--k)); border: 0; cursor: pointer; background: url(../assets/ui/kit/btn_n.webp) center / 100% 100% no-repeat; color: var(--txt); font: inherit; font-size: calc(16.5px * var(--k)); letter-spacing: .32em; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .6); transition: transform .18s, filter .18s; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); outline: none; }
.ts-btn::after { content: ""; position: absolute; inset: 0; background: url(../assets/ui/kit/btn_h.webp) center / 100% 100% no-repeat; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ts-btn > * { position: relative; z-index: 1; }
.ts-btn:hover, .ts-btn:focus-visible, .ts-btn.on { transform: translateX(calc(6px * var(--k))); color: var(--gold2); }
.ts-btn:hover::after, .ts-btn:focus-visible::after, .ts-btn.on::after { opacity: 1; }
.ts-btn:active { transform: translateX(calc(6px * var(--k))) scale(.985); }
.ts-btn .ic { width: calc(30px * var(--k)); height: calc(30px * var(--k)); margin-right: calc(10px * var(--k)); background: center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); flex: none; }
.ts-btn small { margin-left: auto; font-size: calc(11px * var(--k)); letter-spacing: .12em; color: var(--dim); }
.ts-btn.off { filter: grayscale(.75) brightness(.72) drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); color: var(--dim); }
.ts-btn.off:hover { color: var(--txt2); }
.ts-lock { --w: 26; --h: 26; position: absolute !important; right: calc(30px * var(--k)); top: 50%; margin-top: calc(-13px * var(--k)); background-image: url(../assets/ui/kit/seal_lock.webp); filter: none; }
.ts-ft { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--dim); letter-spacing: .12em; text-shadow: 0 1px 2px #000; }
.ts-fb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(200, 160, 90, .32); background: rgba(16, 11, 8, .6); color: var(--txt2); font: inherit; font-size: calc(12.5px * var(--k)); letter-spacing: .2em; padding: 4px 12px 4px 6px; border-radius: 2px; cursor: pointer; transition: .2s; }
.ts-fb i { width: calc(24px * var(--k)); height: calc(24px * var(--k)); background: center / contain no-repeat; }
.ts-fb:hover { color: var(--gold2); border-color: rgba(240, 190, 110, .7); background: rgba(70, 30, 16, .65); }
.ts-ft .seal { --w: 30; --h: 30; background-image: url(../assets/ui/kit/seal.webp); }
.ts-last { position: absolute; right: max(22px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); text-align: right; font-size: calc(12px * var(--k)); color: var(--txt2); line-height: 1.7; text-shadow: 0 1px 3px #000; transition: opacity .4s; }
.ts-last b { display: block; color: var(--gold2); font-size: calc(15px * var(--k)); letter-spacing: .2em; font-weight: 600; }
.ts-root.sub .ts-last { opacity: 0; }

/* ---------------------------------------------------------------- 二级面板 */
.ts-panel { position: absolute; left: 50%; top: 50%; width: min(calc(100% - 28px), calc(820px * var(--k))); height: min(calc(100% - 22px), calc(520px * var(--k))); transform: translate(-50%, -48%) scale(.97); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s;
  border: calc(36px * var(--k)) solid transparent; border-image: url(../assets/ui/kit/panel.webp) 92 / calc(36px * var(--k)) stretch; background: rgba(16, 11, 8, .82); background-clip: padding-box; display: flex; flex-direction: column; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); }
.ts-panel.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.ts-ph { display: flex; align-items: center; gap: calc(10px * var(--k)); margin: calc(-14px * var(--k)) calc(-8px * var(--k)) calc(6px * var(--k)); }
.ts-ph h2 { margin: 0; font-size: calc(21px * var(--k)); letter-spacing: .4em; color: var(--gold2); font-weight: 600; text-shadow: 0 2px 4px #000; }
.ts-ph .sub { font-size: calc(11.5px * var(--k)); color: var(--dim); letter-spacing: .14em; }
.ts-close { --w: 34; --h: 34; margin-left: auto; border: 0; cursor: pointer; background: url(../assets/ui/kit/close.webp) center / contain no-repeat; transition: transform .2s; flex: none; }
.ts-close:hover { transform: rotate(90deg) scale(1.06); }
.ts-div { --w: 360; --h: 29; background: linear-gradient(90deg, transparent, rgba(201, 162, 79, .55) 20%, rgba(201, 162, 79, .55) 80%, transparent) center / 100% 1px no-repeat; max-width: 100%; margin: 0 auto calc(6px * var(--k)); }   /* R61：去两端回旋纹 / 菱形饰，只留一道金线 */
.ts-tabs { display: flex; gap: calc(4px * var(--k)); flex-wrap: wrap; margin-bottom: calc(8px * var(--k)); }
.ts-tab { --w: 104; --h: 38; border: 0; cursor: pointer; background: url(../assets/ui/kit/tab_n.webp) center / 100% 100% no-repeat; font: inherit; font-size: calc(13.5px * var(--k)); letter-spacing: .2em; color: #3a2814; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 240, 200, .35); padding-left: .2em; }
.ts-tab.on { background-image: url(../assets/ui/kit/tab_a.webp); color: var(--gold2); text-shadow: 0 1px 2px #000; }
.ts-bd { flex: 1; overflow: auto; padding: calc(2px * var(--k)) calc(4px * var(--k)); scrollbar-width: thin; scrollbar-color: #5a4630 transparent; }
.ts-bd::-webkit-scrollbar { width: 5px; } .ts-bd::-webkit-scrollbar-thumb { background: #5a4630; border-radius: 3px; }
.ts-pf { display: flex; gap: calc(10px * var(--k)); justify-content: flex-end; align-items: center; margin-top: calc(8px * var(--k)); }
.ts-pf .hint { margin-right: auto; font-size: calc(11.5px * var(--k)); color: var(--dim); }
.ts-sb { --w: 132; --h: 39; border: 0; cursor: pointer; background: url(../assets/ui/kit/btn_s_n.webp) center / 100% 100% no-repeat; font: inherit; font-size: calc(14px * var(--k)); letter-spacing: .25em; color: var(--txt); text-shadow: 0 1px 2px #000; padding-left: .25em; transition: transform .15s; }
.ts-sb:hover, .ts-sb.pri { background-image: url(../assets/ui/kit/btn_s_h.webp); color: var(--gold2); }
.ts-sb:active { transform: scale(.97); }
.ts-sb:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }

/* 行：设置项 */
.ts-row { display: flex; align-items: center; gap: calc(12px * var(--k)); padding: calc(7px * var(--k)) calc(6px * var(--k)); border-bottom: 1px solid rgba(180, 140, 80, .14); font-size: calc(14px * var(--k)); }
.ts-row > label { flex: 0 0 calc(132px * var(--k)); color: var(--txt); letter-spacing: .1em; }
.ts-row > .v { flex: 1; display: flex; align-items: center; gap: calc(10px * var(--k)); color: var(--txt2); font-size: calc(12.5px * var(--k)); min-width: 0; }
.ts-row .note { font-size: calc(11px * var(--k)); color: var(--dim); }
.ts-sl { --w: 230; --h: 21; position: relative; background-image: url(../assets/ui/kit/slider.webp); cursor: pointer; touch-action: none; flex: none; }
.ts-sl i { position: absolute; top: 50%; width: calc(26px * var(--k)); height: calc(26px * var(--k)); margin: calc(-13px * var(--k)) 0 0 calc(-13px * var(--k)); background: url(../assets/ui/kit/knob.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px #000); }
.ts-sl b { position: absolute; top: 50%; left: 4%; height: calc(4px * var(--k)); margin-top: calc(-2px * var(--k)); border-radius: 2px; background: linear-gradient(90deg, rgba(184, 67, 42, .5), rgba(240, 160, 90, .85)); pointer-events: none; }
.ts-tg { --w: 56; --h: 22; border: 0; cursor: pointer; background: url(../assets/ui/kit/toggle_off.webp) center / 100% 100% no-repeat; flex: none; }
.ts-tg.on { background-image: url(../assets/ui/kit/toggle_on.webp); }
.ts-seg { display: inline-flex; border: 1px solid rgba(200, 160, 90, .4); border-radius: 3px; overflow: hidden; }
.ts-seg button { border: 0; background: rgba(20, 14, 10, .7); color: var(--txt2); font: inherit; font-size: calc(12.5px * var(--k)); padding: calc(4px * var(--k)) calc(11px * var(--k)); cursor: pointer; letter-spacing: .08em; }
.ts-seg button + button { border-left: 1px solid rgba(200, 160, 90, .25); }
.ts-seg button.on { background: linear-gradient(#7a2a18, #4a170c); color: var(--gold2); }

/* 存档卡（竹简） */
.ts-cards { display: grid; gap: calc(8px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(calc(330px * var(--k)), 1fr)); }
.ts-card { --w: 360; --h: 91; position: relative; width: 100%; height: auto; aspect-ratio: 1030 / 260; background-image: url(../assets/ui/kit/card.webp); cursor: pointer; transition: transform .18s, filter .18s; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.ts-card:hover, .ts-card.on { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(240, 180, 90, .45)) drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.ts-card .pt { position: absolute; left: 4.6%; top: 14%; width: 19.3%; height: 72%; background: #1a120c center 18% / cover no-repeat; border-radius: 2px; }
.ts-card .tx { position: absolute; left: 29%; right: 5%; top: 16%; bottom: 14%; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-shadow: 0 1px 2px #000; overflow: hidden; }
.ts-card .tx b { font-size: calc(15px * var(--k)); color: var(--gold2); letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-card .tx span { font-size: calc(11.5px * var(--k)); color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-card .tx em { font-style: normal; font-size: calc(10.5px * var(--k)); color: var(--dim); }
.ts-card.empty .pt { background: rgba(10, 7, 5, .6); }
.ts-card.empty .tx b { color: var(--dim); }

/* 列表块（模式 / 图鉴 / 成就） */
.ts-grid { display: grid; gap: calc(8px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(calc(176px * var(--k)), 1fr)); }
.ts-tile { position: relative; padding: calc(10px * var(--k)) calc(12px * var(--k)); border: 1px solid rgba(200, 160, 90, .28); background: linear-gradient(160deg, rgba(60, 40, 24, .55), rgba(16, 11, 8, .7)); border-radius: 3px; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; text-align: left; font: inherit; color: inherit; }
.ts-tile:hover, .ts-tile.on { border-color: rgba(240, 190, 110, .8); transform: translateY(-1px); background: linear-gradient(160deg, rgba(110, 50, 26, .6), rgba(24, 14, 9, .75)); }
.ts-tile b { display: block; font-size: calc(15px * var(--k)); color: var(--gold2); letter-spacing: .16em; margin-bottom: 3px; }
.ts-tile p { margin: 0; font-size: calc(11.5px * var(--k)); color: var(--txt2); line-height: 1.6; }
.ts-tile .ic { float: right; width: calc(34px * var(--k)); height: calc(34px * var(--k)); background: center / contain no-repeat; margin-left: 6px; }
.ts-tile.off { filter: saturate(.4) brightness(.8); }
.ts-tile .badge { position: absolute; right: 8px; bottom: 6px; width: calc(24px * var(--k)); height: calc(24px * var(--k)); background: url(../assets/ui/kit/seal_lock.webp) center / contain no-repeat; }
.ts-tile.got b { color: var(--jade); }

.ts-heroes { display: flex; gap: calc(8px * var(--k)); overflow-x: auto; padding-bottom: 4px; }
.ts-hero { flex: 0 0 calc(96px * var(--k)); border: 1px solid rgba(200, 160, 90, .3); border-radius: 3px; background: #140e0a center 15% / cover no-repeat; aspect-ratio: 3 / 4; position: relative; cursor: pointer; transition: border-color .2s, transform .2s; }
.ts-hero span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 4px; text-align: center; font-size: calc(13px * var(--k)); letter-spacing: .2em; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: var(--txt); }
.ts-hero.on { border-color: var(--gold2); transform: translateY(-2px); box-shadow: 0 0 12px rgba(240, 180, 90, .4); }
.ts-hero.on span { color: var(--gold2); }
.ts-hero .lv { position: absolute; right: 4px; top: 4px; font-size: 10px; padding: 1px 4px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(200, 160, 90, .4); color: var(--gold2); }
.ts-desc { margin-top: calc(8px * var(--k)); font-size: calc(12.5px * var(--k)); line-height: 1.75; color: var(--txt2); }
.ts-desc b { color: var(--gold2); letter-spacing: .1em; }
.ts-desc q { display: block; margin-top: 4px; color: var(--txt); font-style: italic; }
.ts-desc q::before, .ts-desc q::after { content: none; }

/* 制作人员：滚动卷轴 */
.ts-credits { text-align: center; line-height: 2.1; font-size: calc(13.5px * var(--k)); color: var(--txt2); }
.ts-credits h4 { margin: calc(14px * var(--k)) 0 2px; color: var(--gold2); letter-spacing: .4em; font-weight: 600; font-size: calc(13px * var(--k)); }

/* 提示条 / 确认框 */
.ts-toast { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); opacity: 0; padding: 8px 22px; background: rgba(16, 11, 8, .9); border: 1px solid rgba(200, 160, 90, .5); color: var(--gold2); font-size: 13px; letter-spacing: .12em; pointer-events: none; transition: .3s; border-radius: 2px; z-index: 20; }
.ts-toast.on { opacity: 1; transform: translateX(-50%); }
.ts-dlg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); z-index: 15; }
.ts-dlg .box { width: min(92%, calc(420px * var(--k))); border: calc(30px * var(--k)) solid transparent; border-image: url(../assets/ui/kit/panel.webp) 92 / calc(30px * var(--k)) stretch; background: rgba(16, 11, 8, .92); background-clip: padding-box; text-align: center; font-size: calc(14px * var(--k)); line-height: 1.8; }
.ts-dlg .box .ts-pf { justify-content: center; }
.ts-fade { position: absolute; inset: 0; background: #0b0806; opacity: 1; pointer-events: none; transition: opacity 1.2s; z-index: 30; }
.ts-fade.out { opacity: 0; }
.ts-fade .ld { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); font-size: 12px; letter-spacing: .4em; color: var(--dim); }

/* 平板（短边更大）：放大组件；手机矮屏：缩小 */
/* 组件缩放随屏高：手机横屏（360–430）紧凑，平板（800+）放大 */
@media (max-height: 430px) { .ts-logo { --w: 300; --h: 176; } .ts-tag { display: none; } .ts-menu { gap: calc(3px * var(--k)); } }