:root{color-scheme:dark;--ink:#151a20;--gold:#d8bd86;--muted:#a4a8a9;--line:#88795b;--paper:#ece5d5;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--paper);background:#090d12}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;background:linear-gradient(110deg,#22272d,#1b2026);border:1px solid #645d4f;cursor:pointer;padding:12px 22px;transition:border-color .15s,background .15s}button:hover{border-color:var(--gold)}button:focus-visible{outline:2px solid #f4dfaa;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button span{float:right;margin-left:30px}.primary{background:linear-gradient(110deg,#dbc591,#b89a63);color:#181b20;border-color:#ebd6a3;font-weight:700}.text-button{border:0;background:none;padding:8px}.hidden{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-weight:400}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:3px}.muted{color:var(--muted);font-size:12px;line-height:1.8}#app{position:relative;width:100%;height:100dvh;min-height:280px;overflow:hidden;background:#151b21}.screen{position:absolute;inset:0}.home{background:radial-gradient(ellipse at 37% 46%,#424b50,#171e27 58%,#0b1019);display:flex;align-items:center}.home:before,.selection:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(120deg,transparent 0 160px,#d6b87e08 161px 162px,transparent 163px 320px)}.home-art{position:absolute;left:3%;bottom:0;width:58%;height:98%;overflow:hidden;mask-image:linear-gradient(to right,#000 65%,transparent)}.home-art img{height:115%;width:100%;object-fit:contain;object-position:center top;filter:drop-shadow(0 0 35px #cbb17924)}.home-menu{position:relative;margin-left:64%;width:27%;max-width:400px}.home h1{font-size:clamp(60px,10vw,130px);letter-spacing:20px;color:#f0e7d0;margin:0 0 12px}.subtitle{letter-spacing:5px;font-size:13px;margin-bottom:32px}.home button{display:block;width:100%;text-align:left;margin-top:12px}.build-note{color:#9ca6ac;font-size:10px;line-height:1.8;margin:24px 0 0}.edition{position:absolute;bottom:20px;left:30px;letter-spacing:4px;font-size:9px;color:#899297}.selection{background:radial-gradient(ellipse at 28% 40%,#444c52,#1c232c 55%,#10161f)}header{position:relative;display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 30px;border-bottom:1px solid #b69a6444;font-size:11px;color:#c3b999;letter-spacing:2px}header h2{font-size:25px;margin:0;letter-spacing:6px}.selection-body{height:calc(100% - 145px);display:grid;grid-template-columns:55% 45%}.portrait-stage{position:relative;overflow:hidden}.portrait-stage img{position:relative;width:100%;height:125%;object-fit:contain;object-position:center top;filter:drop-shadow(10px 15px 20px #05090d80)}.portrait-stage img.chibi{height:90%;object-position:center center}.portrait-mark{position:absolute;font-size:330px;opacity:.04;left:12%;top:0;font-family:serif}.character-info{align-self:center;padding:10px 14% 10px 5%;position:relative}.character-info h2{font-size:42px;letter-spacing:8px;margin-bottom:8px}.character-info>p:not(.eyebrow){font-size:12px;color:#bec6ca}.skill-box{border-top:1px solid #99875e77;border-bottom:1px solid #99875e44;padding:14px 0;margin:20px 0 12px}.skill-box small{font-size:10px;color:var(--gold)}.skill-box h3{font-size:22px;letter-spacing:3px;margin:6px 0}.skill-box p{font-size:12px;line-height:1.8;color:#bdc4c8;margin:0}.character-info .primary{width:100%}.roster{height:87px;display:grid;grid-template-columns:repeat(9,1fr);gap:6px;padding:8px 28px;background:#0c121ace;border-top:1px solid #8e805b55;position:relative}.roster button{padding:0;position:relative;overflow:hidden;font-size:11px;display:flex;align-items:flex-end;justify-content:center}.roster img{position:absolute;inset:-8px 0 0;height:130px;width:100%;object-fit:cover;object-position:50% 0}.roster b{position:relative;width:100%;background:#0b111cd9;padding:5px;font-weight:400}.roster .selected{border-color:#ecd29a;box-shadow:inset 0 0 15px #d4b77730}.roster small{position:absolute;top:10px;opacity:.5;font-size:9px}.battle{background:#222932}#field{position:absolute;inset:0 0 90px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.battle-hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:28px;height:65px;padding:12px 28px;background:linear-gradient(#0b111de8,#0b111d00);pointer-events:none}.battle-hud button{pointer-events:auto;padding:5px 15px;font-size:23px}.team-vital{width:180px}.team-vital small{font-size:10px;color:#c9c5b9}.team-vital strong{float:right;font-weight:400;font-size:12px}.meter{height:7px;background:#070b11aa;border:1px solid #8b795755;margin-top:6px}.meter i{display:block;height:100%;background:linear-gradient(90deg,#a24744,#dba681);width:100%;transition:width .12s}.experience{flex:1;display:flex;gap:18px;align-items:center;font-size:13px}.experience .meter{flex:1;max-width:320px;margin:0;height:5px}.xp i{background:var(--gold)}#clock{font-family:Georgia,serif;font-size:26px;letter-spacing:4px;margin-left:auto}.field-caption{position:absolute;right:28px;top:76px;color:#c6c5b070;font-size:10px;letter-spacing:2px}.party-bar{position:absolute;bottom:0;left:0;right:0;height:90px;background:linear-gradient(#1a2028,#10151b);border-top:1px solid #c4ab765e;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:10px 22px}.party-slot{position:relative;border:1px solid #8d7d5c88;background:linear-gradient(120deg,#30353b,#171e26);padding:9px 12px 8px 88px;overflow:hidden}.party-slot img{position:absolute;height:180px;width:90px;object-fit:cover;object-position:50% 0;left:0;top:-3px}.party-slot b{font-family:SimSun,serif;font-size:18px;font-weight:400;letter-spacing:3px}.party-slot small{float:right;font-size:10px;color:#c7bc9b}.party-slot .meter{height:5px;margin-top:9px}.party-slot .meter i{background:#a8b584}.party-slot.empty{padding:0;display:flex;align-items:center;justify-content:center;color:#9c8c6d;font-size:28px;background:#141b23aa}.party-slot.dead{opacity:.35}#joystick{position:absolute;left:max(32px,env(safe-area-inset-left));bottom:40px;width:116px;height:116px;border:1px solid #ccb7819c;border-radius:50%;background:radial-gradient(#b6bcc814,#d4c69c18);box-shadow:0 0 0 7px #0c142033;touch-action:none;display:grid;place-items:center}#joystick span{position:absolute;bottom:12px;font-size:9px;color:#c7c7bb80;pointer-events:none}#knob{display:block;width:47px;height:47px;border:1px solid #d3c59c88;border-radius:50%;background:#c3c5ca39;pointer-events:none}.control-hint{position:absolute;left:180px;bottom:19px;color:#c4c4b680;font-size:10px;pointer-events:none}.control-hint span{margin-left:12px;opacity:.65}.upgrade{background:radial-gradient(ellipse at 25% 40%,#303b46ed,#0b121cf7);backdrop-filter:blur(7px)}.upgrade-body{height:calc(100% - 58px);display:grid;grid-template-columns:68% 32%;gap:0;padding:26px 30px 30px}.upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-right:28px}.upgrade-card{padding:0;text-align:left;position:relative;overflow:hidden;background:linear-gradient(#4a515a33,#111821);border-color:#8e82685e;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}.upgrade-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,#0c111900 40%,#0c1119 80%);z-index:1}.upgrade-card img{position:absolute;top:0;left:0;width:100%;height:95%;object-fit:cover;object-position:50% 0;opacity:.85}.upgrade-card .card-copy{position:relative;z-index:2;padding:18px 14px;width:100%}.card-copy small{font-size:10px;color:var(--gold)}.card-copy h3{font-size:22px;letter-spacing:3px;margin:10px 0}.card-copy p{font-size:11px;color:#b8c0c8;line-height:1.8;margin:0}.upgrade-card.selected{border:2px solid #e6c98f;box-shadow:0 0 25px #c8a77320}.upgrade-card.selected:after{content: "\5BB8\67E5\20AC\5909\8151";position:absolute;top:12px;left:10px;background:#c8ad76;color:#111822;padding:5px 9px;font-size:10px;z-index:2}.upgrade-detail{border-left:1px solid #c6ac7155;padding:12px 0 0 26px;display:flex;flex-direction:column}.upgrade-detail h2{font-size:29px;letter-spacing:3px;margin-bottom:12px}.upgrade-detail>p:not(.eyebrow){line-height:1.9;font-size:12px;color:#c2c6ca}.upgrade-detail .primary{margin-top:auto;width:100%;margin-bottom:9px}.upgrade-detail>small{font-size:10px;color:#979d9f;text-align:center}.stat-box{background:#080e166b;border-top:1px solid #b5a16d55;border-bottom:1px solid #b5a16d33;margin:12px 0 18px;padding:15px 10px}.stat-box small{display:block;font-size:11px;color:#b8bcbf;margin-bottom:14px}.stat-values{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-family:Georgia,serif}.stat-values em{font-size:14px;color:#9e9e93;font-style:normal}.stat-values strong{color:#e1c78c;font-weight:400}.modal{position:absolute;inset:0;background:#060d17b8;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:10}.modal-panel{width:min(420px,85vw);background:linear-gradient(135deg,#2b333e,#121a24);border:1px solid #b79a66;padding:32px;text-align:center;box-shadow:0 20px 90px #0008}.modal-panel h2{font-size:33px;letter-spacing:5px}.modal-panel>p:not(.eyebrow){font-size:12px;line-height:1.9;white-space:pre-line;color:#bac3c8}.modal-panel button{display:block;width:100%;margin-top:10px}.portrait-warning{display:none;position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:10px;padding:5px 12px;background:#302a1d;z-index:20;pointer-events:none}
@media(max-height:500px){header{height:42px;padding:0 20px}header h2{font-size:19px}.home h1{font-size:65px}.home .subtitle{margin-bottom:18px}.home button{padding:9px 16px;margin-top:8px}.home .build-note{margin-top:14px;font-size:9px}.home-menu{width:30%;margin-left:63%}.selection-body{height:calc(100% - 108px)}.character-info{padding-right:12%}.character-info h2{font-size:29px;margin-bottom:5px}.character-info .eyebrow{margin-bottom:8px}.skill-box{margin:8px 0;padding:6px 0}.skill-box p{font-size:10px}.skill-box h3{font-size:17px}.character-info .primary{padding:8px}.character-info>p:not(.eyebrow){font-size:10px;margin-bottom:8px}.roster{height:66px;padding:5px 20px}.roster img{height:110px}.roster b{font-size:9px}.party-bar{height:70px;padding:7px 18px;gap:8px}.party-slot{padding:5px 7px 5px 65px}.party-slot img{width:65px;height:140px}.party-slot b{font-size:14px}.party-slot small{font-size:8px}.party-slot .meter{margin-top:6px}#field{bottom:70px}.battle-hud{height:46px;padding:7px 20px;gap:18px}.team-vital{width:140px}.battle-hud button{font-size:18px}#clock{font-size:21px}.field-caption{top:52px;font-size:8px}#joystick{width:96px;height:96px;bottom:24px}#knob{width:39px;height:39px}.control-hint{left:151px;bottom:6px}.upgrade-body{height:calc(100% - 42px);padding:16px 22px 20px;grid-template-columns:66% 34%}.upgrade-cards{gap:9px;padding-right:18px}.upgrade-detail{padding:0 0 0 18px}.upgrade-detail h2{font-size:23px;margin-bottom:5px}.upgrade-detail .eyebrow{font-size:9px;margin-bottom:8px}.upgrade-detail>p:not(.eyebrow){font-size:10px;margin-bottom:5px}.stat-box{margin:5px 0 8px;padding:9px}.stat-box small{margin-bottom:8px}.stat-values{font-size:17px}.upgrade-detail .primary{padding:9px}.card-copy h3{font-size:17px;letter-spacing:2px}.upgrade-card .card-copy{padding:12px 9px}.card-copy p{font-size:9px}.control-hint span{display:none}}
@media(orientation:portrait){.portrait-warning{display:block}.home-menu{margin-left:48%;width:46%}.home-art{left:-30%;width:120%;opacity:.5}.selection-body{grid-template-columns:40% 60%}.character-info{padding:20px 8px}.character-info h2{font-size:30px}.roster{grid-template-columns:repeat(9,65px);overflow-x:auto;padding:8px}.upgrade-body{grid-template-columns:1fr;overflow:auto;gap:20px}.upgrade-cards{height:300px;padding:0}.upgrade-detail{border:0;padding:0}.party-bar{gap:4px;padding:5px}.party-slot{padding:5px}.party-slot img{opacity:.15}.party-slot b{font-size:12px}.battle-hud{gap:10px;padding:10px}.team-vital{width:100px}.experience{gap:5px}.field-caption{display:none}}
@supports(padding:env(safe-area-inset-left)){header,.battle-hud{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}.party-bar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(7px,env(safe-area-inset-bottom))}}

/* Shared cover architecture, with the red/blue accent of each character's book cover. */
:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
button { -webkit-tap-highlight-color: transparent; }
.xp i { transition: none; }
.home {
  background: linear-gradient(90deg,#09101c15,#09101c77 55%,#09101cdd), url('assets/cover-cathedral.png') center/cover;
}
.home-art { display: none; }
.home:before, .selection:before { background: none; }
.selection {
  background: linear-gradient(90deg,#0a111b0a 10%,#0a111b66 48%,#0a111be8 78%),url('assets/cover-cathedral.png') center/cover;
}
.selection:before {
  background: radial-gradient(ellipse at 5% 100%,#812b3544,transparent 57%);
}
.selection[data-character='xie']:before {
  background: radial-gradient(ellipse at 5% 100%,#2a8fa344,transparent 57%);
}
.character-info { text-shadow: 0 1px 5px #0008; }
.portrait-stage img { filter: drop-shadow(0 12px 25px #030916aa); }
.party-slot .skill-status {
  display: block; position: absolute; bottom: 7px; left: 88px;
  color: #b6bcb5; font-size: 9px; letter-spacing: .5px;
}
.party-slot .meter { margin-top: 6px; }
header,.battle-hud {
  padding-left: max(24px,var(--safe-left));
  padding-right: max(24px,var(--safe-right));
}
.roster { padding-left: max(28px,var(--safe-left)); padding-right: max(28px,var(--safe-right)); }
.party-bar {
  height: calc(90px + var(--safe-bottom));
  padding-left: max(18px,var(--safe-left)); padding-right: max(18px,var(--safe-right));
  padding-bottom: calc(10px + var(--safe-bottom));
}
#field { bottom: calc(90px + var(--safe-bottom)); }
#joystick { left: max(32px,var(--safe-left)); }
.upgrade-body { padding-left: max(30px,var(--safe-left)); padding-right: max(30px,var(--safe-right)); }
@media(max-height:500px) {
  .party-bar { height: calc(76px + var(--safe-bottom)); padding-bottom: calc(7px + var(--safe-bottom)); }
  #field { bottom: calc(76px + var(--safe-bottom)); }
  .party-slot .skill-status { left: 65px; bottom: 5px; font-size: 8px; letter-spacing: 0; }
  .party-slot small { float: none; display: block; margin-top: 2px; }
  .party-slot .meter { margin-top: 3px; }
  .character-info { padding-right: max(18px,var(--safe-right)); }
  .character-info>p:not(.eyebrow) { font-size: 11px; }
  .character-info .eyebrow { display: none; }
  .character-info h2 { font-size: 28px; }
  .skill-box p { font-size: 11px; line-height: 1.65; }
  .skill-box { background: #0b122144; padding: 6px 8px; margin: 6px 0; }
  .skill-box h3 { margin: 4px 0; }
  .roster { height: calc(66px + var(--safe-bottom)); padding-bottom: calc(5px + var(--safe-bottom)); }
  .selection-body { height: calc(100% - 108px - var(--safe-bottom)); }
  .upgrade-body { padding-left: max(22px,var(--safe-left)); padding-right: max(22px,var(--safe-right)); }
  .home-menu { margin-left: 60%; width: 32%; }
  .control-hint { left: max(151px,calc(var(--safe-left) + 116px)); }
}

/* 鈹€鈹€ 绗?1 鎵?UI 瑙傛劅锛氶噾鑹插眰娆°€佸崱鐗囬珮浜€佺珛缁樻帓鐗堬紙鍙姞瑁呴グ锛屼笉鍔ㄥ竷灞€锛夆攢鈹€ */
:root { --gold-2:#f1dcab; --gold-dim:#7d6a45; --panel:#10161deb; }

/* 涓昏彍鍗曪細鏍囬涓嬬殑閲戣壊鐭昂 + 鐗堟湰琛岄棿璺?*/
.home h1 { position: relative; }
.home h1::after {
  content: ""; position: absolute; left: 4px; bottom: -6px;
  width: 46%; height: 1px; background: linear-gradient(90deg, var(--gold), transparent);
}
.home .eyebrow { letter-spacing: 4px; }
.home .primary {
  box-shadow: 0 10px 26px #0008, inset 0 1px 0 #fff6;
  letter-spacing: 2px;
}

/* 閫変汉锛氱珛缁樿垶鍙板姞閲戣壊绔栫嚎涓庤鏍囷紝鍙充晶淇℃伅鍧楀姞鍗婇€忔槑搴曟澘 */
.portrait-stage::before {
  content: ""; position: absolute; right: 6%; top: 12%; bottom: 12%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--gold-dim), transparent);
}
.character-info { background: linear-gradient(90deg, #0b122100, #0b1221aa 22%); border-left: 1px solid #d8bd8622; }
.skill-box {
  position: relative; background: #0b122177; border: 1px solid #d8bd8624;
}
/* 鐭睆锛堟墜鏈烘í灞忥級淇濇寔鍘熸湁绱у噾闂磋窛锛岄伩鍏嶆妸纭鎸夐挳鎸ゅ嚭瀹夊叏鍖?*/
@media (min-height: 501px) {
  .character-info { padding-left: 22px; }
  .skill-box { padding: 12px 14px; margin: 14px 0; }
}
.skill-box::after {
  content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px;
  border-left: 1px solid var(--gold); border-top: 1px solid var(--gold);
}
.skill-box small { color: var(--gold); letter-spacing: 2px; }
.character-info .primary { box-shadow: 0 10px 24px #0008; letter-spacing: 2px; }

/* 瑙掕壊鍗★細閫変腑鎬侀噾鑹叉弿杈?+ 搴曢儴楂樹寒 */
.roster button { position: relative; border: 1px solid #4d4a3f; background: linear-gradient(180deg,#151b22,#0d1218); }
.roster button.selected { border-color: var(--gold-2); box-shadow: 0 0 0 1px #f1dcab44, 0 10px 24px #0009; }
.roster button.selected::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* 鍗囩骇鍗★細鍙屽眰杈规銆侀€変腑閲戣壊渚ф潯涓庡唴鍙戝厜锛堢敤 box-shadow / border锛岄伩寮€鍘熸湁鐨?::before 娓愬彉涓庘€滃凡閫変腑鈥濊鏍囷級 */
.upgrade-card { position: relative; background: linear-gradient(165deg,#1a2128f2,#0e1318f5); border: 1px solid #5d5544; box-shadow: inset 0 0 0 1px #d8bd8614; transition: transform .18s, border-color .18s, box-shadow .18s; }
.upgrade-card:hover { transform: translateY(-3px); border-color: #bda36f; }
.upgrade-card.selected {
  border-color: var(--gold-2);
  border-left-width: 3px;
  box-shadow: inset 0 0 0 1px #d8bd8614, 0 0 0 1px #f1dcab55, 0 16px 36px #000a, inset 0 0 46px #d8bd8614;
}
.upgrade-card .card-copy h3 { letter-spacing: 2px; }
.stat-box { background: #0b122177; border: 1px solid #d8bd8624; }
.stat-values strong { color: var(--gold-2); }
.upgrade-detail .primary { box-shadow: 0 10px 24px #0008; letter-spacing: 2px; }

/* 鎴樻枟锛氫富鎺у崱鐗囬噾鑹叉弿杈癸紝琛€鏉℃洿閱掔洰 */
.party-slot { border: 1px solid #4c4a40; background: linear-gradient(180deg,#131a21e0,#0b1016e8); }
.party-slot:first-child { border-color: #b99f6c; box-shadow: inset 0 0 0 1px #d8bd8622; }
.party-slot.dead { filter: grayscale(.75); opacity: .6; }
.battle-hud { background: linear-gradient(180deg,#070b10d9,#070b1000); }
.field-caption { letter-spacing: 3px; }

/* 缁撶畻/鏆傚仠寮瑰眰锛氶潰鏉块噾鑹茶竟涓庤鏍?*/
.modal-panel { position: relative; border: 1px solid #6d6047; box-shadow: 0 24px 60px #000b; }
.modal-panel::before, .modal-panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.modal-panel::before { left: -1px; top: -1px; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.modal-panel::after { right: -1px; bottom: -1px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

/* 鈹€鈹€ 绗?1 鎵?UI 瑙傛劅 2锛氱珛缁樿竟缂樸€佸鍚嶆帓鐗堛€佹垬鏂楀崱鐗囦笌浠〃 鈹€鈹€ */
/* 閫変汉锛氱珛缁樺彸缂樻煍鍖栵紝閬垮厤纭垏绾匡紱鑸炲彴鍔犱竴鏉￠噾鑹插湴骞崇嚎 */
.portrait-stage img {
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
}
.portrait-stage::after {
  content: ""; position: absolute; left: 8%; bottom: 8%; width: 34%; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent); pointer-events: none;
}
/* 濮撳悕涓庡畾浣嶏細鎷夊紑瀛楄窛锛屽畾浣嶇敤閲戣壊锛屾妧鑳藉悕缁欎竴涓爣绛惧簳 */
.character-info h2 { letter-spacing: 6px; margin-bottom: 6px; }
#characterRole { color: var(--gold); letter-spacing: 3px; font-size: 12px; margin-bottom: 16px; }
.skill-box small {
  display: inline-block; padding: 2px 9px; margin-bottom: 8px;
  background: #d8bd8622; border: 1px solid #d8bd8644; letter-spacing: 3px;
}
.skill-box h3 { letter-spacing: 3px; }
/* 瑙掕壊鍗★細鍚嶅瓧涓庡畾浣嶅眰娆℃媺寮€锛岄€変腑鍗″姞椤堕儴閲戠嚎 */
.roster b { letter-spacing: 1px; }
.roster button.selected { background: linear-gradient(180deg,#1d242c,#10151b); }
.roster button.selected::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
/* 鎴樻枟锛氳鏉℃寜姣斾緥鎹㈣壊锛圝S 鍐欏叆 --hp-color锛夛紝缁忛獙鏉℃洿鍏嬪埗 */
.party-slot .meter { height: 4px; background: #0a0f14; border: 1px solid #d8bd8622; }
.party-slot .meter i { background: var(--hp-color, linear-gradient(90deg,#d8bd86,#f1dcab)); transition: width .12s linear; }
.party-slot b { letter-spacing: 2px; }
.party-slot small { color: #ccd2cb; }
.battle-hud .meter.xp i { background: linear-gradient(90deg,#8fa6b8,#cfdbe4); }
.battle-hud .meter { height: 5px; }
#hpFill { background: var(--hp-color, linear-gradient(90deg,#d8bd86,#f1dcab)); }

/* 鐭睆锛堟墜鏈烘í灞忥級鏀剁揣锛氫繚璇佺‘璁ゆ寜閽笉鍘嬪埌瑙掕壊鏍?*/
@media (max-height: 500px) {
  .character-info h2 { letter-spacing: 3px; margin-bottom: 3px; }
  #characterRole { margin-bottom: 6px; font-size: 10px; letter-spacing: 2px; }
  .skill-box small { margin-bottom: 4px; padding: 1px 7px; letter-spacing: 2px; }
  .portrait-stage::after { display: none; }
}