/* v45 模块 09 · 游戏外壳 */
html, body { margin: 0; height: 100%; overflow: hidden; background: #050404; color: #e8dcc0; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; }
#shell { position: fixed; inset: 0; overflow: auto; padding: calc(14px + var(--sat, 0px)) calc(18px + var(--sar, 0px)) 18px calc(18px + var(--sal, 0px)); box-sizing: border-box; }
button { font: inherit; color: inherit; cursor: pointer; }
.logo { text-align: center; } .logo b { display: block; font-size: clamp(42px, 9vw, 96px); letter-spacing: .25em; color: #f4d48a; text-shadow: 0 0 30px rgba(255,150,60,.55), 0 4px 0 #5a3a10; font-weight: 900; }
.logo span { display: block; font-size: clamp(16px, 3vw, 28px); letter-spacing: .8em; color: #e8b86a; margin-top: 4px; } .logo em { display: block; font-style: normal; font-size: 11px; letter-spacing: .4em; color: #9a7a4a; margin-top: 10px; }
.logo.sm b { font-size: clamp(30px, 5vw, 52px); } .logo.sm span { font-size: 14px; }
.title { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.title .intro { max-width: 640px; text-align: center; color: #b8a888; line-height: 1.8; font-size: 13px; margin: 0; }
.title .start { border: 0; background: none; font-size: 18px; letter-spacing: .5em; color: #ffe0a0; animation: pulse 1.8s infinite; } @keyframes pulse { 50% { opacity: .35; } }
.title .ver { position: fixed; bottom: 10px; right: 16px; font-size: 11px; color: #6a5a40; }
.menu { min-height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 14px 24px; align-items: center; }
.menu .logo { grid-column: 1 / -1; }
.menu .cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.mc { width: min(280px, 40vw); height: min(300px, 52vh); border-radius: 18px; border: 2px solid #b88a34; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.6); transition: transform .15s; }
.mc:hover { transform: translateY(-4px) scale(1.02); } .mc b { font-size: 36px; letter-spacing: .4em; color: #f4d48a; text-shadow: 0 2px 8px #000; } .mc small { letter-spacing: .4em; color: #c8a868; font-size: 11px; } .mc span { margin-top: 10px; font-size: 12px; color: #d8ccb0; text-align: center; }
.mc.camp { background: linear-gradient(180deg, rgba(90,20,32,.25), rgba(40,8,16,.9)), radial-gradient(circle at 50% 30%, #8a3a2a, #1a0808); } .mc.skirm { background: linear-gradient(180deg, rgba(20,48,106,.25), rgba(8,20,48,.9)), radial-gradient(circle at 50% 30%, #2a4a8a, #080a1a); }
.menu .side { display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
.side button, .row button, .saves button, .lvc button { padding: 10px 14px; border-radius: 10px; border: 1px solid #8a6a2a; background: linear-gradient(180deg, rgba(42,33,18,.92), rgba(18,13,8,.92)); text-align: left; display: flex; justify-content: space-between; gap: 8px; }
.side button:hover, .row button:hover { border-color: #f0cf7a; } .side small { color: #9a8a6a; }
.hd { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .hd h2 { margin: 0; color: #f0cf7a; letter-spacing: .2em; font-size: 22px; } .hd small { font-size: 12px; color: #9a8a6a; letter-spacing: 0; margin-left: 12px; font-weight: 400; }
.back { padding: 6px 14px; border-radius: 8px; border: 1px solid #8a6a2a; background: rgba(0,0,0,.5); }
.pri { background: linear-gradient(180deg, #e8b85a, #a0721e) !important; color: #1a1006 !important; font-weight: 700; border-color: #f0cf7a !important; justify-content: center !important; } .big { font-size: 17px; padding: 12px 28px !important; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lvc { position: relative; padding: 16px; border-radius: 14px; border: 1px solid rgba(232,200,122,.35); background: linear-gradient(180deg, rgba(40,30,16,.9), rgba(14,10,6,.92)); display: flex; flex-direction: column; gap: 6px; }
.lvc .no { position: absolute; top: 10px; right: 14px; font-size: 32px; color: rgba(240,207,122,.25); font-weight: 900; } .lvc h3 { margin: 0; color: #f0cf7a; } .lvc p { margin: 0; color: #cbbf9f; font-size: 13px; line-height: 1.7; flex: 1; }
.lvc.lock { opacity: .55; } .st i { color: #4a4030; font-style: normal; font-size: 20px; } .st i.on { color: #ffd84a; text-shadow: 0 0 8px rgba(255,200,80,.6); }
.note { color: #8a7a5a; font-size: 12px; margin-top: 14px; }
.lobby { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .row > b { width: 76px; color: #c8a868; } .row.c { justify-content: center; margin-top: 12px; }
.opt { padding: 7px 14px !important; } .opt.on { background: #e8c87a !important; color: #1a1408 !important; font-weight: 700; }
.slots { display: flex; flex-direction: column; gap: 6px; } .slot { display: flex; gap: 6px; align-items: center; } .slot span { width: 52px; color: #d8ccb0; } select { padding: 5px; border-radius: 6px; background: #1a140a; color: #e8dcc0; border: 1px solid #8a6a2a; }
.slot .x { padding: 4px 9px !important; }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .mp { padding: 10px; border-radius: 10px; border: 1px solid #5a4a2a; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, #0c0a07), #0c0a07); text-align: left; display: flex; flex-direction: column; gap: 3px; }
.mp.on { border-color: #f0cf7a; box-shadow: 0 0 14px rgba(240,207,122,.4); } .mp small { color: #b8a888; font-size: 11px; }
.go { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } #sum { color: #c8b88a; font-size: 13px; }
.saves { display: flex; flex-direction: column; gap: 8px; max-width: 760px; } .sv { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(232,200,122,.3); background: rgba(20,15,8,.88); }
.sv > b { font-size: 24px; color: #f0cf7a; width: 26px; } .sv > div { flex: 1; } .sv h3 { margin: 0; font-size: 15px; } .sv small { color: #9a8a6a; } .sv.empty { opacity: .55; } .sv button { padding: 6px 12px !important; }
.set { max-width: 560px; display: flex; flex-direction: column; gap: 8px; } .set h3 { color: #f0cf7a; margin: 10px 0 2px; } .sl { display: flex; align-items: center; gap: 10px; } .sl span { width: 120px; } .sl input { flex: 1; } .sl em { width: 32px; font-style: normal; color: #c8a868; }
.prof { display: flex; gap: 12px; flex-wrap: wrap; } .pc { padding: 14px 22px; border-radius: 12px; border: 1px solid rgba(232,200,122,.3); background: rgba(20,15,8,.88); text-align: center; } .pc b { display: block; font-size: 28px; color: #f0cf7a; } .pc small { color: #9a8a6a; }
.codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .cx { padding: 16px; border-radius: 12px; border: 1px solid rgba(232,200,122,.3); background: rgba(20,15,8,.88); color: #e8dcc0; text-decoration: none; display: flex; flex-direction: column; gap: 4px; } .cx span { font-size: 26px; } .cx b { color: #f0cf7a; } .cx small { color: #9a8a6a; }
.cx:hover { border-color: #f0cf7a; }
#loadScr { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(#2a1a0a, #050404); transition: opacity .3s; } #loadScr.hide { opacity: 0; pointer-events: none; }
#loadScr .lt { font-size: 30px; color: #f4d48a; letter-spacing: .3em; } #loadScr .ls { color: #b8a888; } #loadScr .bar { width: min(420px, 70vw); height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid #5a4a2a; } #loadScr .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a07a2a, #ffd88a); transition: width .07s; }
#loadScr .tip { max-width: 620px; text-align: center; color: #cbbf9f; font-size: 13px; line-height: 1.8; padding: 0 16px; }
#toast2 { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 8px 18px; border-radius: 10px; background: rgba(0,0,0,.85); border: 1px solid #8a6a2a; opacity: 0; transition: opacity .2s; z-index: 30; pointer-events: none; } #toast2.on { opacity: 1; }
@media (max-height: 460px) { .mc { height: 58vh; } .menu { grid-template-rows: auto 1fr; } .logo.sm b { font-size: 30px; } }
@media (max-width: 640px) { .menu { grid-template-columns: 1fr; } .menu .side { flex-direction: row; flex-wrap: wrap; } }

/* v46 战役线 */
.chain { margin: 18px 0 8px; color: #f0cf7a; font-size: 17px; letter-spacing: 2px; display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid rgba(232,200,122,.25); padding-bottom: 4px; } .chain small { color: #9a8a6a; font-size: 12px; letter-spacing: 0; }
.chain-orc { color: #ff9a7a; } .chain-nightelf { color: #c0a8ff; } .chain-undead { color: #7affd0; } .chain-human { color: #8cc0ff; }

/* v47 成就 */
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ach { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(232,200,122,.2); background: rgba(20,14,8,.85); opacity: .55; filter: grayscale(.8); }
.ach.on { opacity: 1; filter: none; border-color: #b88a34; } .ach i { font-size: 28px; font-style: normal; } .ach b { display: block; color: #f0cf7a; } .ach small { display: block; color: #cbbf9f; font-size: 12px; } .ach em { font-size: 11px; color: #8a7a5a; font-style: normal; }

/* v47 英文界面：大卡片标题收窄 */
.mc b.en { font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .12em; }

/* v51 模块 36 排位赛 */
.rkBtn { border-color: #f0cf7a !important; }
.rk { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr); gap: 14px; max-width: 1080px; }
.rkCard { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 16px; border: 2px solid var(--c); background: radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--c) 28%, transparent), rgba(14,10,6,.92) 70%); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 35%, transparent); }
.rkCard h3 { margin: 0; font-size: 26px; color: var(--c); letter-spacing: .1em; } .rkEmb { font-size: 56px; filter: drop-shadow(0 0 10px var(--c)); } .rkCard > div:last-child { flex: 1; } .rkM { color: #d8ccb0; margin: 2px 0 6px; } .rkM b { color: #fff; font-size: 18px; } .rkCard small { color: #b8a888; }
.rkBar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 6px; } .rkBar i { display: block; height: 100%; background: var(--c); }
.rkGo { padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(232,200,122,.3); background: rgba(20,15,8,.88); display: flex; flex-direction: column; gap: 8px; } .rkGo .row > b { width: 40px; }
.rkSearch, .rkFound { padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px dashed #8a6a2a; } .rkFound { border-style: solid; border-color: #f0cf7a; display: flex; flex-direction: column; gap: 2px; } .rkFound b { font-size: 17px; color: #ffe0a0; } .rkFound small { color: #b8a888; }
.rkTiers { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; } .rkT { flex: 1; min-width: 90px; padding: 6px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); text-align: center; opacity: .55; } .rkT.on { opacity: 1; border-width: 2px; border-color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.rkT b { display: block; color: var(--c); } .rkT small { color: #8a7a5a; font-size: 11px; }
.rkCols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rkCols h3 { color: #f0cf7a; margin: 6px 0; font-size: 15px; }
.rkTb { width: 100%; border-collapse: collapse; font-size: 13px; } .rkTb td { padding: 4px 6px; border-bottom: 1px solid rgba(232,200,122,.12); } .rkTb small { color: #8a7a5a; } .rkTb tr.me { background: rgba(240,207,122,.14); font-weight: 700; } .rkTb .w { color: #7aff8a; } .rkTb .l { color: #ff7a6a; }
.rkWarn { color: #ffb88a; background: rgba(80,20,10,.5); border: 1px solid #a04a2a; padding: 6px 12px; border-radius: 8px; max-width: 1080px; }
@media (max-width: 760px) { .rk, .rkCols { grid-template-columns: 1fr; } }
/* v52 选图分组 */
.mpg { margin: 8px 0 4px; color: #c8a868; font-size: 13px; font-weight: 600; } .nw { font-style: normal; font-size: 10px; color: #1a1006; background: #ffd84a; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
/* v52 战役难度 */
.cdiff { margin-bottom: 6px; } .dbadge { font-style: normal; font-size: 11px; margin-left: 8px; padding: 1px 6px; border-radius: 6px; vertical-align: middle; } .d-hard { background: #a0521e; color: #fff; } .d-nightmare { background: #6a0a2a; color: #ffb0c0; } .d-easy { background: #2a5a3a; color: #cfe; }
.chain-vol3 { color: #ffe08a; }