/* ============================================================
   titan-game.css · TitanTV 游戏化设计系统（AAA 游戏角色面板 × 赛博朋克终端）
   ------------------------------------------------------------
   设计原则：
   1) 全面复用站内既有语汇：--color-main 空格分隔 RGB / clip-path 切角 /
      四角括号描线 / 霓虹内外发光 / 扫描线 / 数字雨
   1b) 字体全站统一（自托管）：中文=像素字体 Zpix · 数字=电子表 Digital-7 · 英文=官方字体 SF TransRobotics / Kroftsmann
   2) 每个组件都含「交互态」：默认 / hover / 选中 / 禁用 / 加载 / 成功 / 未保存
   3) 组件可独立引用，不依赖任何 JS 框架
   用法：<link rel="stylesheet" href="/ds/titan-game.css">
   ============================================================ */
:root{
  --color-main: 0 200 255;          /* 与站内一致：空格分隔 RGB */
  --color-violet: 168 85 247;
  --color-gold: 251 191 36;
  --color-ok: 34 227 154;
  --color-warn: 255 197 61;
  --color-bad: 255 77 109;
  --tg-bg:#04060a;
  --tg-panel-a: rgba(18,25,35,.92);
  --tg-panel-b: rgba(7,10,15,.94);
  --tg-line: rgba(255,255,255,.10);
  --tg-dim:#8592a6;
  --tg-faint:#57626f;
  --tg-txt:#e9eef5;
  --tg-corner: 16px;               /* 切角尺寸 */
  --tg-cut: 14px;
  /* 全站统一字体（自托管，不依赖外网 CDN）
     像素字体 = 中文/UI · 电子表字体 = 所有数字 · 官方字体 = 英文 */
  --font-pixel:'Zpix','Microsoft YaHei',sans-serif;
  --font-digital:'Digital7Mono','Digital7',monospace;
  --font-en:'SF TransRobotics','Zpix',sans-serif;
  --font-en-title:'SF TransRobotics ExtBold','Kroftsmann','Zpix',sans-serif;
}
/* ---------- 字体声明（自托管 · 绝对路径） ---------- */
@font-face{font-family:'Zpix';src:url('/fonts/zpix.subset.v2.woff2') format('woff2'),url('/fonts/zpix.subset.v2.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Digital7';src:url('/fonts/digital7.woff2') format('woff2'),url('/fonts/digital7.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Digital7Mono';src:url('/fonts/digital7m.woff2') format('woff2'),url('/fonts/digital7m.ttf') format('truetype');font-display:swap}
@font-face{font-family:'SF TransRobotics';src:url('/fonts/sf-transrobotics.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'SF TransRobotics';src:url('/fonts/sf-transrobotics-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'SF TransRobotics ExtBold';src:url('/fonts/sf-transrobotics-extbold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Kroftsmann';src:url('/fonts/kroftsmann.ttf') format('truetype');font-display:swap}
/* ---------- 基础 ---------- */
.tg{color:var(--tg-txt);font-family:var(--font-pixel)}
.tg *{box-sizing:border-box}
.tg-lcd{font-family:var(--font-digital);font-weight:400;letter-spacing:.06em}
.tg-num{font-family:var(--font-digital);font-weight:400;font-variant-numeric:tabular-nums}
.tg-mono{font-family:var(--font-en);letter-spacing:.06em}

/* ---------- 面板：切角 + 四角括号 + 内/外发光 + 扫描线 ---------- */
.tg-panel{position:relative;background:linear-gradient(165deg,var(--tg-panel-a),var(--tg-panel-b));
  border:1px solid rgb(var(--color-main) / .30);
  box-shadow:0 0 34px rgb(var(--color-main) / .13), inset 0 0 46px rgb(var(--color-main) / .045);
  clip-path:polygon(var(--tg-cut) 0,100% 0,100% calc(100% - var(--tg-cut)),calc(100% - var(--tg-cut)) 100%,0 100%,0 var(--tg-cut));
  padding:20px 22px}
/* 四角括号描线（8 段渐变，与站内 .gl-clip 同款手法） */
.tg-panel::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.95;
  background:
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) left 0 top 0/18px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) left 0 top 0/2px 18px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) right 0 top 0/18px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) right 0 top 0/2px 18px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) left 0 bottom 0/18px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) left 0 bottom 0/2px 18px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) right 0 bottom 0/18px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.95),rgb(var(--color-main)/.95)) right 0 bottom 0/2px 18px no-repeat}
/* 顶部渐变装饰线 + 循环扫光 */
.tg-panel::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--color-main)/.9),rgb(var(--color-violet)/.8),transparent);
  animation:tg-sweep 4.2s linear infinite}
@keyframes tg-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* 扫描线纹理（可叠加到任意面板） */
.tg-scan{position:relative}
.tg-scan::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.30;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)}

/* ---------- 标题 ---------- */
.tg-h{display:flex;align-items:center;gap:10px;font-family:var(--font-en-title);font-weight:800;
  font-size:15px;letter-spacing:.10em;color:#fff;text-shadow:0 0 12px rgb(var(--color-main)/.75)}
.tg-h i{font-size:18px;color:rgb(var(--color-main))}
.tg-h .sub{margin-left:auto;font-family:var(--font-en);font-size:11px;letter-spacing:.14em;color:var(--tg-dim);text-shadow:none}
.tg-cap{font-family:var(--font-en);font-size:11px;letter-spacing:.16em;color:rgb(var(--color-main) / .9)}

/* ---------- 按钮（切角 + 霓虹） ---------- */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 16px;border:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  background:linear-gradient(180deg,rgb(var(--color-main)/.95),rgb(var(--color-main)/.72));color:#04121a;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 16px rgb(var(--color-main)/.35);transition:.2s}
.tg-btn:hover{box-shadow:0 0 26px rgb(var(--color-main)/.65);transform:translateY(-1px)}
.tg-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.tg-btn--ghost{background:rgba(255,255,255,.05);color:var(--tg-txt);border:1px solid var(--tg-line);box-shadow:none;font-weight:400}
.tg-btn--ghost:hover{color:rgb(var(--color-main));border-color:rgb(var(--color-main)/.55);box-shadow:0 0 18px rgb(var(--color-main)/.25);transform:none}
.tg-btn--gold{background:linear-gradient(180deg,rgb(var(--color-gold)/.95),rgb(var(--color-gold)/.7));color:#241a02;box-shadow:0 0 16px rgb(var(--color-gold)/.35)}
.tg-btn--danger{background:rgba(255,77,109,.14);color:rgb(var(--color-bad));border:1px solid rgba(255,77,109,.5);box-shadow:none;font-weight:400}
.tg-btn--loading{position:relative;color:transparent!important}
.tg-btn--loading::after{content:'';position:absolute;left:0;top:0;bottom:0;width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:tg-load 1s linear infinite}
@keyframes tg-load{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
.tg-btn--done{background:linear-gradient(180deg,rgb(var(--color-ok)/.95),rgb(var(--color-ok)/.7));color:#04160f;box-shadow:0 0 18px rgb(var(--color-ok)/.4)}

/* ---------- 立绘框（角框 + 六角点缀 + 底部渐隐） ---------- */
.tg-artframe{position:relative;display:block}
/* 立绘去黑底：径向羽化 + 底部渐隐（不再用 mix-blend-mode，任何底层都不会露出黑框） */
.tg-artframe img{display:block;height:100%;width:auto;
  -webkit-mask-image:radial-gradient(64% 68% at 50% 44%,#000 0 58%,rgba(0,0,0,.45) 76%,transparent 94%),
                     linear-gradient(180deg,#000 0 84%,transparent 100%);
  mask-image:radial-gradient(64% 68% at 50% 44%,#000 0 58%,rgba(0,0,0,.45) 76%,transparent 94%),
             linear-gradient(180deg,#000 0 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ---------- 开放式悬浮布局（拒绝框套框） ---------- */
.tg-open{position:relative;background:none!important;border:none!important;box-shadow:none!important;
  clip-path:none!important;padding:0}
.tg-open::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgb(var(--color-main)/.85),rgb(var(--color-violet)/.6),transparent);
  animation:tg-sweep 4.2s linear infinite}
.tg-open::after{display:none!important}
.tg-block{position:relative;padding:2px 0 12px 15px;border-left:2px solid rgb(var(--color-main)/.5);
  background:linear-gradient(90deg,rgb(var(--color-main)/.055),transparent 55%)}
.tg-block+.tg-block{margin-top:14px}
.tg-block .tg-cap{color:rgb(var(--color-main)/.85)}
.tg-slot.tg-slot--bare{background:none;border:none;padding:4px 0;clip-path:none}
.tg-slot.tg-slot--bare:hover{background:none;box-shadow:none;transform:none}
.tg-slot.tg-slot--bare .ic{width:54px;height:54px}
.tg-exp.tg-exp--bare{background:none;border:none;padding:0;clip-path:none}
.tg-skill.tg-skill--bare{background:none;border:none;clip-path:none}
.tg-skill.tg-skill--bare:hover{background:none;transform:translateY(-2px)}
.tg-artframe::before{content:'';position:absolute;left:-10px;bottom:14px;width:22px;height:22px;pointer-events:none;
  background:
    linear-gradient(rgb(var(--color-main)/.9),rgb(var(--color-main)/.9)) 0 0/22px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.9),rgb(var(--color-main)/.9)) 0 0/2px 22px no-repeat,
    linear-gradient(rgb(var(--color-main)/.9),rgb(var(--color-main)/.9)) right 0 bottom 0/22px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)/.9),rgb(var(--color-main)/.9)) right 0 bottom 0/2px 22px no-repeat}
.tg-artframe .tagline{position:absolute;left:0;bottom:-2px;font-family:var(--font-en);font-size:10.5px;
  letter-spacing:.18em;color:rgb(var(--color-main)/.85)}

/* ---------- 背包格图标 ---------- */
.tg-pack{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:12px}
.tg-slot{position:relative;display:flex;align-items:center;gap:13px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(20,28,38,.92),rgba(9,13,19,.88));
  border:1px solid var(--tg-line);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:.22s}
.tg-slot:hover{border-color:rgb(var(--color-main)/.5);box-shadow:0 0 22px rgb(var(--color-main)/.18);transform:translateY(-2px)}
.tg-slot .ic{position:relative;width:62px;height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);border:1px solid rgb(var(--color-main)/.45)}
.tg-slot .ic::before{content:'';position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(0,200,255,.18) 0 1px,transparent 1px 6px),
             repeating-linear-gradient(90deg,rgba(0,200,255,.18) 0 1px,transparent 1px 6px)}
.tg-slot .ic i{position:relative;font-size:30px;color:rgb(var(--color-main));filter:drop-shadow(0 0 11px rgb(var(--color-main)/.8))}
.tg-slot .ic .bdg{position:absolute;right:-8px;bottom:-8px;min-width:22px;height:22px;padding:0 5px;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--color-main));color:#04121a;font-family:var(--font-digital);font-weight:700;font-size:12px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.tg-slot .k{font-family:var(--font-en);font-size:10.5px;letter-spacing:.14em;color:var(--tg-dim)}
.tg-slot .v{font-family:var(--font-digital);font-weight:700;font-size:24px}
.tg-slot--gold{border-color:rgb(var(--color-gold)/.5)}.tg-slot--gold .ic{border-color:rgb(var(--color-gold)/.55)}
.tg-slot--gold .ic i{color:rgb(var(--color-gold));filter:drop-shadow(0 0 11px rgb(var(--color-gold)/.75))}
.tg-slot--gold .ic .bdg{background:rgb(var(--color-gold))}
.tg-slot--violet .ic{border-color:rgb(var(--color-violet)/.55)}
.tg-slot--violet .ic i{color:rgb(var(--color-violet));filter:drop-shadow(0 0 11px rgb(var(--color-violet)/.8))}
.tg-slot--violet .ic .bdg{background:rgb(var(--color-violet));color:#fff}
.tg-slot--warn .ic{border-color:rgb(var(--color-warn)/.55)}
.tg-slot--warn .ic i{color:rgb(var(--color-warn));filter:drop-shadow(0 0 11px rgb(var(--color-warn)/.75))}
.tg-slot--warn .ic .bdg{background:rgb(var(--color-warn))}

/* ---------- 经验/好感度条：扫描光带 + 刻度 + 大号百分比 ---------- */
.tg-exp{padding:14px 16px;background:linear-gradient(180deg,rgba(20,28,38,.94),rgba(9,13,19,.9));
  border:1px solid rgb(var(--color-main)/.35);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.tg-exp .hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.tg-lv{display:flex;align-items:center;gap:9px;padding:6px 13px;
  background:linear-gradient(100deg,rgb(var(--color-gold)/.22),rgb(var(--color-gold)/.04));
  border:1px solid rgb(var(--color-gold)/.55);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tg-lv i{font-size:20px;color:rgb(var(--color-gold));filter:drop-shadow(0 0 10px rgb(var(--color-gold)/.8))}
.tg-lv b{font-family:var(--font-digital);font-weight:700;font-size:21px;color:rgb(var(--color-gold))}
.tg-exp .note{font-size:12px;color:var(--tg-dim)}
.tg-bar{position:relative;height:28px;margin-top:12px;background:rgba(0,0,0,.62);border:1px solid rgb(var(--color-main)/.5);overflow:hidden}
.tg-bar>i{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgb(var(--color-main)/.95),rgb(var(--color-violet)));box-shadow:0 0 20px rgb(var(--color-main)/.7);
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.tg-bar>i::after{content:'';position:absolute;right:0;top:0;bottom:0;width:26px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85))}
.tg-bar::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 12px)}
.tg-bar>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--font-digital);font-weight:700;
  font-size:18px;color:#fff;text-shadow:0 0 12px rgba(0,0,0,.95)}
.tg-ticks{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-en);font-size:10.5px;color:var(--tg-faint)}

/* ---------- 技能盘（带徽标的技能槽） ---------- */
.tg-deck{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tg-skill{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;cursor:pointer;
  background:linear-gradient(180deg,rgba(17,24,33,.92),rgba(8,11,16,.88));border:1px solid var(--tg-line);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);transition:.22s}
.tg-skill:hover{border-color:rgb(var(--color-main)/.5);transform:translateY(-3px)}
.tg-skill .ic{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14)}
.tg-skill .ic i{font-size:24px;color:var(--tg-dim);transition:.2s}
.tg-skill .ic .bdg{position:absolute;right:-7px;bottom:-7px;min-width:19px;height:19px;padding:0 4px;display:flex;align-items:center;justify-content:center;
  background:var(--tg-faint);color:#04121a;font-family:var(--font-digital);font-weight:700;font-size:11px;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.tg-skill .n{font-size:11.5px;color:var(--tg-dim)}
.tg-skill--on{border-color:rgb(var(--color-main)/.8);box-shadow:0 0 26px rgb(var(--color-main)/.25),inset 0 0 24px rgb(var(--color-main)/.06)}
.tg-skill--on .ic{border-color:rgb(var(--color-main)/.7);background:rgb(var(--color-main)/.10)}
.tg-skill--on .ic i{color:rgb(var(--color-main));filter:drop-shadow(0 0 11px rgb(var(--color-main)/.85))}
.tg-skill--on .n{color:rgb(var(--color-main))}
.tg-skill--on .ic .bdg{background:rgb(var(--color-main))}

/* ---------- 造型/卡牌格：默认 / hover / 选中 / 锁定 ---------- */
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}
.tg-card{position:relative;background:rgba(10,14,20,.85);border:1px solid var(--tg-line);overflow:hidden;cursor:pointer;transition:.22s;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}
.tg-card:hover{transform:translateY(-4px);border-color:rgb(var(--color-main)/.55);box-shadow:0 0 26px rgb(var(--color-main)/.22)}
.tg-card .pic{aspect-ratio:3/4;background:#000;overflow:hidden;position:relative}
.tg-card .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block}
.tg-card .pic::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px)}
.tg-card .nm{padding:9px 11px 3px;font-size:12.5px}
.tg-card .st{padding:0 11px 11px;font-size:11px;color:var(--tg-dim)}
.tg-card .rb{position:absolute;top:0;left:0;z-index:2;font-family:var(--font-digital);font-weight:700;font-size:11px;letter-spacing:.1em;
  padding:3px 14px 3px 10px;background:linear-gradient(100deg,rgb(var(--color-gold)),rgb(var(--color-gold)/.75));color:#241a02;
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.tg-card .cur{position:absolute;top:0;right:0;z-index:2;font-family:var(--font-en);font-size:10.5px;letter-spacing:.1em;
  padding:3px 9px 4px 11px;background:rgb(var(--color-ok)/.9);color:#04160f;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
/* 选中态：霓虹描边 + 四角括号 + 呼吸 */
.tg-card--on{border-color:rgb(var(--color-main)/.85);box-shadow:0 0 34px rgb(var(--color-main)/.35),inset 0 0 30px rgb(var(--color-main)/.07);
  animation:tg-breathe 2.6s ease-in-out infinite}
@keyframes tg-breathe{0%,100%{box-shadow:0 0 26px rgb(var(--color-main)/.28),inset 0 0 24px rgb(var(--color-main)/.05)}50%{box-shadow:0 0 40px rgb(var(--color-main)/.5),inset 0 0 34px rgb(var(--color-main)/.1)}}
.tg-card--on::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 top 0/16px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 top 0/2px 16px no-repeat,
    linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 bottom 0/16px 2px no-repeat,
    linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 bottom 0/2px 16px no-repeat}
/* 锁定态：去色 + 斜纹 + 锁标 */
.tg-card--locked{cursor:not-allowed}
.tg-card--locked .pic img{filter:grayscale(1) brightness(.30)}
.tg-card--locked .pic::before{content:'';position:absolute;inset:0;z-index:2;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.48) 0 8px,transparent 8px 16px)}
.tg-card .lk{position:absolute;top:8px;right:8px;z-index:3;font-family:var(--font-en);font-size:10.5px;letter-spacing:.1em;
  padding:3px 9px;background:rgba(0,0,0,.75);border:1px solid rgba(255,77,109,.55);color:rgb(var(--color-bad))}

/* ---------- AVG 对话框（赛博切角 + 主色描边辉光；打字机 + 弹跳箭头推进） ---------- */
.tg-avg{position:relative;display:flex;gap:13px;padding:18px 20px 16px;
  background:linear-gradient(165deg,rgba(14,20,28,.97),rgba(6,9,14,.98));
  border:1px solid rgb(var(--color-main) / .6);
  box-shadow:0 0 42px rgb(var(--color-main) / .28), inset 0 0 46px rgb(var(--color-main) / .05);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.tg-avg::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgb(var(--color-main)),rgb(var(--color-violet)),transparent);animation:tg-sweep 4.2s linear infinite}
.tg-avg .who{display:flex;align-items:center;gap:9px;font-size:12.5px}
.tg-avg .who .nm{font-family:var(--font-en-title);font-weight:800;letter-spacing:.1em;color:rgb(var(--color-main));text-shadow:0 0 12px rgb(var(--color-main) / .7)}
.tg-avg .tx{font-size:13.5px;line-height:1.85;margin-top:8px;min-height:48px}
.tg-avg .cur{display:inline-block;width:7px;height:14px;background:rgb(var(--color-main));vertical-align:-2px;margin-left:2px;animation:tg-blink .9s steps(1) infinite}
@keyframes tg-blink{50%{opacity:0}}
.tg-avg .ops{display:flex;gap:10px;align-items:center;margin-top:12px}
.tg-avg .ops .sp{margin-left:auto;display:flex;gap:12px;font-family:var(--font-en);font-size:11px;color:var(--tg-faint)}
.tg-avg .ops .sp b{cursor:pointer;font-weight:400}
.tg-avg .ops .sp b:hover{color:rgb(var(--color-main))}
/* 推进箭头：整段台词打完后弹跳提示，无任何文字说明 */
.tg-avg .adv{width:34px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgb(var(--color-main) / .12);color:rgb(var(--color-main));border:1px solid rgb(var(--color-main) / .5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);animation:tg-adv 1.1s ease-in-out infinite}
.tg-avg .adv i{font-size:18px}
@keyframes tg-adv{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.tg-avg .adv{animation:none}}

/* ---------- 灯箱 ---------- */
.tg-lb{position:fixed;inset:0;z-index:3000;background:rgba(2,4,7,.94);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:22px}
.tg-lb--on{display:flex}
.tg-lb .stage{position:relative;height:82vh;mix-blend-mode:screen}
.tg-lb .stage img{height:100%;width:auto;display:block}
.tg-lb .x{position:absolute;top:18px;right:18px;z-index:5;width:42px;height:42px;border:1px solid rgba(255,77,109,.6);
  background:rgba(255,77,109,.14);color:rgb(var(--color-bad));cursor:pointer;font-size:20px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tg-lb .x:hover{background:rgba(255,77,109,.32);color:#fff}
.tg-lb .sw{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:9px 11px;
  background:rgba(6,9,14,.86);border:1px solid var(--tg-line);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tg-lb .sw b{cursor:pointer;font-weight:400;font-family:var(--font-en);font-size:12px;padding:4px 11px;color:var(--tg-dim);border:1px solid transparent}
.tg-lb .sw b:hover{color:rgb(var(--color-main))}
.tg-lb .sw b.on{color:rgb(var(--color-main));border-color:rgb(var(--color-main)/.6);background:rgb(var(--color-main)/.12)}

/* ---------- 保存栏（含 未保存/保存中/已保存 三态） ---------- */
.tg-savebar{position:sticky;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 16px;margin-top:14px;
  background:linear-gradient(180deg,rgba(10,15,22,.96),rgba(5,7,11,.99));border:1px solid rgb(var(--color-main)/.35);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.tg-savebar .dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:rgb(var(--color-warn));box-shadow:0 0 10px rgb(var(--color-warn))}
.tg-savebar .msg{font-size:12.5px;color:var(--tg-dim)}
.tg-savebar .msg b{color:var(--tg-txt)}
.tg-savebar .ops{margin-left:auto;display:flex;gap:9px}
/* 状态 */
.tg-savebar--dirty .dot{background:rgb(var(--color-warn));box-shadow:0 0 10px rgb(var(--color-warn))}
.tg-savebar--saved .dot{background:rgb(var(--color-ok));box-shadow:0 0 10px rgb(var(--color-ok))}
.tg-savebar--saved .msg b{color:rgb(var(--color-ok))}
.tg-savebar--saving .dot{background:rgb(var(--color-main));box-shadow:0 0 10px rgb(var(--color-main))}

/* ---------- 立绘 / 造型选择：选中 vs 未选中（强区分） ---------- */
.tg-card--on{outline:1px solid rgb(var(--color-main) / .95)}
.tg-card--on .nm{color:#fff}
.tg-card--on .st{color:rgb(var(--color-main))}
.tg-card--on .sel-flag{display:flex}
.tg-card .sel-flag{display:none;position:absolute;left:8px;top:8px;z-index:4;align-items:center;gap:5px;
  padding:3px 9px;font-size:10.5px;letter-spacing:.1em;font-weight:700;color:#04121a;
  background:linear-gradient(180deg,rgb(var(--color-main)),rgb(var(--color-main) / .82));
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:0 0 14px rgb(var(--color-main) / .55)}
.tg-card .sel-flag i{font-size:12px}
/* 未选中：整体压暗 + 去饱和，悬停恢复 */
.mypose .tg-card:not(.tg-card--on),#outfits .tg-card:not(.tg-card--on):not(.tg-card--locked){
  opacity:.62;filter:saturate(.75)}
.mypose .tg-card:not(.tg-card--on):hover,#outfits .tg-card:not(.tg-card--on):not(.tg-card--locked):hover{
  opacity:1;filter:none}
/* 待保存按钮：脉冲提示可点击 */
.tg-btn--savedstate{animation:tgSavePulse 1.8s ease-in-out infinite}
@keyframes tgSavePulse{0%,100%{box-shadow:0 0 14px rgb(var(--color-main) / .35)}50%{box-shadow:0 0 30px rgb(var(--color-main) / .8)}}
/* 保存中：斜纹流动 */
.tg-savebar--saving .msg b{color:rgb(var(--color-main))}

/* ---------- 全站统一返回按钮（唯一外观，多处复用） ---------- */
.tg-back{position:relative;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 12px;margin:0 0 16px;
  background:linear-gradient(90deg,rgb(var(--color-main) / .14),transparent 72%);
  border:1px solid rgb(var(--color-main) / .45);color:#dbe2ee;text-decoration:none;
  font-family:var(--font-en);font-size:12px;letter-spacing:.16em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.tg-back i{font-size:15px;color:rgb(var(--color-main));transition:transform .2s}
.tg-back small{font-size:10px;letter-spacing:.1em;color:#8592a6;transition:color .2s}
.tg-back:hover{background:rgb(var(--color-main) / .2);border-color:rgb(var(--color-main) / .85);color:#fff;
  box-shadow:0 0 22px rgb(var(--color-main) / .3)}
.tg-back:hover i{transform:translateX(-3px)}
.tg-back:hover small{color:#cfd6e2}

/* ---------- 全站自定义指针：少女魔法棒（矢量，高分屏清晰） ---------- */
html,body{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 27 19 13' stroke='%23f9eaff' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M5 27 19 13' stroke='%23ff8fd4' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M22 2.5l2.2 5.6 5.9 1-4.5 4 1.2 5.9-4.8-3-4.8 3 1.2-5.9-4.5-4 5.9-1z' fill='%23ffd76a' stroke='%23ff6fc0' stroke-width='1.2'/%3E%3Ccircle cx='19' cy='13' r='1.9' fill='%23ffffff'/%3E%3C/svg%3E") 20 10,default}
a,button,select,summary,[role="button"],label[for],.tg-btn,.tf-sec,.tf-close,.tg-back,.tg-card,.tg-skill{
  cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 27 19 13' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M5 27 19 13' stroke='%23ff6fc0' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M22 1.5l2.5 6.2 6.6 1.1-5 4.5 1.3 6.6-5.4-3.4-5.4 3.4 1.3-6.6-5-4.5 6.6-1.1z' fill='%23fff3b0' stroke='%23ff3fa0' stroke-width='1.4'/%3E%3Ccircle cx='19' cy='13' r='2.2' fill='%23ffffff'/%3E%3Cpath d='M26 4l1 2M28.5 9l2 .6M7 8l-1.2 1.8' stroke='%23ff8fd4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 20 10,pointer}
input,textarea,[contenteditable="true"]{cursor:text}

/* ---------- 提示条 ---------- */
.tg-toast{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:12.5px;
  background:rgba(6,9,14,.96);border:1px solid rgb(var(--color-main)/.5);box-shadow:0 0 26px rgb(var(--color-main)/.2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.tg-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-family:var(--font-en);font-size:11px;letter-spacing:.08em;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.tg-badge--main{background:rgb(var(--color-main)/.15);color:rgb(var(--color-main))}
.tg-badge--ok{background:rgb(var(--color-ok)/.16);color:rgb(var(--color-ok))}
.tg-badge--warn{background:rgb(var(--color-warn)/.16);color:rgb(var(--color-warn))}
.tg-badge--gold{background:rgb(var(--color-gold)/.18);color:rgb(var(--color-gold))}
.tg-badge--dim{background:rgba(139,148,163,.14);color:var(--tg-dim)}

/* ---------- 入场 stagger ---------- */
.tg-rise{opacity:0;transform:translateY(12px);animation:tg-rise .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tg-rise{to{opacity:1;transform:none}}
.tg-rise:nth-child(2){animation-delay:.07s}.tg-rise:nth-child(3){animation-delay:.14s}
.tg-rise:nth-child(4){animation-delay:.21s}.tg-rise:nth-child(5){animation-delay:.28s}.tg-rise:nth-child(6){animation-delay:.35s}

@media(max-width:900px){.tg-deck{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}