/* ========== 基础 ========== */
* { margin:0; padding:0; box-sizing:border-box; }
body{ font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:#000; color:#ffeecb; overflow:hidden; user-select:none; }
body.hide-cursor, body.hide-cursor *{ cursor:none !important; }
button{ font-family:inherit; }
:root{
  --gold1: #fff2c8;
  --gold2: #ffd24a;
  --gold3: #d4af37;
  --gold4: #b8860b;
  --gold5: #7a4a12;
  --redGem: #ff2a2a;
  --darkBg: #0d0604;
  --panelBg: rgba(14,6,4,0.92);
  --borderGold: #8a5a1a;
  --img-emblem: url("https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=ornate%20golden%20dragon%20wings%20emblem%2C%20symmetrical%20fantasy%20game%20badge%2C%20polished%20gold%20metal%20with%20glowing%20red%20gemstone%20in%20center%2C%20intricate%20baroque%20engravings%2C%20on%20pure%20black%20background%2C%20centered%2C%20game%20logo%20ornament%2C%20no%20text%2C%20no%20watermark&image_size=square_hd");
}

/* ========== 背景 ========== */
.bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none; }
.bg-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:0; pointer-events:none; }
.bg-overlay.light{ background:rgba(0,0,0,.15); }
.bg-overlay.dim{ background:rgba(0,0,0,.5); }
.bg-overlay.heavy{ background:rgba(0,0,0,.62); }
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }

/* ========== 通用屏幕 ========== */
.screen{ position:fixed; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; }
.screen.active{ display:flex; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@keyframes glowPulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} }
@keyframes btnShine{ 0%{ left:-80%; } 100%{ left:130%; } }

/* ========== 通用面板 ========== */
.panel{ position:relative; background:var(--panelBg); border:2px solid #6a3e12; border-radius:8px; box-shadow: 0 0 0 1px rgba(255,210,74,.25), 0 20px 60px rgba(0,0,0,.7), inset 0 0 60px rgba(122,74,18,.15); }
.panel::before{ content:""; position:absolute; inset:4px; border:1px solid rgba(255,210,74,.18); border-radius:5px; pointer-events:none; }
.panel-title{ display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 0; font-size:22px; letter-spacing:6px; color:#ffd24a; text-shadow:0 2px 6px rgba(0,0,0,.8), 0 0 18px rgba(255,190,60,.4); border-bottom:1px solid rgba(184,134,11,.35); background:linear-gradient(180deg, rgba(122,74,18,.35), transparent); }
.panel-title em{ font-style:normal; }
.wing{ display:inline-block; width:40px; height:14px; background:linear-gradient(90deg, transparent, var(--gold3), transparent); border-radius:50%; filter:drop-shadow(0 0 4px rgba(255,210,74,.6)); }
.wing.left{ transform:scaleX(-1) rotate(-10deg); }
.wing.right{ transform:rotate(-10deg); }
.gem{ position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ff8080, #cc0000 60%, #7a0000); box-shadow:0 0 8px rgba(255,42,42,.8), inset 0 0 3px rgba(255,255,255,.5); z-index:2; }
.gem.tl{ top:-6px; left:-6px; } .gem.tr{ top:-6px; right:-6px; }
.gem.bl{ bottom:-6px; left:-6px; } .gem.br{ bottom:-6px; right:-6px; }

/* ========== 金色按钮 ========== */
.btn-gold{ position:relative; overflow:hidden; border:none; cursor:pointer; border-radius:5px; color:#3a2405; font-weight:bold; letter-spacing:4px; background: linear-gradient(180deg, #fff2c8 0%, #ffd24a 30%, #e6a814 60%, #b8860b 100%); box-shadow: 0 0 0 1px #7a4a12, inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(122,74,18,.5), 0 6px 18px rgba(0,0,0,.5); text-shadow:0 1px 0 rgba(255,255,255,.5); transition:.2s; animation:glowPulse 2.6s ease-in-out infinite; }
.btn-gold:hover{ filter:brightness(1.12); }
.btn-gold:active{ transform:translateY(1px); }
.btn-glow{ position:absolute; top:0; left:-80%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); animation:btnShine 2.4s linear infinite; pointer-events:none; }

/* ========== 第一屏：开屏 ========== */
.open-time{ position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:4; font-size:24px; letter-spacing:3px; color:#ff4d4f; text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 20px rgba(255,77,79,.55); white-space:nowrap; }
.start-wrap{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; animation:fadeUp .8s ease-out both; }
.emblem{ width:230px; height:230px; object-fit:contain; filter:drop-shadow(0 0 30px rgba(255,190,60,.35)); animation:glowPulse 3s ease-in-out infinite; }
.game-name{ font-size:72px; letter-spacing:14px; margin-top:6px; background:linear-gradient(180deg, #fff8dc 0%, #ffd24a 35%, #b8860b 75%, #8a5a1a 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 4px 10px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(255,190,60,.35)); font-family:"STKaiti","KaiTi","Microsoft YaHei",serif; font-weight:bold; }
.game-sub{ margin-top:8px; font-size:20px; letter-spacing:8px; color:rgba(255,236,203,.9); text-shadow:0 2px 6px rgba(0,0,0,.8); }
.divider{ display:flex; align-items:center; gap:10px; margin:16px 0; }
.divider span{ display:block; width:180px; height:1px; background:linear-gradient(90deg, transparent, #d4af37, transparent); }
.divider .diamond{ width:8px; height:8px; background:#ffd24a; transform:rotate(45deg); box-shadow:0 0 8px rgba(255,210,74,.8); }
.slogan{ font-size:22px; letter-spacing:6px; color:#ffd24a; text-shadow:0 2px 8px rgba(0,0,0,.8); margin-bottom:30px; }
.btn-start{ padding:14px 58px; font-size:22px; letter-spacing:6px; }
.start-tip{ margin-top:34px; font-size:13px; letter-spacing:3px; color:rgba(255,236,203,.45); text-shadow:0 1px 3px rgba(0,0,0,.8); }

/* ========== 第二屏：登录 ========== */
.login-panel{ width:430px; max-width:92vw; z-index:4; animation:fadeUp .5s ease-out both; }
.login-body{ padding:30px 36px 26px; }
.input-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.input-row label{ width:56px; font-size:16px; color:#ffd24a; letter-spacing:2px; text-align:justify; text-align-last:justify; }
.input-row input{ flex:1; height:40px; background:rgba(0,0,0,.5); border:1px solid #6a3e12; border-radius:4px; color:#ffeecb; padding:0 12px; font-size:15px; outline:none; transition:.2s; }
.input-row input:focus{ border-color:#ffd24a; box-shadow:0 0 10px rgba(255,210,74,.25); }
.login-err{ min-height:20px; color:#ff6b6b; font-size:13px; margin-bottom:8px; text-align:center; }
.btn-login{ width:100%; padding:12px 0; font-size:20px; letter-spacing:8px; }
.login-links{ margin-top:16px; text-align:center; font-size:13px; }
.login-links a{ color:rgba(255,210,74,.8); text-decoration:none; }
.login-links a:hover{ color:#ffd24a; text-decoration:underline; }
.login-links .sep{ margin:0 10px; color:rgba(255,236,203,.3); }

/* ========== 第三屏：主界面 ========== */
.top-right-btns{ position:absolute; top:18px; right:20px; z-index:5; display:flex; flex-direction:column; gap:10px; }
.tr-btn{ min-width:110px; padding:9px 18px; font-size:15px; letter-spacing:3px; border-radius:4px; cursor:pointer; border:1px solid #8a5a1a; color:#ffd24a; background:linear-gradient(180deg, rgba(60,36,5,.92), rgba(30,15,2,.92)); box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,74,.2); transition:.2s; }
.tr-btn:hover{ border-color:#ffd24a; box-shadow:0 4px 14px rgba(0,0,0,.6), 0 0 12px rgba(255,210,74,.3); }
.tr-btn.btn-announce{ background:linear-gradient(180deg, #a8321e, #7a1a08); color:#ffe9c8; border-color:#d4693a; }
.tr-btn.btn-announce:hover{ filter:brightness(1.15); }

.side-icons{ position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; gap:12px; }
.side-icon{ width:52px; height:52px; border-radius:50%; border:2px solid #8a5a1a; background:rgba(14,6,4,.85); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,210,74,.2); }
.side-icon:hover{ transform:scale(1.1); border-color:#ffd24a; box-shadow:0 4px 16px rgba(0,0,0,.6), 0 0 14px rgba(255,210,74,.35); }

/* 可拖动悬浮球 */
.float-ball{ position:fixed; right:24px; bottom:120px; width:76px; height:76px; z-index:8; cursor:grab; border-radius:50%; }
.float-ball:active{ cursor:grabbing; }
.float-ball-img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 20px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(255,190,60,.5)); animation:glowPulse 2.6s ease-in-out infinite; user-select:none; pointer-events:none; }

.main-center{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; gap:26px; animation:fadeUp .6s ease-out both; margin-top:9vh; }
.server-capsule{ display:flex; align-items:center; gap:12px; padding:10px 12px 10px 22px; background:rgba(10,5,3,.75); border:1px solid #8a5a1a; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,74,.15); }
.capsule-dot{ width:10px; height:10px; border-radius:50%; background:#35e065; box-shadow:0 0 8px #35e065; animation:glowPulse 1.8s infinite; }
.capsule-name{ font-size:18px; letter-spacing:2px; color:#ffeecb; }
.capsule-change{ padding:7px 20px; font-size:14px; letter-spacing:2px; border:none; border-radius:999px; cursor:pointer; color:#3a2405; font-weight:bold; background:linear-gradient(180deg, #fff2c8, #ffd24a 40%, #d4a017); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.4); transition:.2s; }
.capsule-change:hover{ filter:brightness(1.12); }
.btn-start-game{ padding:10px 44px; font-size:19px; letter-spacing:6px; border-radius:6px; }

/* 主界面按钮多版样式（后台基础设置切换，默认A版金色） */
body.main-btns-b .capsule-change{ color:#fff0e0; background:linear-gradient(180deg,#ff8a4c,#e02d2d 45%,#8c0f0f); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(255,70,30,.55); }
body.main-btns-b .btn-start-game{ color:#fff0e0; text-shadow:0 1px 2px rgba(0,0,0,.5); background:linear-gradient(180deg,#ff9a4c,#e02d2d 45%,#7a0b0b); border:1px solid #ff9a5c; box-shadow:0 0 0 1px #5c0808, inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.5), 0 0 20px rgba(255,80,30,.45); animation:none; }
body.main-btns-c .capsule-change{ color:#eef8ff; background:linear-gradient(180deg,#a8dcff,#2f7de0 45%,#123f8c); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 14px rgba(70,150,255,.55); }
body.main-btns-c .btn-start-game{ color:#eef8ff; text-shadow:0 1px 2px rgba(0,0,0,.5); background:linear-gradient(180deg,#b0e0ff,#2f7de0 45%,#0e3a85); border:1px solid #7cc0ff; box-shadow:0 0 0 1px #0a2d68, inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.5), 0 0 20px rgba(80,160,255,.45); animation:none; }
body.main-btns-d .capsule-change{ color:#ffe9b0; background:#1a0f0a; border:1px solid #d4a017; box-shadow:0 0 12px rgba(212,160,23,.45), inset 0 0 8px rgba(212,160,23,.25); text-shadow:0 0 6px rgba(255,190,60,.6); }
body.main-btns-d .btn-start-game{ color:#ffe9b0; text-shadow:0 0 8px rgba(255,190,60,.6); background:#1a0f0a; border:1px solid #d4a017; box-shadow:0 0 0 1px #8a5a1a, inset 0 0 12px rgba(212,160,23,.3), 0 6px 18px rgba(0,0,0,.6), 0 0 22px rgba(212,160,23,.4); animation:none; }
body.main-btns-d .btn-start-game .btn-glow{ display:none; }

.bottom-legal{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:4; text-align:center; font-size:12px; line-height:1.8; color:rgba(255,236,203,.5); text-shadow:0 1px 3px rgba(0,0,0,.9); }

/* ========== 弹窗通用 ========== */
.modal{ position:fixed; inset:0; z-index:10; display:none; align-items:center; justify-content:center; }
.modal.active{ display:flex; }
.modal-mask{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.modal-mask.dark{ background:rgba(0,0,0,.85); }
.btn-close{ position:absolute; top:8px; right:12px; background:transparent; border:none; color:#ffd24a; font-size:24px; cursor:pointer; z-index:12; text-shadow:0 2px 4px rgba(0,0,0,.8); transition:.15s; }
.btn-close:hover{ color:#fff; transform:scale(1.15); }

/* ========== 区服弹窗 ========== */
.server-modal{ width:880px; max-width:94vw; height:62vh; max-height:620px; display:flex; flex-direction:column; z-index:11; animation:fadeUp .3s ease-out both; }
.server-legend{ display:flex; align-items:center; gap:26px; padding:10px 18px 0; font-size:14px; color:rgba(255,236,203,.8); }
.server-legend .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot.green{ background:#35e065; box-shadow:0 0 6px #35e065; }
.dot.red{ background:#ff4d4f; box-shadow:0 0 6px #ff4d4f; }
.dot.new{ background:#ffd24a; box-shadow:0 0 6px #ffd24a; }
.dot.gray{ background:#888; box-shadow:0 0 6px #888; }
.server-body{ flex:1; display:flex; min-height:0; }
.group-list{ width:160px; border-right:1px solid rgba(184,134,11,.3); padding:14px 10px; overflow-y:auto; }
.group-item{ padding:11px 10px; margin-bottom:8px; text-align:center; font-size:16px; letter-spacing:3px; color:rgba(255,236,203,.75); border:1px solid rgba(138,90,26,.4); border-radius:4px; cursor:pointer; transition:.2s; }
.group-item:hover{ color:#ffd24a; border-color:#b8860b; }
.group-item.active{ color:#3a2405; font-weight:bold; background:linear-gradient(180deg, #fff2c8, #ffd24a 40%, #d4a017); border-color:#ffd24a; box-shadow:0 0 12px rgba(255,210,74,.35); }
.server-grid-wrap{ flex:1; padding:16px 18px; overflow-y:auto; }
.server-group-name{ font-size:16px; color:#ffd24a; letter-spacing:3px; margin-bottom:12px; }
.server-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.server-card{ position:relative; padding:16px 12px 12px; background:rgba(0,0,0,.45); border:1px solid rgba(138,90,26,.5); border-radius:5px; cursor:pointer; text-align:center; transition:.2s; }
.server-card:hover{ border-color:#ffd24a; transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.5); }
.server-card.selected{ border-color:#ffd24a; box-shadow:0 0 0 1px #ffd24a, 0 0 16px rgba(255,210,74,.3); }
.server-card.recommend::after{ content:"荐"; position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ff8080, #cc0000 65%); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.server-status{ position:absolute; top:6px; left:8px; font-size:11px; letter-spacing:1px; padding:2px 8px; border-radius:3px; }
.server-status.hot{ background:rgba(255,42,42,.2); color:#ff6b6b; border:1px solid rgba(255,42,42,.5); }
.server-status.new{ background:rgba(53,224,101,.15); color:#35e065; border:1px solid rgba(53,224,101,.45); }
.server-status.smooth{ background:rgba(64,169,255,.15); color:#69b4ff; border:1px solid rgba(64,169,255,.4); }
.server-status.maintain{ background:rgba(150,150,150,.15); color:#999; border:1px solid rgba(150,150,150,.4); }
.server-name{ margin-top:14px; font-size:17px; letter-spacing:2px; color:#ffeecb; }
.server-line{ margin:8px auto 0; width:60%; height:1px; background:linear-gradient(90deg, transparent, rgba(212,175,55,.6), transparent); }
.server-foot{ padding:12px 0 16px; text-align:center; border-top:1px solid rgba(184,134,11,.25); }
.server-foot .btn-gold{ padding:10px 60px; font-size:18px; letter-spacing:6px; }

/* ========== 公告弹窗 ========== */
.announce-panel{ width:760px; max-width:92vw; height:58vh; max-height:560px; display:flex; flex-direction:column; z-index:11; animation:fadeUp .3s ease-out both; transition:width .25s ease, height .25s ease, max-height .25s ease; }
.announce-panel.expanded{ width:1200px; max-width:96vw; height:88vh; max-height:88vh; }
.announce-body{ flex:1; display:flex; min-height:0; }

.announce-tabs{ width:150px; border-right:1px solid rgba(184,134,11,.3); padding:14px 10px; overflow-y:auto; }
.announce-tab{ display:block; width:100%; padding:10px 6px; margin-bottom:8px; font-size:15px; letter-spacing:2px; text-align:center; color:rgba(255,236,203,.75); background:transparent; border:1px solid rgba(138,90,26,.4); border-radius:4px; cursor:pointer; transition:.2s; }
.announce-tab:hover{ color:#ffd24a; border-color:#b8860b; }
.announce-tab.active{ color:#3a2405; font-weight:bold; background:linear-gradient(180deg, #fff2c8, #ffd24a 40%, #d4a017); border-color:#ffd24a; box-shadow:0 0 12px rgba(255,210,74,.35); }
.announce-parchment{ flex:1; margin:14px; border:2px solid #5a3a1a; border-radius:6px; background:#1a0f0a; box-shadow:inset 0 0 40px rgba(0,0,0,.5); overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.announce-parchment::-webkit-scrollbar{ display:none; }
.announce-banner{ height:120px; background-size:cover; background-position:center 30%; border-bottom:2px solid rgba(184,134,11,.5); }
.announce-content{ padding:18px 22px; font-size:15px; line-height:1.9; color:#e8d5b5; }
.announce-panel.expanded .announce-content{ font-size:17px; }
/* 公告内普通图片/视频强制适配宽度（旧公告手动贴的图不会溢出裁切） */
.announce-content img{ max-width:100%; height:auto; }
.announce-content video{ max-width:100%; }
.announce-content font[size="5"]{ line-height:1.5; }
.announce-content .ann-full-img{ display:block; width:100%; margin:-18px -22px; width:calc(100% + 44px); max-width:calc(100% + 44px); cursor:zoom-in; }

/* 图片灯箱 */
.img-lightbox{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; cursor:zoom-out; }
.img-lightbox.active{ display:flex; }
.lb-img{ max-width:96vw; max-height:96vh; object-fit:contain; border:2px solid rgba(255,210,74,.6); border-radius:6px; box-shadow:0 0 40px rgba(255,190,60,.4); }

/* 图片版横幅 */
.promo-banner{ display:block; }
.promo-banner-img{ display:block; width:100%; height:150px; object-fit:cover; object-position:center 40%; border-bottom:2px solid rgba(184,134,11,.5); }

.announce-content::-webkit-scrollbar, .group-list::-webkit-scrollbar, .server-grid-wrap::-webkit-scrollbar, .announce-tabs::-webkit-scrollbar{ width:8px; }
.announce-content::-webkit-scrollbar-thumb, .group-list::-webkit-scrollbar-thumb, .server-grid-wrap::-webkit-scrollbar-thumb, .announce-tabs::-webkit-scrollbar-thumb{ background:rgba(184,134,11,.4); border-radius:4px; }

/* ========== 公告窗口多套皮肤（后台基础设置切换，A=默认暗金圣纹） ========== */
/* B版 · 赤焰红木（深红木纹配色，参考图样式） */
#announcePanel.skin-b{ --panelBg: rgba(40,12,8,.97); border-color:#a8732a; box-shadow:0 0 0 1px rgba(255,180,90,.35), 0 20px 60px rgba(0,0,0,.75), inset 0 0 70px rgba(50,8,4,.65); }
#announcePanel.skin-b::before{ border-color:rgba(255,170,80,.3); }
#announcePanel.skin-b .panel-title{ color:#ffdf9e; border-bottom-color:rgba(200,110,40,.45); background:linear-gradient(180deg, rgba(120,28,12,.55), transparent); }
#announcePanel.skin-b .announce-tab{ color:rgba(255,222,185,.78); border-color:rgba(190,105,40,.55); }
#announcePanel.skin-b .announce-tab:hover{ color:#ffd24a; border-color:#d4882a; }
#announcePanel.skin-b .announce-tab.active{ color:#4a2000; background:linear-gradient(180deg,#ffedbe,#f0b23c 45%,#c07818); border-color:#ffd24a; box-shadow:0 0 12px rgba(240,160,50,.4); }
#announcePanel.skin-b .announce-parchment{ background:#230a08; border-color:#6a2a14; box-shadow:inset 0 0 40px rgba(0,0,0,.55); }
#announcePanel.skin-b .announce-content{ color:#f2dcc4; }
/* C版 · 玄黑鎏金（纯黑底金描边） */
#announcePanel.skin-c{ --panelBg: rgba(10,9,6,.97); border-color:#9a852e; box-shadow:0 0 0 1px rgba(255,232,150,.32), 0 20px 60px rgba(0,0,0,.85), inset 0 0 70px rgba(0,0,0,.75); }
#announcePanel.skin-c::before{ border-color:rgba(255,232,150,.26); }
#announcePanel.skin-c .panel-title{ color:#f2e3a0; border-bottom-color:rgba(170,140,50,.4); background:linear-gradient(180deg, rgba(90,70,18,.45), transparent); }
#announcePanel.skin-c .announce-tab{ color:rgba(240,225,180,.7); border-color:rgba(150,125,45,.5); }
#announcePanel.skin-c .announce-tab:hover{ color:#ffe88a; border-color:#c7a53a; }
#announcePanel.skin-c .announce-tab.active{ color:#1c1602; background:linear-gradient(180deg,#f8eec0,#e3c766 45%,#a8842a); border-color:#ffe88a; box-shadow:0 0 12px rgba(255,230,140,.35); }
#announcePanel.skin-c .announce-parchment{ background:#0c0b08; border-color:#3f3418; box-shadow:inset 0 0 40px rgba(0,0,0,.7); }
#announcePanel.skin-c .announce-content{ color:#e9dcbc; }
/* D版 · 冰蓝秘银（冰蓝银配色） */
#announcePanel.skin-d{ --panelBg: rgba(6,18,32,.97); border-color:#2e6a8a; box-shadow:0 0 0 1px rgba(140,210,255,.32), 0 20px 60px rgba(0,0,0,.8), inset 0 0 70px rgba(4,20,40,.7); }
#announcePanel.skin-d::before{ border-color:rgba(140,210,255,.28); }
#announcePanel.skin-d .panel-title{ color:#bfe6ff; border-bottom-color:rgba(60,130,180,.45); background:linear-gradient(180deg, rgba(20,60,100,.5), transparent); }
#announcePanel.skin-d .announce-tab{ color:rgba(200,230,255,.75); border-color:rgba(60,120,165,.55); }
#announcePanel.skin-d .announce-tab:hover{ color:#9fd8ff; border-color:#4a95c8; }
#announcePanel.skin-d .announce-tab.active{ color:#03243a; background:linear-gradient(180deg,#d8f2ff,#6fc2f5 45%,#2a7ab8); border-color:#9fd8ff; box-shadow:0 0 12px rgba(110,190,250,.45); }
#announcePanel.skin-d .announce-parchment{ background:#081522; border-color:#153a52; box-shadow:inset 0 0 40px rgba(0,0,0,.6); }
#announcePanel.skin-d .announce-content{ color:#d5e8f5; }

/* ========== 加载 ========== */
.loading-box{ position:relative; z-index:11; width:420px; text-align:center; }
.loading-text{ font-size:18px; letter-spacing:3px; color:#ffd24a; text-shadow:0 2px 6px rgba(0,0,0,.8); margin-bottom:16px; }
.loading-bar{ height:16px; border:1px solid #8a5a1a; border-radius:999px; background:rgba(0,0,0,.6); overflow:hidden; box-shadow:inset 0 2px 6px rgba(0,0,0,.6); }
.loading-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, #b8860b, #ffd24a, #fff2c8); box-shadow:0 0 12px rgba(255,210,74,.7); transition:width .18s linear; }

/* ========== 第四屏：职业选择 ========== */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.mini-logo{ font-size:22px; letter-spacing:4px; background:linear-gradient(180deg, #fff8dc, #ffd24a, #b8860b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-family:"STKaiti","KaiTi",serif; font-weight:bold; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
/* 职业选择各界面不显示左上角游戏名，右上角"返回"保持靠右 */
#screen-class .topbar, #screen-class-cards .topbar, #screen-class-classic .topbar,
#screen-class-lineup .topbar, #screen-class-video .topbar{ justify-content:flex-end; }
#screen-class .topbar-left, #screen-class-cards .topbar-left, #screen-class-classic .topbar-left,
#screen-class-lineup .topbar-left, #screen-class-video .topbar-left{ display:none; }
.btn-small{ padding:7px 22px; font-size:14px; letter-spacing:2px; border:1px solid #8a5a1a; border-radius:4px; color:#ffd24a; background:rgba(30,15,2,.85); cursor:pointer; transition:.2s; }
.btn-small:hover{ border-color:#ffd24a; }

.class-wrap{ position:relative; z-index:4; display:flex; gap:26px; width:1100px; max-width:95vw; height:78vh; max-height:700px; animation:fadeUp .5s ease-out both; }
.class-showcase{ position:relative; overflow:hidden; flex:1.2; border:2px solid #6a3e12; border-radius:8px; background-size:cover; background-position:top center; box-shadow:0 0 0 1px rgba(255,210,74,.2), 0 20px 50px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--c, #ffd24a) 25%, transparent); transition:box-shadow .3s; animation:heroBreathe 3.5s ease-in-out infinite; }
.class-showcase::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--c, #ffd24a) 30%, transparent) 0%, transparent 62%); opacity:.55; animation:glowPulse 2.4s ease-in-out infinite; pointer-events:none; }
.hero-shine{ position:absolute; inset:0; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); animation:shineSweep 4.2s ease-in-out infinite; pointer-events:none; }
@keyframes heroBreathe{ 0%,100%{ transform:scale(1); filter:brightness(1);} 50%{ transform:scale(1.035); filter:brightness(1.07);} }
@keyframes shineSweep{ 0%{ transform:translateX(-130%) skewX(-18deg);} 55%,100%{ transform:translateX(130%) skewX(-18deg);} }
.class-right{ flex:1; display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--panelBg); border:2px solid #6a3e12; border-radius:8px; box-shadow:0 0 0 1px rgba(255,210,74,.25), 0 20px 50px rgba(0,0,0,.6); overflow-y:auto; }
.class-title-small{ text-align:center; font-size:20px; letter-spacing:6px; color:#ffd24a; text-shadow:0 0 14px rgba(255,190,60,.4); }
.class-btn-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.class-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; background:rgba(0,0,0,.4); border:1px solid rgba(138,90,26,.5); border-radius:5px; cursor:pointer; color:#ffeecb; transition:.2s; }
.class-btn:hover{ border-color:var(--c); }
.class-btn.active{ border-color:var(--c); background:color-mix(in srgb, var(--c) 14%, rgba(0,0,0,.5)); box-shadow:0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.class-btn-name{ font-size:18px; letter-spacing:3px; font-weight:bold; }
.class-btn.active .class-btn-name{ color:var(--c); }
.class-btn-pos{ font-size:11px; color:rgba(255,236,203,.55); }
.class-stats{ padding:10px 12px; background:rgba(0,0,0,.35); border:1px solid rgba(138,90,26,.35); border-radius:5px; }
.stat-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.stat-row:last-child{ margin-bottom:0; }
.stat-name{ width:36px; font-size:14px; color:#ffd24a; }
.stat-bar{ flex:1; height:10px; background:rgba(0,0,0,.5); border:1px solid rgba(138,90,26,.4); border-radius:999px; overflow:hidden; }
.stat-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, #b8860b, #ffd24a); box-shadow:0 0 8px rgba(255,210,74,.5); transition:width .3s; }
.stat-val{ width:28px; text-align:right; font-size:14px; color:#ffeecb; }
.class-desc-box{ flex:1; min-height:80px; padding:12px; background:rgba(0,0,0,.35); border:1px solid rgba(138,90,26,.35); border-radius:5px; }
.cd-title{ font-size:16px; letter-spacing:2px; margin-bottom:6px; }
.cd-text{ font-size:13px; line-height:1.7; color:rgba(255,236,203,.75); }
.cd-skill{ margin-top:8px; font-size:12px; color:rgba(255,210,74,.8); }
.class-nickname-row{ display:flex; align-items:center; gap:8px; }
.class-nickname-row label{ font-size:15px; color:#ffd24a; }
.class-nickname-row input{ flex:1; height:38px; background:rgba(0,0,0,.5); border:1px solid #6a3e12; border-radius:4px; color:#ffeecb; padding:0 12px; font-size:15px; outline:none; }
.class-nickname-row input:focus{ border-color:#ffd24a; }
.btn-dice{ width:38px; height:38px; font-size:18px; border:1px solid #6a3e12; border-radius:4px; background:rgba(0,0,0,.5); cursor:pointer; transition:.2s; }
.btn-dice:hover{ border-color:#ffd24a; transform:rotate(15deg); }
.btn-create{ padding:13px 0; font-size:20px; letter-spacing:8px; }

/* ========== 职业选择（四卡片版） ========== */
.cards-wrap{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; gap:18px; width:96vw; max-width:1280px; }
.cards-title{ font-size:30px; letter-spacing:8px; color:#ffd24a; text-shadow:0 0 16px rgba(255,190,60,.5), 0 3px 6px rgba(0,0,0,.8); display:flex; align-items:center; gap:14px; }
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; }
.class-card{ position:relative; height:56vh; min-height:380px; max-height:520px; border:2px solid rgba(138,90,26,.6); border-radius:8px; background:rgba(10,5,3,.75); overflow:hidden; cursor:pointer; transition:transform .25s, border-color .25s, box-shadow .25s; }
.class-card:hover{ transform:translateY(-6px); border-color:var(--c); }
.class-card.active{ border-color:var(--c); box-shadow:0 0 22px color-mix(in srgb, var(--c) 55%, transparent), 0 18px 40px rgba(0,0,0,.6); transform:translateY(-6px); }
.class-card-img{ position:absolute; inset:0; background-size:cover; background-position:top center; animation:heroBreathe 4s ease-in-out infinite; }
.class-card-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.15) 50%, transparent 58%); animation:shineSweep 4.6s ease-in-out infinite; }
.class-card.active .class-card-img{ animation-duration:2.6s; }
.class-card-info{ position:absolute; left:0; right:0; bottom:0; padding:14px 12px 12px; background:linear-gradient(180deg, transparent, rgba(5,2,1,.92) 30%); text-align:center; }
.class-card-name{ font-size:22px; letter-spacing:4px; font-weight:bold; color:#fff2c8; text-shadow:0 0 12px color-mix(in srgb, var(--c) 70%, transparent), 0 2px 4px #000; }
.class-card.active .class-card-name{ color:var(--c); }
.class-card-pos{ font-size:13px; color:var(--c); margin-top:4px; letter-spacing:1px; }
.class-card-desc{ font-size:12px; color:rgba(255,236,203,.75); margin-top:6px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.class-card-skill{ font-size:11px; color:rgba(255,210,74,.85); margin-top:6px; letter-spacing:.5px; }
.class-card-check{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:2px solid var(--c); background:color-mix(in srgb, var(--c) 80%, #000); color:#fff; display:none; align-items:center; justify-content:center; font-size:16px; box-shadow:0 0 10px var(--c); }
.class-card.active .class-card-check{ display:flex; }
.cards-foot{ display:flex; align-items:center; gap:20px; }
.cards-foot .btn-create{ padding:13px 60px; }
@media (max-width: 900px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } .class-card{ height:34vh; min-height:260px; } }

/* ========== Toast ========== */
.toast{ position:fixed; top:60px; left:50%; transform:translateX(-50%) translateY(-16px); z-index:99; padding:12px 30px; font-size:16px; letter-spacing:2px; color:#ffd24a; background:rgba(14,6,4,.92); border:1px solid #b8860b; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 18px rgba(255,190,60,.25); opacity:0; pointer-events:none; transition:.3s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
  .game-name{ font-size:52px; }
  .emblem{ width:190px; height:190px; }
  .server-grid{ grid-template-columns:repeat(2, 1fr); }
  .class-wrap{ flex-direction:column; height:auto; max-height:92vh; overflow-y:auto; }
  .class-showcase{ min-height:280px; }
}
@media (max-width: 640px) {
  .game-name{ font-size:38px; letter-spacing:5px; }
  .server-grid{ grid-template-columns:1fr; }
  .group-list{ width:110px; }
  .btn-start-game{ padding:14px 60px; font-size:22px; }
  .top-right-btns{ top:12px; right:12px; }
  .bottom-legal{ font-size:10px; width:94vw; }
}

/* ===== 区服界面CG覆盖层 ===== */
#serverBgLayer{ position:fixed; inset:0; z-index:1; }
#serverBgLayer .bg-video{ width:100%; height:100%; object-fit:cover; }

/* ===== 公告内视频 ===== */
.announce-content .ann-video{ display:block; width:100%; max-width:100%; border-radius:6px; margin:8px 0; cursor:default; }

/* ===== 经典创建角色版职业选择 ===== */
.classic-wrap{ position:absolute; top:70px; left:0; right:0; bottom:170px; display:flex; align-items:center; justify-content:center; gap:36px; padding:0 5vw; }
.classic-stage{ width:min(42vh,400px); aspect-ratio:3/4; border:2px solid rgba(184,134,11,.55); border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.7), 0 0 24px rgba(255,190,60,.16); background:#0d0604; animation:fadeUp .4s ease-out both; }
.classic-portrait{ width:100%; height:100%; object-fit:cover; user-select:none; }
.classic-side{ display:flex; flex-direction:column; gap:16px; width:300px; }
.classic-stats{ background:rgba(10,5,3,.75); border:1px solid rgba(184,134,11,.4); border-radius:6px; padding:12px 18px; }
.cl-stat{ display:flex; justify-content:space-between; font-size:15px; padding:5px 0; color:#e8d5b5; }
.cl-stat-val{ color:#ffd24a; font-weight:bold; }
.classic-btn-list{ display:flex; flex-direction:column; gap:9px; }
.cl-btn{ height:46px; border:1px solid #6a3e12; border-radius:4px; background:linear-gradient(180deg,#241209,#160a05); color:#e8d5b5; font-size:16px; letter-spacing:8px; padding-left:8px; cursor:pointer; transition:.15s; }
.cl-btn:hover{ border-color:#ffd24a; color:#ffd24a; }
.cl-btn.active{ background:linear-gradient(180deg,#8a1a12,#5a0e08); border-color:#ff7a4a; color:#ffe9b0; box-shadow:0 0 14px rgba(255,90,40,.4); }
.classic-foot{ position:absolute; left:0; right:0; bottom:26px; display:flex; align-items:center; justify-content:center; gap:34px; padding:0 5vw; }
.classic-create{ display:flex; flex-direction:column; gap:10px; }
.classic-nick-row{ display:flex; align-items:center; gap:8px; }
.classic-nick-row label{ font-size:14px; color:#ffd24a; letter-spacing:2px; white-space:nowrap; }
.classic-nick-row input{ width:190px; height:36px; background:rgba(14,6,4,.9); border:1px solid #6a3e12; border-radius:4px; color:#ffeecb; padding:0 10px; font-size:14px; outline:none; }
.classic-nick-row input:focus{ border-color:#ffd24a; }
.classic-desc{ max-width:470px; font-size:13px; line-height:1.8; color:rgba(232,213,181,.88); background:rgba(10,5,3,.62); border:1px solid rgba(184,134,11,.3); border-radius:6px; padding:10px 16px; }
.cl-desc-title{ font-size:15px; margin-bottom:4px; font-weight:bold; }
.cl-desc-skill{ color:#ffd24a; margin-top:4px; font-size:12px; }
@media (max-width: 900px) {
  .classic-wrap{ flex-direction:column; top:60px; bottom:auto; overflow-y:auto; }
  .classic-foot{ position:static; margin-top:14px; flex-direction:column; }
}

/* ================= 职业选择 · 四职业同屏阵容版 ================= */
.lineup-screen{ background:#060403; overflow:hidden; }
.lineup-bg{ position:absolute; inset:-6%; z-index:0; background:url('../class/lineup.jpg') center center / cover no-repeat; filter:blur(26px) brightness(.5) saturate(.9); transform:scale(1.08); }
/* 场景盒固定 16:9，并保证长宽都比窗口大（cover 满屏，四周不留黑边），超出部分由 .lineup-screen 裁掉 */
.lineup-scene{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; overflow:hidden;
  width:max(100vw, 177.78vh); height:max(100vh, 56.25vw); background:#060403;
  animation:luSceneBreath 20s ease-in-out infinite alternate; }
/* 图片与人物的点击区放在同一层：缩放时两者一起放，名牌/热点始终贴在人物身上 */
.lineup-zoom{ position:absolute; inset:0; transform-origin:50% 45%; transform:scale(1);
  transition:transform .85s cubic-bezier(.2,.85,.25,1); will-change:transform; }
.lineup-img{ position:absolute; inset:0; background:url('../class/lineup.jpg') center center / 100% 100% no-repeat; }
.lineup-rays{ position:absolute; inset:-10% -18%; z-index:1; pointer-events:none; opacity:.55;
  background:
    linear-gradient(104deg, transparent 43%, rgba(255,235,180,.10) 45.5%, transparent 48%),
    linear-gradient(78deg, transparent 47%, rgba(255,225,160,.08) 49.5%, transparent 52%),
    linear-gradient(96deg, transparent 58%, rgba(255,240,190,.06) 60%, transparent 63%);
  filter:blur(3px); animation:luRays 11s ease-in-out infinite alternate; }
.lineup-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 72%, rgba(0,0,0,.42) 100%); }
.lineup-head{ position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:5; text-align:center; pointer-events:none; }
.lineup-title{ display:flex; align-items:center; justify-content:center; gap:16px; font-size:24px; letter-spacing:12px; color:#ffe8b6;
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 24px rgba(255,190,90,.45); font-weight:bold; }
.lineup-title i{ width:74px; height:1px; background:linear-gradient(90deg, transparent, #ffd76a 45%, #fff2c8 50%, #ffd76a 55%, transparent); box-shadow:0 0 8px rgba(255,205,110,.7); }
.lineup-sub{ margin-top:7px; font-size:12.5px; letter-spacing:1.5px; color:#ffdba6; opacity:.9; text-shadow:0 1px 6px #000; min-height:18px; }
.lineup-nick{ position:absolute; top:56px; right:20px; z-index:6; display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:rgba(12,7,4,.62); border:1px solid rgba(255,208,120,.32); border-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 0 12px rgba(255,180,60,.08); backdrop-filter:blur(4px); }
.lineup-nick label{ font-size:13px; letter-spacing:2px; color:#ffd24a; white-space:nowrap; }
.lineup-nick input{ width:132px; height:28px; background:rgba(0,0,0,.45); border:1px solid rgba(184,134,11,.45); border-radius:3px; color:#ffeecb; padding:0 8px; font-size:13px; outline:none; }
.lineup-nick input:focus{ border-color:#ffd24a; box-shadow:0 0 10px rgba(255,200,90,.35); }
.lineup-stage{ position:absolute; inset:0; z-index:3; }
.lineup-char{ position:absolute; left:var(--x); bottom:18%; width:19%; height:54%; transform:translateX(-50%); background:none; border:0; padding:0; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.lineup-char .lu-beam{ position:absolute; left:50%; bottom:-2%; width:64%; height:104%; transform:translateX(-50%); pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.14) 32%, var(--c) 62%, transparent 94%); mix-blend-mode:screen; filter:blur(20px); transition:opacity .5s; }
.lineup-char .lu-aura{ position:absolute; left:50%; bottom:-4%; width:150%; height:94%; transform:translateX(-50%); pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 60%, var(--c) 0%, rgba(255,255,255,0) 62%); mix-blend-mode:screen; filter:blur(16px); transition:opacity .5s; }
.lineup-char .lu-ring{ position:absolute; left:50%; bottom:-8%; width:118%; aspect-ratio:2.9/1; transform:translateX(-50%); perspective:400px; pointer-events:none; }
.lineup-char .lu-ring span{ position:absolute; inset:0; border-radius:50%; border:2px dashed var(--c); box-shadow:0 0 14px var(--c), inset 0 0 14px var(--c); opacity:.22; transform:rotateX(72deg); animation:luSpin 16s linear infinite; transition:opacity .4s; }
.lineup-char .lu-ring .r2{ border-style:solid; border-width:1px; opacity:.14; animation-duration:26s; animation-direction:reverse; }
.lineup-char .lu-burst{ position:absolute; left:50%; bottom:-7%; width:118%; aspect-ratio:2.9/1; transform:translate(-50%,0) scale(.4); border-radius:50%; border:2px solid var(--c); box-shadow:0 0 26px var(--c); opacity:0; pointer-events:none; }
.lineup-char .lu-name{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); text-align:center; white-space:nowrap; color:#f6dcaa; font-size:18px; letter-spacing:5px; font-weight:bold; padding:2px 14px; border-radius:20px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 80%);
  text-shadow:0 1px 2px #000, 0 2px 10px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,.9); transition:.3s; }
.lineup-char .lu-name em{ display:block; margin-top:3px; font-size:11px; letter-spacing:1px; font-style:normal; font-weight:normal; color:#bcab8c; transition:.3s; }
.lineup-char:hover .lu-aura{ opacity:.32; }
.lineup-char:hover .lu-ring span{ opacity:.5; }
.lineup-char:hover .lu-name{ color:#fff2cf; }
.lineup-char.active .lu-aura{ opacity:.55; animation:luAura 3.2s ease-in-out infinite; }
.lineup-char.active .lu-beam{ opacity:.55; animation:luBeam 3s ease-in-out infinite; }
.lineup-char.active .lu-ring span{ opacity:.9; border-color:#fff1c4; animation-duration:7s; }
.lineup-char.active .lu-ring .r2{ opacity:.55; }
.lineup-char.active .lu-name{ color:#fff4d2; letter-spacing:6px; text-shadow:0 0 14px var(--c), 0 2px 10px rgba(0,0,0,.95); }
.lineup-char.active .lu-name em{ color:#ffd9a4; }
/* 选中职业脚下持续扩散的能量波，让当前人物看起来"在动" */
.lineup-char .lu-pulse{ position:absolute; left:50%; bottom:-8%; width:118%; aspect-ratio:2.9/1; transform:translateX(-50%);
  border-radius:50%; border:2px solid var(--c); box-shadow:0 0 18px var(--c), inset 0 0 16px var(--c); opacity:0; pointer-events:none; }
.lineup-char.active .lu-pulse{ animation:luPulse 2.8s ease-out infinite; }
.lineup-char.burst .lu-burst{ animation:luBurst .9s ease-out; }
/* 选中职业时轻微压暗其余区域（只做轻压暗，其他职业依然看得清），并用暖光点亮当前人物 */
.lineup-focus{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .55s;
  background:radial-gradient(circle at var(--fx,41.3%) var(--fy,54%), rgba(0,0,0,0) 12%, rgba(0,0,0,.05) 24%, rgba(0,0,0,.14) 44%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.32) 100%); }
.lineup-focus::after{ content:''; position:absolute; inset:0; mix-blend-mode:screen;
  background:radial-gradient(ellipse 24% 42% at var(--fx,41.3%) var(--fy,54%), rgba(255,226,168,.14) 0%, rgba(255,198,116,.07) 46%, rgba(255,180,90,0) 74%); }
.lineup-focus.show{ opacity:1; }

/* 左侧职业详情：套装 + 属性 + 技能 */
.lineup-panel{ position:absolute; left:20px; bottom:98px; z-index:6; width:252px; padding:11px 13px 13px; border-radius:8px;
  background:linear-gradient(180deg, rgba(20,12,6,.93), rgba(8,5,3,.9));
  border:1px solid rgba(214,164,66,.45); box-shadow:0 12px 34px rgba(0,0,0,.65), inset 0 0 26px rgba(255,180,60,.07);
  backdrop-filter:blur(6px); opacity:0; transform:translateX(-116%);
  transition:transform .5s cubic-bezier(.2,.85,.25,1), opacity .45s, border-color .4s; }
.lineup-panel.show{ opacity:1; transform:none; }
.lineup-panel.flash{ animation:lpFlash .5s cubic-bezier(.2,.85,.25,1); }
@keyframes lpFlash{ 0%{ transform:translateX(-16px); opacity:.45; } 100%{ transform:none; opacity:1; } }
.lp-head{ display:flex; align-items:baseline; gap:8px; padding-bottom:7px; border-bottom:1px solid rgba(214,164,66,.22); }
.lp-name{ font-size:19px; letter-spacing:3px; font-weight:bold; color:var(--c, #ffd76a); text-shadow:0 0 12px var(--c, #ffd76a); }
.lp-pos{ font-size:11px; color:#a99a80; letter-spacing:1px; }
.lp-thumb{ height:88px; margin-top:9px; border-radius:6px; border:1px solid rgba(214,164,66,.35);
  background-color:#0c0805; background-repeat:no-repeat; position:relative; overflow:hidden;
  box-shadow:inset 0 0 22px rgba(0,0,0,.75); }
.lp-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,245,210,.28) 50%, transparent 60%);
  transform:translateX(-120%); animation:lpShine 3.2s ease-in-out infinite; }
.lp-set{ margin-top:9px; font-size:13px; letter-spacing:1.5px; color:#ffd98f; text-shadow:0 1px 6px #000; }
.lp-stats{ margin-top:8px; }
.lp-stat{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:11px; color:#c6b797; }
.lp-stat .bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.lp-stat .bar i{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--c, #ffd76a), #fff3cf); transition:width .7s ease .1s; }
.lp-skills{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(214,164,66,.22); }
.lp-skills em{ font-style:normal; font-size:11px; color:#8d7f66; letter-spacing:2px; margin-right:2px; align-self:center; }
.lp-skills span{ font-size:11.5px; color:#ffe6b8; padding:3px 8px; border-radius:10px; border:1px solid rgba(214,164,66,.4); background:rgba(255,180,60,.08); }
.lineup-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.lineup-particles span{ position:absolute; bottom:-3%; border-radius:50%; background:var(--pc); box-shadow:0 0 8px var(--pc); opacity:0; animation:luFloat var(--dur) linear infinite; animation-delay:var(--delay); }
.lineup-start{ position:absolute; left:50%; bottom:3.2%; transform:translateX(-50%); z-index:6; width:286px; height:54px; cursor:pointer;
  border:1px solid #d9a441; border-radius:6px; color:#ffe9b8; font-size:20px; letter-spacing:9px; font-weight:bold;
  background:linear-gradient(180deg, #2c1a0b 0%, #5e3512 38%, #4a270d 62%, #241307 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,214,130,.22), inset 0 0 22px rgba(255,170,50,.28), 0 8px 26px rgba(0,0,0,.6), 0 0 20px rgba(255,170,50,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.8), 0 0 14px rgba(255,190,80,.55); transition:.25s; }
.lineup-start:hover{ filter:brightness(1.16); box-shadow:0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,225,150,.35), inset 0 0 26px rgba(255,180,60,.38), 0 10px 30px rgba(0,0,0,.65), 0 0 30px rgba(255,180,60,.35); }
.lineup-start:active{ transform:translateX(-50%) translateY(1px); }
.lineup-start::before, .lineup-start::after{ content:''; position:absolute; top:50%; width:7px; height:7px; transform:translateY(-50%) rotate(45deg); background:#ffd76a; box-shadow:0 0 8px rgba(255,190,80,.9); opacity:.85; }
.lineup-start::before{ left:8px; } .lineup-start::after{ right:8px; }
.lineup-start .ls-glow{ position:absolute; inset:0; border-radius:5px; pointer-events:none; background:linear-gradient(100deg, transparent 35%, rgba(255,235,170,.22) 50%, transparent 65%); animation:luSweep 3.4s linear infinite; }
.lineup-start .ls-text{ position:relative; z-index:2; }
.lineup-screen .topbar{ z-index:7; }
/* 上一版阵容观感（后台可选）：更浓的聚暗、无推近缩放、无能量波 */
.lineup-screen.legacy .lineup-vignette{ background:
  radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 34%, rgba(0,0,0,.62) 100%),
  linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 68%, rgba(0,0,0,.62) 100%); }
.lineup-screen.legacy .lineup-zoom{ transform:scale(1) !important; transform-origin:50% 45% !important; }
.lineup-screen.legacy .lineup-focus{ background:
  radial-gradient(circle at var(--fx,41.3%) var(--fy,54%), rgba(0,0,0,0) 7%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.66) 100%); }
.lineup-screen.legacy .lineup-focus::after{ display:none; }
.lineup-screen.legacy .lineup-char .lu-pulse{ display:none; }
@media (max-width: 900px){
  .lineup-title{ font-size:19px; letter-spacing:7px; } .lineup-title i{ width:40px; }
  .lineup-nick{ transform:scale(.9); transform-origin:top right; }
  .lineup-start{ width:240px; height:46px; font-size:17px; letter-spacing:6px; }
  .lineup-char .lu-name{ font-size:15px; letter-spacing:3px; }
  .lineup-char .lu-name em{ font-size:10px; }
}
@keyframes luBgBreathe{ from{ transform:scale(1.02); } to{ transform:scale(1.075); } }
@keyframes luRays{ from{ opacity:.35; transform:translateX(-1.2%); } to{ opacity:.8; transform:translateX(1.2%); } }
@keyframes luSpin{ to{ transform:rotateX(72deg) rotate(360deg); } }
@keyframes luAura{ 0%,100%{ opacity:.35; transform:translateX(-50%) scale(.96); } 50%{ opacity:.65; transform:translateX(-50%) scale(1.05); } }
@keyframes luBeam{ 0%,100%{ opacity:.38; } 50%{ opacity:.68; } }
@keyframes luBurst{ 0%{ opacity:.9; transform:translate(-50%,0) scale(.35); } 100%{ opacity:0; transform:translate(-50%,0) scale(1.35); } }
@keyframes luPulse{ 0%{ opacity:.55; transform:translateX(-50%) scale(.55); } 70%{ opacity:.12; transform:translateX(-50%) scale(1.45); } 100%{ opacity:0; transform:translateX(-50%) scale(1.5); } }
@keyframes luFloat{ 0%{ transform:translate3d(0,0,0) scale(.45); opacity:0; } 10%{ opacity:var(--po); } 85%{ opacity:calc(var(--po) * .6); } 100%{ transform:translate3d(var(--dx), -84vh, 0) scale(1.15); opacity:0; } }
@keyframes luSweep{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(120%); } }
@keyframes luSceneBreath{ from{ transform:translate(-50%,-50%) scale(1); } to{ transform:translate(-50%,-50%) scale(1.03); } }
@keyframes lpShine{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(140%); } }

/* ================= 职业选择 · 自定义职业视频 ================= */
.video-screen{ background:#000; overflow:hidden; }
.class-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.video-screen .topbar{ z-index:7; }
.btn-video-start{ bottom:4.2%; }