/* ==== style.css ==== */
:root{color-scheme:dark;--bg:#111b20;--panel:#1a292f;--panel2:#22343a;--line:#3b4d4f;--muted:#9cafab;--text:#eef3e9;--accent:#d7ed82;--orange:#f0a965;--danger:#ed7463;font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{background:radial-gradient(ellipse at 82% 3%,#2f4645 0,transparent 32%),#111b20}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}#app{min-height:100dvh}.loading{padding:3rem;color:var(--accent)}.shell{max-width:1500px;margin:auto;padding:24px 5vw 48px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid #ffffff21}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--accent);color:var(--accent);font-weight:900;font-size:24px;transform:rotate(45deg)}.brand-mark span{transform:rotate(-45deg)}.brand-name{font-weight:800;letter-spacing:.18em;font-size:17px}.brand-sub,.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:700}.top-meta{font-size:12px;color:var(--muted);letter-spacing:.1em}.top-meta strong{color:var(--text);font-size:14px}.home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;min-height:530px}.hero{position:relative;overflow:hidden}.hero h1{font-size:clamp(44px,6vw,80px);line-height:1.05;letter-spacing:.04em;margin:22px 0}.hero h1 span{color:var(--accent)}.hero-copy{color:#b5c5be;line-height:1.9;max-width:490px;font-size:15px}.hero-art{height:520px;position:relative;overflow:hidden;background:linear-gradient(135deg,#263c3b,#152422);border:1px solid #59726a55;clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#122321b5,transparent 60%),repeating-linear-gradient(90deg,transparent 0 58px,#d7ed820c 59px 60px),repeating-linear-gradient(0deg,transparent 0 58px,#d7ed820c 59px 60px)}.hero-art img{width:100%;height:100%;object-fit:cover;opacity:.74}.hero-art .art-copy{position:absolute;left:28px;bottom:28px}.art-copy strong{font-size:20px;letter-spacing:.14em}.art-copy small{display:block;color:var(--accent);letter-spacing:.15em;margin-top:8px}.hero-actions,.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{border:1px solid #6d7f73;background:transparent;padding:13px 22px;letter-spacing:.08em;font-size:13px;font-weight:700;transition:.2s}.btn:hover:not(:disabled){border-color:var(--accent);background:#d7ed821a}.btn.primary{background:var(--accent);color:#1a281b;border-color:var(--accent)}.btn.primary:hover:not(:disabled){background:#e8f5ac}.btn.small{padding:9px 13px;font-size:12px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3a4c46;border:1px solid #3a4c46}.stat{background:#1b2a2c;padding:20px}.stat-label{color:var(--muted);font-size:11px;letter-spacing:.12em}.stat-value{font-size:19px;font-weight:800;margin-top:7px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:40px 0 22px}.section-head h2{font-size:28px;margin:8px 0 0;letter-spacing:.08em}.section-head p{color:var(--muted);font-size:13px;line-height:1.6}.stage-grid,.roster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:linear-gradient(145deg,#263a3a,#1a292d);border:1px solid #50645a;padding:22px;position:relative;min-width:0}.card:hover{border-color:#b4ca85}.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.tag{font-size:10px;letter-spacing:.14em;color:var(--accent);border:1px solid #aabd7655;padding:5px 7px}.card h3{margin:23px 0 9px;font-size:21px}.card p{color:var(--muted);font-size:13px;line-height:1.7;min-height:44px}.card .btn{margin-top:12px}.locked{opacity:.55}.back{background:none;border:0;color:var(--muted);padding:0;font-size:12px}.back:hover{color:var(--accent)}.guide{max-width:850px}.guide h3{margin:28px 0 8px;color:var(--accent)}.guide p,.guide li{color:#b8c8bf;line-height:1.85;font-size:14px}.roster-grid .card h3{margin:8px 0}.unit-symbol{font-size:30px;color:var(--accent)}.unit-meta{color:#9fafaa;font-size:12px}.battle-shell{min-height:100dvh;padding:14px;display:flex;flex-direction:column;gap:10px;background:#111b1c}.battle-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1b2a2c;border:1px solid #41534a;padding:10px 14px}.battle-title{font-weight:800;letter-spacing:.1em}.battle-readouts{display:flex;gap:20px;color:#bdcac1;font-size:12px}.battle-readouts strong{color:var(--accent);font-size:18px;margin-left:5px}.battle-actions{display:flex;gap:6px}.battle-actions .btn{padding:8px 10px;font-size:11px}.battle-main{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:10px;flex:1;min-height:0}.board-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;background:radial-gradient(circle at center,#30433b,#1b2a29);border:1px solid #41534a;padding:18px}.board{display:grid;position:relative;gap:3px;max-width:100%;touch-action:manipulation}.tile{position:relative;border:1px solid #627762;background:#3d5242;aspect-ratio:1.12;min-width:0;min-height:0;padding:0;display:grid;place-items:center;overflow:visible}.tile.path{background:#6a6651;border-color:#88836a}.tile.blocked{background:#283a35;border-color:#314a40}.tile.goal{background:#3d6864;border-color:#89c5ad}.tile.spawn{background:#735043;border-color:#c48972}.tile.selected{outline:3px solid var(--accent);z-index:3}.tile.valid{box-shadow:inset 0 0 0 2px #d7ed8280}.tile-label{position:absolute;top:3px;left:4px;font-size:9px;opacity:.55}.sprite{position:relative;z-index:2;display:grid;place-items:center;width:60%;height:70%;border-radius:10px 10px 6px 6px;background:#d2eaaa;color:#203326;font-size:clamp(12px,2vw,22px);font-weight:900;box-shadow:0 4px 0 #253b2f}.sprite.enemy{background:#e4a07e;color:#40261f;border-radius:50%;box-shadow:0 3px 0 #664033}.hpbar{position:absolute;bottom:3px;left:12%;right:12%;height:3px;background:#283b31;z-index:4}.hpbar i{display:block;height:100%;background:#d9ef8a}.battle-side{display:flex;flex-direction:column;gap:10px}.panel{background:#1b2a2c;border:1px solid #41534a;padding:14px}.panel h3{font-size:11px;letter-spacing:.16em;color:var(--accent);margin:0 0 12px}.hint{font-size:12px;color:#afc0b5;line-height:1.65}.direction-grid{display:flex;gap:5px;margin:10px 0}.direction-grid button{flex:1;padding:6px;background:#263b37;border:1px solid #53685b}.direction-grid button.active{color:#1c2a1d;background:var(--accent);border-color:var(--accent)}.hand{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}.unit-card{flex:1;min-width:105px;text-align:left;padding:9px 10px;background:#263936;border:1px solid #4c6254;position:relative}.unit-card.active{border-color:var(--accent);background:#354d3d}.unit-card strong{display:block;font-size:13px;margin:5px 0}.unit-card small{font-size:10px;color:#a7bbb0}.cost{color:var(--accent);font-weight:800;font-size:17px}.overlay{position:fixed;inset:0;background:#07100ee8;display:grid;place-items:center;z-index:10;padding:20px}.modal{max-width:440px;width:100%;background:#203331;border:1px solid #657b68;padding:30px}.modal h2{font-size:30px;margin:10px 0}.modal p{font-size:14px;color:#b7c8bd;line-height:1.7}.modal .eyebrow{margin-bottom:8px}#toast{position:fixed;z-index:30;left:50%;bottom:30px;transform:translate(-50%,20px);background:#d7ed82;color:#172319;padding:10px 17px;font-size:13px;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){.shell{padding:18px 18px 35px}.top-meta{display:none}.home-grid{grid-template-columns:1fr;gap:22px;min-height:0;padding:38px 0}.hero h1{font-size:50px;margin:16px 0}.hero-art{height:230px;order:-1}.hero-art .art-copy{left:18px;bottom:18px}.stage-grid,.roster-grid{grid-template-columns:1fr}.section-head{margin-top:30px}.section-head p{display:none}.stats-row .stat{padding:13px}.battle-shell{padding:7px;gap:7px}.battle-top{padding:8px;flex-wrap:wrap}.battle-readouts{gap:10px}.battle-readouts strong{font-size:15px}.battle-main{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) auto}.board-wrap{padding:10px}.battle-side{flex-direction:row}.battle-side .panel{flex:1;padding:9px}.battle-side .panel h3{margin-bottom:5px}.battle-side .hint{font-size:11px}.hand .unit-card{min-width:92px}.tile-label{font-size:8px}.sprite{font-size:14px}.battle-title{font-size:12px}}@media(max-width:390px){.battle-actions .btn{padding:6px}.battle-readouts{gap:7px}.battle-top{gap:5px}.battle-side .panel{padding:7px}.hero h1{font-size:42px}}
:root{--bg:#111e29;--panel:#1c2b36;--panel2:#243844;--line:#455665;--muted:#aab8bc;--text:#f3ece0;--accent:#eccd8c;--orange:#efb276;--danger:#dc7e74}body{background:radial-gradient(ellipse at 82% 3%,#355064 0,transparent 32%),#111e29}.hero h1,.brand-name,.section-head h2{font-family:STSong,SimSun,serif}.hero-art{background:linear-gradient(135deg,#293f4e,#151f28);border-color:#b7aa8644}.hero-art:before{background:linear-gradient(0deg,#121c29c9,transparent 60%),repeating-linear-gradient(90deg,transparent 0 58px,#eccd8c0c 59px 60px),repeating-linear-gradient(0deg,transparent 0 58px,#eccd8c0c 59px 60px)}.card{background:linear-gradient(145deg,#293d49,#1b2b35);border-color:#586d72}.card:hover{border-color:#d6bb83}.stat{background:#1b2b35}.stats-row{background:#445761;border-color:#445761}.battle-shell{background:#111e29}.battle-top,.panel{background:#1b2c37;border-color:#455d65}.board-wrap{background:radial-gradient(circle at center,#354d57,#1a2b35);border-color:#455d65}.tile{background:#465c63;border-color:#6f8584}.tile.path{background:#746e5c;border-color:#a29b7f}.tile.blocked{background:#263e48;border-color:#40565b}.tile.goal{background:#416c77;border-color:#91c1bd}.tile.spawn{background:#75554a;border-color:#bd8e72}.sprite{background:#ecd5a4;color:#302d24;box-shadow:0 4px 0 #64583f}.sprite.enemy{background:#bc8e85;color:#392726;box-shadow:0 3px 0 #67433f}.unit-card{background:#273f49;border-color:#526b6b}.unit-card.active{border-color:var(--accent);background:#504b3d}.direction-grid button{background:#293e46;border-color:#536b70}.btn.primary,.direction-grid button.active{color:#29291e}.tile.valid{box-shadow:inset 0 0 0 2px #eccd8c90}.hero-art img{object-position:center 20%}
.sprite .facing{position:absolute;right:-4px;top:-5px;background:#263b3f;color:#f1d797;border:1px solid #d8c895;border-radius:50%;width:17px;height:17px;line-height:15px;font-size:11px;box-shadow:0 2px 4px #10191a80}.btn.primary:hover:not(:disabled){background:#f6e3b8}.tag{border-color:#d2b77e80}.unit-card small{color:#b5c6c7}.brand-mark{border-color:#eccd8c}
/* 可爱的古风星灯：纸色、月蓝与杏桃色共同构成游戏的视觉语言。 */
:root{color-scheme:light;--bg:#fbf4e8;--panel:#fffaf0;--panel2:#f6ecde;--line:#d9c8a9;--muted:#7e8179;--text:#443c3a;--accent:#c77359;--orange:#efb46f;--danger:#c96968}html,body{background:#fbf4e8;color:var(--text)}body{background:radial-gradient(circle at 85% 5%,#d6e9e9 0,transparent 34%),radial-gradient(circle at 3% 60%,#f9dcca 0,transparent 32%),#fbf4e8}.topbar{border-color:#d8c7ad}.brand-mark{background:#fff9ed;border:2px solid #d78f70;color:#c77359;border-radius:13px;box-shadow:0 3px 0 #e7cbb3}.brand-name{color:#704e45}.brand-sub,.eyebrow{color:#b66b53}.top-meta{color:#877e70}.top-meta strong{color:#744e42}.hero h1{color:#59483f}.hero h1 span{color:#c4735b}.hero-copy,.section-head p{color:#7e746d}.hero-art{border:5px solid #fff6e8;box-shadow:0 12px 30px #b4896b30;border-radius:30px;background:linear-gradient(145deg,#b8d6dc,#eed2b7);clip-path:none}.hero-art:before{background:linear-gradient(0deg,#55483e85,transparent 55%);z-index:1}.hero-art .art-copy{z-index:2;color:#fff9ed}.art-copy small{color:#ffeab9}.btn{border:1px solid #cda989;background:#fffaf2;color:#805f4e;border-radius:12px;box-shadow:0 3px 0 #e2cbb7}.btn:hover:not(:disabled){background:#fff2df;border-color:#d49775;transform:translateY(-1px)}.btn.primary{background:#d47f62;border-color:#d47f62;color:#fffaf2;box-shadow:0 3px 0 #ae644f}.btn.primary:hover:not(:disabled){background:#dc8e71;color:#fff}.stats-row{background:transparent;border:0;gap:12px}.stat{background:#fffaf2;border:1px solid #ead9c3;border-radius:17px;box-shadow:0 5px 14px #ba98731a}.stat-label{color:#99897b}.stat-value{color:#805d4c}.stat-value small{font-size:12px}.back{color:#a0705d}.back:hover{color:#c46c50}.card{background:#fffaf2;border:1px solid #ead6bf;border-radius:20px;box-shadow:0 7px 20px #b594781c}.card:hover{border-color:#dea985}.card h3{color:#60483f}.card p{color:#8a8074}.tag{border:1px solid #e3c6aa;background:#fbefdf;color:#b97860;border-radius:8px}.unit-meta{color:#a08b7b}.unit-symbol{color:#d58c6e}.guide p,.guide li{color:#786e63}.guide h3{color:#bb765a}.battle-shell{background:radial-gradient(circle at 60% 10%,#e4f2ee,#f9ecdf 70%);color:#56493f}.battle-top,.panel{background:#fffaf2;border:1px solid #e8d1b8;border-radius:15px;box-shadow:0 4px 12px #9d78531a}.battle-title{color:#815848}.battle-readouts{color:#8d7b6a}.battle-readouts strong{color:#c27557}.battle-actions .btn{box-shadow:none}.board-wrap{border:5px solid #fff8ea;border-radius:22px;background:radial-gradient(circle at center,#d7e8d4,#afcfc9);box-shadow:0 6px 20px #76999030}.board{gap:5px}.tile{border:2px solid #b9d1b3;border-radius:13px;background:#dcebd3;box-shadow:inset 0 -4px 0 #bcd5b8;overflow:visible}.tile.path{background:#eddbbc;border-color:#f6e9d2;box-shadow:inset 0 -4px 0 #ddc7a2}.tile.blocked{background:#a9c9bd;border-color:#c0d6c4}.tile.goal{background:#b4ddd8;border-color:#edf8e2;box-shadow:inset 0 -4px 0 #84bdb6}.tile.spawn{background:#edc6b3;border-color:#f7ddc9;box-shadow:inset 0 -4px 0 #d9a897}.tile.selected{outline:3px solid #ce795a}.tile.valid{box-shadow:inset 0 0 0 3px #dc8e60,0 0 9px #fff4b2}.tile-label{color:#8f7968;font-weight:bold}.sprite{border-radius:13px;background:#fce3ba;color:#835745;box-shadow:0 3px 0 #d3ad86}.sprite.enemy{background:#d4bfd3;color:#68536a;box-shadow:0 3px 0 #af95b3}.sprite .facing{background:#fff7e9;color:#ad6d52;border-color:#dfbca1}.hpbar{background:#c29a87;border-radius:5px;overflow:hidden}.hpbar i{background:#80b88d}.panel h3{color:#bc785d}.hint{color:#907d6c}.direction-grid button{background:#f8ead9;border:1px solid #e2cbb6;color:#886b5c;border-radius:8px}.direction-grid button.active{background:#d6896b;color:#fff;border-color:#d6896b}.unit-card{background:#fff9ed;border:1px solid #e4cdb2;border-radius:13px;box-shadow:0 3px 0 #ddc5aa;color:#72564a}.unit-card.active{border-color:#d17e5d;background:#fff0db}.unit-card small{color:#a18c79}.cost{color:#c67557}.overlay{background:#544d4b99;backdrop-filter:blur(3px)}.modal{background:#fff9ee;border:3px solid #e5c3a4;border-radius:25px;box-shadow:0 14px 40px #684a3e40}.modal p{color:#867667}.modal h2{color:#775344}#toast{background:#785e50;color:#fffaf0;border-radius:12px;box-shadow:0 5px 20px #533e3230}.battle-shell .btn{color:#8b6250}.battle-shell .btn.primary{color:#fff}.hero h1,.brand-name,.section-head h2{font-family:"Microsoft YaHei",system-ui,sans-serif;font-weight:900}.tile:focus-visible{outline:3px solid #c77359}
.chibi{display:block;width:100%;height:100%;background-image:url('assets/chibi-sheet.webp');background-size:300% 200%;background-repeat:no-repeat}.chibi-zhenyi{background-position:0% 0%}.chibi-maid{background-position:50% 0%}.chibi-grandfather{background-position:100% 0%}.chibi-mother{background-position:0% 100%}.chibi-fog{background-position:100% 100%}.portrait{display:block;width:96px;height:96px;border-radius:20px;background:#e9f2e5;position:relative;overflow:hidden}.portrait>.chibi{position:absolute;inset:0;z-index:2}.portrait>span:last-child{position:absolute;inset:0;display:grid;place-items:center;color:#cf9777;font-size:34px}.hero-character{position:absolute;inset:0 7% 0 10%;z-index:2}.hero-character .chibi{width:100%;height:100%}.hero-stars{position:absolute;top:14%;left:10%;right:10%;text-align:center;font-size:28px;letter-spacing:10px;color:#fff7d3;z-index:2}.hero-art .art-copy{z-index:3}.hand-avatar{float:right;display:block;width:48px;height:52px;border-radius:11px;background:#edf2df;overflow:hidden}.sprite>.chibi{position:absolute;inset:0;z-index:1}.sprite>.facing{z-index:2}.sprite.enemy>.chibi{position:absolute;inset:0}.sprite.enemy{overflow:hidden}.sprite.enemy sup{position:absolute;right:0;top:0;z-index:3;background:#fff6e8;border-radius:50%;font-size:10px;color:#9c6057}.portrait>.chibi+span{z-index:0}@media(max-width:760px){.hand-avatar{width:34px;height:40px}.hero-character{inset:0 18%}.hero-stars{font-size:18px}.portrait{width:82px;height:82px}}
/* 墨夜观星：深色战术面板与 Q 版角色的统一视觉。 */
:root{color-scheme:dark;--bg:#111d29;--panel:#1b2a35;--panel2:#223643;--line:#455966;--muted:#a6b5ba;--text:#f4f0e7;--accent:#efc786;--orange:#e9a576;--danger:#df8079}html,body{background:#111d29;color:var(--text)}body{background:radial-gradient(ellipse at 84% 0%,#34525f 0,transparent 34%),radial-gradient(ellipse at 0% 100%,#283c42 0,transparent 35%),#111d29}.topbar{border-color:#738c8b44}.brand-mark{background:#243b40;border-color:#e4bf83;color:#f2cb88;border-radius:8px;box-shadow:0 3px 0 #0b151b}.brand-name{color:#f5ecdc}.brand-sub,.eyebrow{color:#efc786}.top-meta{color:#9eafb0}.top-meta strong{color:#f6f0e6}.hero h1{color:#f8f1e5}.hero h1 span{color:#f1c988}.hero-copy,.section-head p{color:#bac6c5}.hero-art{border:1px solid #77939480;box-shadow:0 20px 55px #0006;border-radius:12px;background:radial-gradient(circle at 65% 35%,#d2d6aa 0,transparent 30%),linear-gradient(145deg,#496c77,#182d3a)}.hero-art:before{background:linear-gradient(0deg,#15232bdf,transparent 55%)}.hero-art .art-copy{color:#fff4de}.art-copy small{color:#f2c880}.btn{border:1px solid #78918f;background:#243a43;color:#e9ece3;border-radius:6px;box-shadow:none}.btn:hover:not(:disabled){background:#35515a;border-color:#f0c987;transform:translateY(-1px)}.btn.primary{background:#efc786;border-color:#efc786;color:#23313a;box-shadow:none}.btn.primary:hover:not(:disabled){background:#f7dba8;color:#23313a}.stats-row{gap:8px}.stat{background:#1c3039;border:1px solid #435b61;border-radius:8px;box-shadow:none}.stat-label{color:#a2b4b3}.stat-value{color:#f4eddd}.back{color:#b4c6c2}.back:hover{color:#f2c985}.card{background:linear-gradient(140deg,#293f48,#1b2d38);border:1px solid #4b646a;border-radius:10px;box-shadow:0 10px 24px #07131c36}.card:hover{border-color:#d9b781}.card h3{color:#f7efe1}.card p{color:#b7c6c4}.tag{border:1px solid #bca87b70;background:#c7ad7020;color:#ebc784;border-radius:4px}.unit-meta{color:#a8bcba}.unit-symbol{color:#f2c885}.guide p,.guide li{color:#c0cbc8}.guide h3{color:#e8c181}.battle-shell{background:radial-gradient(circle at 55% 25%,#324d55,#13232d 70%);color:#f5f0e8}.battle-top,.panel{background:#1c3039;border:1px solid #4a6267;border-radius:8px;box-shadow:0 4px 12px #09151a65}.battle-title{color:#f6ecdb}.battle-readouts{color:#b8c7c3}.battle-readouts strong{color:#f1c982}.battle-actions .btn{color:#e6ece5}.board-wrap{border:1px solid #688387;border-radius:10px;background:radial-gradient(circle at center,#4a6865,#243e45);box-shadow:inset 0 0 45px #0e1b21aa}.board{gap:4px}.tile{border:1px solid #749891;border-radius:7px;background:#5c8174;box-shadow:inset 0 -4px 0 #49685f;overflow:visible}.tile.path{background:#928a70;border-color:#bcb398;box-shadow:inset 0 -4px 0 #746e5b}.tile.blocked{background:#385753;border-color:#4d6d65}.tile.goal{background:#559e9a;border-color:#9ed6c7;box-shadow:inset 0 -4px 0 #3b7a78}.tile.spawn{background:#a77564;border-color:#d6a390;box-shadow:inset 0 -4px 0 #80584d}.tile.selected{outline:3px solid #f3ca85}.tile.valid{box-shadow:inset 0 0 0 2px #f8df9c,0 0 10px #f8df9c99}.tile-label{color:#fff7e9}.sprite{border-radius:9px;background:#c7d9c5;color:#4b5551;box-shadow:0 3px 0 #405d52}.sprite.enemy{background:#b89bab;color:#4c394d;box-shadow:0 3px 0 #795f75}.sprite .facing{background:#273c42;color:#f7d79f;border-color:#d6b67e}.hpbar{background:#4c5050}.hpbar i{background:#d0edaa}.panel h3{color:#efc786}.hint{color:#b6c8c3}.direction-grid button{background:#2b454c;border:1px solid #627d7c;color:#ecf0e7;border-radius:5px}.direction-grid button.active{background:#efc786;color:#23313a;border-color:#efc786}.unit-card{background:#263d46;border:1px solid #587274;border-radius:7px;box-shadow:none;color:#f1efe3}.unit-card.active{border-color:#f1cc89;background:#536052}.unit-card small{color:#b7c9c4}.cost{color:#f2ca86}.overlay{background:#0d171fdd;backdrop-filter:blur(5px)}.modal{background:#233b43;border:1px solid #78918a;border-radius:12px;box-shadow:0 20px 60px #0009}.modal p{color:#b9cbc3}.modal h2{color:#f8f0e1}#toast{background:#f1cc8d;color:#2a3534;border-radius:6px;box-shadow:0 5px 20px #0006}.battle-shell .btn{color:#e7eee6}.battle-shell .btn.primary{color:#26343a}.tile:focus-visible{outline:3px solid #efc786}.portrait,.hand-avatar{background:#789b90}.hero-stars{color:#f8d991}.hero-art .art-copy{background:#192e39b8;padding:10px 13px;border-left:3px solid #f0c987}.card,.btn,.tile,.unit-card{transition:background-color .18s,border-color .18s,transform .18s}.tile:hover{filter:brightness(1.12)}
/* 月下书房与角色图集：每格均为 512×512，按原比例呈现。 */
.hero-art{background-image:linear-gradient(90deg,#192c3bcc,#182b3a44),url('assets/observatory.webp');background-size:cover;background-position:43% center}.hero-art:before{background:linear-gradient(0deg,#10212be8,transparent 56%)}.hero-character{inset:auto 0 0 auto;width:auto;height:min(100%,500px);aspect-ratio:1;filter:drop-shadow(0 10px 16px #10172270)}.hero-stars{text-shadow:0 0 12px #f5dca5}.board-wrap{background-image:linear-gradient(#172d36b8,#172c34d9),url('assets/observatory.webp');background-size:cover;background-position:center}.portrait,.hand-avatar{aspect-ratio:1}.hand-avatar{height:48px}.sprite{width:75%;height:auto;aspect-ratio:1;background:transparent;box-shadow:none}.sprite.enemy{background:transparent;box-shadow:none}.sprite .chibi{filter:drop-shadow(0 2px 2px #1b252775)}.sprite.enemy .chibi{filter:drop-shadow(0 2px 2px #2a1c2d99)}@media(max-width:760px){.hero-character{height:100%;width:auto;inset:auto 2% 0 auto}.hand-avatar{width:36px;height:36px}}
/* 友方求知者使用独立星仪徽记；第五格仅为敌方旧见先生。 */
.chibi-scholar{background-image:none;display:grid;place-items:center;position:relative}.chibi-scholar::after{content:'✧';display:grid;place-items:center;width:68%;height:68%;border:2px solid #f2d08f;border-radius:50%;background:radial-gradient(circle,#6c8692,#344c5a);box-shadow:inset 0 0 0 4px #d9b77d55,0 3px 7px #101a2180;color:#f4d390;font-size:clamp(20px,3vw,38px);line-height:1}.chibi-oldmaster{background-position:50% 100%}
.stun-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;background:#984c62;color:#fff3eb;border:1px solid #e4a8a7;border-radius:4px;font-size:9px;line-height:1;padding:2px 3px;white-space:nowrap;pointer-events:none}
/* Stable 60fps battlefield: the grid remains clickable; only actor transforms change. */
.board{isolation:isolate}.actor-layer,.effects-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}.effects-layer{z-index:7}.actor{position:absolute;width:calc(100% / var(--cols) * .95);aspect-ratio:1;transform:translate(-50%,-55%);will-change:left,top;pointer-events:none}.actor-body{position:absolute;inset:0;filter:drop-shadow(0 3px 2px #1023299c);transform-origin:50% 85%}.actor-shadow{position:absolute;left:12%;right:12%;bottom:8%;height:15%;background:#16292a88;border-radius:50%;filter:blur(3px)}.actor-enemy:not(.is-blocked) .actor-body{animation:actor-walk .38s ease-in-out infinite alternate}.actor-unit .actor-body{animation:actor-idle 2.8s ease-in-out infinite}.actor-unit.is-active:before,.actor-unit.is-ready:before{content:'';position:absolute;inset:8%;border:2px solid #f9d587;border-radius:50%;box-shadow:0 0 13px #f9d58799;animation:aura 1.2s ease-in-out infinite alternate}.actor-unit.is-ready:not(.is-active):before{border-style:dashed;opacity:.6}.actor-hp{position:absolute;left:11%;right:11%;bottom:0;height:5px;background:#13212be8;border:1px solid #e4ede055;border-radius:5px;overflow:hidden}.actor-hp i{height:100%;display:block;background:#b8e69e;transition:width .12s linear}.actor-enemy .actor-hp i{background:#e99e90}.actor.is-low .actor-hp i{background:#f36e64}.actor-label{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);color:#fff6dd;font-size:9px;font-weight:bold;white-space:nowrap;text-shadow:0 1px 3px #07121b,0 1px 3px #07121b}.actor-facing{position:absolute;top:0;right:0;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#1b333be8;border:1px solid #e8c78b;color:#fbe0ab;font-size:11px;font-weight:900}.actor-stun{display:none;position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#a64e69;border:1px solid #eeb0b1;color:#fff;border-radius:3px;padding:1px 3px;font-size:9px;white-space:nowrap}.actor.is-stunned .actor-stun{display:block}.actor.anim-attack .actor-body{animation:attack .28s ease-out!important}.actor.anim-hit .actor-body{animation:hit .34s ease-out!important}.actor.anim-heal .actor-body{animation:healed .5s ease-out!important}.actor.anim-skill .actor-body{animation:skill-cast .6s ease-out!important}.battle-effect{position:absolute;transform:translate(-50%,-50%);color:#fff2d4;font-weight:900;font-size:14px;white-space:nowrap;text-shadow:0 0 6px #edb56e,0 2px 3px #1b2332;animation:float-effect .65s ease-out forwards}.effect-hit{color:#ffd9bd}.effect-heal{color:#bdf9be;text-shadow:0 0 7px #80df9a}.effect-danger{color:#ffc0a5;text-shadow:0 0 7px #f34b4b}.effect-skill,.effect-deploy,.effect-spawn,.effect-death{width:34px;height:34px;display:grid;place-items:center;border:2px solid #ffdc99;border-radius:50%;box-shadow:0 0 18px #f9c777;animation:ring-effect .75s ease-out forwards}.effect-spawn,.effect-death{border-color:#c8a0e8;box-shadow:0 0 16px #d299ff}.projectile{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff5c2;box-shadow:0 0 8px 3px #ffd784,0 0 18px #f6a15e;animation:projectile-fly .18s linear forwards}.projectile.heal-projectile{background:#d4ffdc;box-shadow:0 0 8px 3px #98f8be}@keyframes actor-walk{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}@keyframes actor-idle{50%{transform:translateY(-2px)}}@keyframes aura{to{transform:scale(1.13);opacity:.25}}@keyframes attack{25%{transform:translateX(5px) scale(1.12)}100%{transform:none}}@keyframes hit{20%,60%{transform:translateX(-4px);filter:brightness(2) sepia(.6)}40%,80%{transform:translateX(3px)}100%{transform:none}}@keyframes healed{30%{filter:brightness(1.5) drop-shadow(0 0 9px #83f9a2);transform:translateY(-4px)}}@keyframes skill-cast{35%{transform:scale(1.18) translateY(-4px);filter:brightness(1.4) drop-shadow(0 0 8px #f4d08c)}}@keyframes float-effect{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%) scale(1.1)}}@keyframes ring-effect{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}@keyframes projectile-fly{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@media (orientation:landscape) and (max-height:550px){.battle-shell{height:100dvh;min-height:0;padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:5px}.battle-top{padding:5px 9px;flex-wrap:nowrap}.battle-title{font-size:11px}.battle-readouts{gap:10px;font-size:10px}.battle-readouts strong{font-size:14px}.battle-actions .btn{padding:5px 8px}.battle-main{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:minmax(0,1fr);gap:5px}.board-wrap{padding:5px;min-height:0}.board{width:min(100%,calc((100dvh - 125px)*1.68))!important;gap:3px}.battle-side{flex-direction:column;gap:5px;overflow:auto}.battle-side .panel{padding:7px}.battle-side .panel h3{margin-bottom:4px}.battle-side .hint{font-size:10px;line-height:1.4}.hand{min-height:54px}.unit-card{min-width:95px;padding:5px 8px}.unit-card strong{font-size:11px;margin:2px 0}.unit-card small{font-size:9px}.cost{font-size:14px}.hand-avatar{height:38px;width:38px}.actor-label{font-size:8px;bottom:-11px}}
@media (prefers-reduced-motion:reduce){.actor-enemy:not(.is-blocked) .actor-body,.actor-unit .actor-body{animation:none}}
.chibi-scholar,.chibi-oldmaster{display:block;background-image:url('assets/chibi-extra.webp');background-size:200% 100%;background-repeat:no-repeat}.chibi-scholar{background-position:0% 50%}.chibi-scholar::after{content:none}.chibi-oldmaster{background-position:100% 50%}
.invite-link{text-decoration:none;display:inline-flex;align-items:center}.boot-screen{min-height:100dvh;position:relative;display:grid;place-items:center;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#0e1a27}.boot-sky{position:absolute;inset:0;background:linear-gradient(90deg,#101a24c9,#10202a9e),linear-gradient(0deg,#101b29ec,transparent 60%),url('assets/observatory.webp') center/cover;animation:boot-reveal 1.2s ease-out both}.boot-content{position:relative;text-align:center;z-index:1;max-width:420px;width:100%;animation:boot-enter .8s .12s ease-out both}.boot-emblem{margin:0 auto 20px;width:55px;height:55px;display:grid;place-items:center;border:1px solid #e9c88c;color:#f3d491;font-size:30px;transform:rotate(45deg)}.boot-content h1{font-family:STSong,SimSun,serif;font-size:clamp(44px,9vw,78px);letter-spacing:.22em;margin:18px 0 8px;color:#fff1d5;text-shadow:0 5px 22px #000}.boot-content p{color:#d1c6ac;letter-spacing:.35em;font-size:12px}.boot-progress{height:3px;width:min(250px,75vw);margin:28px auto 10px;background:#72868766;overflow:hidden}.boot-progress i{display:block;height:100%;width:0;background:#f3cc89;transition:width .25s}.boot-status{color:#b7c3bb;font-size:11px;letter-spacing:.08em;min-height:18px}.boot-enter{margin-top:20px;min-width:180px}.rotate-hint{display:none;color:#c4d1c9;font-size:11px;margin-top:20px}.asset-probes{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.asset-probes i{display:block;width:1px;height:1px}.probe-sheet{background-image:url('assets/chibi-sheet.webp')}.probe-extra{background-image:url('assets/chibi-extra.webp')}.probe-scene{background-image:url('assets/observatory.webp')}@keyframes boot-reveal{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes boot-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(orientation:portrait) and (max-width:760px){.rotate-hint{display:block}}@media(orientation:landscape) and (max-height:550px){.boot-emblem{width:35px;height:35px;font-size:20px;margin-bottom:10px}.boot-content h1{font-size:43px;margin:8px 0}.boot-content p{margin:5px}.boot-progress{margin:13px auto 5px}.boot-enter{margin-top:9px;padding:8px 15px}}
.chibi-blackguard{background-position:50% 100%}.tile.blocked{background-image:repeating-linear-gradient(135deg,transparent 0 8px,#17333955 8px 11px)}.tile.blocked .tile-label{inset:0;display:grid;place-items:center;color:#93ada4;font-size:16px;opacity:.65}
.tile.range:after{content:'';position:absolute;inset:3px;border:1px solid #b9edf9b0;background:#7fc9da30;border-radius:4px;pointer-events:none}
@keyframes attack{25%{transform:translate(var(--attack-x,5px),var(--attack-y,0)) scale(1.12)}100%{transform:none}}
.header-right{display:flex;align-items:center;gap:18px}.sound-toggle{white-space:nowrap}.battle-actions .sound-toggle{min-width:52px}@media(max-width:760px){.header-right{gap:6px}}@media(orientation:landscape) and (max-height:550px){.battle-actions .sound-toggle{min-width:0}}
/* 伙伴培养：资源、立绘、战斗成长与技能强化集中展示。 */
.materials-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;margin-bottom:14px;border:1px solid #556d6e;background:linear-gradient(110deg,#273f48,#1b2d37);border-radius:9px}.material-label{font-size:10px;color:#e9c78b;letter-spacing:.18em}.material-list{display:flex;gap:24px;margin-top:9px;font-size:12px;color:#b7c8c4}.material-list i{font-style:normal;color:#ecc683}.material-list strong{font-size:16px;color:#f5e8d6;margin-left:5px}.craft-block{display:flex;align-items:center;gap:15px;font-size:12px;color:#e8d5bc}.craft-cost{display:block;color:#9fb4b1;font-size:11px;margin-top:5px}.training-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px}.training-list{display:grid;gap:7px;align-content:start}.training-card{display:flex;align-items:center;gap:10px;text-align:left;min-height:72px;padding:7px;background:#1c303a;border:1px solid #435c63;border-radius:8px;color:#e8eee7}.training-card:hover,.training-card.active{border-color:#efc786;background:#344a4e}.training-card strong,.training-card small{display:block}.training-card strong{font-size:13px}.training-card small{margin-top:5px;font-size:10px;color:#a7beb8}.training-card b{margin-left:auto;color:#e8c58b}.training-avatar{width:55px;height:55px;flex:none;background:#6d918a;border-radius:8px;overflow:hidden}.training-detail{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(280px,1.15fr);min-height:450px;border:1px solid #51686b;border-radius:10px;overflow:hidden;background:#1c3039}.training-art{position:relative;overflow:hidden;min-height:400px;background:radial-gradient(circle at 50% 42%,#b5baa181,transparent 48%),linear-gradient(150deg,#37535c,#1b3038)}.training-art:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#152832bd,transparent 65%),url('assets/observatory.webp') center/cover;opacity:.32}.training-halo{position:absolute;left:12%;right:12%;top:13%;aspect-ratio:1;border:1px solid #efcc8a70;border-radius:50%;box-shadow:0 0 0 15px #edcf8e0b,0 0 0 36px #edcf8e08}.training-portrait{position:absolute;inset:7% 0 7%}.training-portrait .chibi{height:100%;width:100%;filter:drop-shadow(0 12px 10px #08151c80)}.training-art-caption{position:absolute;bottom:18px;left:20px;color:#f2d18c;font-size:11px;letter-spacing:.16em}.training-art-caption span{color:#c5d0c4}.training-info{padding:28px}.training-info h3{font-size:32px;margin:10px 0;color:#fff1dc}.training-info>p{color:#b8c9c3;font-size:13px;line-height:1.75;min-height:42px}.training-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0}.training-stats>div{border-left:2px solid #d5b579;padding:3px 8px}.training-stats small,.training-stats strong{display:block}.training-stats small{font-size:10px;color:#a4bab3}.training-stats strong{font-size:18px;margin-top:4px;color:#f7e6ce}.training-stats strong span{font-size:11px;color:#93aaa4}.skill-panel{padding:14px;border:1px solid #546a64;background:#2b4246;border-radius:7px}.skill-panel strong{font-size:13px;color:#efca8d}.skill-panel p{margin:6px 0 0;font-size:12px;line-height:1.55;color:#c1d0c8}.upgrade-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.upgrade-actions>div{padding:12px;background:#1a2c34;border:1px solid #435a5e;border-radius:7px}.upgrade-title{font-size:12px;color:#f0e4d3;margin-bottom:9px}.upgrade-title span{display:block;margin-top:5px;min-height:25px;color:#a8bcb5;font-size:10px;line-height:1.4}.upgrade-actions .btn{width:100%}.reward-panel{display:grid;gap:7px;margin-top:18px;padding:13px;border-left:3px solid #efc786;background:#30494b}.reward-panel span,.reward-panel small{color:#b3c7bc;font-size:11px}.reward-panel strong{color:#f2cf91;font-size:14px}@media(max-width:760px){.materials-panel{align-items:flex-start;flex-direction:column}.material-list{gap:14px}.craft-block{width:100%;justify-content:space-between}.training-layout{grid-template-columns:1fr}.training-list{display:flex;overflow-x:auto;padding-bottom:3px}.training-card{min-width:150px;min-height:62px;flex:none}.training-avatar{width:45px;height:45px}.training-card b{display:none}.training-detail{grid-template-columns:1fr}.training-art{min-height:260px}.training-portrait{inset:0 10%}.training-info{padding:20px}.training-stats{gap:3px}.training-info h3{font-size:26px}}@media(orientation:landscape) and (max-height:550px){.training-layout{grid-template-columns:180px minmax(0,1fr)}.training-list{display:grid;overflow:visible}.training-card{min-width:0;min-height:56px}.training-avatar{width:42px;height:42px}.training-detail{grid-template-columns:minmax(170px,.7fr) minmax(280px,1.3fr);min-height:360px}.training-art{min-height:360px}.training-info{padding:18px}.training-info h3{font-size:24px;margin:6px 0}}
.chibi-zhenyi_winter,.chibi-zhenyi_west{background-position:0% 0%}.chibi-zhenyi_winter{filter:hue-rotate(18deg) saturate(.8) brightness(1.12)}.chibi-zhenyi_west{filter:hue-rotate(-22deg) saturate(.85) brightness(.95)}
.chibi-zhenyi_winter,.chibi-zhenyi_west{background-image:url('assets/chibi-variants.webp');background-size:200% 100%;background-repeat:no-repeat;filter:none}.chibi-zhenyi_winter{background-position:0% 50%}.chibi-zhenyi_west{background-position:100% 50%}
.probe-variants{background-image:url('assets/chibi-variants.webp')}
.board-wrap{overflow:hidden}.board{flex:none}
.supply-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.supply-grid .card h3{margin:18px 0 8px}.supply-grid .card p{min-height:0}.daily-card h4{margin:25px 0 10px;color:#ebcb91;letter-spacing:.08em;font-size:13px}.task-list{display:grid;gap:8px}.task-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;background:#1a2d36;border:1px solid #435b5c;border-radius:6px}.task-row strong,.task-row small{display:block}.task-row strong{color:#f1e8d9;font-size:12px}.task-row small{color:#a9bdb6;margin-top:5px;font-size:10px}.seek-art{height:150px;display:flex;justify-content:center;gap:8px;overflow:hidden;background:radial-gradient(ellipse,#93aaa27a,transparent 70%)}.seek-art>div{width:150px;height:150px;flex:none;filter:drop-shadow(0 6px 6px #101d2280)}.draw-result{min-height:43px;padding:12px;color:#f5d695;background:#1a2e35;border-left:2px solid #e4c182;font-size:12px;line-height:1.5}.probability{color:#a7b9b3;font-size:10px;line-height:1.75;margin-top:16px}.wardrobe{margin-top:14px}.wardrobe h3{margin:10px 0 0}.wardrobe p{min-height:0}.wardrobe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.wardrobe-item{display:flex;align-items:center;gap:10px;background:#1b3039;border:1px solid #4a6465;border-radius:7px;padding:9px}.wardrobe-avatar{width:54px;height:54px;flex:none;border-radius:8px;background:#607e7a}.wardrobe-item strong,.wardrobe-item small{display:block}.wardrobe-item strong{font-size:12px}.wardrobe-item small{font-size:10px;color:#a2b9ae;margin-top:5px}.wardrobe-item .btn{margin:0 0 0 auto}.chibi-zhenyi.skin-starlight{filter:hue-rotate(25deg) saturate(1.25) drop-shadow(0 0 5px #9acdf6)}.chibi-zhenyi.skin-ink{filter:hue-rotate(85deg) saturate(.9) drop-shadow(0 0 5px #8fd2b5)}.chibi-zhenyi.skin-lantern{filter:sepia(.25) hue-rotate(-18deg) saturate(1.4) drop-shadow(0 0 5px #f5bd77)}@media(max-width:760px){.supply-grid,.wardrobe-grid{grid-template-columns:1fr}.wardrobe-item{padding:8px}.seek-art{height:120px}.seek-art>div{width:120px;height:120px}}
.actor-enemy.is-slow .actor-body{filter:drop-shadow(0 0 6px #80ddff) saturate(.7)}.actor-enemy.is-slow:after{content:'❄';position:absolute;right:-2px;top:0;color:#a3ebff;font-size:13px;text-shadow:0 0 5px #56c9f4}

/* 新增剧情角色立绘（来自用户素材） */
.chibi-fan_swordsman,.chibi-scholar_brush,.chibi-sour_scholar,.chibi-strict_scholar,.chibi-bloodblade{background-image:url('assets/chars/chibi-ink.webp')!important;background-size:500% 100%!important;background-repeat:no-repeat}
.chibi-fan_swordsman{background-position:0% 0}.chibi-scholar_brush{background-position:25% 0}.chibi-sour_scholar{background-position:50% 0}.chibi-strict_scholar{background-position:75% 0}.chibi-bloodblade{background-position:100% 0}

/* ==== theme.css ==== */
/* ============================================================
   星灯破晓 · 全局主题
   深空玻璃 / 金色强调 / 手机游戏式交互与动效
   适配 Android 与 iPhone 横屏（含安全区与触控尺寸）
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #0a0d10;
  --panel: rgba(20, 25, 29, .58);
  --panel-strong: rgba(15, 19, 23, .78);
  --panel2: rgba(38, 45, 51, .72);
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .34);
  --muted: #a8afb3;
  --text: #f3f2ec;
  --accent: #f2b62c;
  --accent-bright: #ffd75e;
  --accent-soft: rgba(242, 182, 44, .16);
  --danger: #d0604c;
  --blue: #8fc7e8;
  --font-ui: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-display: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --shadow-panel: 0 14px 38px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .09);
  --glass: blur(16px) saturate(1.25);
  font-family: var(--font-ui);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #070a0c; color: var(--text); }
body {
  background:
    radial-gradient(ellipse at 74% -6%, rgba(46, 70, 82, .5) 0, transparent 46%),
    radial-gradient(ellipse at 8% 108%, rgba(38, 60, 55, .34) 0, transparent 52%),
    #070a0c;
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
button, a, .card, .roster-item { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .42; cursor: not-allowed; }
#app { min-height: 100dvh; }

/* 全局动态背景（旧版页面 / 启动页共用） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(112deg, rgba(4, 7, 10, .8) 0%, rgba(8, 13, 17, .34) 46%, rgba(3, 6, 9, .88) 100%),
    linear-gradient(0deg, rgba(3, 6, 9, .92) 0%, transparent 46%),
    url('assets/bg/bg-ink-mountains.webp') center / cover no-repeat;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 236, 190, .9) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 236, 190, .7) 0 1.1px, transparent 2px),
    radial-gradient(circle, rgba(191, 219, 232, .8) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255, 236, 190, .55) 0 1px, transparent 2px);
  background-size: 190px 160px, 260px 210px, 330px 280px, 420px 360px;
  background-position: 0 0, 90px 60px, 160px 30px, 40px 120px;
  animation: star-twinkle 7s ease-in-out infinite alternate;
}
@keyframes star-twinkle { from { opacity: .35; } to { opacity: .95; } }

/* 页面 / 卡片入场 */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes glow-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

.shell { animation: page-in .42s cubic-bezier(.2, .7, .3, 1) both; }
.loading { padding: 3rem; color: var(--accent); letter-spacing: .16em; }

/* ============================================================
   旧版页面通用组件重绘（篇章 / 星灯手记 / 说明）
   ============================================================ */
.shell { max-width: 1180px; margin: auto; padding: 18px max(18px, env(safe-area-inset-right)) 46px max(18px, env(safe-area-inset-left)); }
.topbar { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--accent); color: var(--accent-bright); font-weight: 900; font-size: 22px;
  transform: rotate(45deg); background: rgba(242, 182, 44, .08);
  box-shadow: 0 0 18px rgba(242, 182, 44, .18);
}
.brand-mark span { transform: rotate(-45deg); }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; font-size: 17px; color: #f6f4ed; }
.brand-sub, .eyebrow { font-size: 9px; letter-spacing: .24em; color: #d9b45f; font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.top-meta { font-size: 11px; color: var(--muted); letter-spacing: .08em; white-space: nowrap; }
.top-meta strong { color: var(--accent-bright); font-size: 13px; }

.page-nav { display: flex; align-items: center; gap: 1px; margin-left: clamp(6px, 2vw, 26px); }
.page-nav button {
  position: relative; border: 0; background: none; color: var(--muted);
  font-size: 11.5px; letter-spacing: .1em; padding: 7px 10px; border-radius: 2px;
  transition: color .18s, background .18s;
}
.page-nav button::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.page-nav button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.page-nav button:hover::after, .page-nav button.active::after { transform: scaleX(1); }
.page-nav button.active { color: var(--accent-bright); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 26px 0 20px; }
.section-head h2 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: .08em; margin: 6px 0 0; color: #f7f5ee; }
.section-head p { color: var(--muted); line-height: 1.8; font-size: 12px; max-width: 380px; margin: 0; text-align: right; }
.back {
  border: 1px solid rgba(242, 182, 44, .42); background: rgba(242, 182, 44, .07);
  color: var(--accent-bright); padding: 7px 12px; border-radius: 2px; font-size: 11.5px; letter-spacing: .08em;
  transition: background .18s, border-color .18s, transform .15s;
}
.back:hover { background: rgba(242, 182, 44, .16); border-color: var(--accent); }
.back:active { transform: scale(.97); }

.btn {
  position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 2px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  color: var(--text); padding: 11px 18px; letter-spacing: .06em; font-size: 13px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s, filter .16s;
}
.btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.btn:hover:not(:disabled) { border-color: rgba(242, 182, 44, .8); background: linear-gradient(160deg, rgba(242, 182, 44, .18), rgba(242, 182, 44, .05)); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .38); }
.btn:hover:not(:disabled)::before { animation: sheen .6s ease; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, #ffd75e, #f0b022 62%, #d99a14); border-color: #ffe19a; color: #17130a; font-weight: 700; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: linear-gradient(135deg, #ffe07a, #f5bb33 62%, #e2a41b); }
.btn.small { padding: 7px 12px; font-size: 11.5px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)), rgba(10, 14, 18, .52);
  border: 1px solid var(--line); border-radius: 2px;
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  box-shadow: var(--shadow-panel);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: card-in .5s cubic-bezier(.2, .7, .3, 1) both;
}
.stage-grid .card:nth-child(2) { animation-delay: .05s; }
.stage-grid .card:nth-child(3) { animation-delay: .1s; }
.stage-grid .card:nth-child(4) { animation-delay: .15s; }
.stage-grid .card:nth-child(5) { animation-delay: .2s; }
.card:hover { border-color: rgba(242, 182, 44, .5); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag { font-size: 9px; letter-spacing: .16em; color: var(--accent-bright); border: 1px solid rgba(242, 182, 44, .4); background: rgba(242, 182, 44, .09); padding: 3px 8px; border-radius: 2px; }
.unit-meta { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: .06em; color: #f6f3ea; }
.card p { color: #aeb5b9; line-height: 1.75; font-size: 12px; }
.locked { opacity: .5; filter: grayscale(.55); }
.locked:hover { transform: none; border-color: var(--line); }

.materials-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(9, 13, 16, .55);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass); box-shadow: var(--shadow-panel);
  animation: page-in .45s .05s ease both;
}
.material-label { font-size: 9px; color: var(--accent-bright); letter-spacing: .2em; }
.material-list { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; font-size: 12px; color: #c3c9cd; }
.material-list i { font-style: normal; color: var(--accent); }
.material-list strong { font-size: 15px; color: #fff4d6; margin-left: 5px; }
.craft-block { font-size: 12px; color: #d5d9dc; display: flex; align-items: center; gap: 14px; }
.craft-cost { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }

.supply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.supply-grid .card { padding: 18px 20px; }
.daily-card h4 { margin: 22px 0 10px; color: var(--accent-bright); letter-spacing: .1em; font-size: 12px; }
.task-list { display: grid; gap: 8px; }
.task-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); border-radius: 2px; transition: border-color .18s, background .18s; }
.task-row:hover { border-color: rgba(242, 182, 44, .35); background: rgba(242, 182, 44, .05); }
.task-row strong { display: block; color: #f1eee4; font-size: 12px; }
.task-row small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.seek-art { height: 140px; display: flex; justify-content: center; gap: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 78%, rgba(242, 182, 44, .18), transparent 66%); }
.seek-art > div { width: 138px; height: 138px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); animation: float-soft 5.2s ease-in-out infinite; }
.seek-art > div:nth-child(2) { animation-delay: -2.6s; }
.draw-result { min-height: 40px; padding: 11px 12px; color: var(--accent-bright); background: linear-gradient(90deg, rgba(242, 182, 44, .14), rgba(255, 255, 255, .03)); border-left: 3px solid var(--accent); border-radius: 2px; font-size: 12px; line-height: 1.5; }
.probability { color: #8f979c; font-size: 10px; line-height: 1.8; margin-top: 14px; }
.wardrobe { margin-top: 14px; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wardrobe-item { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .11); border-radius: 2px; padding: 9px; transition: border-color .18s, background .18s; }
.wardrobe-item:hover { border-color: rgba(242, 182, 44, .4); background: rgba(242, 182, 44, .05); }
.wardrobe-avatar { width: 50px; height: 50px; flex: none; border-radius: 2px; background: #232a30; overflow: hidden; }
.wardrobe-avatar .chibi { width: 100%; height: 100%; display: block; }
.wardrobe-item strong { display: block; font-size: 12px; }
.wardrobe-item small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.wardrobe-item .btn { margin: 0 0 0 auto; }
.guide.card { padding: 22px 26px; }
.guide h3 { color: var(--accent-bright); font-size: 16px; margin: 22px 0 8px; letter-spacing: .05em; }
.guide h3:first-child { margin-top: 0; }
.guide p, .guide li { color: #b6bdc1; line-height: 1.9; font-size: 13px; }

#toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 90;
  padding: 10px 20px; border-radius: 2px; border: 1px solid rgba(242, 182, 44, .55);
  background: rgba(10, 14, 18, .86); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color: var(--accent-bright); font-size: 12.5px; letter-spacing: .05em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: opacity .22s ease, transform .22s ease; max-width: min(86vw, 460px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   启动页 + 「进入游戏」转场
   ============================================================ */
.boot-screen {
  min-height: 100dvh; position: relative; display: grid; place-items: center; overflow: hidden;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #05080b;
}
.boot-sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(4, 7, 10, .9), rgba(6, 11, 15, .45) 55%, rgba(3, 6, 8, .92)),
    linear-gradient(0deg, rgba(3, 6, 9, .96), transparent 55%),
    url('assets/bg-night.svg') center / cover;
  animation: boot-reveal 1.6s ease-out both;
}
.boot-sky::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(242, 182, 44, .12), transparent 52%);
}
.boot-content { position: relative; text-align: center; z-index: 2; max-width: 460px; width: 100%; animation: boot-enter .9s .15s cubic-bezier(.2, .7, .3, 1) both; }
.boot-emblem {
  margin: 0 auto 22px; width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent-bright); font-size: 28px;
  transform: rotate(45deg); background: rgba(242, 182, 44, .07);
  box-shadow: 0 0 22px rgba(242, 182, 44, .28), inset 0 0 14px rgba(242, 182, 44, .12);
  animation: emblem-pulse 3.2s ease-in-out infinite;
}
@keyframes emblem-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(242, 182, 44, .2), inset 0 0 12px rgba(242, 182, 44, .1); } 50% { box-shadow: 0 0 34px rgba(242, 182, 44, .45), inset 0 0 18px rgba(242, 182, 44, .2); } }
.boot-content h1 { font-family: var(--font-display); font-size: clamp(40px, 9vw, 72px); letter-spacing: .24em; margin: 16px 0 6px; color: #fff4d8; text-shadow: 0 6px 30px rgba(0, 0, 0, .8), 0 0 40px rgba(242, 182, 44, .18); font-weight: 700; }
.boot-content p { color: #c9c4b4; letter-spacing: .4em; font-size: 11px; }
.boot-progress { height: 3px; width: min(260px, 76vw); margin: 28px auto 10px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.boot-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2b62c, #ffd75e); box-shadow: 0 0 12px rgba(242, 182, 44, .6); transition: width .3s ease; }
.boot-status { color: #b7c3bb; font-size: 10.5px; letter-spacing: .14em; min-height: 18px; }
.boot-enter { margin-top: 22px; min-width: 190px; }
.boot-enter:not(:disabled) { animation: enter-breathe 2.6s ease-in-out infinite; }
@keyframes enter-breathe { 0%, 100% { box-shadow: 0 0 0 rgba(242, 182, 44, 0); } 50% { box-shadow: 0 0 26px rgba(242, 182, 44, .5); } }
.rotate-hint { display: none; color: #c4d1c9; font-size: 11px; margin-top: 18px; letter-spacing: .08em; }
.boot-screen.is-leaving .boot-content { animation: boot-out .75s cubic-bezier(.5, 0, .7, .3) forwards; }
.boot-screen.is-leaving .boot-sky { animation: boot-sky-out .85s ease forwards; }
@keyframes boot-out { 0% { opacity: 1; transform: none; } 55% { opacity: .9; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.14); filter: blur(4px); } }
@keyframes boot-sky-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.boot-flash {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff6db 0%, #ffd76a 34%, rgba(242, 182, 44, 0) 68%);
}
.boot-screen.is-leaving .boot-flash { animation: boot-flash .8s ease-out forwards; }
@keyframes boot-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@media (orientation: portrait) and (max-width: 760px) { .rotate-hint { display: block; } }

@keyframes boot-reveal { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@keyframes boot-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   手机适配
   ============================================================ */
@media (max-width: 900px) {
  .top-meta { display: none; }
  .page-nav { margin-left: 4px; overflow-x: auto; scrollbar-width: none; }
  .page-nav::-webkit-scrollbar { display: none; }
  .page-nav button { padding: 6px 8px; font-size: 11px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin: 18px 0 14px; }
  .section-head p { text-align: left; font-size: 11.5px; }
  .supply-grid { grid-template-columns: 1fr; }
  .wardrobe-grid { grid-template-columns: 1fr 1fr; }
  .guide.card { padding: 18px 16px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .shell { padding: 10px max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left)); }
  .topbar { padding-bottom: 8px; gap: 10px; }
  .brand-mark { width: 30px; height: 30px; font-size: 17px; }
  .brand-name { font-size: 14px; }
  .brand-sub { font-size: 7.5px; }
  .page-nav button { padding: 5px 7px; font-size: 10px; }
  .section-head { flex-direction: row; align-items: flex-end; gap: 18px; margin: 10px 0 10px; }
  .section-head h2 { font-size: 20px; }
  .section-head p { font-size: 10px; text-align: right; line-height: 1.6; }
  .back { padding: 5px 9px; font-size: 10px; }
  .stage-grid { gap: 9px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .card { padding: 12px 13px; }
  .card h3 { font-size: 15px; margin: 7px 0; }
  .card p { font-size: 10.5px; line-height: 1.55; }
  .btn { padding: 8px 13px; font-size: 11.5px; }
  .btn.small { padding: 5px 9px; font-size: 10px; }
  .materials-panel { padding: 8px 12px; margin-bottom: 9px; gap: 10px; }
  .material-list { gap: 12px; margin-top: 4px; font-size: 10px; }
  .material-list strong { font-size: 12px; }
  .craft-cost { font-size: 9.5px; }
  .supply-grid { gap: 9px; }
  .supply-grid .card { padding: 11px 13px; }
  .daily-card h4 { margin: 12px 0 7px; font-size: 10.5px; }
  .task-row { padding: 7px 9px; }
  .task-row strong { font-size: 10.5px; }
  .task-row small { font-size: 9px; margin-top: 2px; }
  .seek-art { height: 96px; }
  .seek-art > div { width: 96px; height: 96px; }
  .draw-result { padding: 7px 9px; font-size: 10.5px; min-height: 30px; }
  .probability { margin-top: 8px; }
  .guide h3 { font-size: 13px; margin: 12px 0 5px; }
  .guide p, .guide li { font-size: 11px; line-height: 1.65; }
  .wardrobe-avatar { width: 38px; height: 38px; }
  #toast { bottom: max(12px, env(safe-area-inset-bottom)); padding: 7px 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 启动页资源探针：使用自绘星空背景 */
.probe-scene{background-image:url('assets/bg-night.svg')}

/* ---------- 横屏手机：篇章 / 手记页面接近手游单屏布局 ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .shell { padding-top: 8px; }
  .section-head { margin: 8px 0 8px; }
  .stage-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .stage-grid .card { padding: 9px 10px 10px; }
  .stage-grid .card h3 { font-size: 13px; margin: 6px 0 4px; letter-spacing: .02em; }
  .stage-grid .card p { font-size: 9.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; }
  .stage-grid .card .btn { padding: 6px 4px; font-size: 9.5px; width: 100%; }
  .stage-grid .card-top .tag { font-size: 7.5px; padding: 2px 5px; }
  .stage-grid .card-top .unit-meta { font-size: 8px; }
  .actions { margin-top: 8px; gap: 7px; }
  .supply-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .supply-grid .card { padding: 10px 12px; }
  .supply-grid .card h3 { font-size: 16px; margin: 6px 0 4px; }
  .supply-grid .card p { font-size: 9.5px; line-height: 1.5; margin: 0 0 6px; }
  .daily-card h4 { margin: 10px 0 6px; }
  .task-list { gap: 5px; }
  .task-row { padding: 6px 8px; }
  .task-row strong { font-size: 10px; }
  .task-row small { font-size: 8px; margin-top: 1px; }
  .task-row .btn.small { padding: 4px 7px; font-size: 9px; }
  .seek-art { height: 88px; }
  .seek-art > div { width: 88px; height: 88px; }
  .draw-result { font-size: 10px; padding: 6px 9px; min-height: 26px; }
  .probability { font-size: 8px; line-height: 1.5; margin-top: 6px; }
  .materials-panel { flex-direction: row; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 7px 12px; }
  .material-list { flex-wrap: nowrap; gap: 10px; margin-top: 3px; }
  .material-label { font-size: 8px; }
  .section-head { margin: 6px 0 7px; }
  .section-head p { display: none; }
  .section-head .eyebrow { margin-top: 0 !important; }
  .section-head h2 { margin-top: 2px; }
  .wardrobe { padding: 10px 12px; }
  .wardrobe h3 { font-size: 15px; }
  .wardrobe p { font-size: 9px; margin: 0 0 6px; }
  .wardrobe-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wardrobe-item { padding: 6px; }
  .wardrobe-avatar { width: 34px; height: 34px; }
  .wardrobe-item strong { font-size: 10px; }
  .wardrobe-item small { font-size: 8px; margin-top: 2px; }
  .wardrobe-item .btn { padding: 4px 7px; font-size: 8.5px; }
  .guide.card { padding: 12px 16px; }
  .guide h3 { font-size: 12.5px; margin: 9px 0 3px; }
  .guide p, .guide li { font-size: 10.5px; line-height: 1.55; }
  .page-nav button { padding: 4px 7px; font-size: 9.5px; }
}

/* ============================================================
   交互反馈 / iOS 与 Android 适配补充
   ============================================================ */
@keyframes poke-bounce {
  0% { transform: translateY(0) scale(1, 1); }
  28% { transform: translateY(-3.2%) scale(1.025, .975); }
  58% { transform: translateY(1.2%) scale(.99, 1.012); }
  82% { transform: translateY(-.6%) scale(1.004, .996); }
  100% { transform: translateY(0) scale(1, 1); }
}
.lobby-figure.is-poked .chibi,
.roster-portrait.is-poked .chibi { animation: poke-bounce .58s cubic-bezier(.3, 1.4, .4, 1); }
.boot-screen { min-height: 100vh; min-height: 100dvh; }
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, .chibi, .lobby-figure, .roster-portrait, .roster-item, .combat-card { -webkit-touch-callout: none; }
.btn:active:not(:disabled)::after,
.lobby-mission:active::after,
.lobby-menu-card:active::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .12); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lobby-figure.is-poked .chibi, .roster-portrait.is-poked .chibi { animation: none; }
}

/* ==== ink-ui.css ==== */
/* ============================================================
   星灯破晓 · 统一国风 UI（水墨金碧）
   全站共用：顶栏、导航、按钮、面板、卷轴、印章、字体、配色
   页面内容可以各有设计点，但通用组件只使用本文件这一版
   ============================================================ */
:root {
  --ink-950: #060d0f;
  --ink-900: #0a1517;
  --ink-850: #0d1b1d;
  --ink-800: #102225;
  --ink-700: #163033;
  --ink-600: #1d3c3e;
  --gold: #e8c37a;
  --gold-bright: #ffdf9a;
  --gold-deep: #a87b2f;
  --gold-line: rgba(232, 195, 122, .45);
  --jade: #4f8f84;
  --jade-bright: #7fc4b6;
  --jade-deep: #2c5f58;
  --paper: #f0e4c9;
  --paper-2: #e2d1ac;
  --paper-3: #cdb98d;
  --seal: #b33a2b;
  --ink-text: #f2ead9;
  --ink-muted: #b9b09a;
  --ink-dim: #8c8574;
  --font-ink: "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif;
  --font-ui: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --ink-panel-bg: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), rgba(8, 16, 18, .62);
  --ink-shadow: 0 14px 40px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 240, 200, .08);
}

/* ---------- 统一顶栏 ---------- */
.ink-header {
  position: relative;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 0;
  font-family: var(--font-ui);
}
.ink-brand {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 44px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ink-brand img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.ink-nav {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
}
.ink-nav-frame {
  position: absolute;
  inset: 0;
  background: url('assets/ui/nav-frame.webp') center / 100% 100% no-repeat;
  opacity: .95;
  pointer-events: none;
}
.ink-nav-items {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(92%, 640px);
  height: 74%;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(10, 20, 24, .96), rgba(7, 14, 17, .96));
  border: 1px solid rgba(232, 195, 122, .22);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .07);
}
.ink-nav-tab {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: #d9c9a5;
  font-family: var(--font-ink);
  font-size: 15px;
  letter-spacing: .12em;
  padding: 0 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s, background .18s, text-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.ink-nav-tab::after {
  content: '';
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(0);
  transition: transform .22s ease;
}
.ink-nav-tab:hover { color: #ffe9bd; background: rgba(232, 195, 122, .06); }
.ink-nav-tab:hover::after, .ink-nav-tab.active::after { transform: scaleX(1); }
.ink-nav-tab.active {
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(232, 195, 122, .55);
  background: linear-gradient(180deg, rgba(232, 195, 122, .14), rgba(232, 195, 122, .02));
}
.ink-nav-tab.active::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(232, 195, 122, .38);
  pointer-events: none;
}
.ink-header-right { flex: none; display: flex; align-items: center; gap: 6px; }
.ink-res {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 9px;
  border: 1px solid rgba(232, 195, 122, .28);
  background: linear-gradient(160deg, rgba(18, 38, 40, .8), rgba(8, 16, 18, .8));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .06);
  border-radius: 2px;
}
.ink-res .mat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 9.5px; color: #c8bfa8; }
.ink-res .mat svg.gi { width: 15px; height: 15px; flex: none; }
.ink-res .mat b { color: var(--gold-bright); font-size: 12px; font-weight: 500; margin-left: 1px; }
.ink-icon-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(232, 195, 122, .4);
  background: linear-gradient(160deg, rgba(30, 58, 58, .9), rgba(9, 18, 20, .92));
  color: var(--gold);
  font-family: var(--font-ink);
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color .18s, background .18s, color .18s, transform .14s;
  -webkit-tap-highlight-color: transparent;
}
.ink-icon-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: linear-gradient(160deg, rgba(60, 88, 76, .95), rgba(12, 24, 26, .95)); }
.ink-icon-btn:active { transform: scale(.94); }
.ink-icon-btn .sound-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jade-bright); box-shadow: 0 0 6px var(--jade-bright); margin-top: -1px; }
.ink-icon-btn.is-off .sound-dot { background: #8c8574; box-shadow: none; }
.ink-icon-btn .ink-glyph { font-size: 15px; line-height: 1; }

/* ---------- 统一标题 / 印章 / 标签 ---------- */
.ink-title { display: flex; align-items: flex-end; gap: 10px; position: relative; min-width: 0; }
.ink-title .it-en { font-size: 8.5px; letter-spacing: .3em; color: var(--gold-deep); font-weight: 700; font-family: var(--font-ui); }
.ink-title h2 {
  margin: 2px 0 0;
  font-family: var(--font-ink);
  font-size: clamp(22px, 3.3vw, 34px);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-bright);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .6);
  line-height: 1.15;
}
.ink-title h2 em { font-style: normal; color: #fff6e0; }
.ink-title .it-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232, 195, 122, .6), transparent); margin: 0 2px 7px; }
.ink-seal {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 4px;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  font-family: var(--font-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  transform: rotate(-4deg);
  background: rgba(179, 58, 43, .08);
  box-shadow: 0 0 0 1px rgba(179, 58, 43, .25) inset;
  border-radius: 2px;
}
.ink-seal.solid { background: var(--seal); color: #f6e7d2; }
.ink-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(232, 195, 122, .38);
  background: rgba(232, 195, 122, .07);
  color: var(--gold-bright);
  font-size: 9px; letter-spacing: .1em; white-space: nowrap; border-radius: 2px;
}
.ink-chip.jade { border-color: rgba(127, 196, 182, .4); background: rgba(79, 143, 132, .12); color: var(--jade-bright); }
.ink-chip.red { border-color: rgba(179, 58, 43, .45); background: rgba(179, 58, 43, .12); color: #f0a79b; }

/* ---------- 统一按钮 ---------- */
.ink-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 16px;
  border: 1px solid #ffe4ac;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4d795 0%, #e2b866 42%, #b98a3e 100%);
  color: #2b1d0c;
  font-family: var(--font-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 #fff1cd;
  text-shadow: 0 1px 0 rgba(255, 245, 214, .5);
  transition: filter .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.ink-btn:hover:not(:disabled) { filter: brightness(1.06); }
.ink-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #6f4c1c, 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 #fff1cd; }
.ink-btn:disabled { filter: grayscale(.6) brightness(.72); cursor: default; box-shadow: none; }
.ink-btn.ink-btn-jade {
  border-color: #bfe6da;
  background: linear-gradient(180deg, #a8d8c9 0%, #6bb3a3 46%, #3f7f74 100%);
  color: #102823;
  box-shadow: 0 3px 0 #264c45, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 #d8f4ea;
  text-shadow: 0 1px 0 rgba(220, 246, 238, .5);
}
.ink-btn.ink-btn-dark {
  border-color: rgba(232, 195, 122, .45);
  background: linear-gradient(180deg, rgba(30, 58, 58, .95), rgba(9, 18, 20, .95));
  color: var(--gold-bright);
  box-shadow: 0 3px 0 rgba(4, 10, 12, .9), 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 240, 200, .08);
  text-shadow: none;
}
.ink-btn.ink-btn-sm { min-height: 26px; padding: 4px 10px; font-size: 11.5px; border-radius: 2px; }
.ink-btn.ink-btn-lg { min-height: 44px; padding: 10px 26px; font-size: 17px; letter-spacing: .12em; }

/* ---------- 统一面板 / 卡纸 ---------- */
.ink-panel {
  position: relative;
  border: 1px solid rgba(232, 195, 122, .3);
  border-radius: 2px;
  background: var(--ink-panel-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--ink-shadow);
}
.ink-panel::before, .ink-panel::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(232, 195, 122, .65);
  border-style: solid;
  pointer-events: none;
}
.ink-panel::before { left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.ink-panel::after { right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }
.ink-card {
  position: relative;
  border: 1px solid rgba(168, 123, 47, .55);
  border-radius: 2px;
  background:
    linear-gradient(165deg, rgba(255, 250, 234, .97), rgba(226, 210, 172, .96)),
    var(--paper);
  color: #3a2c16;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 28px rgba(168, 123, 47, .12);
}
.ink-card::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(168, 123, 47, .3);
  pointer-events: none;
}
.ink-hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(232, 195, 122, .45), transparent); }

/* ---------- 旧组件统一覆盖 ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 8px 18px;
  border: 1px solid rgba(232, 195, 122, .45) !important;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(30, 58, 58, .95), rgba(9, 18, 20, .95)) !important;
  color: var(--gold-bright) !important;
  font-family: var(--font-ink) !important;
  font-size: 13.5px !important;
  font-weight: 700; letter-spacing: .08em;
  clip-path: none !important;
  box-shadow: 0 3px 0 rgba(4, 10, 12, .9), 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 240, 200, .08) !important;
  text-shadow: none;
  transition: filter .15s, transform .12s, border-color .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--gold-bright) !important; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn.primary {
  border-color: #ffe4ac !important;
  background: linear-gradient(180deg, #f4d795 0%, #e2b866 42%, #b98a3e 100%) !important;
  color: #2b1d0c !important;
  text-shadow: 0 1px 0 rgba(255, 245, 214, .5);
  box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 #fff1cd !important;
}
.btn.small { min-height: 26px; padding: 4px 11px; font-size: 11.5px !important; }
.back {
  border: 1px solid rgba(232, 195, 122, .42) !important;
  border-radius: 2px !important;
  background: linear-gradient(160deg, rgba(30, 58, 58, .9), rgba(9, 18, 20, .92)) !important;
  color: var(--gold-bright) !important;
  font-family: var(--font-ink) !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  padding: 6px 11px !important;
  box-shadow: 0 2px 0 rgba(4, 10, 12, .85), inset 0 1px 0 rgba(255, 240, 200, .08);
}
.back:hover { border-color: var(--gold-bright) !important; filter: brightness(1.08); }
.card {
  border: 1px solid rgba(232, 195, 122, .28) !important;
  border-radius: 2px !important;
  background: var(--ink-panel-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--ink-shadow) !important;
}
.card::before, .card::after { display: none; }
#toast {
  border: 1px solid rgba(232, 195, 122, .6) !important;
  background: rgba(8, 16, 18, .94) !important;
  color: var(--gold-bright) !important;
  border-radius: 2px !important;
  font-family: var(--font-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 18px rgba(168, 123, 47, .12) !important;
}
.section-head h2, .brand-name, .journey-head h2, .tasks-title h2, .seeker-page h2, .inv-title h2 {
  font-family: var(--font-ink);
}
.top-meta, .brand-sub, .eyebrow { color: var(--gold-deep) !important; }

/* ---------- 页面背景（统一同一套水墨背景材质） ---------- */
.page-ink-bg { position: relative; isolation: isolate; }
.page-ink-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(5, 11, 13, .92) 0%, rgba(8, 17, 20, .55) 46%, rgba(4, 9, 11, .92) 100%),
    linear-gradient(0deg, rgba(4, 9, 11, .96) 0%, transparent 52%),
    var(--page-bg-image, url('assets/bg/bg-ink-mountains.webp')) center / cover no-repeat;
}
.page-stages { --page-bg-image: url('assets/bg/bg-ink-mountains.webp'); }
.page-tasks { --page-bg-image: url('assets/bg/bg-task-lantern.webp'); }
.page-seeker { --page-bg-image: url('assets/bg/bg-starry-ink.webp'); }
.page-inventory { --page-bg-image: url('assets/bg/bg-ink-mountains-2.webp'); }
.page-guide { --page-bg-image: url('assets/bg/bg-ink-mountains-2.webp'); }
.page-roster { --page-bg-image: url('assets/bg/bg-night-lake.webp'); }

/* ---------- 手机横屏紧凑 ---------- */
@media (orientation: landscape) and (max-height: 550px) {
  .ink-header { min-height: 38px; gap: 8px; padding: 2px 0; }
  .ink-brand { height: 34px; }
  .ink-brand img { max-width: 176px; }
  .ink-nav { height: 34px; margin: 0 2px; }
  .ink-nav-items { height: 78%; width: 94%; padding: 0 6px; }
  .ink-nav-tab { font-size: 11.5px; letter-spacing: .06em; padding: 0 3px; }
  .ink-nav-tab::after { bottom: 2px; }
  .ink-res { gap: 7px; padding: 3px 7px; }
  .ink-res .mat { font-size: 8.5px; }
  .ink-res .mat svg.gi { width: 13px; height: 13px; }
  .ink-res .mat b { font-size: 10.5px; }
  .ink-icon-btn { width: 28px; height: 28px; font-size: 11px; }
  .ink-btn { min-height: 30px; padding: 5px 12px; font-size: 12px; }
  .ink-btn.ink-btn-sm { min-height: 24px; padding: 3px 8px; font-size: 10.5px; }
  .ink-title h2 { font-size: 20px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .ink-header { flex-wrap: wrap; row-gap: 5px; }
  .ink-brand { height: 36px; }
  .ink-brand img { max-width: 180px; }
  .ink-nav { order: 3; flex-basis: 100%; height: 36px; margin: 0; }
  .ink-nav-items { width: 100%; }
  .ink-nav-tab { font-size: 12px; }
  .ink-res { order: 4; flex-basis: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-nav-tab, .ink-btn, .ink-icon-btn { transition: none; }
}

/* ============ 官方导航条版式（全站统一顶栏） ============ */
.ink-header {
  position: relative !important;
  min-height: 46px;
  height: 48px;
  background: url('assets/official/nav.png') center / 100% 100% no-repeat;
  border-bottom: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ink-header .ink-brand {
  position: absolute; left: 0; top: 0; width: 34%; height: 100%;
  opacity: 0; /* 官方条已含 LOGO，保持按钮可点击 */
  z-index: 3;
}
.ink-header .ink-nav {
  position: absolute; left: 33.5%; right: 23%; top: 0; height: 100%; margin: 0;
  z-index: 2;
}
.ink-header .ink-nav-frame { display: none; }
.ink-header .ink-nav-items {
  width: 100%; height: 100%; padding: 0 4px;
  background: linear-gradient(180deg, rgba(18,13,8,.97), rgba(12,9,6,.97));
  border: 0; box-shadow: none;
}
.ink-header .ink-nav-tab {
  font-family: "STSong", "SimSun", "Songti SC", serif;
  font-size: 13.5px; color: #e0bd78; letter-spacing: .06em;
}
.ink-header .ink-nav-tab.active { color: #ffe6a8; background: rgba(232,195,122,.10); }
.ink-header .ink-header-right {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  z-index: 4; padding: 2px 4px; gap: 4px;
  background: linear-gradient(180deg, rgba(18,13,8,.94), rgba(12,9,6,.94));
  border: 1px solid rgba(232,195,122,.18);
  border-radius: 2px;
}
.ink-header .ink-res { display: none; }
.ink-header .ink-icon-btn { width: 28px; height: 28px; font-size: 11px; }
@media (orientation: landscape) and (max-height: 550px) {
  .ink-header { min-height: 40px; height: 42px; }
  .ink-header .ink-nav-tab { font-size: 11.5px; letter-spacing: .03em; }
  .ink-header .ink-header-right { right: 4px; }
  .ink-header .ink-icon-btn { width: 25px; height: 25px; font-size: 10px; }
}

/* ============ 官方战斗 HUD 素材 ============ */
.combat-hud .combat-title {
  position: relative; width: 250px; max-width: 250px; height: 58px; padding: 0 !important;
  background: url('assets/official/battle-title.png') center / 100% 100% no-repeat !important;
  border: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.combat-hud .combat-title::before {
  content: ''; position: absolute; z-index: 1;
  left: 12%; right: 4%; top: 16%; bottom: 18%;
  background: linear-gradient(180deg, #f3e7cb, #eadbb8);
  border-radius: 1px;
}
.combat-hud .combat-title small { display: none !important; }
.combat-hud .combat-title strong {
  position: absolute; z-index: 2; left: 14%; right: 6%; top: 50%; transform: translateY(-50%);
  font-family: "STKaiti", "KaiTi", "STSong", "SimSun", serif;
  font-size: 17px; color: #2b1c0b; letter-spacing: .05em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none;
}
.combat-hud .combat-counts {
  position: relative; width: 320px; height: 48px;
  background: url('assets/official/battle-counter.png') center / 100% 100% no-repeat;
  padding: 0 12px; gap: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.combat-hud .combat-counts::before {
  content: ''; position: absolute; inset: 20% 5%; z-index: 0;
  background: linear-gradient(180deg, #f1e4c8, #eadab8);
}
.combat-hud .combat-counts > div {
  position: relative; z-index: 1; display: flex; align-items: baseline; gap: 3px;
  padding: 0 10px; color: #2b1c0b;
}
.combat-hud .combat-counts > div + div { border-left: 1px solid rgba(120,84,36,.35); }
.combat-hud .combat-counts span { color: #6c4a1c !important; font-size: 10px; letter-spacing: .08em; }
.combat-hud .combat-counts strong { color: #241708 !important; font-size: 22px; font-weight: 700; font-family: "STSong","SimSun",serif; }
.combat-hud .combat-counts small { color: #6c4a1c !important; font-size: 10px; }
.combat-hud .combat-controls [data-combat="speed"],
.combat-hud .combat-controls [data-combat="pause"] {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border: 0 !important; border-radius: 0; background-color: transparent !important;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  color: transparent !important; font-size: 0 !important;
}
.combat-hud .combat-controls [data-combat="speed"] { background-image: url('assets/official/btn-speed.png'); }
.combat-hud .combat-controls [data-combat="pause"] { background-image: url('assets/official/btn-pause.png'); }
.combat-root::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; z-index: 1; pointer-events: none;
  background: url('assets/official/bottom-deco.png') center bottom / cover no-repeat;
  opacity: .5; mix-blend-mode: screen;
}
@media (orientation: landscape) and (max-height: 460px) {
  .combat-hud .combat-title { width: 200px; max-width: 200px; height: 48px; }
  .combat-hud .combat-title strong { font-size: 13.5px; }
  .combat-hud .combat-counts { width: 260px; height: 40px; }
  .combat-hud .combat-counts strong { font-size: 17px; }
  .combat-hud .combat-controls [data-combat="speed"],
  .combat-hud .combat-controls [data-combat="pause"] { width: 34px; height: 34px; min-width: 34px; }
}


/* 顶栏按钮写明功能，不用猜图标 */
.ink-header .ink-text-btn {
  width: auto !important; min-width: 48px; height: 28px; padding: 0 8px;
  font-size: 10.5px; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
}
.ink-header .ink-text-btn .ink-glyph { font-size: 10.5px; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 550px) {
  .ink-header .ink-text-btn { height: 25px; min-width: 44px; padding: 0 6px; font-size: 9.5px; }
  .ink-header .ink-text-btn .ink-glyph { font-size: 9.5px; }
}

/* ============ 页面切换与交互过渡（流畅度） ============ */
@keyframes ink-page-in {
  from { opacity: 0; transform: translateY(7px) scale(.997); }
  to { opacity: 1; transform: none; }
}
main.shell, .lobby-root, .roster-root, .combat-root, .vault-page, .journal, .journey, .guide-page {
  animation: ink-page-in .26s cubic-bezier(.2,.7,.3,1) both;
}
.ink-nav-tab, .btn, .ink-btn, .ink-icon-btn, .back, .combat-square, .combat-card {
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .12s ease, filter .16s ease, box-shadow .16s ease !important;
}
button:not(:disabled):active { transform: scale(.97); }
.combat-card { transition: transform .16s ease, box-shadow .18s ease, border-color .16s ease, filter .16s ease !important; }
.combat-card:hover:not(:disabled) { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  main.shell, .lobby-root, .roster-root, .combat-root, .vault-page, .journal, .journey, .guide-page { animation: none !important; }
  * { transition-duration: .01ms !important; }
}


/* ============ 普通清爽顶栏（弃用官方烤死LOGO导航条） ============ */
.ink-header {
  position: relative !important;
  display: flex !important; align-items: center; gap: 8px;
  min-height: 46px !important; height: 48px !important;
  padding: 0 8px !important;
  background: linear-gradient(180deg, rgba(14,26,28,.98), rgba(7,14,16,.98)) !important;
  border-bottom: 1px solid rgba(232,195,122,.28) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}
.ink-header .ink-back {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 11px;
  border: 1px solid rgba(232,195,122,.45); border-radius: 3px;
  background: linear-gradient(160deg, rgba(30,50,50,.9), rgba(10,18,20,.92));
  color: #ffe6b0; font-size: 12px; font-family: "STSong","SimSun",serif; letter-spacing: .06em;
  cursor: pointer;
}
.ink-header .ink-back:hover { border-color: #ffdf9a; color: #fff2cc; }
.ink-header .ink-brand {
  position: static !important; opacity: 1 !important;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: auto !important; height: auto !important; min-height: 32px;
  padding: 0 8px !important; border: 0; background: none; cursor: pointer;
}
.ink-header .ink-brand img { display: none !important; }
.ink-header .ink-brand-title {
  font-family: "STSong","SimSun",serif; font-size: 17px; font-weight: 700;
  color: #ffe1a0; letter-spacing: .14em; line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.ink-header .ink-brand-sub {
  font-size: 6px; letter-spacing: .22em; color: #a87b2f; line-height: 1.2;
}
.ink-header .ink-nav {
  position: static !important; flex: 1 1 auto; min-width: 0;
  height: 32px !important; margin: 0 2px !important;
}
.ink-header .ink-nav-frame { display: none !important; }
.ink-header .ink-nav-items {
  width: 100% !important; height: 100% !important; padding: 0 4px !important;
  background: rgba(6,14,16,.55) !important;
  border: 1px solid rgba(232,195,122,.18) !important;
  box-shadow: none !important;
}
.ink-header .ink-nav-tab { font-size: 13px; color: #d9c9a5; letter-spacing: .05em; }
.ink-header .ink-nav-tab.active { color: #ffe6a8; background: rgba(232,195,122,.12); }
.ink-header .ink-nav-tab.active::before { border-color: rgba(232,195,122,.4); }
.ink-header .ink-header-right {
  position: static !important; transform: none !important;
  display: flex; align-items: center; gap: 5px;
  background: none !important; border: 0 !important; padding: 0 !important;
}
.ink-header .ink-text-btn {
  width: auto !important; min-width: 52px !important; height: 30px !important;
  padding: 0 9px !important; font-size: 11px !important; letter-spacing: .03em;
  background: linear-gradient(160deg, rgba(30,50,50,.9), rgba(10,18,20,.92)) !important;
  border: 1px solid rgba(232,195,122,.4) !important; border-radius: 3px;
  color: #ffe6b0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.ink-header .ink-text-btn .ink-glyph { font-size: 11px !important; white-space: nowrap; }
.ink-header .ink-res { display: none !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .ink-header { min-height: 40px !important; height: 42px !important; gap: 6px; padding: 0 6px !important; }
  .ink-header .ink-back { height: 27px; padding: 0 8px; font-size: 11px; }
  .ink-header .ink-brand-title { font-size: 14px; }
  .ink-header .ink-brand-sub { font-size: 5px; }
  .ink-header .ink-nav { height: 28px !important; }
  .ink-header .ink-nav-tab { font-size: 11px; }
  .ink-header .ink-text-btn { min-width: 42px !important; height: 27px !important; font-size: 10px !important; padding: 0 6px !important; }
  .ink-header .ink-text-btn .ink-glyph { font-size: 10px !important; }
}


/* 过渡：只淡入，不做位移动画，避免切页"弹一下"；View Transition 负责融合 */
main.shell, .lobby-root, .roster-root, .combat-root, .vault-page, .journal, .journey, .guide-page { animation: none !important; }
::view-transition-old(root) { animation: ink-fade-out .14s ease both; }
::view-transition-new(root) { animation: ink-fade-in .2s ease both; }
@keyframes ink-fade-out { to { opacity: .35; } }
@keyframes ink-fade-in { from { opacity: .55; } to { opacity: 1; } }


/* ===== 交互手感：按钮即时按下反馈；换页只做 160ms 淡入 ===== */
#app.ink-page-swap { animation: ink-swap-in .16s ease both; }
@keyframes ink-swap-in { from { opacity: .45; } to { opacity: 1; } }
button:not(:disabled) { -webkit-tap-highlight-color: transparent; will-change: transform; }
button:not(:disabled):active { filter: brightness(1.08); }
.ink-btn:not(:disabled):active, .btn:not(:disabled):active, .back:not(:disabled):active,
.ink-nav-tab:not(:disabled):active, .ink-icon-btn:not(:disabled):active,
.lobby-entry:not(:disabled):active, .lobby-battle:not(:disabled):active,
.lobby-feet:not(:disabled):active, .desk-start:not(:disabled):active,
.combat-card:not(:disabled):active, .combat-square:not(:disabled):active,
.row-claim:not(:disabled):active, .forge-action:not(:disabled):active,
.skin-hit:not(:disabled):active, .ros-row:not(:disabled):active {
  transform: scale(.965) !important;
  transition: transform .06s ease, filter .1s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }


/* 统一导航：主页隐藏返回但保留占位，保证各页导航文字位置一致 */
.ink-header .ink-back.is-hidden { visibility: hidden !important; pointer-events: none !important; }

/* ==== boot.css ==== */
/* 星灯破晓 · 启动加载与开场动画（bs- 前缀，独立于旧 boot 样式） */
.bs-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05080b;
  color: #f4f0e4;
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  opacity: 1;
  transition: opacity .55s ease, visibility .55s ease;
}
.bs-root.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.bs-bg {
  position: absolute; inset: -4%;
  background:
    linear-gradient(104deg, rgba(3, 6, 9, .9) 0%, rgba(6, 11, 15, .42) 48%, rgba(3, 6, 9, .88) 100%),
    linear-gradient(0deg, rgba(2, 5, 8, .96) 0%, transparent 52%),
    url('assets/bg/bg-night-lake.webp') center / cover no-repeat;
  animation: bs-bg-drift 18s ease-in-out infinite alternate;
}
@keyframes bs-bg-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.04) translateY(-1.2%); } }
.bs-stars { position: absolute; inset: 0; pointer-events: none; }
.bs-stars::before, .bs-stars::after {
  content: ''; position: absolute; inset: -20%;
  background-image:
    radial-gradient(circle, rgba(255, 238, 190, .8) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(196, 221, 234, .7) 0 1.2px, transparent 2px);
  background-size: 168px 142px, 236px 198px;
  animation: bs-stars-a 26s linear infinite;
  opacity: .55;
}
.bs-stars::after { background-size: 118px 96px, 302px 264px; animation-duration: 38s; animation-direction: reverse; opacity: .35; }
@keyframes bs-stars-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-56px, 40px, 0); } }
.bs-aura {
  position: absolute; left: 50%; top: 42%; width: min(70vw, 560px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 182, 44, .16), rgba(242, 182, 44, .04) 42%, transparent 66%);
  filter: blur(2px);
  animation: bs-aura 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bs-aura { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.bs-content {
  position: relative;
  z-index: 2;
  width: min(560px, 82vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(0);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .6s ease, filter .6s ease;
}
.bs-kicker { font-size: 8.5px; letter-spacing: .42em; color: #d9b45f; font-weight: 700; opacity: 0; animation: bs-rise .8s .1s ease both; }
.bs-sigil-wrap { position: relative; width: 96px; height: 96px; margin: 12px 0 6px; display: grid; place-items: center; flex: none; }
.bs-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(255, 215, 94, .95) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  transform: rotate(-90deg);
  transition: none;
}
.bs-ring2 {
  position: absolute; inset: -13px; border-radius: 50%;
  border: 1px dashed rgba(242, 182, 44, .3);
  animation: bs-spin 18s linear infinite;
}
.bs-ring3 {
  position: absolute; inset: -27px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  animation: bs-spin 26s linear infinite reverse;
}
.bs-ring3::before { content: ''; position: absolute; top: 6%; left: 16%; width: 5px; height: 5px; border-radius: 50%; background: #ffd75e; box-shadow: 0 0 10px #f2b62c; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-sigil {
  width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #f2b62c; color: #ffd75e;
  transform: rotate(45deg); font-size: 26px; background: rgba(242, 182, 44, .1);
  box-shadow: 0 0 34px rgba(242, 182, 44, .45), inset 0 0 18px rgba(242, 182, 44, .2);
  animation: bs-sigil 2.6s ease-in-out infinite;
}
@keyframes bs-sigil { 0%, 100% { box-shadow: 0 0 22px rgba(242, 182, 44, .25), inset 0 0 12px rgba(242, 182, 44, .12); } 50% { box-shadow: 0 0 48px rgba(242, 182, 44, .6), inset 0 0 22px rgba(242, 182, 44, .3); } }
.bs-logo {
  display: block;
  width: min(420px, 64vw);
  height: auto;
  margin: 8px auto 0;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(232, 195, 122, .18));
  opacity: 0;
  animation: bs-rise .9s .25s ease both;
}
.bs-title {
  margin: 4px 0 2px;
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 58px);
  letter-spacing: .3em;
  padding-left: .3em;
  color: #fff5dd;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .8), 0 0 46px rgba(242, 182, 44, .22);
  background: linear-gradient(100deg, #fff8e6 0%, #ffe6a8 40%, #fff8e6 55%, #f2c96b 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bs-shine 5.5s ease-in-out infinite;
  opacity: 0;
  animation: bs-rise .9s .2s ease both, bs-shine 5.5s 1s ease-in-out infinite;
}
@keyframes bs-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.bs-sub { font-size: 10.5px; letter-spacing: .5em; color: #c8c3b2; padding-left: .5em; opacity: 0; animation: bs-rise .9s .35s ease both; }
@keyframes bs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.bs-loading {
  width: min(360px, 74vw);
  margin-top: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: 0; animation: bs-rise .8s .5s ease both;
  transition: opacity .4s ease, transform .4s ease;
}
.bs-meter { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.bs-meter i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #d99a14, #ffd75e 60%, #fff3c4);
  box-shadow: 0 0 12px rgba(242, 182, 44, .8);
  transition: width .25s ease;
}
.bs-meter::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-150%) skewX(-20deg);
  animation: bs-sheen 2.4s 1s ease-in-out infinite;
}
@keyframes bs-sheen { 60%, 100% { transform: translateX(240%) skewX(-20deg); } }
.bs-pct-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.bs-pct { font-size: 20px; font-weight: 300; color: #ffe9b2; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bs-pct small { font-size: 10px; color: #9aa2a6; margin-left: 1px; }
.bs-status { font-size: 10px; letter-spacing: .18em; color: #b3bcbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bs-tip { font-size: 9px; letter-spacing: .12em; color: rgba(201, 176, 118, .6); min-height: 12px; }

.bs-start {
  position: relative;
  margin-top: 14px;
  min-width: 200px; min-height: 46px;
  padding: 11px 30px;
  border: 1px solid #ffe19a; border-radius: 2px;
  background: linear-gradient(135deg, #ffd75e, #f0b022 58%, #d99a14);
  color: #17130a; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .24em; text-indent: .24em;
  cursor: pointer; opacity: 0; transform: translateY(10px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(242, 182, 44, .25);
  transition: opacity .35s ease, transform .35s ease, filter .15s ease, box-shadow .2s ease;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.bs-start.is-ready { opacity: 1; transform: none; pointer-events: auto; animation: bs-breathe 2.4s ease-in-out infinite; }
.bs-start.is-ready:active { transform: scale(.97); }
.bs-start::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-180%) skewX(-20deg); pointer-events: none;
}
.bs-start.is-ready::after { animation: bs-sheen 2.8s .6s ease-in-out infinite; }
.bs-start:disabled { cursor: default; }
@keyframes bs-breathe { 0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 18px rgba(242, 182, 44, .2); } 50% { box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 34px rgba(242, 182, 44, .55); } }
.bs-hint { margin-top: 7px; font-size: 8.5px; letter-spacing: .16em; color: #97a0a4; opacity: 0; transition: opacity .4s ease; }
.bs-hint.is-ready { opacity: 1; }

/* 开场动画：点击开始后 */
.bs-root.is-starting .bs-loading,
.bs-root.is-starting .bs-hint { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.bs-root.is-starting .bs-content { animation: bs-content-out 1.9s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes bs-content-out {
  0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
  38% { transform: translateY(-2px) scale(1.03); opacity: 1; filter: blur(0); }
  62% { transform: translateY(-6px) scale(1.12); opacity: .9; filter: blur(1px); }
  100% { transform: translateY(-16px) scale(1.42); opacity: 0; filter: blur(7px); }
}
.bs-root.is-starting .bs-bg { animation: bs-bg-out 1.9s ease both; }
@keyframes bs-bg-out { 0% { transform: scale(1.02); opacity: 1; } 55% { transform: scale(1.07); opacity: .95; } 100% { transform: scale(1.18); opacity: 0; } }
.bs-burst {
  position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #fffdf2 0%, #ffe9a8 22%, rgba(242, 182, 44, .55) 42%, transparent 68%);
}
.bs-root.is-starting .bs-burst { animation: bs-burst 1.75s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes bs-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  30% { opacity: .9; transform: translate(-50%, -50%) scale(9); }
  60% { opacity: .85; transform: translate(-50%, -50%) scale(24); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(48); }
}
.bs-flash {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #fffdf3 0%, #ffe9a8 34%, rgba(242, 182, 44, 0) 70%);
}
.bs-root.is-starting .bs-flash { animation: bs-flash 1.9s ease-out both; }
@keyframes bs-flash { 0%, 42% { opacity: 0; } 58% { opacity: .96; } 100% { opacity: 0; } }
.bs-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.bs-root.is-starting .bs-lines { animation: bs-lines 1.9s ease-out both; }
@keyframes bs-lines { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }
.bs-lines i {
  position: absolute; left: 50%; top: 45%; width: 46vmax; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 178, .75), transparent);
  transform-origin: 0 50%;
}
.bs-skip {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 6; font-size: 9.5px; letter-spacing: .14em; color: rgba(220, 224, 214, .55);
  background: none; border: 0; padding: 6px 8px; cursor: pointer; display: none;
}
.bs-root.is-starting .bs-skip { display: block; }
@media (orientation: landscape) and (max-height: 480px) {
  .bs-content { width: min(520px, 76vw); }
  .bs-sigil-wrap { width: 76px; height: 76px; margin: 8px 0 2px; }
  .bs-sigil { width: 42px; height: 42px; font-size: 20px; }
  .bs-ring2 { inset: -10px; } .bs-ring3 { inset: -20px; }
  .bs-title { font-size: clamp(30px, 6vw, 42px); }
  .bs-sub { font-size: 9px; letter-spacing: .38em; }
  .bs-loading { margin-top: 10px; gap: 5px; }
  .bs-pct { font-size: 16px; }
  .bs-status { font-size: 9px; }
  .bs-start { margin-top: 10px; min-height: 38px; padding: 8px 24px; font-size: 13px; min-width: 176px; }
  .bs-tip { font-size: 8px; }
  .bs-hint { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-bg, .bs-stars::before, .bs-stars::after, .bs-aura, .bs-ring2, .bs-ring3, .bs-sigil, .bs-title, .bs-meter::after, .bs-start.is-ready { animation: none !important; }
}

/* ---------- 开场序章 ---------- */
.bs-prologue {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 46%, #0c171b 0%, #030608 72%);
  opacity: 0; pointer-events: none; text-align: center; padding: 20px;
}
.bs-root.is-starting .bs-prologue { animation: bs-pro 2.92s ease both; }
@keyframes bs-pro { 0%, 30% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }
.bs-prologue span {
  font-size: 10px; letter-spacing: .5em; color: #a8926a; padding-left: .5em;
  opacity: 0; transform: translateY(8px);
}
.bs-root.is-starting .bs-prologue span { animation: bs-rise .7s 1.1s ease both; }
.bs-prologue p {
  margin: 0; font-family: "STSong", "SimSun", serif; font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .18em; color: #efe6d2; text-shadow: 0 4px 20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(10px);
}
.bs-root.is-starting .bs-prologue p { animation: bs-rise .8s 1.5s ease both; }
.bs-prologue b {
  font-size: 10px; letter-spacing: .6em; color: #ffd75e; padding-left: .6em;
  text-shadow: 0 0 22px rgba(242, 182, 44, .65);
  opacity: 0; transform: translateY(8px);
}
.bs-root.is-starting .bs-prologue b { animation: bs-rise .8s 2s ease both, bs-pro-glow 1.2s 2.4s ease-in-out both; }
@keyframes bs-pro-glow { 0%, 100% { text-shadow: 0 0 18px rgba(242, 182, 44, .5); } 50% { text-shadow: 0 0 32px rgba(242, 182, 44, .95); } }
.bs-prologue::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff8e2 0%, #ffe9a8 26%, rgba(242, 182, 44, 0) 66%);
}
.bs-root.is-starting .bs-prologue::after { animation: bs-pro-flash 2.92s ease both; }
@keyframes bs-pro-flash { 0%, 82% { opacity: 0; } 91% { opacity: .92; } 100% { opacity: 0; } }
@media (orientation: landscape) and (max-height: 480px) {
  .bs-prologue p { font-size: 22px; }
  .bs-prologue { gap: 8px; }
}


/* ============ v9：按参考图重排的启动页（素材合成） ============ */
.bs-root { --boot-gold: #e8c37a; }
.bs-bg {
  background: url('assets/bg/bg-observatory-night.webp') center / cover no-repeat !important;
  filter: saturate(1.06) brightness(.92);
}
.bs-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(4, 10, 12, .05) 0%, rgba(4, 9, 11, .55) 62%, rgba(3, 6, 8, .9) 100%),
    linear-gradient(180deg, rgba(3, 7, 9, .35), transparent 30%, transparent 66%, rgba(3, 7, 9, .72));
}
.bs-content {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1px, .7vh, 6px);
  padding: max(6px, env(safe-area-inset-top)) 16px max(6px, env(safe-area-inset-bottom));
  text-align: center;
}
.bs-journey {
  width: min(280px, 34vw); height: auto; display: block;
  opacity: .92; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
}
.bs-emblem {
  width: clamp(42px, 10.5vh, 86px); height: auto; display: block;
  margin-top: 1px;
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(232, 195, 122, .18));
  animation: bs-emblem-in .9s .15s cubic-bezier(.2, .7, .3, 1) both;
}
.bs-title-art {
  width: min(340px, 42vw); height: auto; display: block;
  margin-top: -2px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(232, 195, 122, .14));
  animation: bs-rise .9s .3s ease both;
}
.bs-tagline {
  width: min(230px, 29vw); height: auto; display: block;
  opacity: .94; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .65));
  animation: bs-rise .8s .42s ease both;
}
.bs-loadline {
  display: flex; align-items: center; gap: clamp(6px, 1.2vw, 14px);
  width: min(560px, 74vw);
  margin-top: clamp(2px, 1.2vh, 9px);
  animation: bs-rise .8s .5s ease both;
}
.bs-status {
  flex: none; min-width: 74px; text-align: left;
  font-family: var(--font-ink); font-size: clamp(9px, 2.5vw, 12px);
  color: #e4d3ae; letter-spacing: .14em; white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.bs-line { position: relative; flex: 1; height: clamp(12px, 3.2vh, 20px); min-width: 0; display: flex; align-items: center; }
.bs-line-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .9; pointer-events: none; }
.bs-line i {
  position: absolute; left: 3%; top: 50%; z-index: 1;
  height: 2px; width: 0;
  background: linear-gradient(90deg, rgba(255, 226, 150, .1), #ffe9b0);
  box-shadow: 0 0 12px rgba(255, 215, 94, .85);
  transform: translateY(-50%);
  transition: width .12s linear;
}
.bs-pct { flex: none; display: flex; align-items: baseline; gap: 1px; font-family: var(--font-ink); color: var(--gold-bright); font-size: clamp(15px, 4.2vw, 22px); line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .65); }
.bs-pct b { font-weight: 400; font-variant-numeric: tabular-nums; }
.bs-pct small { font-size: 9px; color: #d9c9a5; letter-spacing: 0; }
.bs-tip {
  margin: 0; font-size: clamp(8px, 2.3vw, 11px);
  color: rgba(226, 211, 178, .66); letter-spacing: .22em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.bs-start {
  position: relative; width: min(250px, 31vw); height: clamp(38px, 9.6vh, 56px);
  margin-top: clamp(1px, .8vh, 6px);
  border: 0; background: none; padding: 0; cursor: pointer;
  opacity: .3; filter: grayscale(.55); transition: opacity .3s, filter .3s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.bs-start:disabled { cursor: default; }
.bs-start.is-ready { opacity: 1; filter: none; animation: boot-start-breathe 2.8s ease-in-out infinite; }
.bs-start:not(:disabled):active { transform: scale(.96); }
.bs-start-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 7px 18px rgba(0, 0, 0, .55)); }
.bs-start-text {
  position: relative; z-index: 1;
  font-family: "STKaiti", "KaiTi", "STSong", "SimSun", serif;
  font-size: clamp(19px, 3.6vw, 27px); font-weight: 700; letter-spacing: .18em;
  color: #2a1908; text-shadow: 0 1px 0 rgba(255, 246, 218, .55);
}
.bs-hint-img {
  width: min(300px, 38vw); height: auto; display: block;
  margin-top: 2px; opacity: 0; transition: opacity .5s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .7));
}
.bs-hint-img.is-ready { opacity: .95; animation: boot-hint-breathe 2.4s ease-in-out infinite; }
@keyframes boot-start-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes boot-hint-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes bs-emblem-in { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
@media (orientation: landscape) and (max-height: 460px) {
  .bs-journey { width: min(220px, 27vw); }
  .bs-emblem { width: clamp(34px, 8.6vh, 56px); }
  .bs-title-art { width: min(260px, 34vw); }
  .bs-tagline { width: min(180px, 24vw); }
  .bs-loadline { width: min(470px, 66vw); }
  .bs-start { width: min(200px, 26vw); height: clamp(34px, 8.6vh, 46px); }
  .bs-hint-img { width: min(230px, 30vw); }
  .bs-tip { display: none; }
}


/* v9b：按钮/徽记按参考图修正 */
.bs-start {
  clip-path: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  opacity: .32;
  width: min(260px, 31vw);
  height: clamp(42px, 10.5vh, 62px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-start.is-ready {
  opacity: 1;
}
.bs-start::after { display: none !important; }
.bs-start-bg {
  position: absolute; inset: -6% -4%; width: 108%; height: 112%;
  object-fit: fill;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(232, 195, 122, .16));
}
.bs-start-text {
  position: relative; z-index: 2;
  font-family: "STKaiti", "KaiTi", "STSong", "SimSun", serif;
  font-size: clamp(20px, 3.6vw, 28px);
  font-weight: 800;
  letter-spacing: .18em;
  text-indent: .18em;
  color: #241708;
  text-shadow: 0 1px 0 rgba(255, 244, 212, .55);
}
.bs-emblem {
  width: clamp(56px, 15vh, 104px) !important;
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 24px rgba(232, 195, 122, .22)) brightness(1.12) saturate(1.05) !important;
}
.bs-journey { width: min(250px, 31vw); opacity: .88; }
@media (orientation: landscape) and (max-height: 460px) {
  .bs-emblem { width: clamp(44px, 11.5vh, 64px) !important; }
  .bs-start { width: min(220px, 27vw); height: clamp(38px, 9.6vh, 52px); }
  .bs-start-text { font-size: clamp(18px, 3.2vw, 24px); }
  .bs-title-art { width: min(280px, 36vw); }
}

/* v9c：避免 flex 压缩图片/按钮 */
.bs-content > * { flex: 0 0 auto; }
.bs-content { overflow: hidden; }
.bs-start { flex: 0 0 auto !important; }
.bs-hint-img { flex: 0 0 auto; }
.bs-tip { flex: none; }

/* v9d：开始按钮强化（参考图金刷底 + 浓墨字） */
.bs-start { width: min(252px, 30vw) !important; height: clamp(46px, 12vh, 64px) !important; margin-top: clamp(2px, 1vh, 7px) !important; }
.bs-start-bg { inset: -12% -7% !important; width: 114% !important; height: 124% !important; filter: brightness(1.16) saturate(1.06) drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(232,195,122,.18)) !important; }
.bs-start-text { font-size: clamp(22px, 4vw, 30px) !important; color: #201304 !important; text-shadow: 0 1px 0 rgba(255, 245, 210, .7), 0 0 14px rgba(255, 225, 150, .35) !important; }
.bs-start.is-ready { filter: drop-shadow(0 0 18px rgba(232,195,122,.28)); }
.bs-hint-img { width: min(260px, 33vw) !important; }
@media (orientation: landscape) and (max-height: 460px) {
  .bs-start { width: min(216px, 26vw) !important; height: clamp(42px, 10.8vh, 52px) !important; }
  .bs-start-text { font-size: clamp(19px, 3.4vw, 25px) !important; }
}

/* v9e：启动页统一（官方 LOGO + 官方祥云角饰，保留原动效结构） */
.bs-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bs-cloud-l,
.bs-cloud-r {
  position: absolute;
  bottom: -2px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .32;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(255, 226, 160, .18));
}
.bs-cloud-l { left: -2%; width: 38%; aspect-ratio: 525 / 75; background-image: url('assets/official/cloud-left.png'); }
.bs-cloud-r { right: -2%; width: 52%; aspect-ratio: 995 / 96; background-image: url('assets/official/cloud-right.png'); }
.bs-title-art { width: min(320px, 38vw); margin-top: 3px; }
@media (orientation: landscape) and (max-height: 460px) {
  .bs-title-art { width: min(292px, 34vw); }
  .bs-cloud-l { width: 30%; }
  .bs-cloud-r { width: 42%; }
}


/* ===== 启动页收尾：去掉云饰、整理层级、开始按钮清晰 ===== */
.bs-clouds { display: none !important; }
.bs-content { gap: clamp(2px, 1vh, 8px) !important; }
.bs-emblem { width: clamp(40px, 9.5vh, 72px) !important; opacity: .95; }
.bs-title-art { width: min(320px, 40vw) !important; filter: drop-shadow(0 8px 22px rgba(0,0,0,.7)) !important; }
.bs-tagline { width: min(210px, 26vw) !important; }
.bs-tip { margin-top: 1px !important; }
.bs-start {
  width: min(248px, 30vw) !important; height: clamp(44px, 11vh, 58px) !important;
  background: linear-gradient(180deg, #f6dc9f 0%, #e6bd6d 45%, #b98a3e 100%) !important;
  border: 1px solid #ffe6b0 !important; border-radius: 4px !important;
  box-shadow: 0 4px 0 #6f4c1c, 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 #fff2cf !important;
  clip-path: none !important; opacity: .32; filter: grayscale(.4);
  display: inline-flex !important; align-items: center; justify-content: center;
  margin-top: clamp(3px, 1.2vh, 9px) !important;
}
.bs-start.is-ready { opacity: 1 !important; filter: none !important; }
.bs-start .bs-start-bg { display: none !important; }
.bs-start .bs-start-text {
  position: static !important; z-index: 2;
  font-family: "STKaiti","KaiTi","STSong","SimSun",serif !important;
  font-size: clamp(20px, 3.8vw, 28px) !important; font-weight: 800;
  letter-spacing: .2em; text-indent: .2em; color: #2a1908 !important;
  text-shadow: 0 1px 0 rgba(255,246,218,.55) !important;
}
.bs-start::after { display: none !important; }
.bs-hint-img { width: min(250px, 32vw) !important; margin-top: 3px !important; }


/* 启动页：底部提示固定在安全位置，不再被裁切 */
.bs-hint-img { position: absolute !important; left: 50% !important; bottom: max(6px, env(safe-area-inset-bottom)) !important; transform: translateX(-50%) !important; margin: 0 !important; width: min(240px, 30vw) !important; }
.bs-content { padding-bottom: 28px !important; }

.bs-hint-img { display: none !important; }


/* ===== 启动界面整体居中（水平+垂直） ===== */
.bs-content {
  position: absolute !important; inset: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important;
  padding: clamp(10px, 3vh, 26px) 16px !important;
  gap: clamp(3px, 1.1vh, 9px) !important;
  box-sizing: border-box;
}
.bs-content > * { flex: 0 0 auto !important; margin-left: auto !important; margin-right: auto !important; }
.bs-title-art { margin-inline: auto !important; }
.bs-loadline { width: min(560px, 72vw) !important; justify-content: center !important; }
.bs-start { margin-inline: auto !important; }
.bs-tip { text-align: center !important; }
.bs-journey, .bs-emblem, .bs-tagline { margin-inline: auto !important; }

/* 启动内容铺满并真正居中 */
.bs-content { width: 100% !important; max-width: none !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; }

/* 开始游戏页整体上移：按钮不贴底，也不与进度条重叠 */
.bs-content { transform: translateY(-18px); }
@media (orientation: landscape) and (max-height: 550px) {
  .bs-content { transform: translateY(-28px); }
}


/* ==== home-view.css ==== */
/* ============================================================
   星灯破晓 · 大厅（返工版：清晰分区，不重叠、不串字）
   左：立绘 + 官方侧边卷轴装裱 + 角色切换 + 官方任务中心面板 + 进度笺
   右：自绘资源栏（单份动态数值）/ 角色信息 / 属性 / 技能 /
       出战 + 四入口 / 底栏；所有可见区块均为可点击按钮
   烤死数字的素材（resource-bar / stat-* / sound2 / sound3）不再整张使用；
   仅复用无文字的装饰件：task-panel、side-deco、cloud-*、role-name 轴头、
   skill-desc2 图标与轴头、btn-battle 轴头与金徽记、entry-* 图标局部。
   ============================================================ */
.lobby-root {
  --lb-gold: var(--gold, #e8c37a);
  --lb-gold-bright: var(--gold-bright, #ffdf9a);
  --lb-gold-deep: var(--gold-deep, #a87b2f);
  --lb-seal: var(--seal, #b33a2b);
  --lb-paper: var(--paper, #f0e4c9);
  --lb-paper-grad: linear-gradient(180deg, #f5ecd8 0%, #ecddbe 52%, #e0cca5 100%);
  --lb-ink: #2b1c0b;
  --lb-ink-soft: #6f5626;
  --lb-serif: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
  --lb-ui: var(--font-ui, "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif);
  --lb-red: #a3291f;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding:
    max(3px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  color: #f4f2ea;
  font-family: var(--lb-ui);
  background: #060b0d;
}
.lobby-root * { box-sizing: border-box; }
.lobby-root :where(button, a) {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lobby-root :where(button, a):active { transform: translateY(1px); }
.lobby-root :where(button, a):focus-visible { outline: 2px solid var(--lb-gold-bright); outline-offset: 2px; }
.lobby-root > .ink-header { flex: none; }
.lobby-root .gi { vertical-align: middle; }
.lp-glyph { font-style: normal; }

/* ---------- 背景 ---------- */
.lobby-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(96deg, rgba(3, 6, 9, .9) 0%, rgba(6, 11, 15, .32) 46%, rgba(4, 8, 11, .84) 100%),
    linear-gradient(0deg, rgba(3, 6, 9, .96) 0%, transparent 46%),
    url('assets/bg/bg-night-lake.webp') center / cover no-repeat;
  animation: lb-bg-in 1.2s ease-out both;
}
@keyframes lb-bg-in { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
.lb-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 74% at 20% 34%, rgba(232, 195, 122, .12), transparent 64%),
    radial-gradient(ellipse 40% 60% at 88% 12%, rgba(242, 182, 44, .1), transparent 62%);
}
.lb-glow {
  position: absolute;
  left: 10%;
  top: 8%;
  width: 34%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242, 182, 44, .16), rgba(242, 182, 44, .04) 46%, transparent 70%);
  filter: blur(18px);
  animation: lb-glow 5.5s ease-in-out infinite;
}
@keyframes lb-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.lb-cloud {
  position: absolute;
  bottom: -2px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .42;
  mix-blend-mode: screen;
}
.lb-cloud-left { left: -3%; width: 30%; aspect-ratio: 525 / 75; background-image: url('assets/official/cloud-left.png'); }
.lb-cloud-right { right: -2%; width: 40%; aspect-ratio: 995 / 96; background-image: url('assets/official/cloud-right.png'); }
.lb-sparks {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255, 236, 187, .8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 32% 12%, rgba(255, 236, 187, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 20%, rgba(255, 236, 187, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 10%, rgba(255, 236, 187, .4) 0 1px, transparent 1.6px);
  animation: lb-twinkle 6.5s ease-in-out infinite alternate;
}
@keyframes lb-twinkle { from { opacity: .3; } to { opacity: .85; } }

/* ---------- 主体两栏 ---------- */
.lobby-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 10px;
}

/* ================= 左：人物场景 ================= */
.lobby-character {
  position: relative;
  min-width: 0;
  min-height: 0;
  animation: lb-char-in .8s .08s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes lb-char-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lobby-orbit {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: min(86%, 292px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(232, 195, 122, .16);
  pointer-events: none;
  animation: lb-orbit 40s linear infinite;
}
.lobby-orbit::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(232, 195, 122, .18);
  border-radius: 50%;
}
.lobby-orbit span {
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(232, 195, 122, .1);
  border-radius: 50%;
}
.lobby-orbit i {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  transform: rotate(45deg);
  background: var(--lb-gold-bright);
  box-shadow: 0 0 12px rgba(255, 223, 154, .9);
}
@keyframes lb-orbit { to { transform: translateX(-50%) rotate(360deg); } }
.lobby-figure {
  position: absolute;
  left: 54%;
  bottom: 96px;
  z-index: 2;
  width: min(84%, 232px);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--px, 0px)), var(--py, 0px));
  transition: transform .2s ease-out;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
}
.lobby-figure .chibi {
  display: block;
  width: 100%;
  height: 100%;
  animation: lb-breath 6s ease-in-out infinite;
  transform-origin: 50% 92%;
}
@keyframes lb-breath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.008); } }
.lobby-root.is-quiet .lobby-figure .chibi {
  animation: lb-swap .34s cubic-bezier(.2, .7, .3, 1) both, lb-breath 6s .34s ease-in-out infinite;
}
@keyframes lb-swap { from { opacity: .25; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* 官方侧边装饰卷轴（纯装饰，不含文字） */
.lobby-verse {
  position: absolute;
  left: -4px;
  bottom: 100px;
  z-index: 1;
  width: 44px;
  aspect-ratio: 155 / 541;
  max-height: 60%;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}
.lv-frame {
  position: absolute;
  inset: 0;
  background: url('assets/official/side-deco.png') center / 100% 100% no-repeat;
}

/* 进度笺（可点 → 篇章） */
.lobby-progress {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(232, 195, 122, .34);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(20, 14, 9, .86), rgba(9, 10, 10, .72));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .1);
  transition: border-color .16s, filter .16s;
}
.lobby-progress:hover { border-color: rgba(255, 223, 154, .7); filter: brightness(1.1); }
.lp-mark { font-size: 10px; color: var(--lb-gold-bright); text-shadow: 0 0 8px rgba(255, 223, 154, .8); }
.lobby-progress b { font-family: var(--lb-serif); font-size: 14px; line-height: 1; color: var(--lb-gold-bright); white-space: nowrap; }
.lobby-progress b i { font-style: normal; font-size: 9px; color: rgba(201, 192, 168, .7); }
.lobby-progress small { font-size: 8px; letter-spacing: .06em; color: rgba(201, 192, 168, .72); white-space: nowrap; }

/* 角色切换竖列 */
.lobby-char-rail {
  position: absolute;
  top: 34px;
  right: 0;
  bottom: 100px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 3px;
  border: 1px solid rgba(232, 195, 122, .22);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(16, 12, 8, .72), rgba(8, 10, 10, .58));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08), 0 6px 16px rgba(0, 0, 0, .4);
}
.lcr-title {
  flex: none;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(232, 195, 122, .18);
  font-family: var(--lb-serif);
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(232, 195, 122, .8);
}
.lobby-rail-item {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  opacity: .78;
  transition: opacity .16s, transform .16s;
}
.lobby-rail-item:hover { opacity: 1; transform: translateY(-1px); }
.lobby-rail-art {
  width: 22px;
  height: 22px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(232, 195, 122, .3);
  background: radial-gradient(circle at 50% 32%, var(--accent, #8a7a4f), #141a1e 82%);
}
.lobby-rail-art .chibi { width: 100%; height: 100%; display: block; }
.lobby-rail-item.is-active { opacity: 1; }
.lobby-rail-item.is-active .lobby-rail-art {
  border-color: var(--lb-gold-bright);
  box-shadow: 0 0 10px rgba(255, 223, 154, .8);
}
.lobby-rail-item.is-locked .lobby-rail-art { filter: grayscale(1) brightness(.5); }
.lobby-rail-item.is-locked { opacity: .5; }

/* 官方任务中心（task-panel；烤死文字整块同色遮罩 + 单份动态文字） */
.lobby-mission {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 7;
  display: block;
  width: 100%;
  aspect-ratio: 665 / 169;
  background: url('assets/official/task-panel.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45));
  transition: transform .16s, filter .16s;
}
.lobby-mission:hover { transform: translateY(-2px); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)) brightness(1.04); }
.lm-copy {
  position: absolute;
  left: 20%;
  top: 22%;
  width: 40%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 1px 3px 1px 2px;
  text-align: left;
  background: linear-gradient(180deg, #f7ecd9, #f5e9d4 62%, #f2e5cd);
  border-radius: 2px;
  box-shadow: 0 0 8px 4px #f6ebd8;
  -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 50%, #000 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 92% at 50% 50%, #000 76%, transparent 100%);
  overflow: hidden;
}
.lm-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 6.5px/1 var(--lb-ui);
  letter-spacing: .1em;
  color: #6b5530;
}
.lm-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--lb-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lb-ink);
}
.lm-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 7px;
  letter-spacing: .02em;
  color: #7a6236;
}
.lm-arrow {
  position: absolute;
  right: 4.5%;
  bottom: 16%;
  font-size: 16px;
  font-style: normal;
  color: #5b4524;
}

/* ================= 右：大厅面板 ================= */
.lobby-dashboard {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: lb-panel-in .7s .14s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes lb-panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---- 资源栏：自绘干净框，动态数值单份 ---- */
.lobby-resbar {
  flex: none;
  height: 38px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.lobby-mats,
.lobby-ticket {
  display: flex;
  align-items: center;
  border: 1px solid rgba(168, 123, 47, .65);
  border-radius: 2px;
  background:
    radial-gradient(110% 80% at 18% 0%, rgba(255, 255, 255, .5), transparent 58%),
    repeating-linear-gradient(0deg, rgba(140, 110, 60, .045) 0 1px, transparent 1px 3px),
    var(--lb-paper-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 0 18px rgba(168, 123, 47, .13), 0 4px 10px rgba(0, 0, 0, .35);
  transition: filter .16s, border-color .16s;
}
.lobby-mats:hover,
.lobby-ticket:hover { filter: brightness(1.05); border-color: rgba(168, 123, 47, .95); }
.lobby-mats {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-between;
  gap: 4px;
  padding: 0 10px;
}
.lobby-mats .mat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.lobby-mats .mat-icon { display: inline-flex; }
.lobby-mats .mat-icon .gi { width: 15px; height: 15px; }
.lobby-mats .mat em { font-style: normal; font-size: 9px; color: var(--lb-ink-soft); }
.lobby-mats .mat b { font-family: var(--lb-serif); font-size: 13px; line-height: 1; color: #241708; font-weight: 700; }
.lobby-ticket {
  flex: none;
  width: 96px;
  justify-content: center;
  gap: 4px;
}
.lobby-ticket .lt-icon .gi { width: 16px; height: 16px; color: #b8862f; }
.lobby-ticket em { font-style: normal; font-size: 9px; color: var(--lb-ink-soft); }
.lobby-ticket b { font-family: var(--lb-serif); font-size: 13px; color: #241708; font-weight: 700; }
.lobby-sound {
  flex: none;
  width: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 195, 122, .5);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 226, 168, .16), transparent 52%),
    linear-gradient(160deg, #5c3a1c 0%, #43280f 58%, #2d1a09 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 190, .22), 0 4px 10px rgba(0, 0, 0, .4);
  color: var(--lb-gold-bright);
  font-family: var(--lb-serif);
  font-size: 11px;
  letter-spacing: .04em;
  transition: filter .16s, border-color .16s;
}
.lobby-sound:hover { filter: brightness(1.12); border-color: rgba(255, 223, 154, .8); }
.lobby-sound.is-off { color: #a99a7c; border-color: rgba(160, 150, 130, .45); }
.lobby-sound.is-off .lobby-sound-text::before { content: "✕ "; font-size: 9px; }

/* ---- 角色信息行（可点 → 伙伴） ---- */
.lobby-identity {
  position: relative;
  flex: none;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 62px 0 18px;
  border-top: 1px solid rgba(168, 123, 47, .7);
  border-bottom: 1px solid rgba(168, 123, 47, .7);
  background:
    radial-gradient(120% 80% at 22% 0%, rgba(255, 255, 255, .5), transparent 55%),
    repeating-linear-gradient(0deg, rgba(140, 110, 60, .04) 0 1px, transparent 1px 3px),
    var(--lb-paper-grad);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 26px rgba(168, 123, 47, .12);
  overflow: hidden;
  text-align: left;
  transition: filter .16s;
}
.lobby-identity:hover { filter: brightness(1.05); }
.li-rod {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 13px;
  background-image: url('assets/official/role-name.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left center;
  pointer-events: none;
}
.li-rod-left { left: 0; }
.li-rod-right { right: 0; transform: scaleX(-1); }
.li-inner {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 8px;
}
.li-inner strong {
  grid-column: 1;
  font-family: var(--lb-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .08em;
  color: #241708;
  white-space: nowrap;
}
.li-inner em {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font: 700 8.5px/1 var(--lb-ui);
  letter-spacing: .16em;
  color: var(--lb-ink-soft);
}
.li-inner small {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.5px;
  letter-spacing: .03em;
  color: var(--lb-ink-soft);
}
.li-more {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--lb-serif);
  font-size: 10px;
  letter-spacing: .04em;
  color: #8a6420;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- 属性（每个数值只有一份，均可点 → 伙伴） ---- */
.lobby-stats {
  flex: none;
  height: 40px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}
.lobby-stat,
.lobby-skill-lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(168, 123, 47, .62);
  border-radius: 2px;
  background:
    radial-gradient(110% 80% at 20% 0%, rgba(255, 255, 255, .45), transparent 60%),
    var(--lb-paper-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 14px rgba(168, 123, 47, .14), 0 3px 7px rgba(0, 0, 0, .32);
  transition: filter .16s, border-color .16s;
}
.lobby-stat { flex: 1 1 0; min-width: 0; }
.lobby-skill-lv { flex: none; width: 60px; }
.lobby-stat:hover,
.lobby-skill-lv:hover { filter: brightness(1.06); border-color: rgba(168, 123, 47, .95); }
.lobby-stat i,
.lobby-skill-lv i {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: .08em;
  color: #8a6a35;
  white-space: nowrap;
}
.lobby-stat b,
.lobby-skill-lv b {
  font-family: var(--lb-serif);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #241708;
  white-space: nowrap;
}

/* ---- 技能条（图标取自 skill-desc2，文字单份动态；可点 → 伙伴） ---- */
.lobby-skill {
  position: relative;
  flex: none;
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-top: 1px solid rgba(168, 123, 47, .65);
  border-bottom: 1px solid rgba(168, 123, 47, .65);
  background: var(--lb-paper-grad);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .32), inset 0 0 20px rgba(168, 123, 47, .12);
  overflow: hidden;
  text-align: left;
  transition: filter .16s;
}
.lobby-skill:hover { filter: brightness(1.04); }
.lobby-skill::before,
.lobby-skill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background-image: url('assets/official/skill-desc2.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 9% center;
  pointer-events: none;
}
.lobby-skill::before { left: 0; }
.lobby-skill::after { right: 0; transform: scaleX(-1); }
.ls-icon {
  flex: none;
  width: 22px;
  height: 22px;
  background-image: url('assets/official/skill-desc2.png');
  background-repeat: no-repeat;
  background-size: 195px auto;
  background-position: -29px -12px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.ls-tag {
  flex: none;
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  background: linear-gradient(160deg, #b23a2a, #8a2418);
  color: #ffeccd;
  font-family: var(--lb-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.ls-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .02em;
  color: #3a2c16;
}

/* ---- 出战 + 四入口 ---- */
.lobby-menu {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 6px;
}
.lobby-battle {
  position: relative;
  flex: none;
  width: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 10px 12px 20px;
  overflow: hidden;
  border: 2px solid #e6b877;
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 214, 150, .24), transparent 55%),
    linear-gradient(180deg, #bb3323 0%, #a3261a 52%, #871c12 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .5),
    inset 0 0 0 2px rgba(232, 195, 122, .4),
    inset 0 0 0 5px rgba(86, 12, 6, .85);
  outline: 1px solid rgba(232, 195, 122, .35);
  outline-offset: -8px;
  color: #ffe6ad;
  transition: transform .16s, filter .16s, box-shadow .16s;
}
.lobby-battle::before,
.lobby-battle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  background-image: url('assets/official/btn-battle.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 30% center;
  pointer-events: none;
  z-index: 2;
}
.lobby-battle::before { left: 0; }
.lobby-battle::after { right: 0; transform: scaleX(-1); }
.lobby-battle:hover { transform: translateY(-2px); filter: brightness(1.06); }
.lobby-battle:active { transform: translateY(0) scale(.99); }
.lb-kicker {
  font-family: var(--lb-ui);
  font-size: 6.5px;
  letter-spacing: .12em;
  color: rgba(255, 228, 172, .82);
  white-space: nowrap;
}
.lb-emblem {
  flex: none;
  width: 34px;
  height: 38px;
  margin: 1px 0 -2px;
  background-image: url('assets/official/btn-battle.png');
  background-repeat: no-repeat;
  background-size: 138px auto;
  background-position: -56px -34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 52%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 52%, transparent 76%);
  filter: drop-shadow(0 2px 6px rgba(70, 8, 4, .55));
}
.lb-main { display: flex; align-items: baseline; gap: 6px; }
.lb-main strong {
  font-family: var(--lb-serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .12em;
  color: #ffe27f;
  text-shadow: 0 2px 0 rgba(90, 14, 6, .9), 0 0 18px rgba(255, 200, 80, .4);
}
.lb-main small { font-size: 8px; letter-spacing: .08em; color: rgba(255, 230, 180, .82); white-space: nowrap; }
.lb-stage {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 214, 140, .32);
}
.lb-stage i { font-style: normal; font-size: 8px; color: rgba(255, 224, 170, .72); white-space: nowrap; }
.lb-stage b {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--lb-serif);
  font-size: 10px;
  font-weight: 700;
  color: #ffe9b8;
}
.lb-stage em { font-style: normal; font-size: 11px; color: #ffd980; }
.lobby-entries {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}
.lobby-entry {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(150, 58, 40, .9);
  border-radius: 2px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(120, 52, 30, .5), transparent 62%),
    linear-gradient(160deg, #33180f 0%, #200e09 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 120, .08), inset 0 0 18px rgba(0, 0, 0, .5), 0 5px 12px rgba(0, 0, 0, .4);
  transition: transform .16s, border-color .16s, filter .16s;
}
.lobby-entry::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(196, 104, 62, .22);
  pointer-events: none;
}
.lobby-entry::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(214, 128, 74, .6);
  border-right: 2px solid rgba(214, 128, 74, .6);
  pointer-events: none;
}
.lobby-entry:hover { transform: translateY(-1px); border-color: #d99a5e; filter: brightness(1.08); }
.le-icon {
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(214, 160, 96, .5);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(70, 22, 10, .8), 0 3px 7px rgba(0, 0, 0, .5);
}
.lobby-entry.is-roster .le-icon {
  background-image: url('assets/official/entry-roster.png');
  background-size: 226% 103%;
  background-position: 88.5% 66%;
}
.lobby-entry.is-tasks .le-icon {
  background-image: url('assets/official/entry-tasks.png');
  background-size: 264% 113.5%;
  background-position: 100% 61.5%;
}
.lobby-entry.is-seeker .le-icon {
  background-image: url('assets/official/entry-seeker.png');
  background-size: 216% 110%;
  background-position: 94% 55%;
}
.lobby-entry.is-inventory .le-icon {
  background-image: url('assets/official/entry-inventory.png');
  background-size: 278% 125%;
  background-position: 100% 33%;
}
.le-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.le-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--lb-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #f8ecd2;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .8);
}
.le-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7.5px;
  letter-spacing: .1em;
  color: rgba(214, 186, 140, .72);
}
.le-arrow { flex: none; font-style: normal; font-size: 13px; color: rgba(232, 195, 122, .8); }
.le-badge {
  position: absolute;
  right: 4px;
  top: 3px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--lb-seal);
  border: 1px solid #ffd7a0;
  color: #fff3dc;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(179, 58, 43, .8);
}
.lobby-dash-foot {
  position: relative;
  z-index: 3;
  flex: none;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 8.5px;
  color: rgba(201, 192, 168, .72);
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}
.lobby-dash-foot > span { margin-right: auto; letter-spacing: .06em; color: rgba(201, 192, 168, .5); }
.lobby-dash-foot button,
.lobby-dash-foot a {
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(232, 195, 122, .25);
  color: #d9c9a5;
  font-family: var(--lb-serif);
  letter-spacing: .04em;
  transition: color .16s, border-color .16s;
}
.lobby-dash-foot button:hover,
.lobby-dash-foot a:hover { color: var(--lb-gold-bright); border-color: var(--lb-gold-bright); }

/* ================= 矮屏横屏（844×390 主目标） ================= */
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-root { padding: max(2px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 2px; }
  .lobby-content { gap: 8px; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .lobby-orbit { bottom: 60px; width: min(84%, 236px); }
  .lobby-figure { bottom: 92px; width: min(84%, 218px); }
  .lobby-verse { width: 38px; bottom: 90px; }
  .lobby-progress { height: 23px; padding: 0 7px 0 6px; gap: 4px; }
  .lobby-progress b { font-size: 12.5px; }
  .lobby-progress small { font-size: 7px; }
  .lobby-char-rail { top: 30px; bottom: 90px; gap: 2px; padding: 3px 2px; }
  .lobby-rail-item { width: 21px; height: 21px; }
  .lobby-rail-art { width: 19px; height: 19px; }
  .lcr-title { display: none; }
  .lm-copy small { font-size: 6.5px; }
  .lm-copy strong { font-size: 11.5px; }
  .lm-copy em { font-size: 7px; }
  .lm-arrow { font-size: 14px; }
  .lobby-resbar { height: 34px; gap: 5px; }
  .lobby-mats { padding: 0 8px; gap: 3px; }
  .lobby-mats .mat { gap: 3px; }
  .lobby-mats .mat-icon .gi { width: 13px; height: 13px; }
  .lobby-mats .mat em { font-size: 8px; }
  .lobby-mats .mat b { font-size: 11.5px; }
  .lobby-ticket { width: 86px; gap: 3px; }
  .lobby-ticket .lt-icon .gi { width: 14px; height: 14px; }
  .lobby-ticket em { font-size: 8px; }
  .lobby-ticket b { font-size: 11.5px; }
  .lobby-sound { width: 68px; font-size: 10px; }
  .lobby-identity { height: 36px; padding: 0 54px 0 15px; }
  .li-rod { width: 11px; }
  .li-inner strong { font-size: 17px; }
  .li-inner em { font-size: 8px; }
  .li-inner small { font-size: 7.5px; }
  .li-more { right: 15px; font-size: 9px; }
  .lobby-stats { height: 36px; gap: 4px; }
  .lobby-stat i, .lobby-skill-lv i { font-size: 7px; }
  .lobby-stat b, .lobby-skill-lv b { font-size: 12.5px; }
  .lobby-skill-lv { width: 54px; }
  .lobby-skill { height: 27px; padding: 0 13px; gap: 6px; }
  .ls-icon { width: 20px; height: 20px; background-size: 177px auto; background-position: -26px -11px; }
  .ls-tag { font-size: 9px; padding: 0 6px; }
  .ls-desc { font-size: 8.5px; }
  .lobby-menu { gap: 5px; }
  .lobby-battle { width: 150px; padding: 7px 10px 18px; }
  .lb-kicker { font-size: 6px; }
  .lb-emblem { width: 30px; height: 34px; background-size: 124px auto; background-position: -50px -30px; }
  .lb-main strong { font-size: 25px; }
  .lb-main small { font-size: 7.5px; }
  .lb-stage { left: 8px; right: 8px; bottom: 4px; }
  .lb-stage b { font-size: 9px; }
  .lobby-entries { gap: 4px; }
  .lobby-entry { gap: 5px; padding: 2px 5px; }
  .le-icon { width: 34px; height: 34px; }
  .le-text strong { font-size: 13.5px; }
  .le-text small { font-size: 6.5px; }
  .le-arrow { font-size: 11px; }
  .lobby-dash-foot { height: 13px; font-size: 7.5px; gap: 10px; }
}

/* ================= 667×375 兜底（更窄） ================= */
@media (max-width: 720px) {
  .lobby-content { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 7px; }
  .lobby-figure { width: min(86%, 190px); bottom: 84px; }
  .lobby-orbit { width: min(86%, 204px); bottom: 55px; }
  .lobby-verse { display: none; }
  .lobby-progress { height: 21px; }
  .lobby-progress b { font-size: 11.5px; }
  .lobby-progress small { font-size: 6.5px; }
  .lobby-char-rail { top: 27px; bottom: 84px; }
  .lobby-rail-item { width: 19px; height: 19px; }
  .lobby-rail-art { width: 17px; height: 17px; }
  .lm-copy small { display: none; }
  .lm-copy strong { font-size: 10px; }
  .lm-copy em { font-size: 6.5px; }
  .lobby-resbar { height: 31px; gap: 4px; }
  .lobby-mats { padding: 0 7px; }
  .lobby-mats .mat-icon .gi { width: 12px; height: 12px; }
  .lobby-mats .mat em { font-size: 7.5px; }
  .lobby-mats .mat b { font-size: 10.5px; }
  .lobby-ticket { width: 78px; }
  .lobby-ticket .lt-icon .gi { width: 13px; height: 13px; }
  .lobby-ticket em { font-size: 7.5px; }
  .lobby-ticket b { font-size: 10.5px; }
  .lobby-sound { width: 60px; font-size: 9.5px; }
  .lobby-identity { height: 33px; padding: 0 48px 0 13px; }
  .li-rod { width: 10px; }
  .li-inner strong { font-size: 15.5px; }
  .li-inner em { display: none; }
  .li-inner small { font-size: 7px; }
  .li-more { right: 13px; font-size: 8.5px; }
  .lobby-stats { height: 33px; gap: 3px; }
  .lobby-stat i, .lobby-skill-lv i { font-size: 6.5px; }
  .lobby-stat b, .lobby-skill-lv b { font-size: 11.5px; }
  .lobby-skill-lv { width: 48px; }
  .lobby-skill { height: 25px; padding: 0 11px; gap: 5px; }
  .ls-icon { width: 18px; height: 18px; background-size: 160px auto; background-position: -24px -10px; }
  .ls-tag { font-size: 8px; padding: 0 5px; max-width: 30%; }
  .ls-desc { font-size: 7.5px; }
  .lobby-menu { gap: 4px; }
  .lobby-battle { width: 128px; padding: 6px 8px 16px; }
  .lb-kicker { font-size: 5.5px; letter-spacing: .06em; }
  .lb-emblem { width: 25px; height: 28px; background-size: 104px auto; background-position: -42px -25px; }
  .lb-main strong { font-size: 21px; }
  .lb-main small { font-size: 6.5px; }
  .lb-stage { left: 7px; right: 7px; }
  .lb-stage i { font-size: 6.5px; }
  .lb-stage b { font-size: 7.5px; }
  .lobby-entry { gap: 4px; padding: 2px 4px; }
  .le-icon { width: 29px; height: 29px; }
  .le-text strong { font-size: 11.5px; }
  .le-text small { font-size: 5.5px; }
  .le-arrow { display: none; }
  .lobby-dash-foot { height: 12px; font-size: 7px; gap: 8px; }
  .lobby-dash-foot > span { display: none; }
}

/* ================= 竖屏兜底（正式入口会旋转 iframe） ================= */
@media (orientation: portrait) and (max-width: 760px) {
  .lobby-root { height: auto; min-height: 100dvh; overflow: visible; overflow-x: hidden; padding: 8px 12px 14px; gap: 6px; }
  .lobby-root > .ink-header { min-height: 78px; }
  .lobby-content { display: flex; flex-direction: column; gap: 10px; }
  .lobby-character { height: clamp(300px, 46vh, 420px); flex: none; }
  .lobby-figure { width: min(64%, 250px); bottom: 74px; }
  .lobby-orbit { width: min(74%, 310px); bottom: 34px; }
  .lobby-verse { display: none; }
  .lobby-progress { top: 2px; }
  .lobby-char-rail { top: 34px; bottom: 92px; }
  .lobby-dashboard { min-height: 470px; }
  .lobby-resbar { height: 38px; }
  .lobby-identity { height: 40px; }
  .lobby-stats { height: 40px; }
  .lobby-skill { height: 30px; }
  .lobby-menu { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-background, .lobby-character, .lobby-dashboard, .lobby-orbit,
  .lobby-figure .chibi, .lb-glow, .lb-sparks { animation: none !important; }
}







/* ===== 大厅减负：去掉重复装饰与拥挤元素，留出呼吸空间 ===== */
.lobby-mission { display: none !important; }          /* 任务入口已在右侧，删除左下重复任务面板 */
.lobby-dash-foot { display: none !important; }       /* 指南/邀约已在顶栏，删除页脚重复入口 */
.lobby-verse { display: none !important; }           /* 左侧多余挂饰 */
.lobby-character .lobby-cloud, .lobby-clouds, .lobby-bg-cloud { display: none !important; }
.lobby-content { gap: 10px !important; }
.lobby-character { padding-right: 6px; }
.lobby-dashboard { gap: clamp(6px, 1.6vh, 11px) !important; padding-right: 4px; }
.lobby-resbar { gap: 7px !important; }
.lobby-identity { padding: 7px 10px !important; }
.lobby-stats { gap: 7px !important; }
.lobby-skill { padding: 7px 9px !important; }
.lobby-menu { gap: clamp(8px, 2vh, 13px) !important; }
.lobby-entries { gap: clamp(7px, 1.6vh, 11px) !important; }
.lobby-battle { padding-bottom: 10px !important; }
.lobby-battle .lb-sub { margin-top: 3px !important; }
.lobby-figure { max-height: 76vh !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-content { gap: 8px !important; }
  .lobby-dashboard { gap: 7px !important; }
  .lobby-menu { gap: 8px !important; }
  .lobby-entries { gap: 7px !important; }
}


/* 出战面板：去掉多余小标题，底部不再被裁切 */
.lobby-battle { overflow: hidden; padding: 9px 11px 9px !important; }
.lobby-battle .lb-kicker { display: none !important; }
.lobby-battle .lb-emblem { width: 24px !important; height: 24px !important; margin-bottom: 2px !important; }
.lobby-battle .lb-main strong { font-size: clamp(20px, 4.4vh, 27px) !important; }
.lobby-battle .lb-main small { font-size: 8px !important; }
.lobby-battle .lb-stage { margin-top: 4px !important; padding-top: 4px !important; }
.lobby-battle .lb-stage i { font-size: 7px !important; }
.lobby-battle .lb-stage b { font-size: 11px !important; }

/* 出战+四入口固定高度，彻底避免底部文字被裁 */
.lobby-menu { flex: 0 0 auto !important; height: clamp(126px, 33vh, 152px) !important; min-height: 0 !important; align-items: stretch; }
.lobby-battle, .lobby-entries { height: 100% !important; }
.lobby-content { padding-bottom: 8px !important; }

/* 大厅底部再留一点空间 */
.lobby-content { padding-bottom: 12px !important; }
.lobby-menu { height: clamp(120px, 31vh, 146px) !important; }

/* 出战面板再收一点，底部完整 */
.lobby-menu { height: clamp(112px, 29vh, 136px) !important; }
.lobby-battle .lb-stage { bottom: 4px !important; }


/* ===== 大厅改版：等级/属性放在角色脚下（半透明），右栏只留资源+出战+四入口 ===== */
.lobby-identity, .lobby-stats, .lobby-skill { display: none !important; }
.lobby-character { position: relative !important; }
.lobby-feet {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 186px; padding: 7px 16px 6px;
  border: 1px solid rgba(232,195,122,.34); border-radius: 5px;
  background: rgba(5,12,14,.44);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,240,200,.08);
  color: #f2ead9; cursor: pointer;
  transition: background .16s, border-color .16s, transform .14s;
}
.lobby-feet:hover { background: rgba(12,24,26,.6); border-color: rgba(255,223,154,.6); }
.lobby-feet:active { transform: translateX(-50%) scale(.98); }
.lobby-feet .lf-name { font-family: "STSong","SimSun",serif; font-size: 17px; letter-spacing: .12em; color: #ffe6b0; line-height: 1.1; }
.lobby-feet .lf-name i { font-style: normal; font-size: 10px; color: #d9c9a5; margin-left: 6px; letter-spacing: .04em; }
.lobby-feet .lf-meta { font-size: 9px; color: rgba(226,211,178,.82); letter-spacing: .05em; white-space: nowrap; }
.lobby-dashboard { gap: clamp(7px, 1.8vh, 12px) !important; }
.lobby-resbar { padding: 4px 8px !important; }
.lobby-menu { height: clamp(150px, 43vh, 205px) !important; gap: clamp(9px, 1.8vw, 14px) !important; }
.lobby-battle { width: clamp(168px, 26vw, 210px) !important; }
.lobby-battle .lb-main strong { font-size: clamp(24px, 4.8vh, 30px) !important; }
.lobby-battle .lb-main small { font-size: 9px !important; }
.lobby-battle .lb-stage b { font-size: 12px !important; }
.lobby-entries { gap: clamp(8px, 1.5vh, 12px) !important; }
.lobby-entry { padding: 6px 9px !important; }
.lobby-entry .le-text strong { font-size: clamp(13px, 2.7vh, 16px) !important; }
.lobby-entry .le-text small { font-size: 7px !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-feet { min-width: 160px; padding: 5px 12px 4px; bottom: 8px; }
  .lobby-feet .lf-name { font-size: 14px; }
  .lobby-feet .lf-meta { font-size: 8px; }
  .lobby-menu { height: clamp(132px, 38vh, 168px) !important; }
  .lobby-battle { width: clamp(146px, 23vw, 180px) !important; }
  .lobby-battle .lb-main strong { font-size: clamp(20px, 4.2vh, 26px) !important; }
}


/* 角色切换一排放大，看得清 */
.lobby-char-rail { width: 36px !important; padding: 4px 3px !important; gap: 3px !important; overflow-y: auto !important; }
.lobby-rail-item { width: 30px !important; height: 30px !important; }
.lobby-rail-art { width: 28px !important; height: 28px !important; }
.lobby-rail-art .chibi { width: 100% !important; height: 100% !important; }
/* 右栏整体下移居中一点 */
.lobby-dashboard { justify-content: center !important; padding-top: clamp(4px, 2.2vh, 16px) !important; }


/* 手机上更易读：脚下信息字号加大 */
.lobby-feet .lf-name { font-size: clamp(16px, 3vh, 20px) !important; }
.lobby-feet .lf-meta { font-size: clamp(9px, 2vh, 11px) !important; }


/* 点击角色：可见的弹跳+光晕反馈 */
@keyframes lobby-poke {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-10px) scale(1.05) rotate(-1.2deg); }
  55% { transform: translateY(0) scale(.97) rotate(1deg); }
  100% { transform: translateY(0) scale(1); }
}
.lobby-figure { cursor: pointer; }
.lobby-figure.is-poked .chibi { animation: lobby-poke .62s cubic-bezier(.2,.8,.3,1) !important; }
.lobby-figure::after {
  content: ''; position: absolute; left: 50%; bottom: 6%; width: 68%; height: 22%;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,226,160,.22), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
.lobby-figure:hover::after { opacity: 1; }


/* 主页右栏对齐：资源/出战/四入口统一宽度、行高、边距，整体更整齐 */
.lobby-dashboard {
  align-self: center !important;
  justify-content: center !important;
  padding: 6px 4px 6px 8px !important;
  gap: 8px !important;
}
.lobby-resbar { width: 100% !important; margin: 0 !important; box-sizing: border-box; }
.lobby-menu { width: 100% !important; align-items: stretch !important; }
.lobby-battle { height: 100% !important; align-self: stretch !important; }
.lobby-entries { flex: 1 1 auto !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lobby-entry { min-height: 0 !important; }
.lobby-character { display: flex; align-items: flex-end; justify-content: center; }
.lobby-feet { left: 50% !important; }
.lobby-progress { top: 6px !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-dashboard { gap: 6px !important; padding: 4px 3px 4px 6px !important; }
}


/* 主页：剩余道具/寻星符移到右上角，半透明毛玻璃 */
.lobby-root { position: relative; }
.lobby-resbar {
  position: absolute !important; top: 50px !important; right: 8px !important; left: auto !important;
  width: auto !important; z-index: 30;
  padding: 3px 8px !important; gap: 10px !important;
  background: rgba(6,14,16,.40) !important;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(232,195,122,.26) !important; border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
}
.lobby-resbar .lobby-mats, .lobby-resbar .lobby-ticket, .lobby-resbar .lobby-sound {
  background: transparent !important; border: 0 !important; padding: 2px 4px !important;
}
.lobby-resbar .mat, .lobby-resbar .lobby-ticket-text { font-size: 10.5px !important; }
.lobby-dashboard { justify-content: center !important; padding-top: 6px !important; }
.lobby-menu { height: clamp(170px, 46vh, 226px) !important; }
/* 角色选择竖排与出战/入口区域对齐 */
.lobby-char-rail {
  top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
  max-height: 72vh !important;
}
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-resbar { top: 46px !important; right: 6px !important; padding: 2px 6px !important; gap: 7px !important; }
  .lobby-resbar .mat, .lobby-resbar .lobby-ticket-text { font-size: 9.5px !important; }
  .lobby-menu { height: clamp(146px, 40vh, 190px) !important; }
}

/* 道具余量固定在屏幕右上角（顶栏下方），半透明悬浮 */
.lobby-resbar { position: fixed !important; top: 52px !important; right: 8px !important; left: auto !important; z-index: 80 !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-resbar { top: 46px !important; right: 6px !important; }
}


/* 道具余量真正停靠在页面右上角 */
.lobby-resbar.is-docked { position: absolute !important; top: 52px !important; right: 8px !important; left: auto !important; z-index: 60 !important; }
@media (orientation: landscape) and (max-height: 550px) { .lobby-resbar.is-docked { top: 46px !important; right: 6px !important; } }


/* 主页角色脚下：信息卡 + 明显的「切换角色」按钮 */
.lobby-footbar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 9; display: flex; align-items: stretch; gap: 7px;
}
.lobby-footbar .lobby-feet { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; }
.lobby-footbar .lobby-feet:active { transform: scale(.98) !important; }
.lobby-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 13px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(240,205,132,.55);
  background: linear-gradient(180deg, rgba(75,58,30,.92), rgba(30,25,16,.95));
  color: #ffe6b0; font-family: var(--font-ink, "STSong", serif);
  font-size: 12px; letter-spacing: .06em;
  box-shadow: 0 5px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,200,.16);
  transition: background .15s, border-color .15s, transform .08s;
}
.lobby-switch:hover { background: linear-gradient(180deg, rgba(98,76,40,.95), rgba(42,34,21,.98)); border-color: rgba(255,226,160,.85); }
.lobby-switch:active { transform: scale(.96); }
.lobby-switch .ls-icon { font-size: 15px; line-height: 1; }
@media (orientation: landscape) and (max-height: 550px) {
  .lobby-footbar { bottom: 8px; gap: 6px; }
  .lobby-footbar .lobby-feet { min-width: 158px !important; padding: 5px 11px 4px !important; }
  .lobby-footbar .lf-name { font-size: 15px !important; }
  .lobby-footbar .lf-meta { font-size: 8px !important; }
  .lobby-switch { padding: 0 9px; font-size: 11px; gap: 4px; }
}

/* ==== battle-ui.css ==== */
.combat-root{height:100vh;height:100dvh;min-height:280px;position:relative;overflow:hidden;background:#172c33;color:#eeeadd;font-family:'Microsoft YaHei',system-ui,sans-serif;isolation:isolate;--dock:126px;--hud:74px}.combat-root *{box-sizing:border-box}.combat-root button{font:inherit;cursor:pointer;touch-action:manipulation}.combat-root button:focus-visible{outline:2px solid #ffe6a9;outline-offset:2px}.combat-root button:disabled{cursor:default;opacity:.5}.combat-root [hidden]{display:none!important}.combat-canvas{position:absolute;top:var(--hud);left:0;display:block;width:100%;height:calc(100% - var(--hud) - var(--dock));touch-action:none}.combat-hud{position:absolute;z-index:4;inset:0 0 auto;height:var(--hud);display:flex;align-items:center;gap:15px;padding:10px max(22px,env(safe-area-inset-right)) 10px max(22px,env(safe-area-inset-left));background:linear-gradient(#10222ef5,#122830d9);border-bottom:1px solid #b4ccba33}.combat-hud button{border:1px solid #c3d6c248;background:#1b343fd9;color:#eeeadd;border-radius:2px}.combat-square{height:46px;min-width:46px;font-size:25px!important}.combat-title{min-width:0}.combat-title strong,.combat-title small{display:block}.combat-title small{font-size:8px;letter-spacing:.16em;color:#a7bbb5;margin-bottom:5px}.combat-title strong{font-size:16px;font-weight:500;letter-spacing:.08em;white-space:nowrap}.combat-counts{display:flex;gap:34px;margin:auto;align-items:center}.combat-counts>div{display:flex;gap:9px;align-items:baseline}.combat-counts span{font-size:10px;color:#c2cabb}.combat-counts strong{font-size:30px;font-weight:400;line-height:1}.combat-counts small{font-size:15px;color:#a1b2a9}.combat-life strong,.combat-life small{color:#d5c18a}.combat-controls{display:flex;gap:7px;align-items:center}.combat-sound{font-size:10px!important;padding:12px}.combat-region{position:absolute;top:calc(var(--hud) + 14px);left:24px;pointer-events:none;display:flex;flex-direction:column;gap:4px;color:#d2d5bd;font-size:10px;letter-spacing:.08em}.combat-region small{font-size:8px;color:#93aaa0}.combat-phase{position:absolute;z-index:5;top:calc(var(--hud) + 14px);left:50%;transform:translateX(-50%);background:#142c35e8;border:1px solid #d6c39366;padding:7px 20px;font-size:11px;letter-spacing:.1em;white-space:nowrap}.combat-bottom{height:var(--dock);position:absolute;inset:auto 0 0;display:flex;gap:18px;align-items:center;padding:12px max(22px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:linear-gradient(0deg,#0d202beF,#183039eF);border-top:1px solid #b8c9b53d;z-index:4}.combat-bottom-title{display:flex;flex-direction:column;gap:6px;width:96px;flex:none}.combat-bottom-title span{font-family:STSong,SimSun,serif;font-size:19px;letter-spacing:.13em}.combat-bottom-title small{font-size:7px;letter-spacing:.11em;color:#9bb7aa}.combat-hand{display:flex;gap:7px;align-items:center;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b7ba8a transparent;min-width:0;padding:2px}.combat-card{position:relative;isolation:isolate;overflow:hidden;width:92px;height:100%;flex:none;background:linear-gradient(150deg,#789398,#263e4a);color:#fff4da;border:1px solid #cdd8c777;box-shadow:0 4px 10px #08172280;padding:0;text-align:left;transition:border-color .15s,filter .15s}.combat-card.selected{border:2px solid #ffe4a0;box-shadow:0 0 14px #edcf8066}.combat-card.unaffordable{filter:saturate(.5);background:#35424b}.combat-card.in-field{background:linear-gradient(145deg,#667f7a,#1c454c)}.combat-card-portrait{position:absolute;inset:-22% -16% 8%;z-index:-1;opacity:.95}.combat-card-portrait .chibi{width:100%;height:100%;display:block}.combat-card strong{position:absolute;left:0;right:0;bottom:16px;padding:9px 6px 3px;background:linear-gradient(transparent,#0e253bf5);font-size:11px;white-space:nowrap;text-shadow:0 2px 4px #112535}.combat-card>small{position:absolute;bottom:0;left:0;right:0;padding:2px 6px 4px;background:#0e253bf5;font-size:8px;color:#cbd9c3}.combat-card-role{position:absolute;top:5px;left:5px;font-size:8px;padding:2px;background:#183039cc;color:#e1e7d0}.combat-card-cost{position:absolute;top:2px;right:5px;font-size:23px;font-weight:500;text-shadow:0 2px 5px #172631}.combat-card-cooldown{position:absolute;bottom:0;left:0;right:0;background:#172633a6;z-index:2;pointer-events:none}.combat-help{margin-left:auto;min-width:150px;display:flex;flex-direction:column;gap:7px;align-items:end}.combat-help strong{font-size:12px;font-weight:400;color:#d4c49c}.combat-help small{font-size:9px;color:#94aba4}.combat-resource{position:absolute;bottom:calc(var(--dock) + 18px);right:max(24px,env(safe-area-inset-right));z-index:3;text-align:right;padding:9px 13px;background:linear-gradient(90deg,#142c3033,#10252dd9);min-width:126px;border-right:2px solid #d8c087;pointer-events:none}.combat-resource>span{font-size:8px;letter-spacing:.15em;color:#b7c8ba}.combat-resource>div:not(.combat-dp-meter){display:flex;gap:13px;align-items:center;justify-content:flex-end}.combat-resource i{font-style:normal;font-size:26px;color:#d9c288}.combat-resource strong{font-size:42px;line-height:1.15;font-weight:300}.combat-resource small{font-size:11px;color:#cad4c8}.combat-dp-meter{height:2px;background:#b4c3ae44;margin-top:8px}.combat-dp-meter i{display:block;height:100%;background:#d8c58e}.combat-inspector{position:absolute;z-index:6;left:20px;top:calc(var(--hud) + 48px);width:260px;background:linear-gradient(140deg,#e9e5d7f5,#bccfc7f5);color:#263e44;box-shadow:0 10px 34px #0b212788;border-top:3px solid #e2c587;padding:15px}.combat-inspector-head{display:flex;gap:9px;align-items:center}.combat-inspector-head>span{height:48px;width:48px;flex:none;background:#9eafa6;border-radius:50%;overflow:hidden}.combat-inspector-head .chibi{width:100%;height:100%;display:block}.combat-inspector-head small,.combat-inspector-head strong{display:block}.combat-inspector-head small{font-size:9px;color:#627773;margin-bottom:4px}.combat-inspector-head strong{font-size:17px}.combat-inspector-head button{margin-left:auto;align-self:start;background:none;border:0;font-size:24px;color:#3e5356;padding:0 4px}.combat-inspector p{font-size:11px;line-height:1.7;margin:11px 0;color:#516962}.combat-directions{display:flex;gap:5px;margin:10px 0}.combat-directions button{height:42px;flex:1;background:#e3e9da;border:1px solid #718f8355;color:#41675f;font-size:23px}.combat-directions button.active{background:#3b6665;color:#fff0ca;border-color:#3b6665}.combat-primary{background:#dfc487!important;border:1px solid #e5d09d!important;color:#283e43!important}.combat-confirm{width:100%;border:0;padding:12px;text-align:left;font-size:13px!important}.combat-confirm span{float:right;font-size:11px}.combat-selection-hint{font-size:10px;line-height:1.8;border-top:1px solid #6f8a7555;padding-top:9px;color:#637b6d}.combat-unit-stats{font-size:11px;display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.combat-unit-stats span{width:100%}.combat-panel-actions{display:flex;gap:8px;margin-top:15px}.combat-panel-actions button{padding:10px 12px;border:1px solid #718b7f;background:#dce4d7;color:#344c4c;font-size:12px;flex:1;white-space:nowrap}.combat-briefing{position:absolute;left:50%;top:calc(var(--hud) + 20px);transform:translateX(-50%);z-index:4;background:linear-gradient(90deg,#112b37e8,#1e3b43f5);border:1px solid #c4d2b74d;border-left:3px solid #e2c587;display:flex;align-items:center;gap:30px;padding:15px 22px;box-shadow:0 10px 35px #0d1d2344;max-width:90%;width:580px}.combat-briefing small{font-size:8px;color:#d1bd8c;letter-spacing:.15em}.combat-briefing h2{font-size:20px!important;letter-spacing:.06em;margin:4px 0 6px!important;font-weight:400}.combat-briefing p{font-size:11px;color:#bccfc3;line-height:1.5;margin:0 0 5px}.combat-briefing span{font-size:9px;color:#9cb2a7}.combat-briefing button{background:#ddc58b;color:#223b41;border:0;padding:15px;flex:none;font-size:13px;white-space:nowrap}.combat-briefing button b{margin-left:14px}.combat-result,.combat-exit{position:absolute;inset:0;z-index:12;background:#0a1d29b8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.combat-result>div,.combat-exit>section{background:linear-gradient(145deg,#e9e4d2,#c7d5ca);color:#304b4c;border-top:3px solid #d2b57b;box-shadow:0 15px 80px #03152188;padding:28px 36px;width:440px;max-width:100%;max-height:95vh;overflow:auto}.combat-result>div{text-align:center}.combat-result small{font-size:9px;letter-spacing:.12em;color:#667f70}.combat-result-mark{font-size:42px;color:#a68a48;margin:6px}.combat-result h2{font-size:32px!important;letter-spacing:.2em;margin:4px 0!important;font-family:STSong,SimSun,serif}.combat-result p,.combat-exit p{font-size:12px;line-height:1.8;color:#627b70}.combat-result-stats{display:flex;justify-content:center;gap:20px;font-size:11px}.combat-result-stats b{margin-left:5px}.combat-loot{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0;margin-top:14px;border-block:1px solid #81988555;font-size:12px}.combat-loot small{font-size:9px}.combat-loot b{color:#8c703f}.combat-exit h3{margin:0;font-size:20px}.combat-exit section{padding:25px}
@media (max-width:1000px){.combat-help{display:none}.combat-counts{gap:16px}.combat-bottom-title{width:75px}.combat-inspector{width:220px;left:12px;padding:12px}.combat-title strong{font-size:13px}}
@media (orientation:landscape) and (max-height:550px){.combat-root{--hud:47px;--dock:86px}.combat-hud{gap:9px;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left))}.combat-square{height:35px;min-width:38px;font-size:20px!important}.combat-title small{font-size:6px;margin-bottom:3px}.combat-title strong{font-size:12px}.combat-counts{gap:18px}.combat-counts strong{font-size:24px}.combat-counts span{font-size:8px}.combat-counts small{font-size:12px}.combat-sound{padding:9px;font-size:8px!important}.combat-bottom{gap:12px;padding:7px 14px}.combat-bottom-title{width:68px}.combat-bottom-title span{font-size:14px}.combat-bottom-title small{font-size:5px}.combat-card{width:67px}.combat-hand{gap:5px}.combat-card strong{font-size:9px;bottom:12px;padding:7px 4px 2px}.combat-card>small{font-size:7px;padding:1px 4px 3px}.combat-card-cost{font-size:19px}.combat-card-role{font-size:7px;top:3px;left:3px}.combat-region{top:calc(var(--hud) + 8px);left:14px;font-size:8px;gap:3px}.combat-region small{font-size:6px}.combat-resource{right:14px;bottom:calc(var(--dock) + 7px);padding:6px 9px;min-width:96px}.combat-resource>span{font-size:6px}.combat-resource strong{font-size:29px}.combat-resource small{font-size:8px}.combat-resource i{font-size:20px}.combat-dp-meter{margin-top:5px}.combat-phase{top:calc(var(--hud) + 6px);padding:5px 14px;font-size:9px}.combat-inspector{top:calc(var(--hud) + 34px);width:178px;padding:9px;left:10px}.combat-inspector-head>span{width:31px;height:31px}.combat-inspector-head strong{font-size:13px}.combat-inspector-head small{font-size:7px;margin-bottom:2px}.combat-inspector-head button{font-size:21px}.combat-inspector p{font-size:9px;margin:7px 0;line-height:1.5}.combat-directions{gap:4px;margin:7px 0}.combat-directions button{height:34px;font-size:20px}.combat-confirm{padding:9px;font-size:11px!important}.combat-confirm span{font-size:9px}.combat-selection-hint{font-size:8px;padding-top:5px}.combat-unit-stats{font-size:9px;gap:4px;margin-top:7px}.combat-panel-actions{gap:5px;margin-top:8px}.combat-panel-actions button{padding:9px 7px;font-size:10px}.combat-briefing{top:calc(var(--hud) + 10px);width:440px;padding:10px 16px;gap:15px}.combat-briefing h2{font-size:15px!important}.combat-briefing p{font-size:9px}.combat-briefing small{font-size:7px}.combat-briefing button{padding:12px;font-size:11px}.combat-result>div{padding:15px 25px}.combat-result-mark{font-size:26px;margin:2px}.combat-result h2{font-size:25px!important}.combat-result p{margin:7px 0}.combat-loot{margin-top:8px;padding:10px 0}}
@media (orientation:portrait) and (max-width:760px){.combat-root{--hud:96px;--dock:124px}.combat-hud{padding:10px 12px;gap:9px;flex-wrap:wrap;align-content:center}.combat-title{flex:1}.combat-title strong{font-size:12px}.combat-title small{font-size:6px}.combat-square{height:34px;min-width:34px;font-size:21px!important}.combat-counts{order:4;flex-basis:100%;justify-content:center;gap:40px;margin:0;padding-top:2px}.combat-counts strong{font-size:22px}.combat-counts span{font-size:9px}.combat-counts small{font-size:12px}.combat-controls{gap:5px}.combat-sound{padding:7px;font-size:7px!important}.combat-bottom-title,.combat-help{display:none}.combat-bottom{padding:10px 10px max(10px,env(safe-area-inset-bottom))}.combat-card{width:74px}.combat-hand{width:100%;gap:5px}.combat-region{left:13px;font-size:8px}.combat-region small{font-size:7px}.combat-inspector{top:auto;bottom:calc(var(--dock) + 12px);left:12px;width:205px;padding:11px}.combat-inspector-head>span{width:36px;height:36px}.combat-inspector-head strong{font-size:14px}.combat-inspector p{font-size:10px;margin:7px 0}.combat-resource{right:12px;bottom:calc(var(--dock) + 12px);min-width:105px;padding:7px 10px}.combat-resource strong{font-size:32px}.combat-resource small{font-size:9px}.combat-directions button{height:37px}.combat-briefing{top:calc(var(--hud) + 60px);width:90%;padding:15px;display:block}.combat-briefing button{width:100%;margin-top:12px}.combat-briefing h2{font-size:19px!important}.combat-phase{top:calc(var(--hud) + 40px);font-size:9px;padding:6px 10px}.combat-result>div{padding:22px}.combat-loot{gap:10px;font-size:10px}.combat-loot small{font-size:8px}}
.combat-inspector.waiting{left:50%;top:auto;bottom:calc(var(--dock) + 9px);transform:translateX(-50%);width:310px;max-width:70%;padding:8px 12px}.combat-inspector.waiting .combat-inspector-head>span,.combat-inspector.waiting .combat-inspector-head small,.combat-inspector.waiting .combat-selection-hint{display:none}.combat-inspector.waiting .combat-inspector-head strong{font-size:12px}.combat-inspector.waiting .combat-inspector-head button{font-size:24px;line-height:1}.combat-inspector.waiting p{font-size:10px;margin:2px 0 0}.combat-inspector.waiting .combat-inspector-head{gap:5px}
/* ============================================================
   v2 主题覆盖：深空玻璃 + 金色强调（战场）
   ============================================================ */
.combat-root {
  background: #080c0f;
  color: #f2efe6;
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}
.combat-hud {
  background: linear-gradient(180deg, rgba(4, 7, 9, .92), rgba(4, 7, 9, .3));
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
.combat-hud button {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 14, 18, .55);
  color: #f0ece1;
  border-radius: 2px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition: border-color .18s, background .18s, color .18s, transform .15s;
}
.combat-hud button:hover:not(:disabled) { border-color: rgba(242, 182, 44, .7); background: rgba(242, 182, 44, .12); color: #ffd75e; }
.combat-hud button:active:not(:disabled) { transform: scale(.95); }
.combat-title small { color: #d9b45f; letter-spacing: .2em; font-weight: 700; }
.combat-title strong { font-weight: 700; color: #f8f5ec; letter-spacing: .06em; }
.combat-counts span { color: #b3bbbe; font-size: 9px; letter-spacing: .1em; }
.combat-counts strong { font-weight: 300; color: #fff; letter-spacing: .02em; }
.combat-counts small { color: #9aa2a6; }
.combat-life strong, .combat-life small { color: #8fc7e8; }
.combat-life strong { text-shadow: 0 0 18px rgba(143, 199, 232, .45); }
.combat-sound { font-size: 9px !important; }
.combat-region { color: #cdd3cc; }
.combat-region small { color: #a3b0ab; }
.combat-phase {
  background: rgba(10, 14, 18, .82);
  border: 1px solid rgba(242, 182, 44, .55);
  color: #ffd75e;
  border-radius: 2px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.combat-bottom {
  background: linear-gradient(0deg, rgba(2, 5, 7, .96), rgba(5, 9, 12, .58));
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.combat-bottom-title span { font-weight: 700; color: #f7f3e9; letter-spacing: .12em; }
.combat-bottom-title small { color: #d9b45f; letter-spacing: .14em; }
.combat-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015)), rgba(8, 12, 15, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.combat-card:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(242, 182, 44, .6); }
.combat-card:active:not(:disabled) { transform: translateY(-1px) scale(.98); }
.combat-card.selected {
  border: 1px solid #ffd75e;
  box-shadow: 0 0 20px rgba(242, 182, 44, .45), inset 0 0 18px rgba(242, 182, 44, .12);
  transform: translateY(-3px);
}
.combat-card.unaffordable { filter: grayscale(.9) brightness(.6); background: rgba(8, 12, 15, .5); }
.combat-card.in-field { background: rgba(26, 33, 36, .62); border-color: rgba(242, 182, 44, .35); }
.combat-card-portrait .chibi { animation: unit-breathe 4.4s ease-in-out infinite; transform-origin: 50% 92%; }
.combat-card:nth-child(2n) .combat-card-portrait .chibi { animation-delay: -1.3s; }
.combat-card:nth-child(3n) .combat-card-portrait .chibi { animation-delay: -2.4s; }
@keyframes unit-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2.5%) scale(1.02); } }
.combat-card strong { background: linear-gradient(transparent, rgba(2, 5, 7, .94)); font-weight: 700; color: #f7f3e9; }
.combat-card > small { background: rgba(2, 5, 7, .92); color: #cfc6a5; }
.combat-card-role { background: rgba(4, 8, 11, .7); border: 1px solid rgba(242, 182, 44, .4); color: #ffd75e; font-size: 7px; padding: 1px 3px; border-radius: 1px; }
.combat-card-cost { color: #ffe9b2; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.combat-card-cooldown { background: rgba(3, 6, 8, .7); }
.combat-resource {
  background: linear-gradient(90deg, rgba(10, 14, 18, .05), rgba(6, 10, 13, .86));
  border-right: 2px solid #f2b62c;
  border-radius: 2px 0 0 2px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.combat-resource > span { color: #d9b45f; letter-spacing: .18em; }
.combat-resource strong { font-weight: 300; color: #fff; }
.combat-resource i { color: #f2b62c; text-shadow: 0 0 12px rgba(242, 182, 44, .6); }
.combat-resource small { color: #b3bbbe; }
.combat-dp-meter { background: rgba(255, 255, 255, .16); }
.combat-dp-meter i { background: linear-gradient(90deg, #d99a14, #ffd75e); box-shadow: 0 0 10px rgba(242, 182, 44, .6); }
.combat-inspector {
  background: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(8, 12, 15, .86);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  color: #f0ece1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 2px solid #f2b62c;
  border-radius: 2px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .6);
  animation: inspector-in .2s ease both;
}
@keyframes inspector-in { from { opacity: 0; } to { opacity: 1; } }
.combat-inspector-head > span { background: #232b31; border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px; }
.combat-inspector-head small { color: #d9b45f; }
.combat-inspector-head strong { color: #fbf7ee; font-weight: 700; }
.combat-inspector-head button { color: #d5dcd9; }
.combat-inspector-head button:hover { color: #ffd75e; }
.combat-inspector p { color: #b3bcbd; }
.combat-directions button { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); color: #d5dcd9; border-radius: 2px; transition: background .15s, border-color .15s, transform .15s; }
.combat-directions button:hover { border-color: rgba(242, 182, 44, .6); }
.combat-directions button.active { background: linear-gradient(135deg, #ffd75e, #e7a916); color: #17130a; border-color: #ffe19a; font-weight: 700; }
.combat-primary { background: linear-gradient(135deg, #ffd75e, #e7a916) !important; border: 1px solid #ffe19a !important; color: #17130a !important; font-weight: 700; }
.combat-selection-hint { color: #97a0a4; border-top: 1px solid rgba(255, 255, 255, .14); }
.combat-unit-stats { color: #c3cacc; }
.combat-unit-stats b { color: #fff; }
.combat-panel-actions button { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); color: #f0ece1; border-radius: 2px; transition: border-color .16s, background .16s, transform .14s; }
.combat-panel-actions button:hover { border-color: rgba(242, 182, 44, .6); background: rgba(242, 182, 44, .12); }
.combat-panel-actions button:active { transform: scale(.97); }
.combat-briefing {
  background: linear-gradient(105deg, rgba(6, 10, 13, .9), rgba(12, 17, 21, .95));
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid #f2b62c;
  border-radius: 2px;
  color: #f0ece1;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  animation: briefing-in .35s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes briefing-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
.combat-briefing h2 { font-weight: 700; color: #fbf7ee; }
.combat-briefing p { color: #b3bcbd; }
.combat-briefing span { color: #97a0a4; }
.combat-briefing small { color: #d9b45f; }
.combat-briefing button {
  background: linear-gradient(135deg, #ffd75e, #e7a916);
  color: #17130a;
  font-weight: 700;
  border: 1px solid #ffe19a;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: filter .16s, transform .14s;
}
.combat-briefing button:hover { filter: brightness(1.07); }
.combat-briefing button:active { transform: scale(.97); }
.combat-result, .combat-exit { background: rgba(3, 6, 8, .74); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); }
.combat-result > div, .combat-exit > section {
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(8, 12, 15, .93);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  color: #f0ece1;
  border: 1px solid rgba(255, 255, 255, .2);
  border-top: 2px solid #f2b62c;
  border-radius: 2px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: result-pop .42s cubic-bezier(.2, .8, .3, 1.08) both;
}
@keyframes result-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.combat-result small { color: #d9b45f; letter-spacing: .18em; }
.combat-result-mark { color: #ffd75e; text-shadow: 0 0 30px rgba(242, 182, 44, .65); animation: glow-pulse 2.6s ease-in-out infinite; }
.combat-result h2 { font-family: "Microsoft YaHei", sans-serif; font-weight: 700; color: #fbf7ee; }
.combat-result p, .combat-exit p { color: #b3bcbd; }
.combat-result-stats { color: #aeb6b9; }
.combat-result-stats b { color: #fff; }
.combat-loot { border-color: rgba(255, 255, 255, .14); color: #d5d9d9; }
.combat-loot small { color: #97a0a4; }
.combat-loot b { color: #ffd75e; }
.combat-exit h3 { color: #fbf7ee; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .combat-card-portrait .chibi, .combat-result > div, .combat-exit > section, .combat-briefing, .combat-result-mark { animation: none; }
}

/* ============================================================
   v3 全屏战场：地图铺满屏幕，HUD / 干员栏 / 面板全部为悬浮叠加层
   ============================================================ */
.combat-root {
  --hud: 74px;
  --dock: 126px;
  background: #04080a;
  overflow: hidden;
}
.combat-canvas {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
}
.combat-hud {
  z-index: 6;
  height: var(--hud);
  padding: 8px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  gap: 12px;
  background: linear-gradient(180deg, rgba(3, 6, 8, .92) 0%, rgba(3, 6, 8, .62) 46%, rgba(3, 6, 8, .18) 78%, rgba(3, 6, 8, 0) 100%);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  backdrop-filter: blur(7px) saturate(1.05);
  pointer-events: none;
}
.combat-hud > * { pointer-events: auto; }
.combat-hud button {
  background: rgba(6, 11, 14, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.combat-title { max-width: 190px; }
.combat-title strong { text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.combat-counts { gap: 26px; }
.combat-counts > div { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.combat-region {
  z-index: 3;
  top: calc(var(--hud) + 4px);
  left: 14px;
  opacity: .62;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.combat-phase {
  z-index: 7;
  top: calc(var(--hud) + 8px);
  background: rgba(6, 11, 15, .82);
  pointer-events: none;
}
.combat-combo {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--hud) + 6px);
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 14px 3px;
  background: linear-gradient(180deg, rgba(24, 18, 6, .78), rgba(8, 10, 8, .62));
  border: 1px solid rgba(242, 182, 44, .55);
  border-radius: 2px;
  color: #e9c98a;
  font-size: 9px;
  letter-spacing: .2em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.combat-combo b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff3cf;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(255, 213, 110, .8);
}
.combat-combo.is-visible { opacity: 1; }
.combat-combo.is-pop { animation: combat-combo-pop .34s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes combat-combo-pop { 0% { transform: translateX(-50%) scale(.72); } 60% { transform: translateX(-50%) scale(1.12); } 100% { transform: translateX(-50%) scale(1); } }
.combat-bottom {
  z-index: 6;
  height: var(--dock);
  padding: 8px max(16px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  gap: 14px;
  background: linear-gradient(0deg, rgba(2, 5, 7, .98) 0%, rgba(3, 7, 10, .88) 34%, rgba(4, 9, 12, .52) 70%, rgba(4, 9, 12, 0) 100%);
  border-top: 0;
  box-shadow: 0 -20px 42px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(9px) saturate(1.06);
  backdrop-filter: blur(9px) saturate(1.06);
}
.combat-bottom-title { width: 78px; }
.combat-bottom-title span { color: #f3ecda; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.combat-bottom-title small { color: #d9b45f; }
.combat-help { min-width: 138px; }
.combat-help strong { color: #ecd7a3; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.combat-help small { color: #b7c2ba; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.combat-hand { padding: 3px 2px 2px; }
.combat-card {
  width: 84px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.combat-card.is-ready { border-color: #ffd75e; box-shadow: 0 0 18px rgba(255, 215, 94, .5), inset 0 0 14px rgba(255, 215, 94, .2); }
.combat-card.is-ready .combat-card-portrait { filter: brightness(1.14); }
.combat-card.in-field .combat-card-portrait .chibi { animation-duration: 3.1s; }
.combat-resource {
  z-index: 5;
  bottom: calc(var(--dock) + 4px);
  right: max(16px, env(safe-area-inset-right));
  min-width: 112px;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(4, 8, 11, .04), rgba(4, 8, 11, .78));
  border-right: 2px solid #f2b62c;
  border-radius: 2px 0 0 2px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
.combat-resource strong { font-size: 36px; text-shadow: 0 0 18px rgba(255, 213, 110, .35); }
.combat-resource small { text-shadow: 0 1px 5px rgba(0, 0, 0, .7); }
.combat-region small { opacity: .8; }

/* 开战横幅 */
.combat-banner {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.combat-banner.is-show { animation: combat-banner-in 1.5s cubic-bezier(.2, .8, .3, 1) both; }
.combat-banner strong {
  display: block;
  font-size: clamp(22px, 4.6vw, 40px);
  letter-spacing: .42em;
  color: #ffeab3;
  text-shadow: 0 0 26px rgba(242, 182, 44, .7), 0 4px 18px rgba(0, 0, 0, .9);
}
.combat-banner small { display: block; margin-top: 8px; font-size: 9px; letter-spacing: .34em; color: #d9b45f; }
@keyframes combat-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(1.04); }
}

/* 简报：悬浮玻璃卡 */
.combat-briefing {
  z-index: 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 82%);
  padding: 14px 20px;
  gap: 22px;
  margin-top: calc(var(--hud) * .5 - 6px);
  background: linear-gradient(150deg, rgba(9, 13, 16, .90), rgba(7, 11, 14, .80));
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid #f2b62c;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .66);
  animation: briefing-in-v3 .42s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes briefing-in-v3 { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.combat-briefing .brief-grid { display: flex; gap: 18px; align-items: center; }
.combat-briefing .brief-copy { min-width: 0; }
.combat-briefing h2 { font-size: 21px !important; margin: 3px 0 5px !important; }
.combat-briefing p { margin: 0 0 6px; line-height: 1.55; }
.combat-briefing .brief-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.combat-briefing .brief-chip {
  font-size: 8px;
  letter-spacing: .06em;
  padding: 2px 6px;
  color: #cfd6c9;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  border-radius: 2px;
  white-space: nowrap;
}
.combat-briefing .brief-chip b { color: #ffd75e; font-weight: 700; }
.combat-briefing button { padding: 12px 16px; }

/* 完整角色信息面板 */
.combat-inspector {
  z-index: 8;
  left: 12px;
  top: calc(var(--hud) + 8px);
  width: 252px;
  max-height: calc(100% - var(--hud) - var(--dock) - 14px);
  padding: 9px 10px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 182, 44, .5) transparent;
  border-top: 2px solid #f2b62c;
  border-left: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, rgba(10, 14, 18, .90), rgba(6, 10, 13, .84));
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  color: #f2eee3;
  animation: inspector-in .22s ease both;
}
.combat-inspector.is-unit { border-top-color: #ffd75e; }
.combat-inspector-head { gap: 8px; }
.combat-inspector-head > span { width: 38px; height: 38px; background: linear-gradient(160deg, #2b363c, #141c20); border: 1px solid rgba(242, 182, 44, .35); }
.combat-inspector-head .ci-name { min-width: 0; flex: 1; }
.combat-inspector-head small { font-size: 8px; color: #d9b45f; margin-bottom: 3px; letter-spacing: .04em; }
.combat-inspector-head strong { font-size: 15px; line-height: 1.15; }
.combat-inspector-head button { font-size: 20px; line-height: 1; padding: 0 2px; color: #cfd6d2; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.ci-chip {
  font-size: 8px;
  line-height: 1.5;
  padding: 1px 5px;
  color: #d7dedb;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  border-radius: 2px;
  white-space: nowrap;
}
.ci-chip b { color: #fff6e2; font-weight: 700; }
.ci-chip.is-cost { color: #17130a; background: linear-gradient(135deg, #ffd75e, #e7a916); border-color: #ffe19a; font-weight: 700; }
.ci-hpbar { margin-top: 7px; }
.ci-hpbar .ci-bar-label { display: flex; justify-content: space-between; font-size: 8px; color: #aeb8b5; margin-bottom: 2px; }
.ci-hpbar .ci-bar-label b { color: #fff; font-weight: 600; }
.ci-bar { height: 5px; background: rgba(255, 255, 255, .12); border-radius: 1px; overflow: hidden; }
.ci-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fce8c, #c9efb8); transition: width .2s; }
.ci-bar i.is-low { background: linear-gradient(90deg, #d94a3d, #ff9a8a); box-shadow: 0 0 8px rgba(255, 90, 74, .7); }
.ci-bar.is-skill i { background: linear-gradient(90deg, #4d9fc4, #9bdcf2); }
.ci-bar.is-skill i.is-ready { background: linear-gradient(90deg, #d99a14, #ffd75e); box-shadow: 0 0 8px rgba(255, 215, 94, .7); }
.ci-charge-row { margin-top: 6px; }
.ci-charge-row .ci-bar-label span { font-size: 8px; }
.ci-charge-row .ci-bar-label b { color: #ffe1a0; }
.ci-skill { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ci-skill-head { display: flex; align-items: baseline; gap: 5px; }
.ci-skill-head b { font-size: 11.5px; color: #ffe1a0; letter-spacing: .02em; }
.ci-skill-head small { font-size: 8px; color: #9aa5a3; margin-left: auto; white-space: nowrap; }
.ci-skill p { margin: 4px 0 0; font-size: 9px; line-height: 1.55; color: #b9c4c0; }
.ci-status { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; min-height: 0; }
.ci-badge { font-size: 8px; padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px; color: #aeb8b5; }
.ci-badge.is-ready { color: #17130a; background: linear-gradient(135deg, #ffd75e, #e7a916); border-color: #ffe19a; font-weight: 700; }
.ci-badge.is-active { color: #ffe9a8; border-color: rgba(242, 182, 44, .6); background: rgba(242, 182, 44, .12); }
.ci-badge.is-stun { color: #e7c1ef; border-color: rgba(199, 154, 221, .6); background: rgba(199, 154, 221, .14); }
.ci-badge.is-slow { color: #b8e0f6; border-color: rgba(143, 199, 232, .6); background: rgba(143, 199, 232, .12); }
.ci-hint { margin-top: 8px; font-size: 8.5px; line-height: 1.6; color: #a4afac; }
.ci-actions { display: flex; gap: 6px; margin-top: 8px; }
.ci-actions button {
  flex: 1;
  padding: 7px 6px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: #f0ece1;
  border-radius: 2px;
  transition: border-color .16s, background .16s, transform .14s;
}
.ci-actions button:hover:not(:disabled) { border-color: rgba(242, 182, 44, .65); background: rgba(242, 182, 44, .12); }
.ci-actions button:active:not(:disabled) { transform: scale(.97); }
.ci-actions .combat-primary { flex: 1.3; }
.ci-actions .ci-retreat { flex: .7; color: #ffb9ad; }
.combat-inspector .combat-directions { margin: 8px 0 6px; }
.combat-inspector .combat-directions button { height: 34px; font-size: 18px; }
.combat-inspector .combat-confirm { padding: 8px 10px; font-size: 11px !important; }
.combat-inspector .combat-confirm span { float: right; font-size: 9px; }
.combat-inspector.waiting { left: 12px; top: calc(var(--hud) + 8px); bottom: auto; transform: none; width: 252px; max-width: none; padding: 9px 10px 10px; }
.combat-inspector.waiting .combat-inspector-head > span,
.combat-inspector.waiting .combat-inspector-head small,
.combat-inspector.waiting .combat-selection-hint { display: block; }

/* 结算面板增强 */
.combat-result .combat-result-extra { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 9px; color: #aeb6b9; }
.combat-result .combat-result-extra b { color: #ffd75e; }
.combat-result > div { width: 470px; }

/* 平板 / 窄屏 */
@media (max-width: 1000px) {
  .combat-inspector { width: 238px; }
  .combat-inspector.waiting { width: 238px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .combat-hud { padding: 4px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); gap: 9px; }
  .combat-region { display: none; }
  .combat-bottom { padding: 6px 12px 4px; gap: 10px; }
  .combat-bottom-title { width: 64px; }
  .combat-bottom-title span { font-size: 14px; }
  .combat-help { display: none; }
  .combat-card { width: 70px; }
  .combat-inspector { width: 244px; left: 9px; top: calc(var(--hud) + 4px); padding: 8px 9px 9px; max-height: calc(100% - var(--hud) - var(--dock) - 8px); }
  .combat-inspector.waiting { width: 244px; left: 9px; top: calc(var(--hud) + 4px); }
  .combat-inspector-head > span { width: 33px; height: 33px; }
  .combat-inspector-head strong { font-size: 13px; }
  .combat-inspector-head small { font-size: 7px; }
  .combat-inspector-head button { font-size: 18px; }
  .ci-chip { font-size: 7.5px; }
  .ci-skill p { font-size: 8.5px; }
  .ci-skill-head b { font-size: 11px; }
  .ci-actions button { padding: 6px 5px; font-size: 9.5px; }
  .ci-hint { font-size: 8px; }
  .combat-resource { bottom: calc(var(--dock) + 2px); right: 12px; padding: 5px 10px; min-width: 102px; }
  .combat-resource strong { font-size: 30px; }
  .combat-briefing { width: min(520px, 86%); padding: 11px 16px; gap: 16px; margin-top: calc(var(--hud) * .5 - 2px); }
  .combat-briefing h2 { font-size: 17px !important; }
  .combat-briefing p { font-size: 9.5px; }
  .combat-briefing .brief-chip { font-size: 7px; }
  .combat-briefing button { padding: 11px 13px; font-size: 11px; }
  .combat-combo { top: calc(var(--hud) + 2px); }
  .combat-result > div { width: 430px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .combat-root { --hud: 88px; --dock: 104px; }
  .combat-canvas { height: 100%; }
  .combat-inspector { left: 10px; top: calc(var(--hud) + 6px); width: min(260px, 62vw); }
  .combat-inspector.waiting { left: 10px; top: calc(var(--hud) + 6px); width: min(260px, 62vw); }
  .combat-resource { right: 10px; bottom: calc(var(--dock) + 6px); }
  .combat-bottom { gap: 8px; }
  .combat-card { width: 66px; }
  .combat-briefing { width: 92%; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-combo.is-pop, .combat-banner.is-show, .combat-briefing { animation: none !important; }
  .combat-card-portrait .chibi { animation: none !important; }
}

/* ============================================================
   v4 全屏融合：透明悬浮干员卡 + 更大的棋盘 + 无深色底栏
   ============================================================ */
.combat-canvas { inset: 0; }
@media (orientation: landscape) and (max-height: 550px) {
  .combat-root { --hud: 47px; --dock: 72px; }
}
/* 底部：不再是独立深色栏，只保留极轻的底部压暗，卡牌本身悬浮在地图上 */
.combat-bottom {
  background: linear-gradient(0deg, rgba(2, 5, 7, .55) 0%, rgba(3, 7, 10, .22) 42%, rgba(3, 7, 10, .04) 74%, rgba(3, 7, 10, 0) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border: 0;
}
.combat-bottom-title { opacity: .82; }
.combat-bottom-title span { text-shadow: 0 1px 8px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .6); }
.combat-bottom-title small { color: rgba(217, 180, 95, .85); }
.combat-hand { padding: 2px 2px 0; }
/* 卡牌：半透明毛玻璃，卡内人物保持 1:1 正方形，不再拉伸 */
.combat-card {
  width: 78px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(6, 10, 13, .18) 62%, rgba(6, 10, 13, .34));
  border: 1px solid rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  backdrop-filter: blur(4px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.combat-card:hover:not(:disabled) { background: linear-gradient(170deg, rgba(255, 255, 255, .14), rgba(6, 10, 13, .16)); }
.combat-card.selected { background: linear-gradient(170deg, rgba(255, 224, 150, .18), rgba(6, 10, 13, .24)); }
.combat-card.in-field { background: linear-gradient(170deg, rgba(255, 224, 150, .10), rgba(6, 10, 13, .26)); }
/* 人物方形容器：雪碧图单元格是 512×512 / 887×887 正方形，容器必须为 1:1 */
.combat-card-portrait {
  position: absolute;
  left: 50%;
  bottom: 6%;
  height: 96%;
  width: auto;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  z-index: -1;
  opacity: .96;
  overflow: hidden;
}
.combat-card-portrait .chibi {
  width: 100%;
  height: 100%;
  background-size: 300% 200%;
  background-repeat: no-repeat;
  object-fit: contain;
}
.combat-card strong {
  background: linear-gradient(transparent, rgba(2, 5, 7, .66));
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.combat-card > small { background: rgba(2, 5, 7, .58); color: #d8d0b4; }
.combat-card-role { background: rgba(2, 6, 9, .46); border-color: rgba(242, 182, 44, .38); }
.combat-card-cost { color: #ffe9b2; text-shadow: 0 2px 8px rgba(0, 0, 0, .95); }
.combat-card-cooldown { background: rgba(3, 6, 8, .55); }
/* DP 面板：完全悬浮，不再是一块实心板 */
.combat-resource {
  background: radial-gradient(120% 120% at 100% 50%, rgba(4, 8, 11, .40), rgba(4, 8, 11, 0) 72%);
  border-right: 2px solid rgba(242, 182, 44, .9);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  min-width: 92px;
  padding: 4px 9px;
  bottom: calc(var(--dock) + 2px);
  right: max(12px, env(safe-area-inset-right));
}
.combat-resource > span { color: rgba(217, 180, 95, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.combat-resource strong { font-size: 32px; text-shadow: 0 0 16px rgba(255, 213, 110, .45), 0 2px 8px rgba(0, 0, 0, .85); }
.combat-resource i { text-shadow: 0 0 12px rgba(242, 182, 44, .8); }
.combat-resource small { color: rgba(210, 219, 212, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.combat-help { opacity: .78; }
@media (orientation: landscape) and (max-height: 550px) {
  .combat-card { width: 76px; }
  .combat-bottom { padding: 0 12px max(2px, env(safe-area-inset-bottom)); gap: 10px; }
  .combat-bottom-title { width: 58px; }
  .combat-bottom-title span { font-size: 13px; }
  .combat-bottom-title small { font-size: 5px; }
  .combat-hand { gap: 6px; }
  .combat-resource { min-width: 86px; padding: 3px 8px; bottom: calc(var(--dock) + 1px); }
  .combat-resource strong { font-size: 28px; }
  .combat-resource > span { font-size: 6px; }
  .combat-resource small { font-size: 7.5px; }
  .combat-resource i { font-size: 17px; }
  .combat-dp-meter { margin-top: 3px; }
}
/* 紧凑版角色信息面板：保证“状态 / 技能 / 撤退”在 844×390 一屏内可见 */
.combat-inspector {
  padding: 7px 9px 8px;
  width: 248px;
  max-height: calc(100% - var(--hud) - var(--dock) - 10px);
  background: linear-gradient(160deg, rgba(10, 14, 18, .86), rgba(6, 10, 13, .80));
}
.combat-inspector-head { gap: 7px; }
.combat-inspector-head > span { width: 32px; height: 32px; }
.combat-inspector-head strong { font-size: 14px; }
.combat-inspector-head small { font-size: 7.5px; margin-bottom: 2px; }
.combat-inspector-head button { font-size: 18px; }
.ci-chips { margin-top: 5px; gap: 2px; }
.ci-chip { font-size: 7.5px; line-height: 1.45; padding: 1px 4px; }
.ci-hpbar { margin-top: 5px; }
.ci-hpbar .ci-bar-label { font-size: 7.5px; margin-bottom: 1px; }
.ci-bar { height: 4px; }
.ci-charge-row { margin-top: 4px; }
.ci-charge-row .ci-bar-label { font-size: 7.5px; }
.ci-skill { margin-top: 6px; padding-top: 5px; }
.ci-skill-head b { font-size: 11px; }
.ci-skill-head small { font-size: 7.5px; }
.ci-skill p { font-size: 8.5px; line-height: 1.42; margin: 3px 0 0; }
.ci-status { margin-top: 4px; gap: 2px; }
.ci-badge { font-size: 7.5px; padding: 1px 4px; }
.ci-hint { margin-top: 6px; font-size: 8px; line-height: 1.5; }
.ci-actions { margin-top: 6px; gap: 5px; }
.ci-actions button { padding: 6px 5px; font-size: 9.5px; }
.combat-inspector .combat-directions { margin: 6px 0 5px; gap: 4px; }
.combat-inspector .combat-directions button { height: 30px; font-size: 17px; }
.combat-inspector .combat-confirm { padding: 7px 9px; font-size: 10.5px !important; }
.combat-inspector .combat-confirm span { font-size: 8.5px; }
@media (orientation: landscape) and (max-height: 550px) {
  .combat-inspector { width: 240px; left: 8px; top: calc(var(--hud) + 3px); }
}

/* v5：卡牌人物严格 1:1、DP 角标移到右下角、技能与信息面板微调 */
.combat-card-portrait {
  top: auto;
  right: auto;
  inset: auto;
  left: 50%;
  bottom: 5%;
  height: 98%;
  width: auto;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  overflow: hidden;
}
.combat-hand { padding-right: 104px; }
.combat-resource {
  z-index: 7;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(3px, env(safe-area-inset-bottom));
  min-width: 88px;
  padding: 2px 9px 3px;
  border-right: 2px solid rgba(242, 182, 44, .9);
  background: radial-gradient(130% 130% at 100% 55%, rgba(4, 8, 11, .42), rgba(4, 8, 11, 0) 74%);
}
.combat-resource > span { font-size: 6px; letter-spacing: .16em; }
.combat-resource strong { font-size: 27px; line-height: 1.05; }
.combat-resource small { font-size: 7.5px; }
.combat-resource i { font-size: 16px; }
.combat-dp-meter { margin-top: 2px; height: 1.5px; }
@media (orientation: landscape) and (max-height: 550px) {
  .combat-hand { padding-right: 100px; }
  .combat-resource { min-width: 84px; padding: 1px 8px 2px; }
  .combat-resource strong { font-size: 26px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .combat-hand { padding-right: 96px; }
  .combat-resource { right: 8px; bottom: max(3px, env(safe-area-inset-bottom)); }
}


/* ============================================================
   v6 · 战斗 HUD 水墨金碧化（取意 ink/ref-battle.png）+ 剧情演出层
   统一 token：优先用 ink-ui.css 的 --gold/--paper/--seal 等，独立打开时回退
   ============================================================ */

/* ---------- 顶部：宣纸卷轴标题 / 军功卷 / 圆形按钮 ---------- */
.combat-root {
  --battle-paper: var(--paper, #f0e4c9);
  --battle-paper-2: var(--paper-2, #e2d1ac);
  --battle-paper-3: var(--paper-3, #cdb98d);
  --battle-gold: var(--gold, #e8c37a);
  --battle-gold-bright: var(--gold-bright, #ffdf9a);
  --battle-gold-deep: var(--gold-deep, #a87b2f);
  --battle-seal: var(--seal, #b33a2b);
  --battle-ink: #10201f;
  --battle-font-ink: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
}
.combat-hud {
  background:
    linear-gradient(180deg, rgba(3, 8, 10, .86) 0%, rgba(3, 8, 10, .42) 52%, rgba(3, 8, 10, 0) 100%);
  border-bottom: 0;
  align-items: flex-start;
  padding-top: 8px;
  pointer-events: none;
}
.combat-hud > * { pointer-events: auto; }
.combat-hud button {
  border-radius: 50%;
  border: 1px solid rgba(232, 195, 122, .55);
  background: radial-gradient(circle at 34% 28%, rgba(70, 104, 92, .96), rgba(10, 22, 22, .96) 66%);
  color: var(--battle-gold-bright);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(232, 195, 122, .16), inset 0 1px 0 rgba(255, 244, 214, .3);
  font-family: var(--battle-font-ink);
  transition: transform .14s ease, filter .16s ease, border-color .16s ease;
}
.combat-hud button:hover:not(:disabled) { filter: brightness(1.12); border-color: var(--battle-gold-bright); }
.combat-hud button:active:not(:disabled) { transform: scale(.92); }

/* 左上退出：木牌圆钮 */
.combat-hud > [data-combat="exit"] {
  background: radial-gradient(circle at 34% 28%, #7a5830, #35220f 70%);
  color: #ffe6b4; border-color: #b98a4a;
  font-size: 22px;
  margin-top: 2px;
}
/* 标题卷轴：宣纸 + 两端卷轴轴头 */
.combat-hud .combat-title {
  position: relative;
  max-width: none;
  padding: 3px 30px 3px 26px;
  border: 1px solid #7c5a24;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #f7ecd0 0%, #ecdcb4 46%, #d8bd89 78%, #c5a56d 100%);
  box-shadow: inset 0 1px 0 #fff8e2, inset 0 -6px 14px rgba(122, 90, 40, .26), 0 8px 20px rgba(0, 0, 0, .5);
  color: #33240f;
}
.combat-hud .combat-title::before,
.combat-hud .combat-title::after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 11px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4f3417, #9a7440 45%, #5d3f1d);
  box-shadow: 0 0 0 1px rgba(24, 14, 6, .7), inset 0 1px 0 rgba(255, 232, 190, .35);
}
.combat-hud .combat-title::before { left: -7px; }
.combat-hud .combat-title::after { right: -7px; }
.combat-hud .combat-title small {
  display: block; margin: 0 0 1px;
  color: #8a6526; font-size: 6.5px; font-weight: 700; letter-spacing: .22em;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .7);
}
.combat-hud .combat-title strong {
  color: #2c1d0b;
  font-family: var(--battle-font-ink);
  font-size: 17px; font-weight: 700; letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .55);
}

/* 中央：击败 / 星灯 战功卷轴 */
.combat-hud .combat-counts {
  position: relative;
  margin: 3px auto 0;
  gap: 20px;
  padding: 3px 30px 4px;
  border: 1px solid rgba(232, 195, 122, .55);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(64, 52, 34, .94) 0%, rgba(34, 27, 18, .96) 52%, rgba(20, 15, 10, .96) 100%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 232, 186, .14), 0 8px 20px rgba(0, 0, 0, .5);
}
.combat-hud .combat-counts::before,
.combat-hud .combat-counts::after {
  content: '';
  position: absolute; top: -3px; bottom: -3px; width: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3b2814, #7c5a2c 45%, #2c1d0d);
  box-shadow: 0 0 0 1px rgba(20, 12, 6, .8);
}
.combat-hud .combat-counts::before { left: -5px; }
.combat-hud .combat-counts::after { right: -5px; }
.combat-hud .combat-counts > div { display: flex; align-items: baseline; gap: 7px; text-shadow: none; }
.combat-hud .combat-counts span {
  color: #c9b489; font-family: var(--battle-font-ink);
  font-size: 9px; letter-spacing: .14em;
}
.combat-hud .combat-counts strong {
  color: #ffe6a8; font-family: var(--battle-font-ink);
  font-size: 25px; font-weight: 700;
  text-shadow: 0 0 14px rgba(255, 214, 120, .35);
}
.combat-hud .combat-counts small { color: #a99468; font-size: 12px; }
.combat-hud .combat-counts .combat-life strong,
.combat-hud .combat-counts .combat-life small {
  color: #ffd75e;
  text-shadow: 0 0 14px rgba(255, 205, 94, .55);
}

/* 右上圆形按钮：音（青玉）/ 壹倍（宣纸）/ 暫（木） */
.combat-controls { gap: 8px; margin-top: 2px; }
.combat-controls .combat-square { height: 34px; min-width: 34px; font-size: 13px; }
.combat-controls [data-combat="sound"] {
  background: radial-gradient(circle at 34% 28%, #a9d6c2, #4f8f7e 46%, #244c42 100%);
  color: #0f2a22; border-color: #cdeee0;
  font-size: 15px;
}
.combat-controls [data-combat="sound"] .sound-dot { display: none; }
.combat-controls [data-combat="sound"].is-off {
  background: radial-gradient(circle at 34% 28%, #8f968c, #4e544d 50%, #262b26 100%);
  color: #cdd2c6; border-color: rgba(232, 195, 122, .4);
}
.combat-controls [data-combat="speed"] {
  background: radial-gradient(circle at 34% 28%, #f7ecd0, #dfc79a 52%, #bb9a63 100%);
  color: #3a2a12; border-color: #8a6a33;
  font-size: 11px; letter-spacing: .02em;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .5), inset 0 1px 0 #fff8e4;
}
.combat-controls [data-combat="pause"] {
  background: radial-gradient(circle at 34% 28%, #7c5a30, #3d2812 66%);
  color: #ffe6b4; border-color: #b98a4a;
  font-size: 15px;
}

/* ---------- 底部：宣纸干员卡 + 费用木牌 ---------- */
.combat-bottom {
  background: linear-gradient(0deg, rgba(2, 6, 8, .88) 0%, rgba(2, 6, 8, .48) 52%, rgba(2, 6, 8, 0) 100%);
  border-top: 0;
}
.combat-bottom-title span {
  font-family: var(--battle-font-ink);
  color: #ffe9bb;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 0, 0, .7);
}
.combat-bottom-title small { color: rgba(232, 195, 122, .9); }
.combat-help strong { color: #ffe1a0; font-family: var(--battle-font-ink); }
.combat-help small { color: rgba(206, 206, 186, .8); }
.combat-hand { padding-right: 108px; }

.combat-card {
  width: 78px;
  border: 1px solid #7c5a24;
  border-radius: 3px;
  background:
    linear-gradient(170deg, #f8efd8 0%, #ecdcb4 48%, #d8bd89 100%);
  color: #2e2110;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 250, 232, .6);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.combat-card::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(124, 90, 36, .38);
  pointer-events: none; z-index: 3;
}
.combat-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--battle-gold-bright);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 214, 120, .35), inset 0 0 0 1px rgba(255, 250, 232, .65);
}
.combat-card:active:not(:disabled) { transform: translateY(-1px) scale(.98); }
.combat-card.selected {
  border: 2px solid #ffd75e;
  box-shadow: 0 0 0 1px rgba(80, 54, 16, .8), 0 10px 26px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 208, 100, .65);
  background: linear-gradient(170deg, #fff6e0, #f0dfb6 52%, #dcc28f 100%);
}
.combat-card.unaffordable { filter: grayscale(.62) brightness(.72); }
.combat-card.in-field { border-color: #b0813c; }
.combat-card.in-field::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 214, 120, .10), rgba(20, 12, 4, .18));
  pointer-events: none;
}
.combat-card.is-ready { border-color: #ffd75e; box-shadow: 0 0 18px rgba(255, 215, 94, .55), inset 0 0 14px rgba(255, 215, 94, .28); }
.combat-card strong {
  background: linear-gradient(transparent, rgba(248, 238, 214, .94));
  color: #2c1d0b;
  font-family: var(--battle-font-ink);
  font-size: 11px; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 250, 232, .6);
}
.combat-card > small { background: rgba(244, 231, 200, .92); color: #6a4f24; text-shadow: none; }
.combat-card-role {
  background: rgba(94, 44, 26, .10);
  border: 1px solid rgba(124, 90, 36, .52);
  color: #8a4a22;
  font-family: var(--battle-font-ink);
  letter-spacing: .04em;
}
.combat-card-cost {
  color: #2b1d0c;
  font-family: var(--battle-font-ink);
  font-size: 24px; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .55);
}
.combat-card-cooldown { background: rgba(44, 30, 12, .55); }
.combat-card-portrait { filter: drop-shadow(0 3px 4px rgba(60, 38, 12, .35)); }

/* 右下：部署费用木牌 */
.combat-resource {
  z-index: 7;
  background:
    linear-gradient(160deg, #6d4b26 0%, #462d14 46%, #2e1c0b 100%);
  border: 1px solid #a87b3f;
  border-right: 3px solid #d9b56d;
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 0 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 232, 186, .18);
  padding: 4px 14px 5px 20px;
  min-width: 104px;
}
.combat-resource::before {
  content: '部署';
  position: absolute;
  left: -15px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: 7px 4px;
  background: linear-gradient(180deg, #f4e5c0, #d5b57c 60%, #b8935a);
  border: 1px solid #7c5a24;
  border-radius: 2px;
  color: #3a2a12;
  font-family: var(--battle-font-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 #fff7e2;
}
.combat-resource > span { color: rgba(240, 212, 156, .92); letter-spacing: .2em; }
.combat-resource strong {
  color: #ffe9b0;
  font-family: var(--battle-font-ink);
  text-shadow: 0 0 16px rgba(255, 213, 110, .45), 0 2px 8px rgba(0, 0, 0, .85);
}
.combat-resource i { color: #ffd77e; }
.combat-resource small { color: rgba(232, 216, 180, .92); }
.combat-dp-meter { background: rgba(255, 233, 186, .18); }
.combat-dp-meter i { background: linear-gradient(90deg, #d99a14, #ffe6a4); box-shadow: 0 0 10px rgba(255, 214, 120, .6); }

/* 顶部气氛小字 */
.combat-region { color: #e6dcc2; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.combat-region small { color: rgba(210, 205, 180, .82); }
.combat-phase {
  background: linear-gradient(180deg, rgba(52, 42, 26, .95), rgba(24, 18, 11, .96));
  border: 1px solid rgba(232, 195, 122, .55);
  color: #ffe6a8;
  font-family: var(--battle-font-ink);
  letter-spacing: .12em;
}
.combat-banner strong { color: #ffe9b4; font-family: var(--battle-font-ink); text-shadow: 0 0 24px rgba(255, 214, 120, .5), 0 2px 10px rgba(0, 0, 0, .9); }
.combat-banner small { color: rgba(232, 195, 122, .9); }
.combat-combo { background: linear-gradient(180deg, rgba(52, 42, 26, .85), rgba(24, 18, 11, .9)); border: 1px solid rgba(232, 195, 122, .5); color: #ffe6a8; font-family: var(--battle-font-ink); }
.combat-combo b { color: #ffd75e; }

/* ---------- 面板：简报 / 信息 / 结算 / 退出 ---------- */
.combat-briefing {
  background:
    linear-gradient(170deg, rgba(248, 239, 216, .98) 0%, rgba(236, 220, 180, .98) 52%, rgba(214, 190, 140, .98) 100%);
  border: 1px solid #7c5a24;
  border-left: 5px solid var(--battle-seal);
  border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 250, 232, .55), inset 0 0 40px rgba(168, 123, 47, .14);
  color: #33240f;
}
.combat-briefing::before,
.combat-briefing::after {
  content: '';
  position: absolute; top: 6px; bottom: 6px; width: 7px;
  background: linear-gradient(90deg, #c9a96e, #f0e1bd 46%, #a9854c);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(124, 90, 36, .5);
  pointer-events: none;
}
.combat-briefing::before { left: 4px; }
.combat-briefing::after { right: 4px; }
.combat-briefing small { color: #8a6526; }
.combat-briefing h2 { color: #2c1d0b; font-family: var(--battle-font-ink); letter-spacing: .1em; }
.combat-briefing p { color: #5a4626; }
.combat-briefing span { color: #7a6238; }
.combat-briefing .brief-chip {
  border: 1px solid rgba(124, 90, 36, .5);
  background: rgba(255, 248, 226, .55);
  color: #5a4626;
}
.combat-briefing .brief-chip b { color: #8a2f22; }
.combat-briefing button {
  background: linear-gradient(180deg, #f4d795 0%, #e2b866 42%, #b98a3e 100%);
  border: 1px solid #ffe4ac;
  color: #2b1d0c;
  font-family: var(--battle-font-ink);
  font-weight: 700;
  box-shadow: 0 3px 0 #6f4c1c, 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 #fff1cd;
}
.combat-briefing button b { color: #6d4a16; }

.combat-inspector {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)),
    rgba(7, 14, 16, .90);
  border: 1px solid rgba(232, 195, 122, .42);
  border-top: 3px solid var(--battle-gold, #e8c37a);
  border-radius: 2px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 200, .08);
}
.combat-inspector::before,
.combat-inspector::after {
  content: '';
  position: absolute; width: 10px; height: 10px;
  border-color: rgba(232, 195, 122, .65); border-style: solid; pointer-events: none;
}
.combat-inspector::before { left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.combat-inspector::after { right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }
.combat-inspector.is-unit { border-top-color: #ffd75e; }
.combat-inspector-head > span { border: 1px solid rgba(232, 195, 122, .45); border-radius: 2px; background: #f0e4c9; }
.combat-inspector-head small { color: var(--battle-gold, #e8c37a); font-family: var(--battle-font-ink); }
.combat-inspector-head strong { color: #fbf3df; font-family: var(--battle-font-ink); }
.combat-inspector-head button { color: #d5cdb6; }
.ci-chip { border-color: rgba(232, 195, 122, .32); background: rgba(232, 195, 122, .06); color: #e8d7ad; }
.ci-chip b { color: #fff6e2; }
.ci-chip.is-cost { color: #2b1d0c; background: linear-gradient(135deg, #f4d795, #e2b866); border-color: #ffe4ac; }
.ci-bar { background: rgba(240, 228, 198, .14); }
.ci-skill { border-top: 1px solid rgba(232, 195, 122, .2); }
.ci-skill-head b { color: #ffe1a0; font-family: var(--battle-font-ink); }
.ci-hint { color: #b9b09a; }
.ci-actions .ci-retreat { color: #f0a79b; }

.combat-result, .combat-exit { background: rgba(2, 6, 8, .78); }
.combat-result > div, .combat-exit > section {
  background:
    linear-gradient(170deg, #f7ecd0 0%, #ecdcb4 46%, #d8bd89 100%);
  border: 1px solid #7c5a24;
  border-top: 4px solid var(--battle-seal);
  border-radius: 3px;
  color: #33240f;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 250, 232, .6), inset 0 0 46px rgba(168, 123, 47, .14);
}
.combat-result > div::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(124, 90, 36, .32);
  pointer-events: none;
}
.combat-result small, .combat-exit small { color: #8a6526; }
.combat-result-mark { color: #b33a2b; }
.combat-result h2 { color: #2c1d0b; font-family: var(--battle-font-ink); }
.combat-result p, .combat-exit p { color: #5a4626; }
.combat-result-stats { color: #6a5630; }
.combat-result-stats b { color: #2c1d0b; }
.combat-result .combat-result-extra { color: #6a5630; }
.combat-result .combat-result-extra b { color: #8a2f22; }
.combat-loot { border-color: rgba(124, 90, 36, .4); color: #5a4626; }
.combat-loot small { color: #8a6526; }
.combat-loot b { color: #8a2f22; }
.combat-panel-actions button {
  background: rgba(255, 248, 226, .5);
  border: 1px solid rgba(124, 90, 36, .55);
  color: #4a3818;
  font-family: var(--battle-font-ink);
}
.combat-panel-actions button:hover { background: rgba(255, 248, 226, .82); border-color: #7c5a24; }
.combat-panel-actions .combat-primary {
  background: linear-gradient(180deg, #f4d795 0%, #e2b866 42%, #b98a3e 100%) !important;
  border-color: #ffe4ac !important;
  color: #2b1d0c !important;
  box-shadow: 0 3px 0 #6f4c1c, inset 0 1px 0 #fff1cd;
}
.combat-exit h3 { color: #2c1d0b; font-family: var(--battle-font-ink); }
.combat-exit section { padding: 26px 28px; }

/* ---------- 剧情演出层（半透明水墨对话层） ---------- */
.story-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  font-family: var(--battle-font-ink);
  background:
    radial-gradient(ellipse at 22% 42%, rgba(10, 24, 28, .30), rgba(3, 8, 10, .58) 62%, rgba(2, 5, 7, .76) 100%);
  -webkit-backdrop-filter: blur(2.5px) saturate(.92);
  backdrop-filter: blur(2.5px) saturate(.92);
  cursor: pointer;
  user-select: none;
}
.story-layer[hidden] { display: none; }
.story-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 84%, rgba(6, 18, 20, .55), transparent 46%),
    radial-gradient(ellipse at 88% 12%, rgba(10, 22, 28, .45), transparent 42%),
    repeating-linear-gradient(104deg, rgba(240, 228, 198, .018) 0 2px, transparent 2px 9px);
  pointer-events: none;
}
.story-ink-cloud {
  position: absolute;
  width: 46%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(6, 16, 18, .5), rgba(6, 16, 18, 0) 68%);
  filter: blur(6px);
  pointer-events: none;
}
.story-ink-cloud.a { left: -12%; top: 8%; animation: story-cloud-a 26s ease-in-out infinite alternate; }
.story-ink-cloud.b { right: -14%; bottom: 2%; animation: story-cloud-b 32s ease-in-out infinite alternate; }
@keyframes story-cloud-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.12); } }
@keyframes story-cloud-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-6%, -3%, 0) scale(1); } }

.story-figure {
  position: absolute;
  left: max(18px, calc(env(safe-area-inset-left) + 14px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  width: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.story-portrait {
  position: relative;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(232, 195, 122, .55);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(240, 228, 198, .22), rgba(8, 18, 20, .18) 58%, rgba(6, 14, 16, .62) 100%);
  box-shadow: inset 0 0 34px rgba(6, 14, 16, .7), 0 10px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(232, 195, 122, .12);
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform .34s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .3s ease;
}
.story-portrait::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(232, 195, 122, .28);
  border-radius: 2px;
  pointer-events: none;
}
.story-portrait::after {
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: 3px; height: 20%;
  background: linear-gradient(0deg, rgba(4, 10, 12, .82), transparent);
  pointer-events: none;
}
.story-portrait .chibi {
  position: absolute;
  inset: 4% 6% 2%;
  width: 88% !important;
  height: 96% !important;
  background-size: 500% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(255, 224, 160, .12));
  transform: scale(1.02);
  animation: story-portrait-breathe 4.2s ease-in-out infinite;
}
.story-portrait .chibi.chibi-zhenyi,
.story-portrait .chibi.chibi-grandfather,
.story-portrait .chibi.chibi-mother,
.story-portrait .chibi.chibi-maid,
.story-portrait .chibi.chibi-scholar { background-size: 300% 200%; }
.story-portrait .chibi.chibi-scholar,
.story-portrait .chibi.chibi-oldmaster { background-size: 200% 100%; }
.story-portrait .chibi.chibi-zhenyi_winter,
.story-portrait .chibi.chibi-zhenyi_west { background-size: 200% 100%; }
@keyframes story-portrait-breathe { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.035) translateY(-1.5%); } }
.story-layer.is-foe .story-portrait {
  border-color: rgba(214, 120, 96, .62);
  box-shadow: inset 0 0 34px rgba(30, 6, 8, .8), 0 10px 30px rgba(0, 0, 0, .6), 0 0 26px rgba(196, 80, 60, .22);
}
.story-layer.is-foe .story-portrait .chibi { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .65)) drop-shadow(0 0 20px rgba(220, 100, 70, .18)); }
.story-layer.is-boss .story-portrait { transform: scale(1.10); border-color: rgba(255, 120, 96, .8); }
.story-layer.is-boss .story-figure { width: 168px; }
.story-layer.is-boss .story-wash { background: radial-gradient(ellipse at 22% 60%, rgba(120, 28, 22, .22), transparent 46%), radial-gradient(ellipse at 80% 20%, rgba(10, 22, 28, .5), transparent 46%); }
.story-layer.is-boss::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(120, 26, 20, .20) 100%);
  pointer-events: none;
  animation: story-boss-pulse 2.6s ease-in-out infinite;
}
@keyframes story-boss-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.story-nameplate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 5px;
  border: 1px solid rgba(232, 195, 122, .55);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(20, 30, 30, .92), rgba(8, 16, 18, .92));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .55);
  transform: translateY(-4px);
}
.story-seal {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  background: var(--battle-seal, #b33a2b);
  color: #f6e7d2;
  border: 1px solid rgba(255, 220, 190, .55);
  border-radius: 2px;
  font-size: 11px; font-weight: 700;
  transform: rotate(-4deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.story-nameplate strong { display: block; color: #ffe9b8; font-size: 13px; letter-spacing: .1em; line-height: 1.2; }
.story-nameplate small { display: block; color: #b7a986; font-size: 8px; letter-spacing: .12em; margin-top: 1px; }
.story-layer.is-foe .story-nameplate { border-color: rgba(214, 120, 96, .6); }
.story-layer.is-foe .story-seal { background: #8a2a20; }

.story-box {
  position: absolute;
  left: 214px;
  right: max(24px, calc(env(safe-area-inset-right) + 18px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  min-height: 128px;
  padding: 12px 22px 14px;
  border: 1px solid rgba(232, 195, 122, .5);
  border-left: 3px solid var(--battle-seal, #b33a2b);
  border-radius: 3px;
  background:
    linear-gradient(160deg, rgba(246, 236, 212, .14), rgba(10, 20, 22, .30) 40%, rgba(5, 12, 14, .62) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 200, .12), inset 0 0 60px rgba(0, 0, 0, .28);
  transform: translateY(10px);
  opacity: 0;
}
.story-box.is-in { animation: story-box-in .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes story-box-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.story-box-corner { position: absolute; width: 11px; height: 11px; border-color: rgba(232, 195, 122, .8); border-style: solid; pointer-events: none; }
.story-box-corner.tl { left: 4px; top: 4px; border-width: 1px 0 0 1px; }
.story-box-corner.tr { right: 4px; top: 4px; border-width: 1px 1px 0 0; }
.story-box-corner.bl { left: 4px; bottom: 4px; border-width: 0 0 1px 1px; }
.story-box-corner.br { right: 4px; bottom: 4px; border-width: 0 1px 1px 0; }
.story-tag {
  color: rgba(232, 195, 122, .92);
  font-size: 8px; letter-spacing: .22em;
  padding-right: 92px;
}
.story-text {
  margin: 7px 0 0;
  color: #f6efdd;
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: .06em;
  min-height: 54px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
  white-space: pre-wrap;
}
.story-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.story-progress { display: flex; gap: 5px; }
.story-progress i {
  width: 14px; height: 3px;
  background: rgba(232, 195, 122, .22);
  border-radius: 1px;
  transition: background .2s, box-shadow .2s;
}
.story-progress i.done { background: rgba(232, 195, 122, .55); }
.story-progress i.on { background: var(--battle-gold-bright, #ffdf9a); box-shadow: 0 0 8px rgba(255, 223, 154, .7); }
.story-next {
  color: rgba(240, 222, 178, .85);
  font-size: 10px; letter-spacing: .16em;
  animation: story-next-blink 1.8s ease-in-out infinite;
}
.story-next i { font-style: normal; color: var(--battle-gold-bright, #ffdf9a); }
@keyframes story-next-blink { 0%, 100% { opacity: .42; } 50% { opacity: 1; } }

.story-skip {
  position: absolute;
  right: max(18px, calc(env(safe-area-inset-right) + 14px));
  top: max(12px, calc(env(safe-area-inset-top) + 10px));
  padding: 5px 12px 5px 14px;
  border: 1px solid rgba(232, 195, 122, .5);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(20, 30, 30, .9), rgba(8, 16, 18, .92));
  color: rgba(240, 226, 190, .9);
  font-family: var(--battle-font-ink);
  font-size: 11px; letter-spacing: .14em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  transition: color .16s, border-color .16s, transform .14s;
}
.story-skip b { color: var(--battle-gold-bright, #ffdf9a); }
.story-skip:hover { color: #fff3d6; border-color: var(--battle-gold-bright, #ffdf9a); }
.story-skip:active { transform: scale(.95); }

/* 剧情层的星灯/水墨点缀 */
.story-layer::before {
  content: '✦';
  position: absolute;
  right: 6%; top: 16%;
  font-size: 18px;
  color: rgba(255, 223, 154, .5);
  text-shadow: 0 0 18px rgba(255, 223, 154, .55);
  animation: story-next-blink 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 窄屏 / 紧凑 ---------- */
@media (orientation: landscape) and (max-height: 550px) {
  .combat-hud { padding-top: 5px; }
  .combat-hud .combat-title { padding: 2px 24px 2px 20px; }
  .combat-hud .combat-title strong { font-size: 13px; }
  .combat-hud .combat-title small { font-size: 5.5px; }
  .combat-hud .combat-counts { padding: 2px 24px 3px; gap: 16px; }
  .combat-hud .combat-counts strong { font-size: 21px; }
  .combat-hud .combat-counts span { font-size: 8px; }
  .combat-controls .combat-square { height: 29px; min-width: 29px; font-size: 12px; }
  .combat-controls [data-combat="speed"] { font-size: 9.5px; }
  .combat-hud > [data-combat="exit"] { font-size: 18px; }
  .combat-card { width: 76px; }
  .combat-card-cost { font-size: 21px; }
  .combat-resource { min-width: 92px; padding: 2px 10px 3px 16px; }
  .combat-resource::before { left: -12px; font-size: 9px; padding: 5px 3px; }
  .combat-resource strong { font-size: 26px; }
  .combat-briefing { gap: 18px; padding: 10px 18px; }
  .story-box { left: 182px; min-height: 116px; padding: 9px 18px 10px; }
  .story-text { font-size: 13px; min-height: 46px; line-height: 1.66; }
  .story-figure { width: 132px; left: 14px; bottom: 12px; }
  .story-portrait { width: 118px; height: 118px; }
  .story-layer.is-boss .story-figure { width: 142px; }
  .story-next { font-size: 9px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .combat-bottom-title { width: 50px; }
  .combat-bottom-title span { font-size: 12px; }
  .combat-card { width: 62px; }
  .combat-hand { gap: 4px; padding-right: 84px; }
  .combat-card-cost { font-size: 19px; }
  .combat-card strong { font-size: 9.5px; }
  .combat-card > small { font-size: 7px; }
  .combat-resource { min-width: 84px; padding: 2px 8px 2px 14px; }
  .combat-resource::before { left: -11px; font-size: 8px; padding: 4px 2px; letter-spacing: .12em; }
  .combat-resource strong { font-size: 23px; }
  .combat-hud .combat-counts { padding: 2px 18px 3px; gap: 12px; }
  .combat-hud .combat-counts strong { font-size: 19px; }
  .combat-hud .combat-title { padding: 2px 20px 2px 16px; }
  .combat-hud .combat-title strong { font-size: 12px; }
  .combat-controls { gap: 5px; }
  .combat-controls .combat-square { height: 27px; min-width: 27px; font-size: 11px; }
  .combat-hud > [data-combat="exit"] { height: 29px; min-width: 29px; font-size: 17px; }
  .combat-region { display: none; }
  .story-box { left: 160px; right: 14px; }
  .story-text { font-size: 12.5px; }
  .story-portrait { width: 104px; height: 104px; }
  .story-figure { width: 118px; left: 10px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .story-layer { position: fixed; }
  .story-box { left: 16px; right: 16px; bottom: 84px; }
  .story-figure { bottom: auto; top: 12%; }
}
@media (prefers-reduced-motion: reduce) {
  .story-portrait .chibi, .story-ink-cloud, .story-next, .story-layer::before, .story-layer.is-boss::after { animation: none !important; }
  .story-box.is-in { animation: none; opacity: 1; transform: none; }
}


/* 地形图例：高台=苔青，地面=暖石 */
.combat-legend{display:flex;align-items:center;gap:5px;margin-top:2px;color:rgba(230,220,196,.85);font-size:8px;letter-spacing:.08em}
.combat-legend i{width:9px;height:9px;border-radius:1px;border:1px solid rgba(255,244,214,.4);display:inline-block;margin-left:7px}
.combat-legend i.is-high{background:linear-gradient(135deg,#9ec9a9,#5f8f74);box-shadow:0 0 8px rgba(158,201,169,.55)}
.combat-legend i.is-road{background:linear-gradient(135deg,#f2e0b4,#c9a96e);box-shadow:0 0 8px rgba(242,224,180,.45)}

/* ================= 官方素材包接入（战斗 HUD） ================= */
.combat-hud .combat-title {
  position: relative;
  width: 236px; max-width: 236px; height: 58px; padding: 0;
  background: url('assets/official/battle-title.png') center / 100% 100% no-repeat !important;
  border: 0 !important; border-radius: 0; box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.combat-hud .combat-title::before {
  content: ''; position: absolute; z-index: 1;
  left: 17%; right: 7%; top: 27%; bottom: 30%;
  background: linear-gradient(180deg, #f4e8cd, #ecdcba);
  border-radius: 1px;
}
.combat-hud .combat-title small {
  position: absolute; z-index: 2; left: 20%; top: 7%;
  font-size: 6.5px; color: #8a5f22; letter-spacing: .12em;
  text-shadow: none; white-space: nowrap;
}
.combat-hud .combat-title strong {
  position: absolute; z-index: 2; left: 20%; right: 8%; top: 32%;
  font-family: var(--font-ink, "STSong", "SimSun", serif);
  font-size: 15px; line-height: 1.1; color: #2c1d0b; letter-spacing: .06em;
  text-align: center; text-shadow: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.combat-hud .combat-controls [data-combat="speed"],
.combat-hud .combat-controls [data-combat="pause"] {
  width: 46px; height: 46px; min-width: 46px; padding: 0;
  border: 0 !important; border-radius: 0; background-color: transparent !important;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  color: transparent !important; font-size: 0 !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.combat-hud .combat-controls [data-combat="speed"] { background-image: url('assets/official/btn-speed.png'); }
.combat-hud .combat-controls [data-combat="pause"] { background-image: url('assets/official/btn-pause.png'); }
.combat-hud .combat-controls [data-combat="speed"]:active,
.combat-hud .combat-controls [data-combat="pause"]:active { transform: scale(.94); }
@media (orientation: landscape) and (max-height: 460px) {
  .combat-hud .combat-title { width: 196px; max-width: 196px; height: 48px; }
  .combat-hud .combat-title strong { font-size: 12.5px; }
  .combat-hud .combat-controls [data-combat="speed"],
  .combat-hud .combat-controls [data-combat="pause"] { width: 36px; height: 36px; min-width: 36px; }
}


/* 标题牌回退为动态版本（官方素材牌面内含静态章节名，避免重影） */
.combat-hud .combat-title {
  width: auto !important; max-width: 210px; height: auto !important;
  padding: 4px 12px 5px !important;
  background: linear-gradient(160deg, rgba(10,20,22,.9), rgba(6,12,14,.86)) !important;
  border: 1px solid rgba(232,195,122,.35) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,200,.08) !important;
  border-radius: 2px;
}
.combat-hud .combat-title::before { display: none !important; }
.combat-hud .combat-title small { position: static !important; left: auto; top: auto; color: #d9b45f !important; font-size: 7px; letter-spacing: .16em; display: block; }
.combat-hud .combat-title strong { position: static !important; left: auto; right: auto; top: auto; display: block; font-size: 13px; color: #f8f5ec; letter-spacing: .06em; text-align: left; white-space: nowrap; }

/* ============ 官方导航条版式（全站统一顶栏） ============ */
.ink-header {
  position: relative !important;
  min-height: 46px;
  height: 48px;
  background: url('assets/official/nav.png') center / 100% 100% no-repeat;
  border-bottom: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ink-header .ink-brand {
  position: absolute; left: 0; top: 0; width: 34%; height: 100%;
  opacity: 0; /* 官方条已含 LOGO，保持按钮可点击 */
  z-index: 3;
}
.ink-header .ink-nav {
  position: absolute; left: 33.5%; right: 23%; top: 0; height: 100%; margin: 0;
  z-index: 2;
}
.ink-header .ink-nav-frame { display: none; }
.ink-header .ink-nav-items {
  width: 100%; height: 100%; padding: 0 4px;
  background: linear-gradient(180deg, rgba(18,13,8,.97), rgba(12,9,6,.97));
  border: 0; box-shadow: none;
}
.ink-header .ink-nav-tab {
  font-family: "STSong", "SimSun", "Songti SC", serif;
  font-size: 13.5px; color: #e0bd78; letter-spacing: .06em;
}
.ink-header .ink-nav-tab.active { color: #ffe6a8; background: rgba(232,195,122,.10); }
.ink-header .ink-header-right {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  z-index: 4; padding: 2px 4px; gap: 4px;
  background: linear-gradient(180deg, rgba(18,13,8,.94), rgba(12,9,6,.94));
  border: 1px solid rgba(232,195,122,.18);
  border-radius: 2px;
}
.ink-header .ink-res { display: none; }
.ink-header .ink-icon-btn { width: 28px; height: 28px; font-size: 11px; }
@media (orientation: landscape) and (max-height: 550px) {
  .ink-header { min-height: 40px; height: 42px; }
  .ink-header .ink-nav-tab { font-size: 11.5px; letter-spacing: .03em; }
  .ink-header .ink-header-right { right: 4px; }
  .ink-header .ink-icon-btn { width: 25px; height: 25px; font-size: 10px; }
}

/* ============ 官方战斗 HUD 素材 ============ */
.combat-hud .combat-title {
  position: relative; width: 250px; max-width: 250px; height: 58px; padding: 0 !important;
  background: url('assets/official/battle-title.png') center / 100% 100% no-repeat !important;
  border: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.combat-hud .combat-title::before {
  content: ''; position: absolute; z-index: 1;
  left: 12%; right: 4%; top: 16%; bottom: 18%;
  background: linear-gradient(180deg, #f3e7cb, #eadbb8);
  border-radius: 1px;
}
.combat-hud .combat-title small { display: none !important; }
.combat-hud .combat-title strong {
  position: absolute; z-index: 2; left: 14%; right: 6%; top: 50%; transform: translateY(-50%);
  font-family: "STKaiti", "KaiTi", "STSong", "SimSun", serif;
  font-size: 17px; color: #2b1c0b; letter-spacing: .05em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none;
}
.combat-hud .combat-counts {
  position: relative; width: 320px; height: 48px;
  background: url('assets/official/battle-counter.png') center / 100% 100% no-repeat;
  padding: 0 12px; gap: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.combat-hud .combat-counts::before {
  content: ''; position: absolute; inset: 20% 5%; z-index: 0;
  background: linear-gradient(180deg, #f1e4c8, #eadab8);
}
.combat-hud .combat-counts > div {
  position: relative; z-index: 1; display: flex; align-items: baseline; gap: 3px;
  padding: 0 10px; color: #2b1c0b;
}
.combat-hud .combat-counts > div + div { border-left: 1px solid rgba(120,84,36,.35); }
.combat-hud .combat-counts span { color: #6c4a1c !important; font-size: 10px; letter-spacing: .08em; }
.combat-hud .combat-counts strong { color: #241708 !important; font-size: 22px; font-weight: 700; font-family: "STSong","SimSun",serif; }
.combat-hud .combat-counts small { color: #6c4a1c !important; font-size: 10px; }
.combat-hud .combat-controls [data-combat="speed"],
.combat-hud .combat-controls [data-combat="pause"] {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border: 0 !important; border-radius: 0; background-color: transparent !important;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  color: transparent !important; font-size: 0 !important;
}
.combat-hud .combat-controls [data-combat="speed"] { background-image: url('assets/official/btn-speed.png'); }
.combat-hud .combat-controls [data-combat="pause"] { background-image: url('assets/official/btn-pause.png'); }
.combat-root::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; z-index: 1; pointer-events: none;
  background: url('assets/official/bottom-deco.png') center bottom / cover no-repeat;
  opacity: .5; mix-blend-mode: screen;
}
@media (orientation: landscape) and (max-height: 460px) {
  .combat-hud .combat-title { width: 200px; max-width: 200px; height: 48px; }
  .combat-hud .combat-title strong { font-size: 13.5px; }
  .combat-hud .combat-counts { width: 260px; height: 40px; }
  .combat-hud .combat-counts strong { font-size: 17px; }
  .combat-hud .combat-controls [data-combat="speed"],
  .combat-hud .combat-controls [data-combat="pause"] { width: 34px; height: 34px; min-width: 34px; }
}

/* ===== 战斗 HUD 回退到清晰的自绘版本（官方素材文字会与动态数据重影） ===== */
.combat-hud .combat-title {
  position: relative; width: auto; max-width: 210px; height: auto; padding: 4px 12px 5px !important;
  background: linear-gradient(160deg, rgba(10,20,22,.9), rgba(6,12,14,.86)) !important;
  border: 1px solid rgba(232,195,122,.35) !important; border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,200,.08) !important;
  filter: none;
}
.combat-hud .combat-title::before { display: none !important; }
.combat-hud .combat-title small { display: block !important; position: static !important; color: #d9b45f !important; font-size: 7px; letter-spacing: .16em; }
.combat-hud .combat-title strong { display: block !important; position: static !important; transform: none !important; font-size: 13px; color: #f8f5ec; letter-spacing: .06em; text-align: left; white-space: nowrap; overflow: visible; text-overflow: clip; }
.combat-hud .combat-counts {
  width: auto; height: auto; padding: 4px 12px; display: flex; gap: 18px; align-items: center;
  background: linear-gradient(160deg, rgba(10,20,22,.88), rgba(6,12,14,.84)) !important;
  border: 1px solid rgba(232,195,122,.3) !important; border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,200,.07) !important;
  filter: none;
}
.combat-hud .combat-counts::before { display: none !important; }
.combat-hud .combat-counts > div { display: flex; align-items: baseline; gap: 3px; padding: 0; border: 0 !important; }
.combat-hud .combat-counts span { color: #b3bbbe !important; font-size: 9px; letter-spacing: .1em; }
.combat-hud .combat-counts strong { color: #fff !important; font-size: 20px; font-weight: 300; font-family: inherit; }
.combat-hud .combat-counts small { color: #9aa2a6 !important; font-size: 9px; }
.combat-root::after { display: none !important; }


/* ===== 操作按钮必须一眼看懂功能（不玩猜图标） ===== */
.combat-hud [data-combat="exit"] {
  width: auto !important; min-width: 62px; height: 34px !important;
  padding: 0 10px !important; border-radius: 3px !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(160deg, rgba(12,24,26,.94), rgba(6,12,14,.9)) !important;
  border: 1px solid rgba(232,195,122,.4) !important;
  color: #ffe6b0 !important; font-size: 12px !important; font-family: "STSong","SimSun",serif; letter-spacing: .06em;
}
.combat-hud [data-combat="exit"] span { font-size: 13px; line-height: 1; }
.combat-controls .combat-square,
.combat-controls [data-combat="sound"],
.combat-controls [data-combat="speed"],
.combat-controls [data-combat="pause"] {
  width: auto !important; min-width: 46px !important; height: 34px !important;
  padding: 0 9px !important; border-radius: 3px !important;
  background-image: none !important; background-color: transparent !important;
  background: linear-gradient(160deg, rgba(12,24,26,.94), rgba(6,12,14,.9)) !important;
  border: 1px solid rgba(232,195,122,.4) !important;
  color: #ffe6b0 !important; font-size: 12px !important;
  font-family: "STSong","SimSun",serif; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
  filter: none !important;
}
.combat-controls [data-combat="sound"] { min-width: 46px !important; }
.combat-controls .combat-square:active { transform: scale(.95); }
@media (orientation: landscape) and (max-height: 460px) {
  .combat-hud [data-combat="exit"] { min-width: 54px; height: 30px !important; font-size: 11px !important; }
  .combat-controls .combat-square,
  .combat-controls [data-combat="sound"],
  .combat-controls [data-combat="speed"],
  .combat-controls [data-combat="pause"] { min-width: 40px !important; height: 30px !important; font-size: 11px !important; padding: 0 7px !important; }
}

/* 修正：更高优先级，确保按钮文字可见 */
.combat-hud .combat-controls [data-combat="sound"],
.combat-hud .combat-controls [data-combat="speed"],
.combat-hud .combat-controls [data-combat="pause"] {
  width: auto !important; min-width: 46px !important; height: 34px !important;
  padding: 0 9px !important; border-radius: 3px !important;
  background-image: none !important; background-color: transparent !important;
  background: linear-gradient(160deg, rgba(12,24,26,.94), rgba(6,12,14,.9)) !important;
  border: 1px solid rgba(232,195,122,.4) !important;
  color: #ffe6b0 !important; font-size: 12px !important; line-height: 1 !important;
  font-family: "STSong","SimSun",serif; letter-spacing: .04em;
  display: inline-flex !important; align-items: center; justify-content: center;
  filter: none !important; opacity: 1 !important;
}
.combat-hud .combat-controls [data-combat="speed"] { min-width: 42px !important; }
@media (orientation: landscape) and (max-height: 460px) {
  .combat-hud .combat-controls [data-combat="sound"],
  .combat-hud .combat-controls [data-combat="speed"],
  .combat-hud .combat-controls [data-combat="pause"] { min-width: 38px !important; height: 30px !important; font-size: 11px !important; padding: 0 6px !important; }
}

/* 倍速按钮：点一下就是 ×2，激活态高亮 */
.combat-hud .combat-controls [data-combat="speed"].is-on {
  color: #241708 !important;
  background: linear-gradient(180deg,#f4d795,#e2b866 42%,#b98a3e) !important;
  border-color: #ffe4ac !important;
  box-shadow: 0 0 14px rgba(255,215,94,.5);
}
/* 初燃星灯：操作教学浮层，不拦截战场点击。 */
.combat-tutorial{position:absolute;z-index:7;right:22px;top:calc(var(--hud) + 45px);width:245px;padding:14px 16px;background:linear-gradient(140deg,#142b31f5,#0a171ff5);border:1px solid #d9bd78;box-shadow:0 8px 28px #0006;color:#f5e5bd;pointer-events:auto}
.combat-tutorial small{display:block;color:#c5aa68;font-size:10px;letter-spacing:.15em}.combat-tutorial strong{display:block;font-size:16px;margin-top:6px}.combat-tutorial p{font-size:12px;line-height:1.7;margin:8px 0}.combat-tutorial button{background:none;border:0;border-bottom:1px solid #b6a677;color:#c0b18b;padding:2px;font-size:10px;cursor:pointer}
.tutorial-tile-marker{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%);font-size:40px;color:#ffe08a;text-shadow:0 2px 5px #000,0 0 15px #ffce58;animation:tutorial-point 1s ease-in-out infinite}.combat-card.tutorial-focus{outline:2px solid #ffe08a;outline-offset:2px;box-shadow:0 0 24px #f8cf7780}.combat-cashout{font-size:11px!important;min-width:42px!important}
@keyframes tutorial-point{50%{transform:translate(-50%,-120%)}}
@media(max-height:550px){.combat-tutorial{width:180px;right:12px;top:calc(var(--hud) + 31px);padding:9px 11px}.combat-tutorial strong{font-size:12px}.combat-tutorial p{font-size:10px;line-height:1.5;margin:5px 0}.combat-tutorial small{font-size:8px}.tutorial-tile-marker{font-size:29px}.combat-cashout{font-size:9px!important}}
@media(prefers-reduced-motion:reduce){.tutorial-tile-marker{animation:none}}

/* ==== roster-view.css ==== */
/* ============================================================
   星灯破晓 · 伙伴页「人物志」（功能优先 · 无重叠版）
   静态官方图：伙伴与培养木牌 / 求索名单空框 / 提升等级·强化技能按钮 / 云纹 / 头像组。
   动态内容（姓名 / 属性 / 技能 / 消耗 / 状态）全部 HTML，只出现一份、位置固定。
   所有交互：选人、提升等级、强化技能、前往寻星、返回、合成星图、快捷跳转。
   ============================================================ */
.roster-root {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 280px;
  margin: 0;
  padding: max(2px, env(safe-area-inset-top)) clamp(6px, 1.4vw, 12px) max(3px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #f3f0e6;
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  background: #060d10;
}
.roster-root::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 70% at 16% 106%, rgba(72, 132, 122, .34), transparent 62%),
    radial-gradient(ellipse 52% 42% at 88% -8%, rgba(232, 195, 122, .16), transparent 60%),
    linear-gradient(102deg, rgba(3, 8, 11, .84) 0%, rgba(5, 13, 16, .46) 48%, rgba(3, 8, 11, .84) 100%),
    linear-gradient(0deg, rgba(3, 8, 11, .94) 0%, transparent 52%),
    url('assets/bg/bg-night-lake.webp') center 56% / cover no-repeat;
}
.roster-root * { box-sizing: border-box; }
.roster-root button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.roster-root button:focus-visible { outline: 2px solid #ffe6a9; outline-offset: 2px; }
.roster-root > .ink-header { position: relative; z-index: 20; flex: none; }
.roster-empty { padding: 40px; text-align: center; color: #b3bcbd; }

/* ---------- 子标题 ---------- */
.ros-sub {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.1vw, 12px);
  height: clamp(32px, 10.8vh, 44px);
  padding: 1px 0;
  animation: ros-drop .38s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ros-drop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.ros-title-wrap { position: relative; flex: none; height: 100%; display: flex; align-items: center; }
.ros-title-art {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.ros-back { position: absolute; left: 0.5%; top: 6%; width: 13%; height: 88%; border: 0; background: transparent; border-radius: 4px; }
.ros-back:hover { background: rgba(255, 226, 160, .16); }
.ros-shortcuts { display: flex; align-items: center; gap: clamp(3px, .7vw, 6px); }
.ros-shortcuts button {
  padding: 2px clamp(5px, .8vw, 8px);
  border: 1px solid rgba(232, 195, 122, .36);
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(24, 50, 50, .9), rgba(8, 17, 19, .92));
  color: #e8d9b4;
  font-family: var(--font-ink);
  font-size: clamp(7px, 1.5vh, 9px);
  letter-spacing: .05em;
  white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s;
}
.ros-shortcuts button:hover { border-color: rgba(255, 223, 154, .8); color: #ffe9bd; background: rgba(232, 195, 122, .12); }
.ros-owned { margin-left: auto; font-family: var(--font-ink); font-size: clamp(7px, 1.5vh, 9px); letter-spacing: .06em; color: rgba(233, 216, 178, .8); white-space: nowrap; }
.ros-owned b { font-size: clamp(9px, 2vh, 12px); font-weight: 500; color: #ffe4a8; }
.ros-craft.ink-btn {
  flex: none;
  margin-right: 6px;
  min-height: 22px;
  padding: 1px 12px;
  font-size: clamp(8px, 1.7vh, 10.5px);
  letter-spacing: .1em;
}
.ros-craft.ink-btn.is-short {
  border-color: rgba(127, 196, 182, .45);
  background: linear-gradient(180deg, rgba(48, 88, 82, .95), rgba(16, 36, 34, .95));
  color: #cfe6de;
  box-shadow: 0 2px 0 rgba(4, 10, 12, .9), inset 0 1px 0 rgba(216, 244, 234, .14);
}

/* ---------- 三栏 ---------- */
.ros-body {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(150px, 22.2vw, 196px) minmax(0, 1fr) clamp(292px, 42vw, 356px);
  gap: clamp(4px, .9vw, 9px);
  animation: ros-rise .42s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ros-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---------- 求索名单 ---------- */
.ros-side { position: relative; min-height: 0; display: flex; align-items: flex-start; }
.ros-frame { position: relative; width: 100%; max-width: 100%; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
.ros-frame-art { display: block; width: 100%; height: auto; pointer-events: none; }
.ros-list {
  position: absolute;
  left: 8.5%;
  right: 8.5%;
  top: 11.5%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .5vh, 4px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1px;
  scrollbar-width: none;
}
.ros-list::-webkit-scrollbar { display: none; }
.ros-row {
  position: relative;
  flex: none;
  min-height: clamp(30px, 9vh, 40px);
  display: flex;
  align-items: center;
  gap: 5%;
  padding: 3% 4%;
  border: 1px solid rgba(96, 58, 32, .8);
  border-radius: 3px;
  background: linear-gradient(180deg, #f7e9cd 0%, #eeddba 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 0, 0, .35);
  text-align: left;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.ros-row:hover { filter: brightness(1.05); transform: translateX(1px); }
.ros-row.is-active {
  border-color: #c99b4c;
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .7), 0 0 7px rgba(255, 214, 140, .32), inset 0 0 8px rgba(214, 170, 90, .16);
}
.ros-row.is-locked { filter: grayscale(.55) brightness(.93); }
.row-art {
  flex: none;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #a9c4bb, #2c4a4c);
  box-shadow: inset 0 0 0 1px rgba(150, 96, 44, .6);
}
.row-art .chibi { display: block; width: 100%; height: 100%; transform: scale(1.18); transform-origin: 50% 42%; }
.row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-text strong {
  font-family: var(--font-ink);
  font-size: clamp(9px, 1.95vh, 12px);
  font-weight: 700;
  letter-spacing: .04em;
  color: #2a1a09;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.row-text small { font-size: clamp(5.5px, 1.25vh, 7.5px); color: #6a5032; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.row-tag {
  flex: none;
  padding: 0 3px;
  border: 1px solid rgba(178, 58, 43, .5);
  border-radius: 2px;
  color: #a3372a;
  font-family: var(--font-ink);
  font-size: clamp(5px, 1.1vh, 6.5px);
  line-height: 1.5;
  white-space: nowrap;
}
.row-tag.is-on { border-color: #b98a3e; color: #8a5c14; background: rgba(214, 178, 102, .18); }
.row-mark { flex: none; color: #9a7a4a; font-size: 10px; line-height: 1; }

/* ---------- 中央立绘 ---------- */
.ros-art { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.ros-glow {
  position: absolute; left: 50%; top: 44%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent, #e6c88a), transparent 58%);
  opacity: .16;
  filter: blur(6px);
  animation: art-glow 5.6s ease-in-out infinite;
}
@keyframes art-glow { 0%, 100% { opacity: .12; } 50% { opacity: .22; } }
.ros-ring {
  position: absolute; left: 50%; top: 40%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 195, 122, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(232, 195, 122, .03), 0 0 0 30px rgba(232, 195, 122, .015);
  pointer-events: none;
}
.ros-lv {
  position: absolute; left: 2%; top: 1%; z-index: 5;
  padding: 1px 6px;
  border: 1px solid rgba(255, 226, 160, .55);
  border-radius: 2px;
  background: rgba(9, 22, 24, .86);
  color: #ffe4a8;
  font-family: var(--font-ink);
  font-size: clamp(7px, 1.5vh, 9px);
  letter-spacing: .05em;
}
.ros-lv small { font-size: .7em; color: rgba(255, 228, 168, .6); }
.ros-lv.is-locked { color: #cbbfa6; border-color: rgba(203, 191, 166, .45); }
.ros-figure {
  position: relative; z-index: 2;
  width: min(94%, 252px);
  aspect-ratio: 1;
  margin-bottom: 13%;
  filter: drop-shadow(0 12px 16px rgba(2, 6, 9, .78));
}
.ros-figure .chibi { display: block; width: 100%; height: 100%; animation: char-breathe 5.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes char-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2%) scale(1.015); } }
.ros-cloud { position: absolute; left: 50%; bottom: 11%; z-index: 1; width: 80%; transform: translateX(-50%); opacity: .48; pointer-events: none; }
.ros-nameplate {
  position: absolute; left: 2%; right: 2%; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(150, 116, 62, .85);
  border-radius: 3px;
  background: linear-gradient(180deg, #f4e6c8, #e3d0a9);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.np-title { font-family: var(--font-ink); font-size: clamp(6.5px, 1.5vh, 9px); color: #33240e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cost { font-size: clamp(5.5px, 1.2vh, 7.5px); color: #6a4a18; white-space: nowrap; }
.ros-chips { position: absolute; left: 50%; bottom: 8%; z-index: 0; width: 54%; transform: translateX(-50%); opacity: .35; pointer-events: none; }
.ros-chips img { display: block; width: 100%; height: auto; }
.ros-lock {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10% 8% 18%;
  text-align: center;
  background: radial-gradient(ellipse at 50% 46%, rgba(4, 9, 11, .56), rgba(4, 9, 11, .86) 74%);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.ros-lock strong { font-family: var(--font-ink); font-size: clamp(12px, 2.6vh, 16px); letter-spacing: .14em; color: #f7efdc; }
.ros-lock small { font-size: clamp(7px, 1.5vh, 9px); color: #b9c4c0; }
.ros-lock-btn {
  margin-top: 3px;
  padding: 3px 12px;
  border: 1px solid rgba(232, 195, 122, .55);
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(30, 58, 58, .95), rgba(9, 18, 20, .95));
  color: #ffe4a8;
  font-family: var(--font-ink);
  font-size: clamp(8px, 1.7vh, 11px);
  letter-spacing: .06em;
}
.ros-lock-btn:hover { border-color: #ffe4a8; }

/* ---------- 右侧资料 ---------- */
.ros-info { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(3px, .9vh, 6px); }
.ros-banner {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 4%;
  padding: 2% 3%;
  border: 1px solid rgba(150, 116, 62, .9);
  border-radius: 3px;
  background: linear-gradient(180deg, #fbf1d9 0%, #f4e6c7 46%, #e9d7b2 100%);
  box-shadow: 0 4px 9px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.ros-banner::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(160, 128, 70, .38); border-radius: 2px; pointer-events: none; }
.rb-text { min-width: 0; display: flex; flex-direction: column; }
.rb-name { margin: 0; font-family: var(--font-ink); font-size: clamp(15px, 3.6vh, 22px); font-weight: 700; letter-spacing: .08em; line-height: 1.1; color: #231506; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-en { font-size: clamp(6px, 1.35vh, 8px); letter-spacing: .12em; color: #6a5432; }
.rb-sub { margin: 0; font-size: clamp(6px, 1.3vh, 8px); color: #4a381d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-tag { margin-left: auto; flex: none; padding: 1px 7px; border: 1px solid rgba(160, 40, 30, .6); border-radius: 2px; color: #a3372a; font-family: var(--font-ink); font-size: clamp(6px, 1.3vh, 8px); transform: rotate(-3deg); }
.ros-stats { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(3px, .8vw, 7px); }
.ros-stat {
  position: relative;
  padding: 3% 7% 4%;
  border: 1px solid rgba(150, 116, 62, .85);
  border-radius: 3px;
  background: linear-gradient(180deg, #f3e5c4, #e2cea6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 2px 5px rgba(0, 0, 0, .3);
}
.ros-stat small { display: block; font-size: clamp(6px, 1.4vh, 7.5px); color: #6a5432; letter-spacing: .04em; }
.ros-stat b { display: block; font-family: var(--font-ink); font-size: clamp(11px, 3vh, 16px); line-height: 1.1; color: #9c2b1b; white-space: nowrap; }
.ros-stat b em { font-style: normal; font-size: .55em; color: #7e3a2a; margin-left: 1px; }
.ros-stat::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 7%; height: 1px; background: linear-gradient(90deg, rgba(150,116,62,0), rgba(150,116,62,.5), rgba(150,116,62,0)); }
.ros-skill {
  position: relative; flex: none;
  padding: 2.5% 3.5%;
  border: 1px solid rgba(150, 116, 62, .85);
  border-left: 3px solid rgba(163, 48, 27, .75);
  border-radius: 3px;
  background: linear-gradient(180deg, #fbecc4, #f0dca6);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.skill-head { display: flex; align-items: center; gap: 5px; }
.skill-kicker { font-size: clamp(5.5px, 1.2vh, 7px); letter-spacing: .1em; color: #6a5432; }
.skill-name { font-family: var(--font-ink); font-size: clamp(9px, 2.2vh, 12px); letter-spacing: .04em; color: #9c2b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-lv { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: clamp(5.5px, 1.2vh, 7px); color: #7a5a24; white-space: nowrap; }
.skill-desc { margin: 2px 0 0; font-size: clamp(7px, 1.65vh, 9px); line-height: 1.32; color: #4a381d; max-height: 3.4em; overflow: hidden; }
.skill-charge { position: absolute; right: 3%; bottom: 4%; font-size: clamp(5px, 1.1vh, 6.5px); color: #8a6a3a; }
.ros-pips { display: inline-flex; gap: 2px; }
.ros-pips i { display: block; width: clamp(3px, .7vh, 4.5px); height: clamp(3px, .7vh, 4.5px); border-radius: 50%; background: rgba(120, 70, 30, .28); }
.ros-pips i.on { background: #a8341f; }

/* 培养按钮：官方按钮图 + 干净消耗说明（覆盖烤死代价签） */
.ros-ops { flex: none; display: flex; flex-direction: column; align-items: center; margin-top: clamp(4px, 1.4vh, 9px); }
.ros-costs { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; font-family: var(--font-ink); font-size: clamp(5.5px, 1.3vh, 7.5px); color: #d9c9a3; letter-spacing: .02em; white-space: nowrap; }
.ros-costs span { white-space: nowrap; }
.ros-op-row { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 9px); }
.ros-op { position: relative; flex: none; border: 0; padding: 0; background: transparent; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transition: filter .15s ease, transform .15s ease; }
.ros-op-level { height: clamp(34px, 11.4vh, 48px); aspect-ratio: 312 / 143; }
.ros-op-skill { height: clamp(32px, 10.8vh, 46px); aspect-ratio: 448 / 155; }
.ros-op-art { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.op-cover { display: none; }
.op-note {
  position: absolute;
  left: 16%;
  top: 66%;
  width: 78%;
  height: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  font-family: var(--font-ink);
  font-size: clamp(6px, 1.35vh, 7.5px);
  color: #5a4218;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
}
.ros-op-skill .op-cover { display: none; }
.ros-op-skill .op-note {
  left: 6%;
  top: 70%;
  width: 88%;
  height: 26%;
  border-radius: 2px;
  background: rgba(22, 10, 6, .55);
  color: #ffe6ae;
}
.ros-op:hover:not(:disabled) { filter: drop-shadow(0 0 8px rgba(255, 223, 154, .5)) drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.ros-op:active:not(:disabled) { transform: translateY(1px); }
.ros-op:disabled { filter: grayscale(.6) brightness(.72); cursor: default; }

/* ---------- 紧凑横屏 ---------- */
@media (orientation: landscape) and (max-height: 420px) {
  .roster-root { padding: 1px 6px 2px; }
  .ros-sub { height: clamp(28px, 9.8vh, 36px); gap: 5px; }
  .ros-body { grid-template-columns: clamp(142px, 21.6vw, 180px) minmax(0, 1fr) clamp(272px, 41.4vw, 328px); gap: 4px; }
  .ros-shortcuts button { padding: 1px 5px; font-size: 7px; }
  .ros-owned { font-size: 6.5px; }
  .rb-name { font-size: clamp(14px, 3.4vh, 19px); }
  .ros-op-level { height: clamp(38px, 12.8vh, 54px); }
  .ros-op-skill { height: clamp(34px, 11.6vh, 48px); }
  .ros-stat b { font-size: clamp(9px, 2.4vh, 13px); }
  .ros-row { min-height: clamp(27px, 8.4vh, 34px); }
}
@media (orientation: landscape) and (max-height: 330px) {
  .ros-shortcuts { display: none; }
  .ros-owned { display: none; }
  .ros-sub { height: 25px; }
}

/* ---------- 竖屏兜底 ---------- */
@media (orientation: portrait) {
  .roster-root { height: auto; min-height: 100dvh; overflow: visible; overflow-x: hidden; padding: 6px 8px 16px; }
  .ros-sub { height: 40px; flex-wrap: wrap; }
  .ros-body { display: flex; flex-direction: column; gap: 7px; }
  .ros-side { order: 2; }
  .ros-art { order: 1; height: min(54vh, 340px); }
  .ros-info { order: 3; }
  .ros-frame { width: min(100%, 340px); margin: 0 auto; }
  .ros-list { overflow: visible; max-height: none; }
  .ros-shortcuts { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ros-sub, .ros-body, .ros-glow, .ros-figure .chibi, .ros-row { animation: none !important; transition: none !important; }
}


/* 培养按钮：弃用带烤死小字的官方按钮图，改为干净、可点、文字唯一 */
.ros-ops .ros-op {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; height: 42px; padding: 0 16px;
  border: 1px solid #ffe0a0; border-radius: 3px;
  background: linear-gradient(180deg, #b23327 0%, #8c2119 55%, #66150f 100%);
  color: #ffe9b6; font-family: "STSong","SimSun",serif; font-size: 15px;
  letter-spacing: .12em; cursor: pointer;
  box-shadow: 0 4px 0 #4a0f0a, 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,236,190,.3);
}
.ros-ops .ros-op:hover:not(:disabled) { filter: brightness(1.08); }
.ros-ops .ros-op:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #4a0f0a, 0 4px 10px rgba(0,0,0,.4); }
.ros-ops .ros-op:disabled { filter: grayscale(.7) brightness(.65); cursor: default; box-shadow: none; }
.ros-ops .ros-op-art, .ros-ops .op-cover { display: none !important; }
.ros-ops .ros-op-text { position: relative; z-index: 2; white-space: nowrap; pointer-events: none; }
@media (orientation: landscape) and (max-height: 550px) {
  .ros-ops .ros-op { height: 34px; padding: 0 12px; font-size: 12.5px; }
}


/* 求索名单必须压在角色立绘上面（遮挡关系），去掉与顶栏返回重复的小箭头 */
.ros-side { position: relative !important; z-index: 9 !important; }
.ros-frame { position: relative !important; z-index: 10 !important; }
.ros-figure, .ros-art, .ros-portrait { z-index: 2 !important; }
.ros-back { display: none !important; }


/* 伙伴与培养标题：去掉图里自带的返回箭头，换成干净标题，避免和顶栏返回重复 */
.ros-title-art { display: none !important; }
.ros-title-wrap::after {
  content: '伙伴与培养';
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  font-family: "STSong","SimSun",serif; font-size: clamp(15px, 2.8vh, 19px); font-weight: 700;
  letter-spacing: .14em; color: #ffe6b0;
  border: 1px solid rgba(232,195,122,.45); border-radius: 2px;
  background: linear-gradient(160deg, rgba(24,42,40,.9), rgba(8,16,18,.9));
  box-shadow: inset 0 1px 0 rgba(255,240,200,.12), 0 4px 12px rgba(0,0,0,.35);
}
.ros-title-wrap { height: auto !important; min-height: 30px; }


/* 求索名单木框在名单行和角色图之上（框压住内容，不是内容压框） */
.ros-frame { position: relative !important; }
.ros-frame-art { position: absolute !important; inset: 0 !important; z-index: 6 !important; pointer-events: none; }
.ros-list { position: relative !important; z-index: 5 !important; }
.ros-side { z-index: 12 !important; }
.ros-figure { z-index: 3 !important; }

/* 修正：求索名单木框恢复为底框，名单行在框内正常显示 */
.ros-frame-art { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none; }
.ros-list { position: relative !important; z-index: 2 !important; }
.ros-frame { position: relative !important; z-index: 3 !important; }
.ros-side { position: relative !important; z-index: 12 !important; }
.ros-figure { z-index: 3 !important; }

/* 求索名单：恢复官方木框底图 + 名单绝对定位在框内（标题/边框正常显示） */
.ros-frame-art { position: static !important; inset: auto !important; z-index: auto !important; display: block !important; width: 100% !important; height: auto !important; pointer-events: none; }
.ros-list { position: absolute !important; left: 8.5% !important; right: 8.5% !important; top: 11.5% !important; bottom: 3% !important; z-index: 2 !important; }
.ros-frame { position: relative !important; z-index: 3 !important; }
.ros-side { position: relative !important; z-index: 12 !important; }
.ros-figure { z-index: 3 !important; }


/* 只保留全站唯一导航栏，删除伙伴页二级快捷导航 */
.ros-shortcuts { display: none !important; }

/* 伙伴页左侧：去掉重复的“伙伴与培养”标题牌，求索名单占满整列、不被裁切；
   木框和名单在角色立绘之上，形成明确遮挡关系。 */
.ros-title-wrap { display: none !important; }
.ros-sub { min-height: 30px !important; justify-content: flex-end !important; gap: 8px !important; }
.ros-body { align-items: stretch !important; }
.ros-side { height: 100% !important; min-height: 0 !important; display: flex !important; }
.ros-frame { height: 100% !important; width: 100% !important; max-width: none !important; display: flex; flex-direction: column; }
.ros-frame-art { position: static !important; width: 100% !important; height: 100% !important; object-fit: fill !important; }
.ros-list { position: absolute !important; left: 8.5% !important; right: 8.5% !important; top: 9.5% !important; bottom: 3% !important; z-index: 2 !important; overflow-y: auto !important; padding-bottom: 8px !important; }
.ros-row { min-height: clamp(24px, 7.4vh, 32px) !important; }
.ros-side { z-index: 12 !important; }
.ros-figure { z-index: 3 !important; }

/* 求索名单红色木框放到名单行上层（中间透明，不遮字），标题栏下方才是名单 */
.ros-frame-art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: fill !important; z-index: 6 !important; pointer-events: none !important; }
.ros-list { position: absolute !important; left: 9.5% !important; right: 9.5% !important; top: 16.5% !important; bottom: 5% !important; z-index: 5 !important; overflow-y: auto !important; padding: 2px 2px 8px !important; }
.ros-side { z-index: 12 !important; }
.ros-figure { z-index: 3 !important; }

/* 伙伴名单：短屏让 9 名角色尽量都露出来（框内可滚动） */
@media (orientation: landscape) and (max-height: 430px) {
  .ros-list { top: 15.5% !important; bottom: 4% !important; gap: 2px !important; padding-bottom: 4px !important; }
  .ros-row { min-height: 25px !important; height: 25px !important; }
  .ros-row .ros-avatar, .ros-row .ros-thumb { width: 22px !important; height: 22px !important; }
  .ros-row strong { font-size: 11px !important; }
  .ros-row small { font-size: 7px !important; }
}

/* 伙伴名单短屏再压缩，保证最后一行也能看到 */
@media (orientation: landscape) and (max-height: 430px) {
  .ros-row { min-height: 22px !important; height: 22px !important; gap: 4px !important; }
  .ros-list { gap: 1px !important; top: 15% !important; bottom: 2% !important; }
  .ros-body { overflow: hidden !important; }
}

/* 短屏伙伴名单：9 名角色全部露出（仍可滚动） */
@media (orientation: landscape) and (max-height: 430px) {
  .ros-sub { min-height: 24px !important; }
  .ros-list { top: 14.5% !important; bottom: 2% !important; gap: 1px !important; }
  .ros-row { min-height: 20px !important; height: 20px !important; gap: 3px !important; padding: 0 4px !important; }
  .ros-row .ros-avatar, .ros-row .ros-thumb { width: 18px !important; height: 18px !important; }
  .ros-row strong { font-size: 10px !important; }
  .ros-row small { font-size: 6.5px !important; }
  .ros-row .ros-row-arrow { display: none !important; }
}

/* ==== gacha.css ==== */
/* 鏄熺伅鐮存檽 路 瀵绘槦锛堟娊濂栵級鍔ㄧ敾 */
.gacha-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-areas: 'stage'; place-items: center;
  background: radial-gradient(ellipse at 50% 44%, rgba(20, 28, 33, .74), rgba(3, 6, 9, .96) 72%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity: 0; transition: opacity .3s ease;
  font-family: "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  color: #f5f1e7; overflow: hidden; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.gacha-stage, .gacha-reveal { grid-area: stage; }
.gacha-overlay.is-visible { opacity: 1; }
.gacha-overlay.is-closing { opacity: 0; }
.gacha-overlay * { box-sizing: border-box; }

/* 鏄熺┖鑸炲彴 */
.gacha-sky { position: absolute; inset: 0; pointer-events: none; }
.gacha-sky::before {
  content: ''; position: absolute; inset: -8%;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255, 238, 190, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 16%, rgba(255, 238, 190, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 78%, rgba(255, 238, 190, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 82%, rgba(255, 238, 190, .6) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 6%, rgba(255, 238, 190, .55) 0 1px, transparent 2px);
  background-size: 240px 200px, 300px 260px, 260px 240px, 280px 220px, 200px 180px;
  animation: gacha-drift 18s linear infinite;
  opacity: .8;
}
@keyframes gacha-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, 26px, 0); } }
.gacha-sky::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 182, 44, .1) 0%, transparent 34%);
  animation: gacha-halo 4.5s ease-in-out infinite;
}
@keyframes gacha-halo { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }

.gacha-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
.gacha-scan { position: relative; display: grid; place-items: center; width: min(58vmin, 330px); aspect-ratio: 1; }
.gacha-scan .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(242, 182, 44, .38);
  box-shadow: 0 0 26px rgba(242, 182, 44, .12), inset 0 0 26px rgba(242, 182, 44, .08);
  animation: gacha-rotate 9s linear infinite;
}
.gacha-scan .ring::before, .gacha-scan .ring::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #ffd75e; box-shadow: 0 0 12px #f2b62c;
}
.gacha-scan .ring::before { top: -4px; left: 50%; }
.gacha-scan .ring::after { bottom: -4px; right: 24%; }
.gacha-scan .ring.r2 { inset: 12%; animation-duration: 6s; animation-direction: reverse; border-color: rgba(255, 255, 255, .2); }
.gacha-scan .ring.r2::before, .gacha-scan .ring.r2::after { background: #fff1c8; box-shadow: 0 0 10px rgba(255, 241, 200, .8); }
.gacha-scan .ring.r3 { inset: 26%; animation-duration: 11s; border-style: dashed; border-color: rgba(242, 182, 44, .24); }
@keyframes gacha-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.gacha-core {
  width: 84px; height: 84px; display: grid; place-items: center; font-size: 40px; color: #ffd75e;
  border: 1px solid rgba(242, 182, 44, .8); transform: rotate(45deg);
  background: radial-gradient(circle, rgba(242, 182, 44, .24), rgba(242, 182, 44, .04));
  box-shadow: 0 0 34px rgba(242, 182, 44, .35), inset 0 0 20px rgba(242, 182, 44, .2);
  animation: core-pulse 2.2s ease-in-out infinite;
}
.gacha-core span { transform: rotate(-45deg); }
@keyframes core-pulse { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.08); } }
.gacha-headline { font-size: clamp(18px, 2.8vw, 26px); letter-spacing: .5em; color: #ffd75e; text-shadow: 0 0 24px rgba(242, 182, 44, .45); margin: 4px 0 0; padding-left: .5em; }
.gacha-subline { font-size: 10px; letter-spacing: .3em; color: #a9b2b4; margin: 0; }
.gacha-hint {
  position: absolute; bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)); left: 0; right: 0;
  text-align: center; font-size: 10.5px; letter-spacing: .2em; color: rgba(214, 222, 216, .62);
  animation: hint-blink 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes hint-blink { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

/* 鎻檽 */
.gacha-reveal { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; perspective: 1200px; opacity: 0; pointer-events: none; }
.gacha-overlay.is-reveal .gacha-scan,
.gacha-overlay.is-reveal .gacha-headline,
.gacha-overlay.is-reveal .gacha-subline { opacity: 0; transform: scale(.85); filter: blur(6px); transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.gacha-overlay.is-reveal .gacha-reveal { opacity: 1; pointer-events: auto; transition: opacity .3s ease .5s; }
.gacha-rays {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(242, 182, 44, .15) 0deg 5deg, transparent 5deg 17deg);
  mask: radial-gradient(circle, #000 0%, transparent 62%);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%);
  opacity: 0; animation: rays-spin 24s linear infinite;
}
.gacha-overlay.is-reveal .gacha-rays { opacity: 1; transition: opacity .6s ease; }
@keyframes rays-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.gacha-burst {
  position: absolute; left: 50%; top: 50%; width: 40vmax; height: 40vmax; transform: translate(-50%, -50%) scale(.2);
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 246, 214, .9) 0%, rgba(255, 215, 94, .5) 26%, transparent 62%);
}
.gacha-overlay.is-reveal .gacha-burst { animation: burst .9s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.15); } 60% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }

.gacha-card {
  position: relative; z-index: 2; width: min(76vw, 300px); padding: 22px 20px 18px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(9, 13, 17, .86);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: rotateY(92deg) scale(.86); opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.gacha-overlay.is-reveal .gacha-card { animation: card-flip .85s cubic-bezier(.16, .9, .3, 1.05) .18s forwards; }
@keyframes card-flip {
  0% { transform: rotateY(92deg) scale(.86); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.gacha-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 46%, transparent 62%);
  transform: translateX(-120%); animation: card-sheen 2.6s ease-in-out 1s infinite;
}
@keyframes card-sheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
.gacha-card-tag {
  display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 8.5px; letter-spacing: .22em;
  color: #17130a; background: linear-gradient(135deg, #ffd75e, #d99a14); font-weight: 700;
}
.gacha-card.frame-skin .gacha-card-tag { background: linear-gradient(135deg, #9fd4f4, #4b8fbe); color: #08131a; }
.gacha-card.frame-material .gacha-card-tag { background: linear-gradient(135deg, #cfe5d4, #6f9a85); color: #0d1a14; }
.gacha-card-art {
  position: relative; height: min(30vh, 170px); margin: 10px 0 6px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(242, 182, 44, .22), transparent 66%);
}
.gacha-card.frame-skin .gacha-card-art { background: radial-gradient(ellipse at 50% 60%, rgba(120, 190, 235, .22), transparent 66%); }
.gacha-card.frame-material .gacha-card-art { background: radial-gradient(ellipse at 50% 60%, rgba(150, 200, 170, .2), transparent 66%); }
.gacha-card-art .chibi { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); animation: char-breathe 5s ease-in-out infinite; }
.gacha-emblem {
  width: 92px; height: 92px; display: grid; place-items: center; transform: rotate(45deg);
  border: 1px solid rgba(242, 182, 44, .7); color: #ffd75e; font-size: 40px;
  background: rgba(242, 182, 44, .08); box-shadow: 0 0 30px rgba(242, 182, 44, .3);
  animation: core-pulse 3s ease-in-out infinite;
}
.gacha-emblem span { transform: rotate(-45deg); }
.gacha-card h3 { margin: 4px 0 2px; font-size: 20px; letter-spacing: .08em; color: #fbf7ec; font-weight: 700; }
.gacha-card .gacha-card-sub { margin: 0; font-size: 10px; letter-spacing: .1em; color: #a9b2b4; }
.gacha-card .gacha-dupe {
  margin: 8px 0 0; padding: 6px 8px; border: 1px dashed rgba(242, 182, 44, .4); border-radius: 2px;
  font-size: 10px; color: #e8d6a8; background: rgba(242, 182, 44, .07);
}
.gacha-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.gacha-btn {
  flex: 1; min-height: 40px; padding: 9px 10px; border-radius: 2px; font-size: 12px; letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #f1eee4;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: filter .15s, background .15s, border-color .15s;
}
.gacha-btn:hover { border-color: rgba(242, 182, 44, .7); background: rgba(242, 182, 44, .14); color: #ffd75e; }
.gacha-btn.primary { background: linear-gradient(135deg, #ffd75e, #e7a916); border-color: #ffe19a; color: #17130a; font-weight: 700; }
.gacha-btn.primary:hover { filter: brightness(1.06); }
.gacha-btn:disabled { opacity: .4; cursor: default; }

@media (orientation: landscape) and (max-height: 480px) {
  .gacha-stage { gap: 8px; padding: 12px; }
  .gacha-scan { width: min(48vmin, 240px); }
  .gacha-core { width: 64px; height: 64px; font-size: 30px; }
  .gacha-headline { font-size: 18px; }
  .gacha-subline { font-size: 9px; }
  .gacha-card { width: min(64vw, 250px); padding: 14px 16px 12px; }
  .gacha-card-art { height: min(26vh, 120px); margin: 6px 0 4px; }
  .gacha-card h3 { font-size: 17px; }
  .gacha-card-actions { margin-top: 10px; }
  .gacha-btn { min-height: 34px; font-size: 11px; padding: 7px 8px; }
  .gacha-hint { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .gacha-overlay *, .gacha-overlay *::before, .gacha-overlay *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .gacha-card { transform: none; opacity: 1; }
}




/* 瀵绘槦缁撴灉鍥撅細涓ユ牸 1:1锛屽楂橀兘鐢ㄥ悓涓€灏哄锛岀粷涓嶆媺浼?*/
.gacha-card-art {
  width: auto !important;
  height: clamp(108px, 30vh, 160px) !important;
  aspect-ratio: 1 / 1;
  align-self: center;
  margin: 4px auto 2px !important;
  max-height: none !important;
  overflow: visible;
}
.gacha-card-art .chibi {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
}
/* 固定显示对应角色的 sprite 格子，避免居中裁到别的图 */
.gacha-card-art .chibi.chibi-zhenyi_winter { background-position: 0% 50% !important; }
.gacha-card-art .chibi.chibi-zhenyi_west { background-position: 100% 50% !important; }
.gacha-card-art .chibi.chibi-zhenyi { background-position: 0% 0% !important; }
.gacha-card-actions { flex-wrap: wrap; justify-content: center; gap: 7px !important; }
.gacha-card-actions .gacha-btn { flex: 1 1 40%; min-width: 92px; }
.gacha-card-actions .gacha-btn.primary { flex: 1 1 100%; }
@media (orientation: landscape) and (max-height: 460px) {
  .gacha-card-art { height: clamp(88px, 24vh, 120px) !important; }
  .gacha-card { width: min(62vw, 300px) !important; padding: 10px 12px 10px !important; }
  .gacha-card h3 { font-size: 16px !important; }
  .gacha-card-actions { margin-top: 7px !important; }
}


/* 寻星角色结果：使用专用方形立绘，避免从精灵表裁切出错误/扭曲图像 */
.gacha-card-art .gacha-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55));
}
.gacha-card-art:has(.gacha-portrait) { height: clamp(132px, 34vh, 176px) !important; }
@media (orientation: landscape) and (max-height: 460px) {
  .gacha-card-art:has(.gacha-portrait) { height: clamp(124px, 32vh, 150px) !important; }
}


/* ==== inventory-view.css ==== */
/* ============================================================
   星灯破晓 · 仓库「百宝架」（功能优先 · 无重叠版）
   静态官方图直接用：百宝架标题牌 / 三张衣装卡 / 添加卡 / 配色收藏立绘 / 吊坠 / 道具行。
   素材上烤死的动态数字一律不用：材料卡改为干净官方图标 + HTML 文案；
   合成台用官方图标重新拼装；配色行、名札、数量都只显示一份动态文字。
   所有交互：合成、装备/卸下、材料说明均真实可点。
   ============================================================ */
.shell.page-inventory {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(3px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
  color: var(--ink-text, #f2ead9);
  background: #060f11;
}
.shell.page-inventory::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 74% at 22% 108%, rgba(74, 132, 122, .34), transparent 64%),
    radial-gradient(ellipse 56% 46% at 90% -6%, rgba(232, 195, 122, .16), transparent 62%),
    linear-gradient(100deg, rgba(4, 10, 12, .82) 0%, rgba(5, 13, 15, .5) 44%, rgba(4, 9, 11, .84) 100%),
    linear-gradient(0deg, rgba(3, 8, 10, .92) 0%, transparent 46%),
    url('assets/bg/bg-ink-mountains-2.webp') center 62% / cover no-repeat;
}
.page-inventory *,
.page-inventory *::before,
.page-inventory *::after { box-sizing: border-box; }
.page-inventory button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.page-inventory button:focus-visible { outline: 2px solid #ffe6a9; outline-offset: 2px; }
.page-inventory > .ink-header { position: relative; z-index: 20; flex: none; }

.vault-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vault-in .42s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes vault-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 背景氛围 ---------- */
.vault-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.va-stars {
  position: absolute; inset: -4%;
  background-image:
    radial-gradient(circle, rgba(255, 240, 200, .8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(214, 232, 222, .5) 0 .9px, transparent 1.6px);
  background-size: 197px 163px, 311px 241px;
  background-position: 19px 27px, 97px 83px;
  opacity: .4;
  animation: va-twinkle 9s ease-in-out infinite alternate;
}
.va-glow {
  position: absolute; left: 38%; top: 42%;
  width: min(96vmin, 560px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 195, 122, .12), rgba(90, 156, 142, .09) 46%, transparent 70%);
  filter: blur(10px);
}
.va-mist {
  position: absolute; left: -10%; right: -10%; bottom: -6%; height: 34%;
  background: radial-gradient(ellipse 62% 100% at 50% 100%, rgba(150, 200, 190, .16), transparent 70%);
  filter: blur(18px);
  animation: va-mist 26s ease-in-out infinite alternate;
}
@keyframes va-twinkle { from { opacity: .18; } to { opacity: .42; } }
@keyframes va-mist { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14px, -6px, 0); } }

/* ---------- 主布局 ---------- */
.vault-layout {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(5px, 1vw, 10px);
}
.vault-cab {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .9vh, 6px);
}

/* ---------- 页首：官方百宝架标题牌（右侧烤死数据用整块色带遮住后重画） ---------- */
.vault-head { flex: none; display: flex; align-items: center; }
.vault-title-wrap {
  position: relative;
  height: clamp(30px, 10.4vh, 44px);
  display: flex;
  align-items: center;
}
.vault-title {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.title-cover {
  position: absolute;
  left: 58%;
  top: 48%;
  width: 40%;
  height: 44%;
  border-radius: 3px;
  border: 1px solid rgba(232, 195, 122, .38);
  background: linear-gradient(180deg, #2c484f 0%, #2a454c 52%, #263f46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .12), 0 1px 3px rgba(0, 0, 0, .35);
}
.vault-meta {
  position: absolute;
  left: 58%;
  width: 40%;
  top: 48%;
  height: 44%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 1.5vw, 15px);
  padding-right: 5%;
  font-family: var(--font-ink);
  color: #ffe4a8;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.vault-meta span { display: inline-flex; align-items: baseline; gap: 2px; }
.vault-meta i { font-style: normal; font-size: clamp(6.5px, 1.55vh, 8.5px); letter-spacing: .08em; color: rgba(232, 240, 228, .85); }
.vault-meta b { font-size: clamp(10px, 2.4vh, 13px); font-weight: 400; line-height: 1; color: #ffe7b0; }
.vault-meta small { font-size: clamp(6px, 1.35vh, 7.5px); color: rgba(232, 240, 228, .6); }

/* ---------- 卡列：材料卡（干净官方图标 + 单份文字） ---------- */
.vault-cards { min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.vault-cards-mat { flex: .82 1 0; gap: clamp(6px, 1.4vw, 14px); }
.vault-cards-skin { flex: 1.34 1 0; gap: clamp(6px, 1.4vw, 14px); }

.mat-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding: 5% 4% 7%;
  border-radius: clamp(7px, 1.6vh, 12px);
  border: 1px solid rgba(150, 116, 62, .85);
  background:
    radial-gradient(ellipse 80% 44% at 50% 0%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(168deg, #e6f3ef 0%, #d2e9e4 44%, #b9d7d2 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 16px rgba(120, 152, 142, .16);
  color: #1d3a39;
  transition: transform .16s ease, box-shadow .16s ease;
  animation: card-in .46s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
.mat-card::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(clamp(7px, 1.6vh, 12px) - 4px);
  border: 1px solid rgba(160, 128, 70, .42);
  pointer-events: none;
}
.mat-card:hover { transform: translateY(-1.5px); box-shadow: 0 9px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 16px rgba(120, 152, 142, .18); }
.mat-card:active { transform: translateY(1px); }
.mat-icon { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.mat-icon img {
  display: block;
  max-width: 66%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(16, 38, 36, .4));
  pointer-events: none;
}
.mat-name {
  font-family: var(--font-ink);
  font-size: clamp(10px, 2.15vh, 13px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.1;
  color: #173735;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  pointer-events: none;
}
.mat-en {
  font-family: var(--font-ui);
  font-size: clamp(5px, 1.05vh, 6.5px);
  letter-spacing: .2em;
  color: rgba(54, 78, 72, .5);
  pointer-events: none;
}
.mat-qty {
  position: absolute;
  right: 5%;
  bottom: 4.5%;
  padding: 0 clamp(3px, .7vw, 6px);
  border-radius: 3px;
  background: linear-gradient(180deg, #1b444c, #12343c);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .38);
  color: #ffe6ae;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(8px, 1.85vh, 11px);
  line-height: 1.5;
  white-space: nowrap;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 卡列：衣装卡（官方卡面 + 文字底板） ---------- */
.skin-card {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 205 / 296;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
  animation: card-in .46s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
.skin-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.skin-plate {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  top: 66.5%;
  height: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3c5154 0%, #33484b 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .16);
  pointer-events: none;
}
.skin-name {
  max-width: 96%;
  font-family: var(--font-ink);
  font-size: clamp(8px, 1.95vh, 10.5px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  color: #f4e7cd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.skin-status {
  max-width: 96%;
  font-size: clamp(5.5px, 1.35vh, 7px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: rgba(228, 236, 226, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skin-en { display: none; }
.skin-tape {
  position: absolute;
  left: -1.5%;
  right: -1.5%;
  top: 44.5%;
  height: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 246, 214, .55), transparent 46%),
    linear-gradient(180deg, #f0d9a6 0%, #d6b271 48%, #a6803d 100%);
  border-top: 1px solid rgba(255, 242, 210, .9);
  border-bottom: 1px solid rgba(92, 62, 20, .8);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .45), inset 0 0 10px rgba(120, 80, 24, .2);
  color: #3d2909;
  font-family: var(--font-ink);
  font-weight: 700;
  font-size: clamp(7px, 1.65vh, 9px);
  letter-spacing: .18em;
  pointer-events: none;
}
.skin-card.is-equipped .skin-art { filter: brightness(1.05) saturate(1.08); }
.skin-card.is-equipped { filter: drop-shadow(0 0 8px rgba(255, 218, 140, .5)) drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.skin-card.is-locked .skin-status { color: rgba(214, 226, 216, .72); }
.skin-hit { position: absolute; inset: 0; z-index: 3; border: 0; background: transparent; border-radius: 10px; }
.skin-hit:hover { background: radial-gradient(ellipse at 50% 40%, rgba(255, 231, 170, .13), transparent 72%); }
.skin-add { pointer-events: none; }
.skin-plate-add { display: none; }

/* ---------- 右列 ---------- */
.vault-col {
  flex: 0 0 auto;
  width: clamp(224px, 30.4vw, 254px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 1.4vh, 9px);
  min-height: 0;
}

/* 合成台：官方图标拼装，无烤死数字 */
.forge-panel {
  position: relative;
  flex: none;
  height: clamp(120px, 38vh, 152px);
  display: flex;
  flex-direction: column;
  padding: 3.5% 6% 3%;
  border-radius: 10px;
  border: 1px solid rgba(150, 116, 62, .85);
  background:
    radial-gradient(ellipse 72% 38% at 50% 0%, rgba(255, 255, 255, .4), transparent 62%),
    radial-gradient(circle at 50% 46%, rgba(120, 168, 158, .2), transparent 66%),
    linear-gradient(165deg, #e2f0ec 0%, #c8dfda 48%, #b0cbc6 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .45);
  color: #1d3a39;
}
.forge-panel::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  border: 1px solid rgba(160, 128, 70, .4);
  pointer-events: none;
}
.forge-head { flex: none; display: flex; align-items: baseline; gap: 7px; order: 0; }
.forge-head b {
  font-family: var(--font-ink);
  font-size: clamp(11px, 2.5vh, 15px);
  font-weight: 700;
  letter-spacing: .2em;
  color: #1a3936;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.forge-head small { font-size: clamp(5.5px, 1.15vh, 7px); font-weight: 700; letter-spacing: .26em; color: rgba(48, 78, 72, .62); }
.forge-row { flex: 1 1 auto; min-height: 0; order: 2; display: flex; align-items: center; gap: 2%; margin: 1% 0; }
.forge-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 8px;
  border: 1px solid rgba(150, 192, 186, .85);
  background: linear-gradient(160deg, rgba(243, 251, 248, .96), rgba(206, 230, 225, .92));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .65), 0 3px 7px rgba(34, 66, 62, .22);
}
.forge-slot.is-out { border-color: rgba(190, 156, 92, .85); background: linear-gradient(160deg, rgba(248, 246, 232, .96), rgba(224, 218, 190, .92)); }
.forge-slot.is-short { border-color: rgba(168, 74, 54, .6); box-shadow: inset 0 0 0 1px rgba(168, 74, 54, .35), 0 3px 7px rgba(60, 24, 18, .25); }
.forge-icon { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; }
.forge-icon img { display: block; max-width: 64%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(16, 38, 36, .38)); }
.forge-need {
  position: absolute;
  right: 7%;
  bottom: 13%;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(8px, 1.85vh, 11px);
  color: #22413d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  pointer-events: none;
}
.forge-slot.is-short .forge-need { color: #a33a24; }
.forge-name {
  flex: none;
  font-family: var(--font-ink);
  font-size: clamp(7px, 1.6vh, 9px);
  letter-spacing: .06em;
  color: #2c4b47;
  padding-bottom: 2%;
  pointer-events: none;
}
.forge-op { flex: none; width: 6%; height: auto; opacity: .95; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.forge-arrow { width: 9.5%; }
.forge-state {
  flex: none;
  order: 1;
  margin: 1.5% 0 2.2%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(6.5px, 1.55vh, 8px);
  letter-spacing: .04em;
  color: #2f4f49;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-panel.is-short .forge-state { color: #a33a24; }
.forge-action { position: relative; flex: none; order: 3; display: block; width: 100%; border: 0; padding: 0; background: transparent; }
.forge-action-art { display: block; width: 100%; height: auto; pointer-events: none; }
.forge-action-cover {
  position: absolute;
  left: 48.5%;
  top: 8%;
  width: 31%;
  height: 70%;
  border-radius: 3px;
  background: linear-gradient(180deg, #412f1a, #362715);
  pointer-events: none;
}
.forge-action:hover .forge-action-art { filter: brightness(1.08) drop-shadow(0 0 8px rgba(255, 220, 150, .5)); }
.forge-action:active .forge-action-art { filter: brightness(.94); }

/* 配色收藏：官方立绘/标题 + 干净行（名称 · 状态 · 装备按钮） */
.atelier-panel { position: relative; flex: none; width: 100%; aspect-ratio: 670 / 388; display: flex; }
.atelier-art { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.atel-row {
  position: absolute;
  left: 43.6%;
  width: 51.6%;
  display: flex;
  align-items: center;
}
.atel-row-1 { top: 19.6%; height: 20.4%; }
.atel-row-2 { top: 43.2%; height: 19.6%; }
.atel-row-3 { top: 66%; height: 20.2%; }
.atel-plate {
  flex: 1 1 auto;
  min-width: 0;
  height: 94%;
  margin-left: 12%;
  margin-right: 2%;
  display: flex;
  align-items: center;
  gap: 5%;
  padding: 0 4%;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #2b4749 0%, #244042 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .14);
  text-align: left;
}
.atel-plate:hover { background: linear-gradient(180deg, #33514f 0%, #2a4749 100%); box-shadow: inset 0 0 0 1px rgba(255, 226, 160, .42); }
.atel-plate.is-on { box-shadow: inset 0 0 0 1px rgba(255, 222, 150, .5), 0 0 7px rgba(255, 214, 140, .22); }
.atel-plate.is-locked { background: linear-gradient(180deg, #233c3f 0%, #1d3538 100%); }
.atel-tag { display: none; }
.atel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atel-text strong {
  font-family: var(--font-ink);
  font-size: clamp(7.5px, 1.75vh, 9.5px);
  font-weight: 700;
  letter-spacing: .04em;
  color: #f2e8d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.atel-text small {
  font-size: clamp(5.5px, 1.3vh, 7px);
  line-height: 1.2;
  color: rgba(220, 232, 222, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atel-act {
  flex: none;
  padding: 0 3px;
  border-radius: 2px;
  border: 1px solid rgba(255, 226, 160, .55);
  background: rgba(198, 158, 84, .22);
  color: #ffe4a8;
  font-family: var(--font-ink);
  font-size: clamp(5.5px, 1.35vh, 7px);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1.5;
}
.atel-plate.is-locked .atel-act { border-color: rgba(203, 214, 204, .3); color: rgba(222, 232, 222, .78); font-weight: 400; background: rgba(20, 42, 44, .5); }
.atel-caption-cover {
  position: absolute;
  left: 2.5%;
  top: 82.5%;
  width: 34%;
  height: 15%;
  border-radius: 2px;
  background: linear-gradient(180deg, #e3d8bc, #d5c8a8);
}
.atel-caption {
  position: absolute;
  left: 2.5%;
  top: 82.5%;
  width: 34%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ink);
  font-size: clamp(6px, 1.45vh, 8px);
  letter-spacing: .02em;
  color: #3a2a11;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 底部装饰 ---------- */
.vault-bottom {
  position: relative;
  z-index: 2;
  flex: none;
  height: clamp(20px, 8.4vh, 34px);
  margin-top: clamp(1px, .4vh, 3px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}
.bottom-props { display: block; height: 100%; width: auto; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); }
.bottom-cloud { display: block; height: 74%; width: auto; opacity: .4; margin-bottom: 0; }
.deco-tassel { display: none; }
@keyframes tassel-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* ---------- 紧凑横屏（667×375） ---------- */
@media (orientation: landscape) and (max-height: 420px) {
  .shell.page-inventory { padding: 2px 6px; }
  .vault-title-wrap { height: clamp(27px, 9.6vh, 36px); }
  .vault-col { width: clamp(206px, 30.4vw, 244px); }
  .vault-cards-mat { gap: 5px; }
  .vault-cards-skin { gap: 5px; }
  .vault-meta i { font-size: 6.5px; }
  .vault-meta b { font-size: 10px; }
  .atel-btn { min-height: 10px; padding: 0 4px; }
}

/* ---------- 竖屏兜底 ---------- */
@media (orientation: portrait) {
  .shell.page-inventory { height: auto; min-height: 100dvh; overflow: visible; padding: 6px 8px 16px; }
  .vault-layout { flex-direction: column; }
  .vault-cards-mat { flex: none; height: 120px; }
  .vault-cards-skin { flex: none; height: 210px; }
  .vault-col { width: 100%; max-width: 460px; margin: 0 auto; }
  .vault-bottom, .deco-tassel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-page, .mat-card, .skin-card, .va-stars, .va-mist, .deco-tassel { animation: none !important; }
  .mat-card, .skin-card { transition: none; }
}


/* ===== 仓库：去掉被遮挡的底部装饰条，加大间距，图标完整显示 ===== */
.vault-deco { display: none !important; }
.vault-page { padding: 5px 10px 7px !important; }
.vault-layout { gap: 11px !important; }
.vault-cab { gap: 7px !important; }
.vault-cards-mat, .vault-cards-skin { gap: clamp(9px, 1.8vw, 15px) !important; }
.vault-col { gap: 9px !important; }
.mat-icon img { max-width: 74% !important; max-height: 82% !important; }
.mat-qty { bottom: 6px !important; right: 7px !important; }
.mat-name { margin-top: 2px !important; }
.skin-card { border-radius: 8px !important; }
.atelier-panel { margin-top: 2px !important; }
@media (orientation: landscape) and (max-height: 550px) {
  .vault-layout { gap: 9px !important; }
  .vault-cards-mat, .vault-cards-skin { gap: 8px !important; }
  .mat-icon img { max-width: 70% !important; max-height: 78% !important; }
}


/* 仓库：底部装饰道具条会遮住格子和裁边，直接隐藏，保持留白 */
.vault-bottom, .vault-deco { display: none !important; }
.atelier-panel .atel-text strong { font-size: clamp(7px, 1.5vh, 9px) !important; }
.atelier-panel .atel-text small { font-size: clamp(6px, 1.2vh, 7.5px) !important; }
.atel-plate { padding-left: 2% !important; padding-right: 2% !important; }

/* 合成按钮：干净、可点、文字唯一 */
.forge-action {
  flex: none; order: 3; display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; height: clamp(26px, 6.6vh, 34px); padding: 0 10px;
  border: 1px solid #ffe0a0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #b23327 0%, #8c2119 55%, #66150f 100%);
  box-shadow: 0 3px 0 #4a0f0a, 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,236,190,.3);
  margin-top: 2%;
}
.forge-action:hover { filter: brightness(1.08); }
.forge-action:active { transform: translateY(1px); }
.forge-action.is-disabled, .forge-action:disabled { filter: grayscale(.5) brightness(.8); }
.forge-action-text { font-family: "STSong","SimSun",serif; font-size: clamp(12px, 2.8vh, 15px); font-weight: 700; letter-spacing: .12em; color: #ffe9b6; }
.forge-action-art, .forge-action-cover { display: none !important; }
/* 配色收藏：清掉烤死底图，改用干净暗玉底 + 动态行 */
.atelier-art { display: none !important; }
.atelier-panel {
  flex: 1 1 auto !important; min-height: 0; aspect-ratio: auto !important;
  display: flex !important; flex-direction: column;
  padding: 6px 8px 7px; gap: 5px;
  border: 1px solid rgba(232,195,122,.34); border-radius: 3px;
  background: linear-gradient(165deg, rgba(12,26,26,.94), rgba(6,14,16,.94));
}
.atelier-head { flex: none; display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.atelier-head strong { font-family: "STSong","SimSun",serif; font-size: clamp(12px, 2.6vh, 15px); color: #ffe6b0; letter-spacing: .1em; }
.atelier-head small { font-size: 6px; letter-spacing: .22em; color: #a87b2f; }
.atelier-panel .atel-row { top: auto !important; height: auto !important; }
.atelier-panel .atel-row { position: static !important; flex: 1 1 0; min-height: 0; }

/* 右栏：合成台固定高度，配色收藏给足三行空间 */
.vault-col .forge-panel { flex: 0 0 auto !important; }
.vault-col .atelier-panel { flex: 1 1 auto !important; min-height: 112px !important; overflow: hidden; }
.atelier-panel .atel-row { padding: 2% 0 !important; }
.atelier-panel .atel-text strong { line-height: 1.15 !important; }
.atelier-panel .atel-text small { line-height: 1.1 !important; }

/* 仓库右栏压缩：三行配色全部露出 */
.atelier-panel { padding-bottom: 3px !important; }
.atelier-panel .atel-row { flex: 0 0 auto !important; height: clamp(23px, 6.2vh, 29px) !important; }
.atelier-panel .atel-caption, .atel-caption-cover { display: none !important; }
.forge-panel { gap: 1% !important; }
.forge-head small { display: none !important; }
.forge-row { margin: .5% 0 !important; }
.forge-state { margin: 0 !important; }

/* 仓库配色收藏：每行只保留名称+状态，避免第三行被裁 */
.atelier-panel .atel-text small { display: none !important; }
.atelier-panel .atel-row { height: clamp(24px, 6.4vh, 30px) !important; min-height: 0 !important; }
.atelier-panel .atel-text strong { font-size: clamp(8px, 1.6vh, 10px) !important; }
.atelier-panel .atel-act { font-size: clamp(7px, 1.4vh, 9px) !important; padding: 1px 5px !important; }


/* 百宝架道具图标放大，看的清 */
.mat-icon img { max-width: 88% !important; max-height: 92% !important; }
.forge-icon img { max-width: 78% !important; max-height: 96% !important; }
.mat-name { font-size: clamp(10px, 2.2vh, 13px) !important; }
/* 配色收藏：左侧角色/衣服预览 + 右侧三行 */
.atelier-panel { display: grid !important; grid-template-columns: 86px minmax(0,1fr) !important; grid-template-rows: auto repeat(3, minmax(0,1fr)) !important; gap: 4px 8px !important; align-items: center; }
.atelier-head { grid-column: 1 / -1 !important; }
.atelier-preview { grid-column: 1 !important; grid-row: 2 / 5 !important; align-self: stretch; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(232,195,122,.4); border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(255,236,190,.14), rgba(6,14,16,.55)); overflow: hidden; }
.atelier-preview .chibi { width: 100% !important; height: 100% !important; min-height: 70px; }
.atelier-panel .atel-row { grid-column: 2 !important; height: auto !important; min-height: 0 !important; }


/* 配色收藏：名字完整显示（不再被截成两个字） */
.atelier-panel { grid-template-columns: 76px minmax(0,1fr) !important; gap: 3px 7px !important; }
.atelier-panel .atel-row { gap: 4px !important; }
.atelier-panel .atel-text { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; }
.atelier-panel .atel-text strong { font-size: clamp(8.5px, 1.7vh, 10px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-panel .atel-act { flex: none; font-size: clamp(7px, 1.35vh, 8.5px) !important; padding: 1px 4px !important; white-space: nowrap; }
.atelier-preview .chibi { min-height: 62px; }

/* 配色收藏行：去掉旧图百分比边距，名字完整显示 */
.atelier-panel { grid-template-columns: 64px minmax(0,1fr) !important; }
.atelier-panel .atel-row { margin: 0 !important; padding: 0 !important; }
.atelier-panel .atel-plate { margin: 0 !important; padding: 0 5px !important; gap: 4px !important; width: 100% !important; height: 100% !important; }
.atelier-panel .atel-text { gap: 0 !important; }
.atelier-panel .atel-text strong { font-size: clamp(9px, 1.7vh, 10.5px) !important; }
.atelier-panel .atel-text small { display: none !important; }
.atelier-panel .atel-act { font-size: 8px !important; padding: 1px 3px !important; }

/* 配色收藏：动作标签省略，保证衣服名字完整显示；整行仍可点击 */
.atelier-panel .atel-act { display: none !important; }
.atelier-panel .atel-text strong { font-size: clamp(9.5px, 1.8vh, 11px) !important; overflow: visible !important; }
.atelier-panel .atel-plate { background: linear-gradient(180deg, rgba(43,71,73,.85), rgba(30,54,56,.85)) !important; }


/* 道具图标再放大一点（手机横屏看得清） */
.mat-icon img { transform: scale(1.16); }
.atelier-preview .chibi { min-height: 78px; }


/* 配色收藏预览：保持角色原比例（衣装图不被纵向拉长） */
.atelier-preview { aspect-ratio: 1 / 1; align-self: center !important; justify-self: center !important; width: 100% !important; max-height: 100%; padding: 2px; }
.atelier-preview .chibi { width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: 1 / 1; background-size: 300% 200% !important; background-repeat: no-repeat; }


/* 百宝架材料图标再放大 */
.mat-icon img { width: 90% !important; height: 90% !important; max-width: none !important; max-height: none !important; object-fit: contain; transform: none !important; }
.forge-icon img { width: 88% !important; height: 88% !important; max-width: none !important; max-height: none !important; object-fit: contain; }

/* 百宝架材料图标：直接放大到卡片的 ~85%，避免被内边距限制 */
.mat-icon { overflow: visible !important; }
.mat-icon img { width: 90% !important; height: 90% !important; transform: scale(1.42) !important; transform-origin: center center; object-fit: contain; }

/* 合成产物「星图」可点击：直接去伙伴页使用 */
.forge-slot[type="button"] { cursor: pointer; font: inherit; color: inherit; }
.forge-slot.is-out { position: relative; }
.forge-slot.is-out:hover { border-color: rgba(255,223,154,.85) !important; filter: brightness(1.08); }
.forge-out-tip { display: block; margin-top: 1px; font-size: clamp(6.5px, 1.2vh, 8px); line-height: 1.2; letter-spacing: .02em; color: #ffe0a0; text-align: center; }

/* ==== tasks-view.css ==== */
/* ============================================================
   星灯破晓 · 任务「灯下手记」页面视觉（官方素材 + 同风格自绘组件）
   版式对照 assets/ink/ref-tasks.png：
   - 左栏：官方「灯下手记」卷额 + 灯笼灯彩 + 日期 / 灯下小语 / 累计统计木牌
   - 右上：宣纸签到板（动态奖励 + 朱印签到）
   - 右中：今日功课墨额 + 三行任务框（动态进度 / 奖励 / 领取状态）
   - 右下：领取提示卷条 + 刷新说明
   注：官方包 06 组（任务）切片内容错位（实为仓库页碎片），故任务框/签到板用同风格自绘组件，
   避免烤死文字数字重叠；roster-list.png 的「灯下手记」卷额为干净任务页素材，照常使用。
   ============================================================ */

.page-tasks {
  --tk-gold: var(--gold, #e8c37a);
  --tk-gold-bright: var(--gold-bright, #ffdf9a);
  --tk-gold-deep: var(--gold-deep, #a87b2f);
  --tk-jade: var(--jade, #4f8f84);
  --tk-jade-bright: var(--jade-bright, #7fc4b6);
  --tk-seal: var(--seal, #b33a2b);
  --tk-paper: var(--paper, #f0e4c9);
  --tk-text: var(--ink-text, #f2ead9);
  --tk-muted: var(--ink-muted, #b9b09a);
  --tk-serif: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
  --tk-ui: var(--font-ui, "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif);
}

/* ---------- 页面骨架：横屏单屏 ---------- */
.shell.page-tasks {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(4px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 12% 88%, rgba(226, 150, 62, .18), transparent 62%),
    radial-gradient(70% 80% at 88% 6%, rgba(148, 108, 58, .12), transparent 58%),
    linear-gradient(176deg, #0d1312 0%, #0a100f 52%, #070c0b 100%);
}
.page-tasks .journal {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 7px;
  min-width: 0;
}
.page-tasks .v-glyph { font-style: normal; display: inline-block; line-height: 1; }
.page-tasks .gi { width: 14px; height: 14px; display: inline-block; vertical-align: middle; flex: none; }

/* 官方素材裁剪容器 */
.oc { position: relative; display: block; overflow: hidden; min-width: 0; max-width: 100%; }
.oc > img {
  position: absolute;
  left: var(--ml, 0%);
  top: var(--mt, 0%);
  width: var(--ocw, 100%);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.oc-in { position: absolute; inset: 0; display: block; }

/* ---------- 左栏：灯下手记 ---------- */
.lamp-col {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 195, 122, .32);
  border-radius: 2px;
  background: #0a0f0e;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 0 60px rgba(0, 0, 0, .55);
}
.lamp-bg {
  position: absolute;
  inset: 0;
  background: url('assets/bg/bg-task-lantern.webp') 15% 52% / cover no-repeat;
  filter: brightness(1.06) saturate(1.06);
  transform: scale(1.02);
}
.lamp-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 38% at 34% 56%, rgba(255, 190, 96, .22), transparent 70%),
    linear-gradient(180deg, rgba(8, 11, 10, .72) 0%, rgba(8, 11, 10, 0) 26%, rgba(8, 11, 10, 0) 62%, rgba(7, 10, 9, .9) 100%),
    linear-gradient(90deg, rgba(7, 10, 9, .55), transparent 34%, transparent 72%, rgba(7, 10, 9, .55));
  pointer-events: none;
}
.lamp-title {
  position: relative;
  z-index: 2;
  display: block;
  margin: 7px 8px 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .65));
}
.lamp-date {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 10px 0;
  font-family: var(--tk-serif);
  font-size: 9.5px;
  letter-spacing: .03em;
  color: #e7d5b0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  white-space: nowrap;
  overflow: hidden;
}
.lamp-date i { font-style: normal; color: rgba(232, 195, 122, .5); }
.lamp-date b { color: var(--tk-gold-bright); font-weight: 700; }
.lamp-quote {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 64px;
  margin: 0;
  text-align: center;
  font-family: var(--tk-serif);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #f3dfb4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 0 14px rgba(255, 180, 80, .25);
}
.lamp-stats {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
  height: 50px;
}
.stat-plaque {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding: 8px 2px 4px;
  border: 1px solid rgba(232, 195, 122, .34);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(76, 55, 30, .96), rgba(40, 29, 16, .96)),
    #2a1f11;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, .12), 0 3px 8px rgba(0, 0, 0, .45);
}
.stat-plaque::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  width: 12px;
  height: 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(232, 195, 122, .55);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.stat-plaque em {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: .06em;
  color: #cdbb92;
  white-space: nowrap;
}
.stat-plaque b {
  font-family: var(--tk-serif);
  font-size: 15px;
  line-height: 1;
  color: #ffe9b6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.stat-plaque.is-win { background: linear-gradient(180deg, rgba(96, 70, 36, .96), rgba(52, 36, 18, .96)); }
.stat-plaque.is-ticket {
  background: linear-gradient(180deg, rgba(38, 72, 62, .96), rgba(20, 40, 34, .96));
  border-color: rgba(127, 196, 182, .42);
}
.stat-plaque.is-ticket b { color: #c8f0e2; }
.stat-plaque.is-ticket em { color: #9fc4b8; }

/* ---------- 右栏 ---------- */
.tasks-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 签到区 */
.signin {
  flex: none;
  height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 6px;
  border: 1px solid rgba(232, 195, 122, .28);
  border-radius: 2px;
  background:
    radial-gradient(80% 120% at 90% 0%, rgba(232, 195, 122, .08), transparent 60%),
    linear-gradient(170deg, rgba(24, 32, 29, .92), rgba(10, 15, 14, .95));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .42), inset 0 0 30px rgba(0, 0, 0, .4);
}
.signin-head {
  flex: none;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.signin-head-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--tk-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #f2dfb0;
  white-space: nowrap;
}
.signin-head-title i { font-style: normal; font-size: 9px; color: var(--tk-gold); }
.signin-head-count {
  font-size: 9px;
  letter-spacing: .06em;
  color: #b3a68a;
  white-space: nowrap;
}
.signin.is-signed .signin-head-title { color: #c8f0e2; }
.signin.is-signed .signin-head-title i { color: var(--tk-jade-bright); }
.signin-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid #b98a3e;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(140, 100, 44, .05) 0 2px, transparent 2px 5px),
    linear-gradient(178deg, #f5e9cc 0%, #eeddb8 52%, #e4cfa4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 0 18px rgba(168, 123, 47, .16), 0 4px 10px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.signin-board::before,
.signin-board::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(140, 100, 44, .55);
  pointer-events: none;
}
.signin-board::before { left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.signin-board::after { right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }
.signin-rewards {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}
.signin-card {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid #b98a3e;
  border-radius: 2px;
  background: linear-gradient(180deg, #fdf6e2 0%, #f2e4c3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(120, 84, 36, .18);
  color: #4a2f0f;
}
.signin-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(168, 123, 47, .22);
  border-radius: 1px;
  pointer-events: none;
}
.signin-card .sc-icon { display: grid; place-items: center; height: 22px; font-size: 15px; color: #8a5a1e; }
.signin-card .sc-icon .gi { width: 21px; height: 21px; }
.signin-card .sc-icon .v-glyph { font-size: 16px; }
.signin-card .sc-num { font-size: 10px; line-height: 1; font-weight: 700; color: #6b3f12; }
.signin-card .sc-label { font-size: 7.5px; line-height: 1.1; color: #8a6a3c; letter-spacing: .04em; }
.signin-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(120, 84, 36, .45), transparent);
}
.signin-stamp {
  flex: 0 0 auto;
  width: 108px;
  height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 2px;
  text-align: center;
}
.signin-stamp b { font-family: var(--tk-serif); letter-spacing: .1em; line-height: 1; }
.signin-stamp i { font-style: normal; letter-spacing: .18em; line-height: 1; }
.signin-stamp.is-action {
  border: 2px solid #f4d795;
  background: linear-gradient(180deg, #b23c2c 0%, #952a1e 55%, #7d2016 100%);
  color: #ffe9bd;
  cursor: pointer;
  box-shadow: 0 3px 0 #5e1a11, 0 6px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 220, 170, .35);
  transition: transform .14s ease, filter .14s ease;
}
.signin-stamp.is-action b { font-size: 19px; text-shadow: 0 1px 2px rgba(70, 12, 6, .8); }
.signin-stamp.is-action i { font-size: 7.5px; opacity: .82; margin-top: 2px; }
.signin-stamp.is-action:hover { filter: brightness(1.08); }
.signin-stamp.is-action:active { transform: translateY(2px); }
.signin-stamp.is-action:focus-visible { outline: 2px solid #ffe6a8; outline-offset: 2px; }
.signin-stamp.is-done {
  border: 2px solid #b33a2b;
  color: #a83224;
  background: rgba(179, 58, 43, .08);
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 1px rgba(179, 58, 43, .35);
}
.signin-stamp.is-done b { font-size: 20px; }
.signin-stamp.is-done i { font-size: 7.5px; opacity: .8; }

/* 今日功课标题 */
.tasks-head {
  flex: none;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tasks-title {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 16px 0 12px;
  font-family: var(--tk-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #ffe7b0;
  background: linear-gradient(180deg, #262619 0%, #15150e 62%, #10100a 100%);
  border: 1px solid rgba(232, 195, 122, .38);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 200, .1);
  white-space: nowrap;
}
.tasks-title::after {
  content: '';
  position: absolute;
  right: -13px;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, #10100a, rgba(16, 16, 10, 0));
  pointer-events: none;
}
.tasks-title i { font-style: normal; font-size: 10px; color: var(--tk-gold); }
.tasks-en {
  font-size: 8px;
  letter-spacing: .26em;
  color: #8d7c5c;
  white-space: nowrap;
}
.tasks-tally {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .03em;
  color: #b3a68a;
  white-space: nowrap;
}
.tasks-tally b { font-family: var(--tk-serif); font-size: 12px; color: var(--tk-gold-bright); }
.tasks-tally em { font-style: normal; color: var(--tk-jade-bright); margin-left: 6px; }

/* 任务行 */
.task-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.task-row {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 7px;
  border: 1px solid #b98a3e;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, #f2e5c7 0%, #ecd9b2 58%, #e2cda2 100%);
  color: #3a2a14;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 3px 9px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: rowIn .34s calc(var(--i, 0) * 60ms) ease both;
}
@keyframes rowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.task-row::before,
.task-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
.task-row::before { top: 0; background: linear-gradient(180deg, #7a4a26, #5a3419); opacity: .85; }
.task-row::after { bottom: 0; background: linear-gradient(0deg, #7a4a26, #5a3419); opacity: .7; }
.task-row.is-dark {
  border-color: #8a6a2f;
  background:
    radial-gradient(70% 120% at 10% 0%, rgba(232, 195, 122, .1), transparent 60%),
    linear-gradient(180deg, #2b2417 0%, #1d1810 60%, #16120c 100%);
  color: #efdfbb;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .06), 0 3px 9px rgba(0, 0, 0, .45);
}
.task-row.is-dark::before { background: linear-gradient(180deg, #8a6a2f, #4a3618); opacity: .9; }
.task-row.is-dark::after { background: linear-gradient(0deg, #6d5024, #3a2a12); opacity: .8; }
.task-row.is-ready { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 12px rgba(255, 210, 120, .22), 0 3px 9px rgba(0, 0, 0, .35); }
.task-row.is-claimed { opacity: .82; }

.row-ring {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #a87b2f;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 246, 214, .28), rgba(255, 246, 214, 0) 46%),
    radial-gradient(circle at 50% 55%, #6a5030 0%, #4a361c 58%, #33240f 100%);
  box-shadow: inset 0 0 0 2px rgba(30, 20, 8, .55), 0 2px 5px rgba(0, 0, 0, .3);
}
.row-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(232, 195, 122, .38);
  pointer-events: none;
}
.row-ring b {
  position: relative;
  z-index: 1;
  font-family: var(--tk-serif);
  font-size: 9.5px;
  line-height: 1;
  color: #ffe9b6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.is-ready .row-ring { border-color: #e8c37a; box-shadow: inset 0 0 0 2px rgba(30, 20, 8, .5), 0 0 9px rgba(255, 214, 120, .45); }
.is-claimed .row-ring {
  border-color: #4f8f84;
  background:
    radial-gradient(circle at 38% 30%, rgba(230, 255, 244, .3), rgba(230, 255, 244, 0) 46%),
    radial-gradient(circle at 50% 55%, #4c8377 0%, #2f5b52 58%, #1d3b35 100%);
}
.is-dark .row-ring { border-color: #b98a3e; background: radial-gradient(circle at 38% 30%, rgba(255, 246, 214, .18), rgba(255, 246, 214, 0) 46%), radial-gradient(circle at 50% 55%, #56421f, #2f2410 62%, #1d1608 100%); }

.row-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.row-copy strong {
  font-family: var(--tk-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.1;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-copy small {
  font-size: 9px;
  line-height: 1.1;
  color: #7a5a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-dark .row-copy small { color: #b7a37c; }
.row-bar {
  display: block;
  height: 2px;
  margin-top: 1px;
  border-radius: 1px;
  background: rgba(90, 52, 25, .22);
  overflow: hidden;
}
.row-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a87b2f, #e8c37a); }
.is-dark .row-bar { background: rgba(232, 195, 122, .16); }
.is-claimed .row-bar i { background: linear-gradient(90deg, #2f5b52, #7fc4b6); }

.row-rewards {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.rew-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 5px 0 3px;
  border: 1px solid rgba(120, 84, 36, .45);
  border-radius: 2px;
  background: rgba(255, 250, 235, .62);
  color: #5b3b17;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.rew-chip b { font-weight: 700; font-size: 9px; }
.rew-chip .gi { width: 13px; height: 13px; }
.rew-chip .v-glyph { font-size: 12px; }
.rew-chip.is-ticket { border-color: rgba(168, 123, 47, .6); }
.is-dark .rew-chip {
  background: rgba(24, 19, 11, .55);
  border-color: rgba(232, 195, 122, .35);
  color: #f0e1bb;
  box-shadow: none;
}
.reward-empty { font-size: 9px; color: #8a6a3c; }

.row-claim {
  flex: none;
  width: 86px;
  height: 36px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 0;
  border: 1px solid #f4d795;
  border-radius: 2px;
  background: linear-gradient(180deg, #b23c2c 0%, #952a1e 55%, #7d2016 100%);
  color: #ffe9bd;
  cursor: pointer;
  box-shadow: 0 2px 0 #5e1a11, 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 220, 170, .4);
  transition: transform .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.row-claim b { font-family: var(--tk-serif); font-size: 12.5px; line-height: 1; letter-spacing: .1em; }
.row-claim i { font-style: normal; font-size: 6.5px; line-height: 1; letter-spacing: .16em; opacity: .78; margin-top: 2px; }
.row-claim:hover:not(:disabled) { filter: brightness(1.08); }
.row-claim:active:not(:disabled) { transform: translateY(2px); }
.row-claim:focus-visible { outline: 2px solid #ffe6a8; outline-offset: 2px; }
.row-claim:disabled { cursor: default; }
.is-claimed .row-claim {
  border-color: #bfe6da;
  background: linear-gradient(180deg, #4f8f84 0%, #386b62 55%, #2a544c 100%);
  color: #dff5ea;
  box-shadow: 0 2px 0 #17332e, 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(220, 250, 240, .3);
}
.is-doing .row-claim {
  border-color: rgba(232, 195, 122, .42);
  background: linear-gradient(180deg, #6d5a3d 0%, #52422a 60%, #3e3120 100%);
  color: #d9c8a4;
  box-shadow: none;
  opacity: .9;
}
.is-doing .row-claim b { color: #e2d3ad; }

/* 底部：领取提示 + 说明 */
.tasks-foot {
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.claim-ribbon {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  border: 1px solid #b98a3e;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(140, 100, 44, .06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #f7e8c1 0%, #ecd6a5 55%, #e0c68c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.claim-ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, #7a4a26, #a06a33 55%, #6a3f1f);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, .35);
}
.ribbon-text {
  font-family: var(--tk-serif);
  font-size: 10px;
  letter-spacing: .03em;
  color: #4a2f0f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot-note {
  margin: 0 0 0 auto;
  font-size: 8px;
  color: #8f866f;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-empty {
  flex: 1;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(232, 195, 122, .35);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.7;
  color: #b3a68a;
  text-align: center;
}

/* 按压微动效 */
@keyframes stampPress { 0% { transform: scale(1); } 35% { transform: scale(.9) rotate(-2deg); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.signin-stamp.is-stamping:not(.is-done) { animation: stampPress .5s ease; }
.row-claim.is-stamping { animation: stampPress .5s ease; }

/* ---------- 空状态 ---------- */
.journal.is-empty { align-items: center; justify-content: center; }
.journal .journal-empty-panel {
  width: min(380px, 76%);
  padding: 22px 26px 24px;
  text-align: center;
  color: var(--tk-text);
}
.journal .empty-emblem { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--tk-gold); font-size: 20px; }
.journal .empty-kicker { margin: 8px 0 2px; font-size: 8.5px; letter-spacing: .3em; color: var(--tk-gold-deep); }
.journal .journal-empty-panel h2 { margin: 2px 0 6px; font-family: var(--tk-serif); font-size: 20px; color: var(--tk-gold-bright); }
.journal .empty-copy { margin: 0 0 14px; font-size: 11px; line-height: 1.7; color: #c6bda9; }

/* ---------- 兜底尺寸 ---------- */
@media (max-width: 760px) {
  .page-tasks .journal { gap: 6px; }
  .lamp-col { flex-basis: 198px; width: 198px; }
  .lamp-title { margin: 6px 6px 0; }
  .lamp-date { font-size: 8.5px; margin: 4px 8px 0; }
  .lamp-quote { font-size: 10px; bottom: 60px; }
  .lamp-stats { height: 46px; left: 5px; right: 5px; bottom: 5px; }
  .stat-plaque b { font-size: 13px; }
  .stat-plaque em { font-size: 7px; }
  .signin { height: 84px; }
  .signin-card { width: 52px; height: 48px; }
  .signin-card .sc-icon .gi { width: 18px; height: 18px; }
  .signin-stamp { width: 90px; height: 52px; }
  .signin-stamp.is-action b { font-size: 17px; }
  .signin-stamp.is-done b { font-size: 17px; }
  .tasks-head { height: 26px; }
  .tasks-title { height: 24px; font-size: 12.5px; padding: 0 12px 0 9px; }
  .tasks-en { display: none; }
  .task-row { gap: 6px; padding: 0 6px; }
  .row-ring { width: 32px; height: 32px; border-width: 1px; }
  .row-ring b { font-size: 8.5px; }
  .row-copy strong { font-size: 11.5px; }
  .row-copy small { font-size: 8.5px; }
  .rew-chip { height: 18px; font-size: 8.5px; padding: 0 4px 0 2px; }
  .rew-chip .gi { width: 12px; height: 12px; }
  .row-claim { width: 72px; height: 32px; }
  .row-claim b { font-size: 11.5px; }
  .row-claim i { font-size: 6px; }
  .tasks-foot { height: 26px; }
  .claim-ribbon { height: 24px; padding: 0 10px 0 14px; }
  .ribbon-text { font-size: 9px; }
  .foot-note { font-size: 7.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-row { animation: none; }
  .signin-stamp.is-stamping:not(.is-done), .row-claim.is-stamping { animation: none; }
}


/* 任务状态：已完成/进行中不再发亮，只有可领取时才亮 */
.task-row.is-claimed, .task-row.is-doing { box-shadow: none !important; animation: none !important; }
.task-row.is-claimed { opacity: .72; filter: saturate(.72); }
.task-row.is-claimed .row-claim, .task-row.is-doing .row-claim { animation: none !important; box-shadow: none !important; }
.task-row.is-claimed .row-ring, .task-row.is-doing .row-ring { box-shadow: none !important; }
.is-claimed .row-claim { background: rgba(20,42,42,.6) !important; color: #cfd8c8 !important; border-color: rgba(200,214,200,.28) !important; }
.is-doing .row-claim { background: rgba(20,32,34,.7) !important; color: #b9b09a !important; border-color: rgba(200,190,160,.25) !important; }


/* 手机横屏短屏（≤400 高）：整体压缩，底部提示不再被裁 */
@media (orientation: landscape) and (max-height: 400px) {
  .journal { padding: 3px 8px 4px !important; }
  .journal-head { margin-bottom: 3px !important; }
  .journal-heading h2, .journal-title h2 { font-size: clamp(15px, 3.4vh, 19px) !important; }
  .journal-dayline { font-size: 8px !important; }
  .journal-body { gap: 6px !important; }
  .lamp-note { padding: 5px 6px !important; }
  .lamp-note .lamp-art { min-height: 38px !important; }
  .lamp-quote { font-size: 10px !important; }
  .lamp-stats { font-size: 8px !important; padding-top: 3px !important; }
  .journal-board { gap: 4px !important; }
  .signin-card, .signin-row { padding: 4px 7px !important; }
  .signin-label { font-size: 10px !important; }
  .signin-reward, .signin-tip { font-size: 8px !important; }
  .note-row { min-height: 34px !important; padding: 3px 7px !important; }
  .note-title-row strong { font-size: 11px !important; }
  .note-desc { font-size: 8px !important; }
  .row-claim { height: 24px !important; font-size: 9px !important; }
  .note-foot { font-size: 7px !important; margin: 1px 0 0 !important; }
}

/* 手机横屏：任务页底部提示不再占用空间，所有文字完整露出 */
@media (orientation: landscape) and (max-height: 400px) {
  .note-foot { display: none !important; }
  .journal-board { padding-bottom: 2px !important; }
  .note-list { gap: 4px !important; }
  .note-row { min-height: 36px !important; }
  .note-title-row strong { font-size: 12px !important; }
  .note-desc { font-size: 8.5px !important; line-height: 1.25 !important; }
  .row-claim { height: 25px !important; font-size: 9.5px !important; }
  .signin-reward, .signin-tip { font-size: 8.5px !important; }
  .journal-tally { font-size: 8px !important; }
}


/* 任务页底部：只保留一行简短提示，不被裁切 */
.tasks-foot { padding: 2px 6px 1px !important; margin: 0 !important; }
.tasks-foot .foot-note { display: none !important; }
.tasks-foot .foot-line, .tasks-foot p { font-size: 7.5px !important; line-height: 1.2 !important; }
@media (orientation: landscape) and (max-height: 400px) {
  .tasks-foot { display: none !important; }
}

/* 手机横屏 400~520 高也使用紧凑排版，避免文字被压/错位 */
@media (orientation: landscape) and (max-height: 520px) {
  .journal { padding: 4px 9px 4px !important; }
  .journal-head { margin-bottom: 3px !important; }
  .journal-body { gap: 7px !important; }
  .lamp-note { padding: 6px 8px !important; }
  .lamp-quote { font-size: 11px !important; }
  .lamp-stats { font-size: 8.5px !important; }
  .journal-board { gap: 5px !important; }
  .note-row { min-height: 36px !important; padding: 3px 8px !important; }
  .note-title-row strong { font-size: 12px !important; }
  .note-desc { font-size: 8.5px !important; }
  .row-claim { height: 25px !important; font-size: 9.5px !important; }
  .tasks-foot { font-size: 7.5px !important; padding: 2px 6px !important; }
  .tasks-foot .foot-note { display: none !important; }
}
@media (max-height: 480px) {
  .tasks-foot { display: none !important; }
}

/* 短屏任务清单再收紧，三行任务完整露出 */
@media (orientation: landscape) and (max-height: 400px) {
  .note-row { min-height: 44px !important; padding: 2px 8px !important; }
  .note-title-row strong { font-size: 11px !important; }
  .note-desc { font-size: 8px !important; line-height: 1.2 !important; }
  .row-claim { height: 22px !important; font-size: 9px !important; padding: 0 8px !important; }
  .note-stack-head { min-height: 24px !important; margin-bottom: 2px !important; }
  .note-list { gap: 4px !important; }
  .signin-row, .signin-card { padding: 3px 7px !important; }
  .signin-label { font-size: 9.5px !important; }
  .signin-reward, .signin-tip { font-size: 8px !important; }
  .journal-head { padding-bottom: 2px !important; }
  .journal-dayline { font-size: 7.5px !important; }
  .lamp-note .lamp-art { min-height: 32px !important; }
  .lamp-quote { font-size: 9px !important; }
  .lamp-stats { display: none !important; }
  .lamp-motto { display: none !important; }
}

/* 短屏任务页：隐藏左侧灯盏栏，任务清单占满整屏，所有文字完整可见 */
@media (orientation: landscape) and (max-height: 400px) {
  .journal-body { grid-template-columns: 1fr !important; gap: 0 !important; }
  .lamp-note { display: none !important; }
  .journal-board { width: 100% !important; }
  .note-row { min-height: 40px !important; }
  .journal-head { margin-bottom: 2px !important; }
}

/* ==== seeker-view.css ==== */
/* ============================================================
   星灯破晓 · 寻星「观星坛」
   设计点：真实星盘（astrolabe.png）为坛 · 中心墨玉盘承接寻星金钮
          卷轴星象档案（scroll-almanac.png 只取卷轴外框，中心覆墨玉）
          二十八宿金环 / 保底金弧 / 呼吸光环 / 夜观天象题字
   通用组件（按钮、印章、面板）复用 ink-ui.css，本文件只写本页设计
   ============================================================ */
.shell.page-seeker {
  --sk-gold: var(--gold, #e8c37a);
  --sk-gold-bright: var(--gold-bright, #ffdf9a);
  --sk-gold-deep: var(--gold-deep, #a87b2f);
  --sk-jade: var(--jade, #4f8f84);
  --sk-jade-bright: var(--jade-bright, #7fc4b6);
  --sk-paper: var(--paper, #f0e4c9);
  --sk-text: var(--ink-text, #f2ead9);
  --sk-muted: var(--ink-muted, #b9b09a);
  --sk-dim: var(--ink-dim, #8c8574);
  --sk-seal: var(--seal, #b33a2b);
  --sk-serif: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
  --sk-ui: var(--font-ui, "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(4px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
  color: var(--sk-text);
  background: var(--ink-950, #060d0f);
}
.page-seeker *,
.page-seeker *::before,
.page-seeker *::after { box-sizing: border-box; }
.page-seeker button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.page-seeker .gi { width: 1em; height: 1em; display: block; }

/* ---------- 页面骨架 ---------- */
.seeker-page {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(196px, 25.5vw, 248px);
  gap: clamp(6px, .9vw, 10px);
  overflow: hidden;
  animation: sk-page-in .5s cubic-bezier(.2, .7, .3, 1) both;
}
.seeker-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ---------- 背景气氛：水墨星空 / 星尘 / 淡墨云 ---------- */
.seeker-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 2px;
}
.seeker-ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 52% at 50% 44%, rgba(79, 143, 132, .16), transparent 64%),
    radial-gradient(ellipse 54% 42% at 88% -6%, rgba(232, 195, 122, .12), transparent 60%),
    linear-gradient(180deg, rgba(4, 10, 12, .24) 0%, rgba(4, 10, 12, .38) 46%, rgba(3, 8, 10, .76) 100%),
    url('assets/bg/bg-starry-ink.webp') center 46% / cover no-repeat;
}
.seeker-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 8, 10, .78), transparent 16%, transparent 84%, rgba(3, 8, 10, .78)),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(3, 8, 10, .42) 100%);
}
.ambient-stars {
  position: absolute;
  inset: -6%;
  background-image:
    radial-gradient(circle, rgba(255, 236, 190, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(232, 214, 172, .7) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(160, 210, 200, .55) 0 .9px, transparent 1.6px);
  background-size: 173px 151px, 263px 213px, 349px 283px;
  background-position: 20px 14px, 71px 63px, 149px 31px;
  opacity: .5;
  animation: sk-drift 140s linear infinite alternate;
}
.ambient-glyph {
  position: absolute;
  left: 13%;
  bottom: -5.5%;
  font-family: var(--sk-serif);
  font-size: clamp(96px, 17vw, 190px);
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(232, 195, 122, .05);
  text-shadow: 0 0 60px rgba(232, 195, 122, .08);
  user-select: none;
}
.ambient-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(74vmin, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 143, 132, .2), rgba(79, 143, 132, .05) 46%, transparent 70%);
  filter: blur(6px);
}
.ambient-mist {
  position: absolute;
  width: 62%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(150, 195, 190, .12), transparent 68%);
  filter: blur(18px);
  animation: sk-mist 26s ease-in-out infinite alternate;
}
.ambient-mist.m-left { left: -20%; bottom: 2%; }
.ambient-mist.m-right { right: -22%; top: 6%; animation-delay: -13s; }

/* ---------- 页首 ---------- */
.seeker-head {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}
.seeker-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.seeker-crest {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 1px solid rgba(232, 195, 122, .62);
  background: linear-gradient(160deg, rgba(232, 195, 122, .22), rgba(10, 22, 24, .92));
  box-shadow: 0 0 16px rgba(232, 195, 122, .22), inset 0 0 8px rgba(232, 195, 122, .16);
}
.seeker-crest i {
  transform: rotate(-45deg);
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--sk-gold-bright);
  text-shadow: 0 0 10px rgba(255, 223, 154, .85);
}
.seeker-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seeker-kicker {
  margin: 0;
  font: 700 8px/1 var(--sk-ui);
  letter-spacing: .28em;
  color: rgba(168, 123, 47, .98);
  white-space: nowrap;
}
.seeker-heading h2 {
  margin: 0;
  font-family: var(--sk-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--sk-gold-bright);
  text-shadow: 0 0 20px rgba(232, 195, 122, .38), 0 2px 4px rgba(0, 0, 0, .7);
  white-space: nowrap;
}
.seeker-sub {
  align-self: flex-end;
  margin-bottom: 2px;
  padding-left: 9px;
  border-left: 1px solid rgba(232, 195, 122, .22);
  font: 9px/1 var(--sk-serif);
  letter-spacing: .14em;
  color: rgba(201, 192, 168, .6);
  white-space: nowrap;
}
.seeker-head-meta { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.seeker-headnote {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 9.5px/1 var(--sk-serif);
  letter-spacing: .12em;
  color: rgba(217, 202, 172, .82);
  white-space: nowrap;
}
.seeker-headnote i { font-style: normal; font-size: 8px; color: var(--sk-gold); opacity: .85; }
.seeker-pool { font-size: 8px !important; letter-spacing: .06em !important; }

/* ---------- 舞台 ---------- */
.seeker-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.stage-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stage-arc.a1 { width: min(96%, 380px); aspect-ratio: 1; border: 1px solid rgba(232, 195, 122, .1); }
.stage-arc.a2 { width: min(112%, 446px); aspect-ratio: 1; border: 1px dashed rgba(232, 195, 122, .1); animation: sk-spin-arc 150s linear infinite; }
.stage-arc.a3 { width: min(80%, 312px); aspect-ratio: 1; border: 1px solid rgba(127, 196, 182, .08); }
.stage-inscription {
  position: absolute;
  left: 1.2%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--sk-serif);
  font-size: 10px;
  letter-spacing: .46em;
  color: rgba(232, 195, 122, .34);
  text-shadow: 0 0 14px rgba(0, 0, 0, .8);
  user-select: none;
  pointer-events: none;
}
.seeker-altar {
  position: relative;
  height: min(100%, 276px);
  aspect-ratio: 1;
  max-width: 100%;
  display: grid;
  place-items: center;
  animation: sk-altar-in .8s .05s cubic-bezier(.2, .8, .3, 1) both;
}
.altar-glow {
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(232, 195, 122, .16), rgba(79, 143, 132, .1) 42%, transparent 68%);
  filter: blur(10px);
  animation: sk-breathe 6.4s ease-in-out infinite;
}
.altar-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url('assets/ui/astrolabe.webp') center / contain no-repeat;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6)) saturate(1.08) brightness(1.04) contrast(1.02);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 99.2%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 99.2%, transparent 100%);
}
.altar-wheel::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(232, 195, 122, .22), inset 0 0 40px rgba(232, 195, 122, .12);
  pointer-events: none;
}
.altar-veil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side,
    #061012 0 68%,
    rgba(6, 16, 18, .95) 78%,
    rgba(6, 16, 18, .55) 90%,
    transparent 100%);
}
.altar-veil::after {
  content: '';
  position: absolute;
  inset: 12% 6%;
  border-radius: 50%;
  border: 1px solid rgba(232, 195, 122, .18);
  box-shadow: 0 0 18px rgba(232, 195, 122, .1) inset;
  pointer-events: none;
}
.altar-arc {
  position: absolute;
  inset: -3.5%;
  width: 107%;
  height: 107%;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-90deg);
}
.arc-track { fill: none; stroke: rgba(232, 195, 122, .2); stroke-width: .8; }
.arc-fill {
  fill: none;
  stroke: var(--sk-gold-bright);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 223, 154, .95));
  transition: stroke-dasharray .6s cubic-bezier(.2, .7, .3, 1);
}
.altar-orbit { position: absolute; inset: -3.5%; border-radius: 50%; pointer-events: none; animation: sk-spin 64s linear infinite; }
.altar-orbit i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff3d2;
  box-shadow: 0 0 10px 3px rgba(232, 195, 122, .7);
}
.altar-orbit i:nth-child(1) { left: 50%; top: 0; transform: translate(-50%, -50%); }
.altar-orbit i:nth-child(2) { left: 92%; top: 38%; opacity: .8; }
.altar-orbit i:nth-child(3) { left: 8%; top: 62%; opacity: .7; background: #cfeee4; box-shadow: 0 0 9px 2px rgba(127, 196, 182, .7); }
.altar-orbit i:nth-child(4) { left: 50%; top: 100%; transform: translate(-50%, -50%); opacity: .55; }

/* 中心墨玉盘：遮住素材烤死文字，承接寻星金钮 */
.altar-core {
  position: relative;
  z-index: 5;
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.altar-core::before {
  content: '';
  position: absolute;
  inset: -18% -10%;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(232, 195, 122, .24);
  box-shadow: 0 0 0 4px rgba(6, 16, 18, .55), inset 0 0 24px rgba(0, 0, 0, .6);
}
.altar-core::after {
  content: '';
  position: absolute;
  inset: -30% -22%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 28px rgba(232, 195, 122, .3), 0 0 60px rgba(232, 195, 122, .12);
  animation: sk-halo 5.4s ease-in-out infinite;
}
.core-kicker {
  position: relative;
  z-index: 1;
  font: 700 7px/1 var(--sk-ui);
  letter-spacing: .3em;
  color: rgba(201, 192, 168, .72);
  padding-left: .3em;
}
.seeker-draw.ink-btn {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 7px 17px;
  font-size: 15px;
  letter-spacing: .18em;
  gap: 5px;
  border-radius: 3px;
}
.seeker-draw.ink-btn:not(:disabled) { animation: sk-btn-glow 4.6s ease-in-out infinite; }
.seeker-draw .draw-label { display: inline-block; padding-left: .18em; }
.seeker-draw .draw-star {
  font-style: normal;
  font-size: .86em;
  line-height: 1;
  color: #3a260c;
  animation: sk-star-pulse 3.2s ease-in-out infinite;
}
.seeker-draw.ink-btn:disabled .draw-star { animation: none; }
.core-cost {
  position: relative;
  z-index: 1;
  font: 8.5px/1 var(--sk-ui);
  letter-spacing: .1em;
  color: rgba(185, 176, 154, .8);
}
.altar-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--sk-serif);
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(232, 195, 122, .58);
  white-space: nowrap;
  pointer-events: none;
}
.altar-caption b { font-weight: 400; color: rgba(255, 223, 154, .9); }
.altar-caption i { font-style: normal; opacity: .5; }
.altar-caption span {
  margin-left: 6px;
  font: 700 6.5px/1 var(--sk-ui);
  letter-spacing: .3em;
  color: rgba(140, 133, 116, .66);
}
.seeker-foot {
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 8.5px/1.2 var(--sk-serif);
  letter-spacing: .16em;
  color: rgba(185, 176, 154, .58);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seeker-foot span { color: rgba(232, 195, 122, .55); font-size: 7px; }

/* ---------- 右侧卷轴：星象档案（素材只取卷轴外框，中心覆墨玉卷面） ---------- */
.seeker-rail {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: url('assets/ui/scroll-almanac.webp') center / cover no-repeat;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5));
  animation: sk-rail-in .6s .1s cubic-bezier(.2, .7, .3, 1) both;
}
.rail-figure {
  position: absolute;
  right: 4%;
  bottom: 2%;
  font-family: var(--sk-serif);
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1;
  color: rgba(232, 195, 122, .055);
  pointer-events: none;
}
.rail-inner {
  position: absolute;
  inset: 15% 4% 13.5% 4%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 7px 4px;
  overflow: hidden;
  border-radius: 1px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(232, 195, 122, .08), transparent 62%),
    linear-gradient(168deg, #123336 0%, #0c2326 46%, #081619 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232, 195, 122, .34),
    inset 0 0 0 2px rgba(0, 0, 0, .35),
    inset 0 0 26px rgba(0, 0, 0, .55);
}
.rail-inner::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(232, 195, 122, .12);
  pointer-events: none;
}
.rail-inner > * { position: relative; z-index: 1; }

.rail-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rail-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-kicker {
  margin: 0;
  font: 700 6.5px/1 var(--sk-ui);
  letter-spacing: .28em;
  color: rgba(168, 123, 47, .95);
}
.rail-title {
  margin: 0;
  font-family: var(--sk-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--sk-gold-bright);
  text-shadow: 0 0 14px rgba(232, 195, 122, .35);
}
.rail-seal {
  flex: none;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 3px !important;
  font-size: 9.5px !important;
  border-width: 1px !important;
}

.rail-ticket {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(232, 195, 122, .26);
  background: linear-gradient(100deg, rgba(232, 195, 122, .13), rgba(255, 255, 255, .01));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .06);
}
.rail-ticket-icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--sk-gold-bright); }
.rail-ticket-icon .gi { width: 21px; height: 21px; filter: drop-shadow(0 0 7px rgba(232, 195, 122, .5)); }
.rail-ticket-value { min-width: 0; display: flex; align-items: baseline; gap: 3px; }
.rail-ticket-value strong {
  font-family: var(--sk-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #fff4d6;
  text-shadow: 0 0 14px rgba(232, 195, 122, .4);
}
.rail-ticket-value em { font-style: normal; font-size: 7.5px; letter-spacing: .02em; color: rgba(201, 192, 168, .72); white-space: nowrap; }
.rail-ticket-cap {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid rgba(232, 195, 122, .22);
  background: rgba(8, 18, 20, .5);
  font-size: 6.5px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: rgba(185, 176, 154, .82);
  white-space: nowrap;
}

.rail-block { flex: none; min-height: 0; display: flex; flex-direction: column; }
.rail-label { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.rail-label span {
  font-family: var(--sk-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #e6d9b8;
  white-space: nowrap;
}
.rail-label em { font-style: normal; font: 700 6px/1 var(--sk-ui); letter-spacing: .2em; color: rgba(140, 133, 116, .9); }
.rail-label b { margin-left: auto; font-family: var(--sk-serif); font-size: 9px; font-weight: 400; color: var(--sk-gold); white-space: nowrap; }
.rail-label b i { font-style: normal; margin: 0 1px; opacity: .5; }

.prob-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.prob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: rgba(201, 192, 168, .88);
}
.prob-row > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.prob-row > span::before {
  content: '';
  width: 3.5px;
  height: 3.5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--pc, var(--sk-jade-bright));
  box-shadow: 0 0 6px var(--pc, var(--sk-jade-bright));
}
.prob-row b { font-family: var(--sk-serif); font-size: 8.5px; font-weight: 400; color: #f3e7c9; }
.prob-row i { grid-column: 1 / -1; display: block; height: 2.5px; margin-top: 1px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.prob-row i::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(127, 196, 182, .35), var(--pc, var(--sk-gold)));
  box-shadow: 0 0 7px var(--pc, var(--sk-gold));
}
.prob-mat { --pc: var(--sk-jade-bright); }
.prob-skin { --pc: var(--sk-gold); }
.prob-char { --pc: #d88a72; }

.pity-pips { display: flex; gap: 2.5px; }
.pity-pips i {
  flex: 1;
  height: 5px;
  border: 1px solid rgba(232, 195, 122, .22);
  background: rgba(255, 255, 255, .04);
  transition: background .2s, box-shadow .2s;
}
.pity-pips i.is-on {
  border-color: rgba(255, 223, 154, .85);
  background: linear-gradient(180deg, #ffe9b8, #c99a45);
  box-shadow: 0 0 7px rgba(232, 195, 122, .55);
}
.pity-pips i:nth-child(n+4) { border-color: rgba(127, 196, 182, .26); }
.pity-pips i:nth-child(n+4).is-on { border-color: rgba(168, 230, 214, .9); background: linear-gradient(180deg, #d9f7ec, #5aa596); box-shadow: 0 0 7px rgba(127, 196, 182, .55); }
.pity-pips i:last-child { border-style: dashed; }
.pity-pips i:last-child.is-on { border-style: solid; border-color: #fff1c9; background: linear-gradient(180deg, #fff3cc, #e8b45a); box-shadow: 0 0 9px rgba(255, 224, 150, .8); }
.pity-note {
  margin: 3px 0 0;
  font-size: 7.5px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: rgba(185, 176, 154, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-history { flex: 1 1 auto; min-height: 0; position: relative; }
.rail-history::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 22, 25, .92));
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 195, 122, .3) transparent;
}
.history-list::-webkit-scrollbar { width: 3px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(232, 195, 122, .3); }
.history-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
  flex: none;
  border-left: 2px solid var(--hc, var(--sk-gold));
  background: linear-gradient(90deg, rgba(232, 195, 122, .1), transparent 78%);
  transition: background .16s;
}
.history-row:hover { background: linear-gradient(90deg, rgba(232, 195, 122, .2), rgba(232, 195, 122, .02)); }
.history-glyph {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  line-height: 1;
  color: var(--hc, var(--sk-gold));
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .9;
}
.history-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.history-text strong { font-size: 8px; font-weight: 600; color: #f0e6cd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-text small { font-size: 6.5px; letter-spacing: .03em; color: rgba(185, 176, 154, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-badge { flex: none; font-style: normal; font-size: 6px; line-height: 1.4; letter-spacing: .04em; padding: 0 2px; border: 1px solid currentColor; }
.history-badge.is-guarantee { color: #ffe9b2; background: rgba(255, 233, 178, .1); }
.history-badge.is-dupe { color: #c9c0ac; background: rgba(201, 192, 168, .08); }
.type-mat { --hc: var(--sk-jade-bright); }
.type-skin { --hc: var(--sk-gold); }
.type-char { --hc: #e0a48f; }
.history-empty {
  flex: 1;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  color: rgba(185, 176, 154, .62);
}
.history-empty span { font-size: 13px; color: rgba(232, 195, 122, .75); text-shadow: 0 0 16px rgba(232, 195, 122, .6); }
.history-empty p { margin: 0; font-size: 7px; line-height: 1.5; letter-spacing: .06em; }

/* ---------- 动效 ---------- */
@keyframes sk-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sk-rail-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sk-altar-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-spin-arc { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sk-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16px, 22px, 0); } }
@keyframes sk-mist { from { opacity: .5; transform: translate3d(0, 0, 0) scale(1); } to { opacity: .95; transform: translate3d(14px, -10px, 0) scale(1.08); } }
@keyframes sk-breathe { 0%, 100% { opacity: .6; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes sk-halo {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50% { opacity: .95; transform: scale(1.06); }
}
@keyframes sk-btn-glow {
  0%, 100% { box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 #fff1cd, 0 0 12px rgba(232, 195, 122, .28); }
  50% { box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 #fff1cd, 0 0 26px rgba(255, 223, 154, .62); }
}
@keyframes sk-star-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- 紧凑横屏（667×375 / 低于 400 高） ---------- */
@media (orientation: landscape) and (max-height: 420px) {
  .shell.page-seeker { gap: 3px; }
  .seeker-page { grid-template-columns: minmax(0, 1fr) clamp(186px, 27vw, 214px); gap: 6px; }
  .seeker-heading h2 { font-size: 20px; }
  .seeker-kicker { font-size: 7.5px; }
  .seeker-altar { height: min(100%, 268px); }
  .altar-core { width: 48%; gap: 3px; }
  .seeker-draw.ink-btn { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
  .core-kicker { font-size: 6.5px; }
  .core-cost { font-size: 8px; }
  .seeker-foot { font-size: 7.5px; letter-spacing: .1em; }
  .rail-inner { gap: 3px; padding: 4px 6px 3px; }
  .rail-title { font-size: 13px; }
  .rail-ticket { padding: 2px 5px; }
  .rail-ticket-value strong { font-size: 18px; }
  .rail-ticket-cap { font-size: 6px; }
  .prob-row { font-size: 7.5px; }
  .prob-row b { font-size: 8px; }
  .history-text strong { font-size: 7.5px; }
  .history-text small { font-size: 6px; }
  .history-badge { font-size: 5.5px; }
}
@media (orientation: landscape) and (max-height: 340px) {
  .seeker-sub, .seeker-headnote, .seeker-pool, .stage-inscription { display: none; }
  .rail-ticket-cap { display: none; }
  .seeker-foot { display: none; }
}

/* ---------- 竖屏兜底：允许滚动，不挤压内容 ---------- */
@media (orientation: portrait) and (max-width: 760px) {
  .shell.page-seeker {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .seeker-page { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: visible; }
  .seeker-main { min-height: 330px; }
  .seeker-altar { height: 272px; }
  .seeker-rail { min-height: 300px; }
  .ambient-glyph { font-size: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-stars, .ambient-mist, .stage-arc.a2, .altar-glow, .altar-orbit,
  .altar-core::after, .seeker-draw.ink-btn, .seeker-draw .draw-star { animation: none !important; }
}


/* 寻星界面顶部显示可能相遇的角色，知道在寻谁 */
.seeker-stage { position: relative !important; }
.seeker-cast { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: flex-end; gap: 18px; pointer-events: none; }
.seeker-cast-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seeker-cast-item .chibi { width: 58px; height: 58px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.seeker-cast-item figcaption { font-family: "STSong","SimSun",serif; font-size: 10px; color: #ffe6b0; letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
@media (orientation: landscape) and (max-height: 550px) {
  .seeker-cast { gap: 14px; }
  .seeker-cast-item .chibi { width: 46px; height: 46px; }
  .seeker-cast-item figcaption { font-size: 8.5px; }
}


/* 寻星角色图更清楚：上移 + 名字底衬 */
.seeker-cast { top: -24px !important; z-index: 12 !important; gap: 20px !important; }
.seeker-cast-item .chibi { width: 64px; height: 64px; }
.seeker-cast-item figcaption { background: rgba(6,14,16,.62); padding: 1px 7px; border-radius: 2px; border: 1px solid rgba(232,195,122,.28); }
@media (orientation: landscape) and (max-height: 550px) {
  .seeker-cast { top: -18px !important; }
  .seeker-cast-item .chibi { width: 54px; height: 54px; }
}

/* ==== guide-view.css ==== */
/* ============================================================
   星灯破晓 · 战地手札（指引页，官方素材重拼版）
   复用 ink-ui 宣纸卡片 / 金线框架；官方素材：返回箭头、帮助木牌、
   「开始推演」长卷按钮、祥云。
   ============================================================ */
.page-guide {
  --gd-gold: var(--gold, #e8c37a);
  --gd-gold-bright: var(--gold-bright, #ffdf9a);
  --gd-gold-deep: var(--gold-deep, #a87b2f);
  --gd-seal: var(--seal, #b33a2b);
  --gd-paper: var(--paper, #f0e4c9);
  --gd-ink: #2b1c0b;
  --gd-serif: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
  --gd-ui: var(--font-ui, "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif);
}
.shell.page-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(3px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
}
.page-guide > .ink-header { flex: none; }
.guide-page {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  color: var(--ink-text, #f2ead9);
  font-family: var(--gd-ui);
}
.guide-page button { font: inherit; color: inherit; }
.guide-page .gi { width: 15px; height: 15px; }

/* ---------- 页首 ---------- */
.guide-head {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(232, 195, 122, .16);
}
.guide-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.guide-mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform: rotate(-4deg);
  border: 1.5px solid var(--gd-seal);
  background: rgba(179, 58, 43, .18);
  color: #edbfb3;
  font-family: var(--gd-serif);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(179, 58, 43, .3);
}
.guide-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-kicker {
  font: 700 8px/1 var(--gd-ui);
  letter-spacing: .3em;
  color: rgba(168, 123, 47, .95);
  white-space: nowrap;
}
.guide-heading h2 {
  margin: 0;
  font-family: var(--gd-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--gd-gold-bright);
  text-shadow: 0 0 18px rgba(232, 195, 122, .36), 0 2px 4px rgba(0, 0, 0, .7);
  white-space: nowrap;
}
.guide-heading h2 em { font-style: normal; color: #fff4dc; }
.guide-help {
  flex: none;
  width: 24px;
  height: 30px;
  background: url('assets/official/help2.png') no-repeat;
  background-size: 38px auto;
  background-position: -16px -8px;
  opacity: .9;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.guide-head-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.guide-head-right p {
  margin: 0;
  max-width: 300px;
  font-size: 9px;
  letter-spacing: .04em;
  color: rgba(201, 192, 168, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-back { min-height: 28px; padding: 4px 11px; font-size: 11.5px; }
.guide-back-arrow {
  width: 11px;
  height: 11px;
  background: url('assets/official/back-arrow.png') center / contain no-repeat;
  filter: brightness(0.25);
}

/* ---------- 主体：手记 + 地图/CTA ---------- */
.guide-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(238px, .92fr);
  gap: 7px;
}
.guide-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}
.guide-note {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  padding: 7px 10px 6px 35px;
  color: var(--gd-ink);
  animation: gd-card-in .5s ease both;
}
.guide-note:nth-child(2) { animation-delay: .06s; }
.guide-note:nth-child(3) { animation-delay: .12s; }
.guide-note:nth-child(4) { animation-delay: .18s; }
@keyframes gd-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guide-note.ink-card { border-radius: 2px; }
.guide-note::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(168, 123, 47, .26);
  pointer-events: none;
}
.guide-note-seal {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gd-seal);
  background: rgba(179, 58, 43, .05);
  box-shadow: inset 0 0 0 1px rgba(179, 58, 43, .22);
  color: var(--gd-seal);
  font-family: var(--gd-serif);
  font-size: 10px;
  font-weight: 700;
  transform: rotate(-5deg);
}
.guide-note-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.guide-note-head h3 {
  margin: 0;
  font-family: var(--gd-serif);
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: .08em;
  color: #2c2111;
  white-space: nowrap;
}
.guide-note-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 7.5px/1 var(--gd-ui);
  letter-spacing: .16em;
  color: #9a7c42;
}
.guide-note p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font: 9px/1.55 var(--gd-ui);
  color: #5b4a2c;
}
.guide-note p b {
  padding: 0 2px;
  color: #8f2c1f;
  font-weight: 700;
  background: rgba(179, 58, 43, .08);
}
.guide-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 3px;
}
.guide-note-tags span {
  padding: 1px 5px;
  border: 1px solid rgba(168, 123, 47, .34);
  border-radius: 1px;
  background: rgba(168, 123, 47, .08);
  color: #8a6a35;
  font-size: 7px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.guide-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  min-width: 0;
}
.guide-map-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(232, 195, 122, .3);
  background: linear-gradient(165deg, rgba(26, 48, 46, .72), rgba(7, 15, 17, .9));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 240, 200, .07);
}
.guide-map-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(232, 195, 122, .16);
}
.guide-map-head strong {
  font-family: var(--gd-serif);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--gd-gold-bright);
  white-space: nowrap;
}
.guide-map-head small {
  font: 700 7px/1 var(--gd-ui);
  letter-spacing: .16em;
  color: rgba(168, 123, 47, .9);
  white-space: nowrap;
}
.guide-map {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2px;
}
.guide-cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(232, 195, 122, .1);
  background: rgba(16, 30, 30, .72);
}
.guide-cell.road {
  border-color: rgba(127, 196, 182, .3);
  background: linear-gradient(180deg, rgba(79, 143, 132, .34), rgba(44, 95, 88, .3));
}
.guide-cell.high {
  border-color: rgba(232, 195, 122, .38);
  background: linear-gradient(180deg, rgba(232, 195, 122, .2), rgba(168, 123, 47, .14));
}
.guide-cell.mark::after {
  content: attr(data-mark);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--gd-serif);
  font-size: 9px;
  font-weight: 700;
  color: #ffe9b8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.guide-cell.mark.enter { border-color: rgba(232, 195, 122, .5); background: rgba(168, 123, 47, .3); }
.guide-cell.mark.goal { border-color: rgba(255, 223, 154, .6); background: rgba(232, 195, 122, .24); box-shadow: 0 0 8px rgba(232, 195, 122, .35); }
.guide-cell.mark.unit { border-color: rgba(127, 196, 182, .5); background: rgba(79, 143, 132, .36); }
.guide-legend {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 8px;
  letter-spacing: .04em;
  color: rgba(201, 192, 168, .72);
  white-space: nowrap;
  overflow: hidden;
}
.guide-legend span { display: inline-flex; align-items: center; gap: 3px; }
.guide-legend i {
  width: 7px;
  height: 7px;
  display: block;
  border: 1px solid rgba(232, 195, 122, .3);
  background: rgba(16, 30, 30, .8);
}
.guide-legend .legend-road { background: rgba(79, 143, 132, .5); border-color: rgba(127, 196, 182, .5); }
.guide-legend .legend-high { background: rgba(232, 195, 122, .35); border-color: rgba(232, 195, 122, .55); }
.guide-legend .legend-unit { background: rgba(127, 196, 182, .6); border-color: rgba(127, 196, 182, .8); }
.guide-legend .legend-enter { background: rgba(168, 123, 47, .6); border-color: rgba(232, 195, 122, .6); }
.guide-legend .legend-goal { background: rgba(255, 223, 154, .8); border-color: #fff0c8; box-shadow: 0 0 5px rgba(255, 223, 154, .6); }
.guide-cta {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 528 / 131;
  border: 0;
  background: url('assets/official/btn-start-stage.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
  transition: transform .16s, filter .16s;
}
.guide-cta:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)) brightness(1.04); }
.guide-cta:active { transform: translateY(0) scale(.995); }
.guide-cta-art,
.guide-cta-text { display: none; }
.guide-tips {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7.5px;
  letter-spacing: .03em;
  color: rgba(201, 192, 168, .66);
  white-space: nowrap;
  overflow: hidden;
}
.guide-tips span {
  padding: 1px 5px;
  border: 1px solid rgba(232, 195, 122, .2);
  background: rgba(8, 16, 18, .5);
}
.guide-cloud {
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: 0;
  width: 72%;
  aspect-ratio: 417 / 172;
  transform: translateX(-50%);
  background: url('assets/official/cloud.png') center bottom / contain no-repeat;
  opacity: .22;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- 矮屏横屏（844×390 / 667×375） ---------- */
@media (orientation: landscape) and (max-height: 550px) {
  .shell.page-guide { padding: max(2px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .guide-heading h2 { font-size: 19px; }
  .guide-kicker { display: none; }
  .guide-mark { width: 23px; height: 23px; font-size: 12px; }
  .guide-head { min-height: 30px; padding-bottom: 3px; }
  .guide-head-right p { max-width: 200px; font-size: 8px; }
  .guide-back { min-height: 26px; padding: 3px 9px; font-size: 10.5px; }
  .guide-body { gap: 6px; grid-template-columns: minmax(0, 1.34fr) minmax(214px, .92fr); }
  .guide-notes { gap: 5px; }
  .guide-note { padding: 6px 8px 5px 31px; }
  .guide-note-seal { width: 19px; height: 19px; font-size: 9px; left: 7px; top: 6px; }
  .guide-note-head h3 { font-size: 12px; }
  .guide-note-head small { font-size: 7px; }
  .guide-note p { -webkit-line-clamp: 4; font-size: 8px; line-height: 1.5; }
  .guide-map-card { padding: 5px 7px; }
  .guide-map-head strong { font-size: 10.5px; }
  .guide-legend { gap: 7px; font-size: 7.5px; }
  .guide-side { gap: 4px; }
  .guide-tips { font-size: 7px; gap: 4px; }
}
@media (max-width: 720px) {
  .guide-head-right p { display: none; }
  .guide-body { grid-template-columns: minmax(0, 1.28fr) minmax(200px, .92fr); }
  .guide-note-head small { display: none; }
  .guide-note p { -webkit-line-clamp: 3; font-size: 7.5px; }
  .guide-legend { gap: 5px; font-size: 7px; }
  .guide-tips span:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-note, .guide-cta { animation: none !important; transition: none; }
}

/* 指引页：390 高度下压缩排版，避免底部卡片被裁切 */
@media (orientation: landscape) and (max-height: 550px) {
  .guide-page { padding: 3px 10px 4px !important; }
  .guide-head { margin-bottom: 3px !important; }
  .guide-head h2 { font-size: 21px !important; line-height: 1.1 !important; }
  .guide-head small { font-size: 7px !important; }
  .guide-head .back { height: 26px !important; padding: 3px 9px !important; font-size: 11px !important; }
  .guide-layout { gap: 7px !important; }
  .guide-notes { gap: 6px !important; }
  .guide-note { padding: 6px 8px 7px 9px !important; gap: 2px !important; }
  .guide-note-head { gap: 5px !important; }
  .guide-note-num { font-size: 14px !important; }
  .guide-note h3 { font-size: 11.5px !important; }
  .guide-note h3 small { font-size: 6px !important; margin-top: 1px !important; }
  .guide-note p { font-size: 8.6px !important; line-height: 1.5 !important; }
  .guide-map-card { padding: 6px 7px 7px !important; }
  .guide-card-title strong { font-size: 10px !important; }
  .guide-card-title small { font-size: 6px !important; }
  .guide-map { height: 128px !important; }
  .guide-legend { gap: 5px !important; font-size: 7px !important; }
  .guide-cta { margin-top: 5px !important; gap: 6px !important; }
  .guide-cta .btn { min-height: 28px !important; font-size: 11px !important; padding: 4px 10px !important; }
  .guide-tip-strip { display: none !important; }
}


/* 全站一个返回键：移除指引页重复的返回/帮助按钮 */
.guide-head .guide-back, .guide-head .guide-help { display: none !important; }
.guide-head-right { display: none !important; }

/* ==== stages-view.css ==== */
/* ============================================================
   星灯破晓 · 篇章「星路旅程」页面视觉（官方素材版）
   版式对照 assets/ink/ref-stages.png：
   - 顶部：官方「星路旅程」卷额 + 官方进度圆盘 + 动态进度条
   - 左侧：官方星路大地图长卷（含金色卷轴框/星座/群山）+ 五枚官方节点印章 + 金线星路
   - 右侧：水墨卷章牌（官方章节标签/场景图/描述框/信息栏/战情标签/首通印记/开始推演）
   所有官方素材均来自 assets/official/，素材顶部的裁剪标签统一用 .oc 裁剪容器隐藏。
   ============================================================ */

.page-stages {
  --st-gold: var(--gold, #e8c37a);
  --st-gold-bright: var(--gold-bright, #ffdf9a);
  --st-gold-deep: var(--gold-deep, #a87b2f);
  --st-jade: var(--jade, #4f8f84);
  --st-seal: var(--seal, #b33a2b);
  --st-paper: var(--paper, #f0e4c9);
  --st-text: var(--ink-text, #f2ead9);
  --st-muted: var(--ink-muted, #b9b09a);
  --st-serif: var(--font-ink, "STSong", "SimSun", "Songti SC", "Noto Serif SC", serif);
  --st-ui: var(--font-ui, "Microsoft YaHei", -apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif);
}

/* ---------- 页面骨架：横屏单屏 ---------- */
.shell.page-stages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding:
    max(3px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 26% 10%, rgba(70, 86, 74, .22), transparent 60%),
    radial-gradient(120% 100% at 82% 96%, rgba(120, 88, 40, .18), transparent 55%),
    linear-gradient(178deg, #0b1413 0%, #0a1211 55%, #070d0d 100%);
}
.page-stages .journey {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-stages .journey > .journey-top,
.page-stages .journey > .journey-body {
  position: relative;
  z-index: 1;
}
.journey-ambient { display: none; }
.page-stages .gi { width: 15px; height: 15px; display: inline-block; vertical-align: middle; flex: none; }
.page-stages .v-glyph { font-style: normal; display: inline-block; line-height: 1; }

/* ---------- 官方素材裁剪容器 ---------- */
.oc {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  border-radius: 1px;
}
.oc > img {
  position: absolute;
  left: var(--ml, 0%);
  top: var(--mt, 0%);
  width: var(--ocw, 100%);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.oc-in { position: absolute; inset: 0; display: block; }
.oc.is-band { aspect-ratio: auto; }
.oc.is-band > img {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% / (1 - var(--ct, 0)));
  object-fit: fill;
  transform: translateY(calc(var(--ct, 0) * -100%));
}

/* ---------- 顶部卷额行 ---------- */
.journey-top {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.journey-title-art { flex: none; display: block; height: 40px; }
.journey-title-art img {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.journey-progress {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding-right: 2px;
}
.journey-progress .prog-disk {
  flex: none;
  width: 46px;
  margin-right: 0;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}
.journey-progress .prog-disk::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12%;
  background: linear-gradient(90deg, rgba(11, 20, 19, 0), rgba(11, 20, 19, .92) 70%, #0b1413 100%);
  pointer-events: none;
}
.prog-bar {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(232px, 30vw);
  height: 36px;
  display: flex;
  align-items: center;
  margin-left: -6px;
  border-radius: 2px;
  background: linear-gradient(90deg, #14110b 0%, #100e09 70%, rgba(16, 14, 9, .94) 88%, rgba(16, 14, 9, 0) 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.prog-bar::after {
  content: '';
  position: absolute;
  left: 9%;
  right: 16%;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 195, 122, .38), transparent);
  pointer-events: none;
}
.prog-text {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 12px 0 14px;
  min-width: 0;
  font-family: var(--st-serif);
  color: var(--st-gold-bright);
  white-space: nowrap;
  overflow: hidden;
}
.prog-text b { font-size: 20px; line-height: 1; color: #ffe8b8; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.prog-text i { font-style: normal; font-size: 11px; color: #c9b489; margin-right: 6px; }
.prog-text em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .05em;
  color: #d9c8a4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-text em::before { content: "当前 · "; color: #a8946c; }

/* ---------- 星图 ---------- */
.journey-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.star-map {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  isolation: isolate;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5));
}
.map-canvas {
  position: absolute;
  inset: 0;
  background: url('assets/official/stages-map-bg.png') center bottom / 100% 103% no-repeat;
  border-radius: 3px;
}
.map-inner-glow {
  position: absolute;
  inset: 2% 2%;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 12% 72%, rgba(255, 214, 130, .12), transparent 60%),
    radial-gradient(50% 60% at 86% 40%, rgba(255, 214, 130, .08), transparent 60%),
    linear-gradient(180deg, rgba(30, 24, 12, .10), transparent 30%, transparent 82%, rgba(34, 26, 12, .16));
  mix-blend-mode: screen;
}
.map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route-line {
  fill: none;
  stroke: rgba(120, 92, 46, .42);
  stroke-width: .5;
  stroke-linecap: round;
  stroke-dasharray: 2.4 1.9;
}
.route-line.is-lit {
  stroke: url(#routeGold);
  stroke-width: .62;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 .5px rgba(255, 232, 168, .95));
}
.route-glow {
  fill: none;
  stroke: rgba(255, 214, 130, .26);
  stroke-width: 1.7;
  stroke-linecap: round;
  filter: blur(.9px);
}
.route-mark {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3cd 0%, #e8b95f 55%, rgba(180, 120, 40, 0) 72%);
  opacity: .45;
}
.route-mark.is-lit { opacity: .95; box-shadow: 0 0 6px rgba(255, 226, 158, .8); }

/* 官方节点印章（坐标对照参考图） */
.journey-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  width: 88px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -54%);
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease, filter .22s ease;
}
.journey-node .node-art { position: relative; display: block; }
.journey-node .node-art .oc { width: 100%; }
.journey-node .node-art .oc > img { transition: filter .25s ease; }
.journey-node .node-orbit {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 94px;
  height: 94px;
  margin: -47px 0 0 -47px;
  border-radius: 50%;
  border: 1px solid rgba(255, 222, 150, 0);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  pointer-events: none;
}
.journey-node .node-seal {
  position: absolute;
  right: 1%;
  top: 12%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 3px;
  transform: rotate(6deg);
  background: linear-gradient(180deg, #b8372a, #8c241b);
  border: 1px solid rgba(255, 224, 166, .7);
  color: #ffe9b6;
  font-family: var(--st-serif);
  font-size: 9px;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  font-style: normal;
}
/* 已点亮 / 可探索节点：盖住官方素材里烤死的锁形徽记 */
.journey-node .node-veil {
  position: absolute;
  right: 4%;
  top: 52%;
  z-index: 2;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 14, 7, .95) 0%, rgba(20, 14, 7, .86) 42%, rgba(20, 14, 7, 0) 100%);
  pointer-events: none;
}
.journey-node .node-label {
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -2px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 6px 3px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(52% 62% at 50% 66%, rgba(18, 13, 6, .94) 0%, rgba(18, 13, 6, .88) 56%, rgba(18, 13, 6, 0) 100%);
}
.journey-node .node-label strong {
  font-family: var(--st-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f4e5bd;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6);
  white-space: nowrap;
}
.journey-node .node-label small {
  font-size: 8.5px;
  letter-spacing: .06em;
  color: #d8b878;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.journey-node.is-completed .node-label small { color: #ffd98f; }
.journey-node.is-locked .node-label strong { color: #d9cdb3; }
.journey-node.is-locked .node-label small { color: #a99c85; }
.journey-node.is-frontier .node-art { animation: nodeBreathe 3.4s ease-in-out infinite; }
@keyframes nodeBreathe { 0%, 100% { filter: brightness(1.02) saturate(1.04); } 50% { filter: brightness(1.12) saturate(1.12); } }
.journey-node:hover { transform: translate(-50%, -56%) scale(1.03); }
.journey-node.is-selected { transform: translate(-50%, -57%) scale(1.06); z-index: 4; }
.journey-node.is-selected .node-orbit {
  border-color: rgba(255, 226, 158, .7);
  box-shadow: 0 0 14px rgba(255, 210, 120, .45), inset 0 0 18px rgba(255, 210, 120, .18);
}
.journey-node.is-selected .node-label strong { color: #fff1c9; }
.journey-node:focus-visible { outline: none; }
.journey-node:focus-visible .node-orbit { border-color: #ffe6a8; box-shadow: 0 0 16px rgba(255, 220, 140, .6); }
.journey-node.is-locked .node-art .oc > img { filter: grayscale(.48) brightness(.78) contrast(1.01); }
.journey-node.is-completed .node-art .oc > img { filter: sepia(.24) saturate(1.14) brightness(1.03); }
.journey-node.is-frontier .node-art .oc > img { filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 8px rgba(255, 208, 116, .55)); }

.map-legend {
  position: absolute;
  left: 10px;
  bottom: 5px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(246, 236, 213, .72), rgba(246, 236, 213, .38) 80%, rgba(246, 236, 213, 0));
  font-size: 9px;
  letter-spacing: .04em;
  color: #5c421f;
  pointer-events: none;
}
.map-legend span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.map-legend .lg { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.map-legend .lg.is-lit { background: #d8a03c; box-shadow: 0 0 4px rgba(216, 160, 60, .8); }
.map-legend .lg.is-open { background: #e6c27a; border: 1px solid #8c6428; }
.map-legend .lg.is-locked { background: #8d8271; }
.map-hint {
  position: absolute;
  right: 12px;
  bottom: 6px;
  z-index: 3;
  font-family: var(--st-serif);
  font-size: 9px;
  letter-spacing: .08em;
  color: #5c421f;
  text-shadow: 0 1px 0 rgba(255, 247, 224, .5);
  pointer-events: none;
}

/* ---------- 右侧卷章牌 ---------- */
.chapter-desk {
  position: relative;
  flex: 0 0 268px;
  width: 268px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 8px 5px;
  border: 1px solid rgba(232, 195, 122, .34);
  border-radius: 2px;
  background:
    radial-gradient(90% 60% at 80% 4%, rgba(232, 195, 122, .07), transparent 60%),
    radial-gradient(80% 70% at 10% 96%, rgba(74, 116, 108, .10), transparent 62%),
    linear-gradient(178deg, #151d1c 0%, #0d1514 55%, #0a1110 100%);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(255, 240, 200, .04),
    inset 0 0 44px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.chapter-desk::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(232, 195, 122, .14);
  border-radius: 1px;
  pointer-events: none;
}
.chapter-desk::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 240, 200, .03), transparent 18%, transparent 82%, rgba(255, 240, 200, .03));
  mix-blend-mode: screen;
}
.desk-nav {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
}
.desk-arrow {
  flex: none;
  width: 24px;
  height: 26px;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  opacity: .95;
  transition: transform .15s ease, filter .15s ease;
}
.desk-arrow .oc { width: 100%; }
.desk-arrow.is-next .oc { transform: scaleX(-1); }
.desk-arrow:hover:not(:disabled) { filter: drop-shadow(0 0 6px rgba(255, 220, 140, .55)); }
.desk-arrow:active:not(:disabled) { transform: scale(.93); }
.desk-arrow:disabled { opacity: .28; cursor: default; }
.desk-counter {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-left: 4px;
  font-family: var(--st-serif);
  color: #f0dfb8;
  white-space: nowrap;
}
.desk-counter em { font-style: normal; font-size: 10px; color: #a8977a; letter-spacing: .08em; }
.desk-counter .desk-index { font-size: 18px; line-height: 1; color: #ffe7b0; font-weight: 700; }
.desk-counter .desk-total { font-size: 10px; color: #9c8c70; }
.desk-state {
  margin-left: auto;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 21px;
  padding: 0 8px;
  border: 1px solid rgba(232, 195, 122, .55);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(46, 40, 24, .95), rgba(20, 17, 10, .95));
  color: var(--st-gold-bright);
  font-family: var(--st-serif);
  font-size: 10px;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .1), 0 2px 6px rgba(0, 0, 0, .4);
}
.desk-state.is-locked { color: #b6a98f; border-color: rgba(180, 166, 138, .4); }
.desk-state.is-completed { color: #9fd6c6; border-color: rgba(127, 196, 182, .55); background: linear-gradient(180deg, rgba(26, 48, 44, .95), rgba(12, 24, 22, .95)); }

.desk-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.desk-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease;
}
.desk-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.desk-hero { position: relative; flex: none; height: 62px; }
.desk-tagline { display: flex; align-items: center; gap: 7px; height: 36px; }
.desk-tag {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  height: 30px;
  padding: 0 8px;
  font-family: var(--st-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #ffe4a6;
  background:
    linear-gradient(180deg, rgba(255, 210, 150, .16), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #8f2a1e 0%, #7a2117 60%, #681a12 100%);
  border: 1px solid rgba(240, 200, 130, .55);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, .25), inset 0 0 10px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(60, 10, 4, .8);
  white-space: nowrap;
}
.desk-act {
  font-family: var(--st-serif);
  font-size: 11px;
  letter-spacing: .12em;
  color: #d9c9a5;
  border-bottom: 1px solid rgba(232, 195, 122, .28);
  padding-bottom: 2px;
  white-space: nowrap;
}
.desk-title {
  margin: 3px 0 0;
  max-width: 62%;
  font-family: var(--st-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .06em;
  color: #f9e9c2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7), 0 0 20px rgba(255, 214, 130, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desk-scene {
  position: absolute;
  right: 0;
  top: 1px;
  width: 42%;
  max-width: 114px;
  border-radius: 1px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.desk-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #0e1514 0%, rgba(14, 21, 20, .55) 22%, rgba(14, 21, 20, 0) 52%),
    linear-gradient(0deg, #0e1514 0%, rgba(14, 21, 20, .4) 26%, rgba(14, 21, 20, 0) 62%),
    linear-gradient(180deg, #0e1514 0%, rgba(14, 21, 20, 0) 30%);
  pointer-events: none;
}
.desk-desc {
  position: relative;
  flex: none;
  height: 27px;
  margin: 2px 0 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}
.desk-desc .oc.is-band { width: 100%; height: 27px; }
.desc-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(9, 11, 9, .9) 0%, rgba(11, 13, 10, .995) 5%, rgba(11, 13, 10, .995) 100%);
}
.desk-desc .desc-text {
  position: absolute;
  inset: 2px 10px 2px 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: 9.5px;
  line-height: 1.22;
  color: #d9cdb0;
  letter-spacing: .01em;
  overflow: hidden;
}
.desk-desc .desc-kicker {
  position: absolute;
  left: 9px;
  top: -7px;
  z-index: 3;
  font-family: var(--st-serif);
  font-size: 8.5px;
  letter-spacing: .16em;
  color: #a8946c;
  background: #0d1514;
  padding: 0 3px;
}
.desk-info { position: relative; flex: none; margin-top: 3px; height: 19px; }
.desk-info .oc.is-band { width: 100%; height: 19px; }
.info-dyn {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(9, 11, 9, .82) 0%, rgba(11, 13, 10, .995) 6%, rgba(11, 13, 10, .995) 100%);
  justify-content: space-between;
}
.info-cell { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; justify-content: center; }
.info-cell em { font-style: normal; font-size: 8.5px; color: #a3926f; letter-spacing: .04em; }
.info-cell b { font-size: 10px; color: #f1e1ba; font-weight: 500; }
.info-cell.is-quiet { opacity: .72; }
.info-cell.is-quiet b { font-size: 9px; color: #cdbf9e; }
.info-sep { flex: none; width: 1px; height: 9px; background: rgba(232, 195, 122, .3); }

.desk-tags { position: relative; flex: none; margin-top: 3px; height: 17px; }
.desk-tags .oc.is-band { width: 100%; height: 17px; }
.tags-dyn {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(9, 11, 9, .9) 0%, rgba(11, 13, 10, .995) 5%, rgba(11, 13, 10, .995) 100%);
}
.tags-dyn em { font-style: normal; font-family: var(--st-serif); font-size: 9px; color: #cbb98f; letter-spacing: .12em; margin-right: 1px; }
.battle-seal {
  display: inline-grid;
  place-items: center;
  height: 14px;
  padding: 0 4px;
  border-radius: 1px;
  font-style: normal;
  font-family: var(--st-serif);
  font-size: 8.5px;
  letter-spacing: .02em;
  color: #f4e7c8;
  border: 1px solid rgba(255, 238, 205, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.battle-seal.c1 { background: linear-gradient(180deg, #9c3a2b, #6f241a); }
.battle-seal.c2 { background: linear-gradient(180deg, #3f6f5a, #244a3b); }
.battle-seal.c3 { background: linear-gradient(180deg, #34557f, #1d3557); }
.battle-seal.c4 { background: linear-gradient(180deg, #8a6a2f, #5d4620); }

.desk-reward { position: relative; flex: none; margin-top: 3px; height: 18px; }
.desk-reward .oc.is-band { width: 100%; height: 18px; }
.mark-dyn {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  background: linear-gradient(90deg, rgba(9, 11, 9, .9) 0%, rgba(11, 13, 10, .995) 5%, rgba(11, 13, 10, .995) 100%);
}
.mark-dyn .mark-label { font-family: var(--st-serif); font-size: 9px; color: #cbb98f; letter-spacing: .06em; margin-right: 2px; }
.mark-chips { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.mat-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 5px 0 2px;
  border: 1px solid rgba(232, 195, 122, .45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(50, 40, 22, .95), rgba(24, 19, 10, .95));
  color: #f3e3bd;
  font-size: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08);
}
.mat-chip .gi { width: 12px; height: 12px; }
.mat-chip b { font-weight: 500; font-size: 9px; }
.reward-empty { font-size: 9px; color: #b3a488; }
.mark-done {
  margin-left: 5px;
  font-size: 8px;
  color: #9fd6c6;
  border: 1px solid rgba(127, 196, 182, .45);
  border-radius: 1px;
  padding: 0 3px;
  transform: rotate(-3deg);
}

.desk-watermark {
  position: absolute;
  right: 4px;
  bottom: 64px;
  z-index: 0;
  font-family: var(--st-serif);
  font-size: 108px;
  line-height: 1;
  color: rgba(232, 195, 122, .085);
  pointer-events: none;
  user-select: none;
}

.desk-actions { position: relative; z-index: 2; flex: none; margin-top: auto; padding-top: 3px; }
.desk-start {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .5));
  transition: transform .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.desk-start .oc.is-band { width: 100%; height: 50px; }
.desk-start:hover:not(:disabled) { filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .5)) brightness(1.05); }
.desk-start:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.desk-start:disabled { cursor: default; filter: grayscale(.68) brightness(.7) drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.start-label {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 24%;
  bottom: 20%;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: var(--st-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #2b1a08;
  text-shadow: 0 1px 0 rgba(255, 246, 216, .65);
  background: linear-gradient(180deg, #f7e7c4 0%, #efdcb2 52%, #e6cd9c 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -6px 12px rgba(168, 123, 47, .16);
  white-space: nowrap;
  overflow: hidden;
}
.desk-start.is-locked .start-label { color: #6d5a3d; font-size: 14px; letter-spacing: .18em; }
.desk-tip { display: block; margin-top: 1px; text-align: center; font-size: 8.5px; color: #9b8f74; letter-spacing: .04em; }

/* 入场动画 */
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-stages .journey-top { animation: stageIn .5s ease both; }
.page-stages .star-map { animation: stageIn .55s .05s ease both; }
.page-stages .chapter-desk { animation: stageIn .55s .1s ease both; }

/* ---------- 空状态 ---------- */
.journey.is-empty { display: flex; align-items: center; justify-content: center; }
.journey .journey-empty-panel {
  width: min(360px, 70%);
  padding: 22px 26px 24px;
  text-align: center;
  color: var(--st-text);
}
.journey .empty-emblem { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--st-gold); font-size: 20px; }
.journey .empty-kicker { margin: 8px 0 2px; font-size: 8.5px; letter-spacing: .3em; color: var(--st-gold-deep); }
.journey .journey-empty-panel h2 { margin: 2px 0 6px; font-family: var(--st-serif); font-size: 20px; color: var(--st-gold-bright); }
.journey .empty-copy { margin: 0 0 14px; font-size: 11px; line-height: 1.7; color: #c6bda9; }

/* ---------- 兜底尺寸 ---------- */
@media (max-width: 760px), (max-height: 380px) {
  .journey-top { height: 44px; }
  .journey-title-art { height: 34px; }
  .journey-progress .prog-disk { width: 40px; }
  .prog-bar { width: min(192px, 29vw); height: 32px; margin-left: -5px; }
  .prog-text { padding: 0 10px 0 12px; gap: 3px; }
  .prog-text b { font-size: 17px; }
  .prog-text i { font-size: 10px; margin-right: 4px; }
  .prog-text em { font-size: 9px; }
  .chapter-desk { flex-basis: 232px; width: 232px; padding: 5px 7px 6px; }
  .desk-title { font-size: 21px; }
  .desk-hero { height: 58px; }
  .desk-desc { height: 27px; }
  .desk-desc .oc.is-band { height: 27px; }
  .desk-desc .desc-text { font-size: 9px; }
  .desk-info { height: 20px; margin-top: 4px; }
  .desk-info .oc.is-band { height: 20px; }
  .info-cell b { font-size: 9px; }
  .desk-tags { height: 18px; margin-top: 4px; }
  .desk-tags .oc.is-band { height: 18px; }
  .desk-reward { height: 19px; margin-top: 4px; }
  .desk-reward .oc.is-band { height: 19px; }
  .desk-start .oc.is-band { height: 40px; }
  .start-label { font-size: 15px; }
  .desk-watermark { font-size: 84px; bottom: 52px; }
  .journey-node { width: 78px; }
  .journey-node .node-label strong { font-size: 10px; }
  .journey-node .node-label small { font-size: 8px; }
  .journey-node .node-orbit { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .map-legend { font-size: 8px; gap: 6px; padding: 1px 6px; }
  .map-hint { font-size: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-stages .journey-top, .page-stages .star-map, .page-stages .chapter-desk,
  .journey-node.is-frontier .node-art { animation: none; }
  .journey-node, .desk-panel, .desk-start { transition: none; }
}


/* 再次推演/开始推演：干净金按钮，文字在按钮上，不与底图文字重叠 */
.desk-start {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 16px;
  border: 1px solid #ffe0a0 !important; border-radius: 3px !important;
  background: linear-gradient(180deg,#f6d99a 0%,#e6bd6d 45%,#b98a3e 100%) !important;
  box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 #fff2cf !important;
  cursor: pointer; filter: none !important; text-decoration: none;
}
.desk-start .oc.is-band, .desk-start .start-shade, .desk-start .oc { display: none !important; }
.desk-start .start-label {
  position: static !important; z-index: 2; font-family: "STKaiti","KaiTi","STSong","SimSun",serif !important;
  font-size: clamp(16px, 3.6vh, 21px) !important; font-weight: 800; letter-spacing: .14em; color: #2a1908 !important;
  text-shadow: 0 1px 0 rgba(255,246,218,.55) !important;
}
.desk-start .start-arrow { position: static !important; font-size: 18px; color: #2a1908; z-index: 2; }
.desk-start:hover:not(:disabled) { filter: brightness(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.45)) !important; }
.desk-start:active:not(:disabled) { transform: translateY(2px) !important; }
.desk-start.is-locked { filter: grayscale(.6) brightness(.8) !important; }
.desk-start.is-locked .start-label { color: #5c4a2e !important; }


/* 再次推演/开始推演：干净金按钮，文字在按钮上，不与底图文字重叠 */
.desk-start {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 16px;
  border: 1px solid #ffe0a0 !important; border-radius: 3px !important;
  background: linear-gradient(180deg,#f6d99a 0%,#e6bd6d 45%,#b98a3e 100%) !important;
  box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 #fff2cf !important;
  cursor: pointer; filter: none !important; text-decoration: none;
}
.desk-start .oc.is-band, .desk-start .start-shade, .desk-start .oc { display: none !important; }
.desk-start .start-label {
  position: static !important; z-index: 2; font-family: "STKaiti","KaiTi","STSong","SimSun",serif !important;
  font-size: clamp(16px, 3.6vh, 21px) !important; font-weight: 800; letter-spacing: .14em; color: #2a1908 !important;
  text-shadow: 0 1px 0 rgba(255,246,218,.55) !important;
}
.desk-start .start-arrow { position: static !important; font-size: 18px; color: #2a1908; z-index: 2; }
.desk-start:hover:not(:disabled) { filter: brightness(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.45)) !important; }
.desk-start:active:not(:disabled) { transform: translateY(2px) !important; }
.desk-start.is-locked { filter: grayscale(.6) brightness(.8) !important; }
.desk-start.is-locked .start-label { color: #5c4a2e !important; }


/* 再次推演/开始推演：干净金按钮，文字在按钮上，不与底图文字重叠 */
.desk-start {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 0 16px;
  border: 1px solid #ffe0a0 !important; border-radius: 3px !important;
  background: linear-gradient(180deg,#f6d99a 0%,#e6bd6d 45%,#b98a3e 100%) !important;
  box-shadow: 0 3px 0 #6f4c1c, 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 #fff2cf !important;
  cursor: pointer; filter: none !important; text-decoration: none;
}
.desk-start .oc.is-band, .desk-start .start-shade, .desk-start .oc { display: none !important; }
.desk-start .start-label {
  position: static !important; z-index: 2; font-family: "STKaiti","KaiTi","STSong","SimSun",serif !important;
  font-size: clamp(16px, 3.6vh, 21px) !important; font-weight: 800; letter-spacing: .14em; color: #2a1908 !important;
  text-shadow: 0 1px 0 rgba(255,246,218,.55) !important;
}
.desk-start .start-arrow { position: static !important; font-size: 18px; color: #2a1908; z-index: 2; }
.desk-start:hover:not(:disabled) { filter: brightness(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.45)) !important; }
.desk-start:active:not(:disabled) { transform: translateY(2px) !important; }
.desk-start.is-locked { filter: grayscale(.6) brightness(.8) !important; }
.desk-start.is-locked .start-label { color: #5c4a2e !important; }


/* 开始/再次推演：文字与箭头分离，避免手机上折字或重叠 */
.desk-start { overflow: hidden !important; justify-content: center !important; gap: 6px !important; padding: 0 12px !important; }
.desk-start .start-label {
  flex: 0 1 auto; min-width: 0; white-space: nowrap !important;
  overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(14px, 3.2vh, 19px) !important; letter-spacing: .08em !important;
  line-height: 1.2 !important;
}
.desk-start .start-arrow { flex: none !important; margin-left: 2px; font-size: 16px !important; line-height: 1; }
.desk-start .oc, .desk-start .oc.is-band, .desk-start .start-shade { display: none !important; }
@media (orientation: landscape) and (max-width: 720px) {
  .desk-start { min-height: 36px !important; }
  .desk-start .start-label { font-size: 14px !important; letter-spacing: .04em !important; }
  .desk-start .start-arrow { font-size: 14px !important; }
}

/* 四种玩法共用卷页，主线每页四章。 */
.journey-expanded [hidden] { display: none !important; }
.journey-expanded .journey-top { height: 48px; gap: 8px; }
.journey-modes { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.journey-modes button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 0 12px; border: 1px solid rgba(218, 184, 121, .25); border-radius: 3px;
  background: linear-gradient(180deg, #18221f, #0c1514); color: #beae90; white-space: nowrap;
  font: 12px var(--st-serif); letter-spacing: .04em; cursor: pointer;
}
.journey-modes button i { font-style: normal; font-size: 15px; color: #d7b575; }
.journey-modes button[aria-selected="true"] {
  border-color: #d1aa64; color: #ffe9b6; background: linear-gradient(180deg, #4a3a20, #201e13);
  box-shadow: inset 0 -2px 0 #d8ad65, 0 2px 10px #0005;
}
.journey-modes button:focus-visible, .journey-pages button:focus-visible, .activity-start:focus-visible { outline: 2px solid #ffe8b3; outline-offset: 2px; }
.journey-mode-panel { position: relative; z-index: 1; display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.journey-mode-panel > .journey-body { width: 100%; }
.journey-expanded .journey-pages {
  position: absolute; z-index: 5; left: 16px; right: 16px; top: 10px;
  display: flex; justify-content: center; gap: 8px;
}
.journey-pages button {
  padding: 5px 15px; border: 1px solid #90703e; border-radius: 2px; background: #1a1b15ed;
  font: 11px var(--st-serif); color: #c3ad83; cursor: pointer;
}
.journey-pages button[aria-pressed="true"] { background: #604723; color: #ffedbe; border-color: #e5c386; box-shadow: inset 0 0 12px #e6b96025; }
.journey-expanded .battle-seal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 12px; }
.journey-expanded .battle-seal.c1 { flex: 1; }
.journey-expanded .battle-seal.c2 { flex: none; }

.activity-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); width: 100%; min-height: 0;
  overflow: auto; border: 1px solid #b592515e; border-radius: 4px; background: #101b18;
  box-shadow: inset 0 0 0 3px #e6be6f08, 0 8px 30px #0004;
}
.activity-illustration {
  position: relative; min-height: 210px; isolation: isolate; overflow: hidden;
  background: linear-gradient(0deg, #0d1919 0%, #11222120 76%), url('assets/ink/bg-observatory-night.webp') center / cover;
}
.activity-illustration::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 50%, #101b18); }
.activity-stamp {
  position: absolute; right: 10%; top: 12%; width: 58px; height: 58px; display: grid; place-items: center;
  border: 1px solid #f3d49590; border-radius: 50%; color: #ffdfa1; font: 34px var(--st-serif);
  box-shadow: 0 0 0 6px #ffe7a70c, 0 0 34px #e2b75c24; text-shadow: 0 0 18px #ffbc52;
}
.activity-art-caption { position: absolute; bottom: 10%; left: 8%; right: 5%; display: flex; flex-direction: column; gap: 8px; }
.activity-art-caption small { color: #d9b779; font-size: 9px; letter-spacing: .26em; }
.activity-art-caption strong { color: #fae7c1; font: 26px var(--st-serif); text-shadow: 0 2px 12px #000; }
.activity-art-caption > span { color: #b6c2b4; font-size: 11px; }
.activity-copy { min-width: 0; display: flex; flex-direction: column; padding: clamp(14px, 3vh, 30px) clamp(18px, 3vw, 38px); }
.activity-eyebrow { display: flex; align-items: center; gap: 12px; color: #d4b376; font-size: 10px; letter-spacing: .14em; }
.activity-eyebrow > span { border: 1px solid #80bca54d; color: #a3d2bb; padding: 3px 6px; font-size: 9px; letter-spacing: 0; }
.activity-copy h2 { margin: 10px 0 7px; font: 27px var(--st-serif); letter-spacing: .15em; color: #ffe4ad; }
.activity-copy > p { color: #b4c0b2; font-size: 12px; line-height: 1.7; margin: 0 0 9px; }
.tutorial-lessons { display: flex; list-style: none; gap: 8px; padding: 7px 0 14px; margin: 0; }
.tutorial-lessons li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid #9f824948; padding-top: 8px; }
.tutorial-lessons b { color: #9b8155; font: 17px Georgia, serif; }
.tutorial-lessons span { color: #e7d9bb; font-size: 12px; }
.tutorial-lessons small { display: block; color: #93a596; font-size: 10px; line-height: 1.5; margin-top: 4px; }
.activity-reward { display: flex; flex-direction: column; gap: 5px; padding: 9px 0 12px; margin-top: auto; }
.activity-reward small { color: #8da190; font-size: 10px; }
.activity-reward strong { color: #dfc488; font-size: 11px; font-weight: 500; }
.activity-start {
  display: flex; align-items: center; justify-content: space-between; flex: none; width: 100%; min-height: 38px;
  padding: 7px 16px; border: 1px solid #e6c482; border-radius: 2px; cursor: pointer;
  font: 15px var(--st-serif); letter-spacing: .08em; color: #2b210f; background: linear-gradient(180deg, #ebd49e, #b68b46);
  box-shadow: 0 3px 0 #67502b, inset 0 1px 0 #fff0c7;
}
.activity-start:hover:not(:disabled) { filter: brightness(1.12); }
.activity-start:active:not(:disabled) { transform: translateY(1px); }
.activity-start:disabled { color: #9f9f8f; background: #293129; border-color: #68735e; box-shadow: none; cursor: default; }
.endless-feature .activity-illustration { background-image: linear-gradient(0deg, #11191c 0%, #19213310 80%), url('assets/ink/bg-starry-ink.webp'); }
.endless-feature .activity-stamp { width: 90px; height: 90px; font-size: 62px; top: 12%; right: 14%; }
.endless-record { display: flex; align-items: baseline; gap: 10px; margin: 1px 0 8px; color: #acb5b3; font-size: 11px; }
.endless-record strong { font: 38px Georgia, serif; color: #efcb83; }
.endless-rules { padding: 0 0 10px 15px; margin: 0; color: #acb9ad; font-size: 11px; line-height: 1.9; }
.endless-feature .activity-start { margin-top: auto; }

.daily-expeditions { display: flex; flex-direction: column; width: 100%; min-height: 0; overflow: auto; }
.daily-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 12px 10px; flex: none; }
.daily-heading small { font-size: 8px; color: #a18c61; letter-spacing: .2em; }
.daily-heading h2 { margin: 3px 0 0; font: 22px var(--st-serif); color: #f0d59b; }
.daily-heading p { margin: 0; color: #d4c39a; font-size: 11px; text-align: right; line-height: 1.7; }
.daily-heading p span { color: #8c9d90; font-size: 10px; }
.daily-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 1; min-height: 220px; }
.page-stages .activity-card {
  --material-color: #e8c475;
  position: relative; display: flex; flex-direction: column; align-items: stretch; margin: 0; min-width: 0;
  padding: 14px 18px; border: 1px solid #b092565f; border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 22%, #cda1561c, transparent 58%), linear-gradient(150deg, #1d2921, #0c1412);
}
.page-stages .activity-card.is-ink { --material-color: #98d6cc; background: radial-gradient(ellipse at 50% 22%, #5eaea51b, transparent 58%), linear-gradient(150deg, #182b2b, #0c1416); }
.page-stages .activity-card.is-chart { --material-color: #b9b0ee; background: radial-gradient(ellipse at 50% 22%, #9d89c924, transparent 58%), linear-gradient(150deg, #272635, #101318); }
.daily-card-top { display: flex; justify-content: space-between; gap: 4px; color: #9aab99; font-size: 9px; }
.daily-card-top b { color: var(--material-color); font-weight: 500; }
.page-stages .daily-material-art { display: grid; place-items: center; align-self: center; width: 66px; height: 66px; margin: 12px auto 8px; border: 1px solid #cfb6793f; border-radius: 50%; box-shadow: 0 0 0 5px #ceb57b08; color: var(--material-color); }
.page-stages .daily-material-art .gi { width: 42px; height: 42px; filter: drop-shadow(0 0 12px #e4c26830); }
.page-stages .daily-material-art .v-glyph { font-size: 36px; }
.page-stages .activity-card h3 { margin: 2px 0 7px; color: #e5dec5; font: 21px var(--st-serif); text-align: center; }
.page-stages .activity-card > p { color: #9eaf9f; font-size: 11px; line-height: 1.5; text-align: center; margin: 0 0 5px; }
.page-stages .activity-card .activity-reward { align-items: center; border-top: 1px solid #baa67720; padding-top: 8px; }
.page-stages .activity-card .activity-reward strong { color: var(--material-color); }

@media (max-height: 460px) {
  .journey-expanded .journey-top { height: 38px; }
  .journey-modes button { min-height: 32px; padding: 0 9px; font-size: 11px; }
  .journey-expanded .prog-disk { width: 36px; }
  .journey-expanded .prog-bar { height: 30px; }
  .activity-copy { padding: 12px 22px; }
  .activity-copy h2 { margin: 6px 0; font-size: 24px; }
  .activity-copy > p { font-size: 11px; margin-bottom: 4px; line-height: 1.5; }
  .tutorial-lessons { padding: 2px 0 4px; }
  .tutorial-lessons li { padding-top: 5px; gap: 2px; }
  .tutorial-lessons small { font-size: 9px; margin-top: 2px; }
  .activity-reward { padding: 7px 0 8px; gap: 3px; }
  .activity-art-caption strong { font-size: 22px; }
  .endless-record { margin: 0 0 4px; }
  .endless-record strong { font-size: 31px; }
  .endless-rules { font-size: 10px; line-height: 1.6; padding-bottom: 7px; }
  .daily-heading { padding-bottom: 7px; }
  .daily-heading h2 { font-size: 19px; }
  .daily-heading small { display: none; }
  .daily-heading p { font-size: 10px; line-height: 1.4; }
  .daily-cards { gap: 9px; min-height: 210px; }
  .page-stages .activity-card { padding: 10px 13px; }
  .page-stages .daily-material-art { width: 45px; height: 45px; margin: 10px auto 6px; }
  .page-stages .daily-material-art .gi { width: 30px; height: 30px; }
  .page-stages .activity-card h3 { font-size: 18px; margin-bottom: 5px; }
  .page-stages .activity-card > p { font-size: 10px; }
  .page-stages .activity-card .activity-reward { padding: 6px 0 8px; }
  .activity-start { min-height: 34px; font-size: 14px; }
}
@media (max-width: 760px) {
  .journey-expanded .journey-top { gap: 5px; }
  .journey-modes { gap: 3px; }
  .journey-modes button { padding: 0 8px; gap: 3px; font-size: 10px; }
  .journey-modes button i { font-size: 12px; }
  .journey-expanded .prog-bar { width: 140px; }
  .journey-expanded .prog-text em { font-size: 8px; }
  .journey-expanded .journey-pages { top: 8px; gap: 5px; }
  .journey-pages button { font-size: 10px; padding: 4px 12px; }
  .activity-copy { padding: 12px 16px; }
  .activity-art-caption strong { font-size: 20px; }
  .activity-art-caption > span { font-size: 10px; }
  .tutorial-lessons { gap: 6px; }
  .tutorial-lessons span { font-size: 11px; }
  .activity-eyebrow { gap: 8px; }
  .daily-card-top { font-size: 8px; }
}
@media (orientation: portrait) {
  .journey-expanded .journey-top { height: auto; flex-direction: column-reverse; align-items: stretch; }
  .journey-expanded .journey-progress { display: none; }
  .journey-modes { justify-content: space-between; padding: 6px 0; }
  .journey-modes button { flex: 1; min-height: 38px; padding: 0 5px; }
  .journey-mode-panel { overflow-y: auto; }
  .journey-expanded .journey-body { flex-direction: column; overflow-y: auto; }
  .journey-expanded .star-map { flex: none; min-height: 270px; }
  .journey-expanded .chapter-desk { flex: none; width: 100%; height: 270px; }
  .activity-feature { grid-template-columns: 1fr; overflow-y: auto; }
  .activity-illustration { min-height: 210px; }
  .activity-copy { padding: 18px; }
  .daily-heading { padding-top: 8px; }
  .daily-heading p { max-width: 60%; }
  .daily-cards { grid-template-columns: 1fr; }
  .page-stages .activity-card { min-height: 245px; }
}

/* ==== online.css ==== */
/* 星灯破晓 · 在线账号 / 无尽排行榜 UI */
.ink-account-slot { display: inline-flex; align-items: center; }
.ink-account-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(232,195,122,.32);
  background: rgba(10,22,24,.55); color: #f2e8d0;
  font-family: var(--font-ink, "STSong", serif); font-size: 11px; letter-spacing: .04em;
}
.ink-account-chip:hover { border-color: rgba(255,223,154,.7); background: rgba(20,36,38,.75); }
.ink-account-chip .iac-dot {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#c79a55,#8a5f2b); color: #100d08; font-size: 9px; font-weight: 700;
}
.ink-account-chip .iac-name { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .ink-account-chip .iac-name { display: none; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .ink-account-chip { height: 24px; font-size: 10px; padding: 0 7px; }
  .ink-account-chip .iac-name { max-width: 58px; }
}

.online-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.online-overlay[hidden] { display: none; }
.online-scrim { position: absolute; inset: 0; background: rgba(2,8,10,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.online-panel {
  position: relative; width: min(92vw, 540px); max-height: 88vh; display: flex; flex-direction: column;
  border: 1px solid rgba(232,195,122,.45); border-radius: 7px; overflow: hidden;
  background: linear-gradient(160deg, rgba(16,30,32,.98), rgba(7,14,16,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,240,200,.1);
  color: #f2ead9; font-family: var(--font-ink, "STSong", "Microsoft YaHei", serif);
}
.online-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(232,195,122,.22); background: rgba(0,0,0,.18); }
.online-panel-head .online-eyebrow { display: block; font-family: "Microsoft YaHei", sans-serif; font-size: 8px; letter-spacing: .22em; color: rgba(232,195,122,.7); }
.online-panel-head strong { font-size: 17px; letter-spacing: .1em; color: #ffe6b0; }
.online-close { width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(232,195,122,.28); background: rgba(0,0,0,.25); color: #e8dcc2; cursor: pointer; font-size: 13px; }
.online-close:hover { border-color: rgba(255,223,154,.65); }
.online-panel-body { padding: 12px 14px 14px; overflow-y: auto; }
.online-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.online-tab { flex: 1 1 0; height: 30px; border-radius: 4px; border: 1px solid rgba(232,195,122,.25); background: rgba(0,0,0,.22); color: rgba(242,232,208,.78); font-family: inherit; font-size: 12px; cursor: pointer; }
.online-tab.is-on { border-color: rgba(255,216,140,.75); background: linear-gradient(180deg, rgba(120,89,42,.5), rgba(62,44,22,.7)); color: #ffe6b0; }
.online-label { display: block; margin: 7px 0; font-size: 11px; color: rgba(232,216,182,.8); }
.online-input {
  display: block; width: 100%; margin-top: 4px; height: 32px; padding: 0 10px; border-radius: 4px;
  border: 1px solid rgba(232,195,122,.3); background: rgba(0,0,0,.28); color: #f6eddc;
  font-family: inherit; font-size: 13px; outline: none;
}
.online-input:focus { border-color: rgba(255,223,154,.8); box-shadow: 0 0 0 2px rgba(255,214,140,.12); }
.online-row { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.online-btn {
  flex: 1 1 0; min-height: 32px; padding: 0 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(232,195,122,.38); background: linear-gradient(180deg, rgba(50,42,28,.8), rgba(24,20,14,.9));
  color: #ffe6b0; font-family: inherit; font-size: 12.5px; letter-spacing: .05em;
}
.online-btn:hover { border-color: rgba(255,223,154,.8); background: linear-gradient(180deg, rgba(78,62,36,.9), rgba(36,29,18,.95)); }
.online-btn.primary { background: linear-gradient(180deg, #d8b268, #a67a35); color: #1b1207; border-color: rgba(255,240,200,.6); font-weight: 700; }
.online-btn.primary:hover { filter: brightness(1.06); }
.online-btn.danger { color: #f2c2b6; border-color: rgba(200,90,70,.45); }
.online-btn.wide { width: 100%; flex: none; margin-top: 8px; }
.online-hint { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: rgba(226,213,186,.66); }
.online-note { margin-top: 12px; border-top: 1px dashed rgba(232,195,122,.2); padding-top: 8px; }
.online-account-card { display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; }
.online-avatar { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 22px; color: #ffe6b0; background: radial-gradient(circle at 35% 30%, #4d6a62, #1a2b2c); border: 1px solid rgba(232,195,122,.4); }
.online-account-info strong { display: block; font-size: 18px; color: #ffe6b0; letter-spacing: .08em; }
.online-account-info small { display: block; margin-top: 3px; font-size: 10px; color: rgba(226,213,186,.65); }
.online-code-row { align-items: stretch; }
.online-code-row .online-input { flex: 1 1 auto; width: auto; margin: 0; }
.online-code-row .online-btn { flex: 0 0 auto; min-width: 88px; }
.online-table-wrap { max-height: 46vh; overflow-y: auto; border: 1px solid rgba(232,195,122,.2); border-radius: 5px; margin: 6px 0; }
.online-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.online-table th { position: sticky; top: 0; background: #122428; color: #d9c49a; font-weight: 400; font-size: 10.5px; padding: 7px 8px; text-align: left; }
.online-table td { padding: 7px 8px; border-top: 1px solid rgba(232,195,122,.1); color: #eee5d3; }
.online-table tr.is-mine td { background: rgba(216,178,104,.14); color: #ffe6b0; }
.online-table td:first-child { color: #ffd98a; font-weight: 700; }
.online-mine { margin: 6px 0; padding: 7px 9px; font-size: 11.5px; border: 1px solid rgba(232,195,122,.3); border-radius: 4px; background: rgba(255,214,140,.06); }
.online-empty { text-align: center; color: rgba(226,213,186,.55); padding: 18px 8px; }
.online-inline-link { background: none; border: 0; color: #ffd98a; text-decoration: underline; cursor: pointer; font: inherit; }
.online-loading { padding: 26px 8px; text-align: center; color: rgba(226,213,186,.65); font-size: 12px; }
#onlineToast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px); z-index: 9600;
  padding: 8px 16px; border-radius: 4px; border: 1px solid rgba(232,195,122,.4);
  background: rgba(8,18,20,.94); color: #ffe6b0; font: 12px/1.4 "Microsoft YaHei", sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; max-width: 80vw; text-align: center;
}
#onlineToast.show { opacity: 1; transform: translate(-50%, 0); }
@media (orientation: landscape) and (max-height: 460px) {
  .online-panel { width: min(88vw, 560px); max-height: 92vh; }
  .online-panel-head { padding: 7px 11px; }
  .online-panel-head strong { font-size: 14px; }
  .online-panel-body { padding: 9px 11px 11px; }
  .online-tab { height: 26px; font-size: 11px; }
  .online-input { height: 27px; font-size: 12px; }
  .online-btn { min-height: 27px; font-size: 11.5px; }
  .online-table-wrap { max-height: 40vh; }
  .online-avatar { width: 42px; height: 42px; font-size: 18px; }
  .online-account-info strong { font-size: 15px; }
}
.endless-rank-link {
  margin-top: 8px; padding: 5px 12px; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(232,195,122,.4); background: rgba(10,22,24,.6); color: #ffe6b0;
  font-family: var(--font-ink, "STSong", serif); font-size: 11px; letter-spacing: .06em;
}
.endless-rank-link:hover { border-color: rgba(255,223,154,.8); }


/* 登录第一页：全屏门 */
html.online-boot #app, body.online-gate #app { visibility: hidden !important; }
.online-overlay.is-gate .online-scrim { pointer-events: none; }
.online-overlay.is-gate .online-panel { width: min(92vw, 500px); border-color: rgba(232,195,122,.55); }
.online-overlay.is-gate .online-close { display: none; }
.online-gate-brand { text-align: center; padding: 2px 0 10px; }
.online-gate-title { display: block; font-size: 30px; letter-spacing: .28em; color: #ffe6b0; font-family: "STSong", "SimSun", serif; text-shadow: 0 2px 18px rgba(255,200,110,.25); }
.online-gate-brand small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em; color: rgba(232,216,182,.6); }