/* 咒术回战·宿命签筒 · 主样式（自 index.html 拆出） */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg-dark:#0d0505;--bg-panel:#16090a;--bg-card:#1f0d0f;--border:#3a1418;--text:#e8d0cf;--dim:#9a7a78;--bright:#fff0ef;--blood:#DC143C;--blood-dim:#8a0f26;--purple:#4B0082;--purple-bright:#8a4bd8;--cyan:#00CED1;--gold:#B8860B;--gold-bright:#e8b93f;--flash:#00FF88;--danger:#ef4444;--warning:#f59e0b;--success:#22c55e;--shadow-blood:0 0 18px rgba(220,20,60,.28);--shadow-purple:0 0 18px rgba(75,0,130,.3);--shadow-cyan:0 0 18px rgba(0,206,209,.2);--shadow-gold:0 0 18px rgba(184,134,11,.3);--font:'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;--radius-lg:16px;--radius-md:11px;--radius-sm:7px;--ease:cubic-bezier(.22,.61,.36,1);--nav-h:62px}
html,body{height:100%;background:var(--bg-dark);color:var(--text);font-family:var(--font);overflow:hidden;user-select:none}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#app{width:100%;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg-panel);position:relative;border-left:1px solid var(--border);border-right:1px solid var(--border);box-shadow:0 0 60px rgba(0,0,0,.8);overflow:hidden}
#app::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(220,20,60,.06) 0%,transparent 70%),radial-gradient(ellipse at 20% 80%,rgba(75,0,130,.07) 0%,transparent 60%);animation:breathe 6s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:.9}}
#header{flex-shrink:0;padding:13px 16px 8px;text-align:center;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0c0404,var(--bg-panel));z-index:10;position:relative}
#header h1{font-size:16px;font-weight:900;letter-spacing:5px;color:var(--blood);text-shadow:var(--shadow-blood);animation:flicker 5s infinite}
@keyframes flicker{0%,92%,100%{opacity:1;text-shadow:var(--shadow-blood)}93%{opacity:.35}94%{opacity:.8}95%{opacity:.2;text-shadow:0 0 10px var(--shadow-blood)}96%{opacity:1}}
#header .sub{font-size:10px;color:var(--dim);letter-spacing:3px;margin-top:2px}
#status-bar{flex-shrink:0;display:flex;justify-content:space-between;padding:6px 14px;background:#0c0505;border-bottom:1px solid var(--border);font-size:11px;flex-wrap:wrap;gap:4px;z-index:10;position:relative}
.stat-item{display:flex;gap:4px;align-items:center;min-height:22px}.stat-item .v.blood{color:var(--blood)}.stat-item .v.gold{color:var(--gold-bright)}.stat-item .v.cyan{color:var(--cyan)}.stat-item .v.purple{color:var(--purple-bright)}.stat-item .v.danger{color:var(--danger)}.stat-item .v.flash{color:var(--flash)}
#main-area{flex:1;overflow-y:auto;padding:16px;scroll-behavior:smooth;position:relative;z-index:1}
#nav{flex-shrink:0;display:flex;justify-content:space-around;background:#0c0505;border-top:1px solid var(--border);padding:5px 2px 10px;gap:2px;position:relative;z-index:10;height:var(--nav-h)}
.nav-btn{flex:1;text-align:center;padding:6px 2px;font-size:10px;color:var(--dim);cursor:pointer;background:transparent;border:none;font-family:var(--font);display:flex;flex-direction:column;align-items:center;gap:2px;transition:.2s;min-height:44px;border-radius:8px}.nav-btn:active{transform:scale(.95)}.nav-btn.active{color:var(--blood);background:rgba(220,20,60,.13)}.nav-btn .icon{font-size:18px}
.page{display:none;animation:fadeIn .3s}.page.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:14px;position:relative}.card::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,var(--blood),transparent);opacity:.5}
.blood-border{border-color:var(--blood);box-shadow:var(--shadow-blood)}.purple-border{border-color:var(--purple);box-shadow:var(--shadow-purple)}.gold-border{border-color:var(--gold);box-shadow:var(--shadow-gold)}.danger-border{border-color:var(--danger);box-shadow:0 0 15px rgba(239,68,68,.25)}.cyan-border{border-color:var(--cyan);box-shadow:var(--shadow-cyan)}
.panel-title{font-size:15px;font-weight:700;color:var(--blood);margin-bottom:12px;display:flex;align-items:center;gap:8px}.panel-title.gold{color:var(--gold-bright)}.panel-title.purple{color:var(--purple-bright)}.panel-title.cyan{color:var(--cyan)}
.btn{display:inline-block;padding:9px 18px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;border-radius:8px;transition:.2s;min-height:38px}.btn:active{transform:scale(.96)}
.btn-primary{background:var(--blood);border-color:var(--blood);color:#fff;box-shadow:var(--shadow-blood)}.btn-primary:hover{filter:brightness(1.15)}.btn-purple{background:var(--purple);border-color:var(--purple);color:#e8d9ff}.btn-cyan{background:rgba(0,206,209,.15);border-color:var(--cyan);color:var(--cyan)}.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}.btn-flash{background:rgba(0,255,136,.14);border-color:var(--flash);color:var(--flash)}.btn-danger{background:rgba(239,68,68,.12);border-color:var(--danger);color:var(--danger)}.btn-warn{background:rgba(245,158,11,.14);border-color:var(--warning);color:var(--warning)}.btn-sm{padding:4px 11px;font-size:11px;min-height:30px}.btn-block{width:100%}.btn-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.btn-group .btn{flex:1;min-width:60px}
.story-text{font-size:14px;line-height:1.9;white-space:pre-wrap}.highlight{color:var(--blood);font-weight:bold}.gold-text{color:var(--gold-bright)}.cyan-text{color:var(--cyan)}.purple-text{color:var(--purple-bright)}.flash-text{color:var(--flash)}.text-muted{color:var(--dim);font-size:12px}.text-sm{font-size:12px}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-center{text-align:center}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--blood),transparent);margin:12px 0}.seal-divider{text-align:center;color:var(--blood);font-size:12px;letter-spacing:6px;margin:10px 0;opacity:.8}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:10px;border:1px solid var(--border);margin:2px 3px 2px 0}.badge.blood{background:rgba(220,20,60,.14);border-color:var(--blood);color:var(--blood)}.badge.purple{background:rgba(75,0,130,.2);border-color:var(--purple);color:var(--purple-bright)}.badge.gold{background:rgba(184,134,11,.16);border-color:var(--gold);color:var(--gold-bright)}.badge.cyan{background:rgba(0,206,209,.14);border-color:var(--cyan);color:var(--cyan)}.badge.flash{background:rgba(0,255,136,.12);border-color:var(--flash);color:var(--flash)}.badge.danger{background:rgba(239,68,68,.14);border-color:var(--danger);color:var(--danger)}
.hpbar-wrap{margin:6px 0}.hpbar{height:10px;background:#1a0a0c;border-radius:5px;overflow:hidden;border:1px solid var(--border)}.hpbar>div{height:100%;transition:width .4s}.hpbar.blood>div{background:linear-gradient(90deg,#4a0510,#DC143C);width:100%}.hpbar.cyan>div{background:linear-gradient(90deg,#0e7490,#00CED1);width:100%}.hpbar.gold>div{background:linear-gradient(90deg,#5e4307,#e8b93f);width:100%}.hpbar.flash>div{background:linear-gradient(90deg,#0a6b35,#00FF88);width:100%}.hpbar.purple>div{background:linear-gradient(90deg,#2a0048,#8a4bd8);width:100%}
/* ── 抽签桶 ── */
#tube-box{text-align:center;padding:10px 0 4px}
.fortune-tube{width:120px;height:150px;margin:0 auto;position:relative;background:linear-gradient(180deg,#5a1418,#1f0d0f);border:2px solid var(--blood);border-radius:12px 12px 40% 40%/12px 12px 18% 18%;box-shadow:var(--shadow-blood);display:flex;align-items:flex-end;justify-content:center;cursor:pointer;overflow:visible}
.fortune-tube::before{content:'🏮';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:18px;z-index:3}
.stick-zone{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:88px;height:104px;z-index:2}
.stick{position:absolute;bottom:0;left:50%;width:6px;height:92px;border-radius:2px;background:linear-gradient(180deg,#e6b45a,#7a4a14);transform-origin:bottom center;box-shadow:0 1px 2px rgba(0,0,0,.4)}.stick.red{background:linear-gradient(180deg,#ff5a5a,#8a0f26)}.stick.gold{background:linear-gradient(180deg,#ffe07a,#a9761a)}.stick.cyan{background:linear-gradient(180deg,#7ae8ff,#0e7490)}.stick.dark{background:linear-gradient(180deg,#6b6b6b,#1a1a1a)}
.fortune-tube.shaking{animation:tubeShake .2s infinite}.fortune-tube.shaking .stick{animation:stickShake .16s infinite}
@keyframes tubeShake{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes stickShake{0%,100%{margin-left:-3px}50%{margin-left:3px}}
.fortune-tube.drawn{animation:tubeDraw .6s var(--ease)}@keyframes tubeDraw{0%{transform:rotate(0)}40%{transform:rotate(-6deg) translateY(-8px)}100%{transform:rotate(0) translateY(0)}}
#fly-stick{position:fixed;left:50%;top:50%;width:8px;height:120px;background:linear-gradient(180deg,#ffe07a,#8a5a1a);border-radius:3px;transform:translate(-50%,-50%) rotate(-20deg);z-index:260;display:none;box-shadow:0 0 14px rgba(232,185,63,.6)}
#fly-stick.fly{display:block;animation:flyStick .9s var(--ease)}
@keyframes flyStick{0%{transform:translate(-50%,160%) rotate(-6deg);opacity:1}45%{transform:translate(-50%,-50%) rotate(-18deg)}60%{transform:translate(-50%,-50%) rotate(-18deg)}100%{transform:translate(-50%,-50%) rotate(-18deg);opacity:1}}
.tube-grow{background:linear-gradient(180deg,#0e3a45,#071a20);border-color:var(--cyan);box-shadow:var(--shadow-cyan)}.tube-fortune{background:linear-gradient(180deg,#5a4a14,#201a08);border-color:var(--gold);box-shadow:var(--shadow-gold)}.tube-battle{background:linear-gradient(180deg,#3a0e1a,#180608);border-color:var(--blood);box-shadow:var(--shadow-blood)}.tube-shop{background:linear-gradient(180deg,#2a5a14,#0d2010);border-color:#6ab04c;box-shadow:0 0 18px rgba(106,176,76,.3)}.tube-disaster{background:linear-gradient(180deg,#1a1a2a,#06060c);border-color:#6b4b8a;box-shadow:0 0 18px rgba(107,75,138,.4)}.tube-story{background:linear-gradient(180deg,#5a5a5a,#1a1a1a);border-color:#fff;box-shadow:0 0 24px rgba(255,255,255,.4)}
.sign-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-top:12px;position:relative;overflow:hidden}.sign-card.reveal{animation:signIn .5s var(--ease)}@keyframes signIn{from{transform:translateY(-18px);opacity:0}to{transform:translateY(0);opacity:1}}
.sign-title{font-size:17px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:8px}.sign-body{font-size:13px;line-height:1.8}.sign-res{margin-top:8px;padding:9px;border-radius:8px;background:#0c0505;font-size:13px;line-height:1.7}.sign-level{display:inline-block;padding:3px 14px;border-radius:20px;font-size:15px;font-weight:900;letter-spacing:2px;margin-bottom:8px}.sl-super{color:#ffd700;background:rgba(255,215,0,.14);border:1px solid #ffd700;box-shadow:0 0 14px rgba(255,215,0,.4)}.sl-great{color:var(--flash);background:rgba(0,255,136,.12);border:1px solid var(--flash)}.sl-mid{color:var(--gold-bright);background:rgba(232,185,63,.12);border:1px solid var(--gold)}.sl-low{color:var(--warning);background:rgba(245,158,11,.12);border:1px solid var(--warning)}.sl-worst{color:var(--danger);background:rgba(220,20,60,.14);border:1px solid var(--danger)}
.sji{color:var(--success)}.sping{color:var(--gold-bright)}.sxiong{color:var(--danger)}.sjiyu{color:var(--flash)}
.stage{display:flex;justify-content:center;gap:8px;margin:10px 0;flex-wrap:wrap}.stage .st{font-size:10px;color:var(--dim);padding:3px 10px;border:1px solid var(--border);border-radius:20px}.stage .st.on{color:var(--flash);border-color:var(--flash);box-shadow:0 0 10px rgba(0,255,136,.25)}
.ro-card{background:linear-gradient(180deg,#22090c,#16090a);border:1px solid var(--blood);border-radius:var(--radius-md);padding:14px;margin-bottom:12px;box-shadow:var(--shadow-blood);position:relative}.ro-card .ro-title{font-size:15px;font-weight:900;color:var(--blood);letter-spacing:2px}.ro-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:8px}.ro-grid .rg{font-size:12px;display:flex;justify-content:space-between;border-bottom:1px dashed var(--border);padding:3px 0}.ro-grid .rg .k{color:var(--dim)}.ro-grid .rg .v{color:var(--gold-bright);font-weight:700}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.stat-grid .sg{font-size:13px;display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border)}.stat-grid .sg .k{color:var(--dim)}.stat-grid .sg .v{color:var(--text);font-weight:700}.stat-grid .sg .bar{flex:1;margin:0 8px;height:6px;background:#1a0a0c;border-radius:3px;overflow:hidden}.stat-grid .sg .bar>div{height:100%;background:linear-gradient(90deg,#4a0510,#DC143C)}.stat-grid .sg .info{cursor:pointer;color:var(--cyan);font-size:12px;margin-left:4px}
#overlay{position:fixed;inset:0;background:rgba(5,2,2,.92);display:none;align-items:center;justify-content:center;z-index:100;flex-direction:column;gap:16px;padding:16px}#overlay.active{display:flex}
#overlay .big{font-size:24px;font-weight:900;letter-spacing:3px;text-align:center;padding:0 20px;animation:signPop .4s var(--ease)}#overlay .big-sub{font-size:13px;color:var(--dim);text-align:center;padding:0 20px}@keyframes signPop{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
.menu-title{font-size:26px;font-weight:900;letter-spacing:5px;color:var(--blood);text-shadow:var(--shadow-blood);text-align:center;margin:18px 0 4px}.menu-sub{text-align:center;color:var(--dim);font-size:11px;letter-spacing:3px;margin-bottom:18px}
.menu-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;text-align:center;cursor:pointer;margin-bottom:12px;transition:.2s}.menu-card:active{transform:scale(.97)}.menu-card .mc-icon{font-size:28px;margin-bottom:6px}.menu-card .mc-name{font-size:16px;font-weight:700}.menu-card .mc-desc{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.6}.menu-card.blood{border-color:var(--blood);box-shadow:var(--shadow-blood)}.menu-card.purple{border-color:var(--purple);box-shadow:var(--shadow-purple)}.menu-card.gold{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--border);font-size:13px}.list-item:last-child{border-bottom:none}.list-item .li-label{color:var(--dim)}.list-item .li-val{color:var(--text);font-weight:600}
.reward-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:12px}.reward-row.locked{opacity:.45}.reward-row .rr-name{flex:1}
.fate-step-bar{display:flex;justify-content:center;gap:5px;margin-bottom:12px}.fate-step-bar .fs{width:22px;height:6px;border-radius:3px;background:var(--border)}.fate-step-bar .fs.done{background:var(--flash)}.fate-step-bar .fs.cur{background:var(--blood);box-shadow:0 0 6px var(--shadow-blood)}
#toast{position:fixed;top:48%;left:50%;transform:translate(-50%,-50%);background:rgba(10,3,3,.95);border:1px solid var(--blood);color:var(--bright);padding:12px 22px;border-radius:10px;font-size:14px;z-index:300;box-shadow:var(--shadow-blood);max-width:82%;text-align:center;display:none}
#domainfx{position:fixed;inset:0;z-index:250;pointer-events:none;display:none;overflow:hidden}#domainfx.active{display:block}.dfx-layer{position:absolute;inset:-20%;background:radial-gradient(circle at center,rgba(220,20,60,.5),rgba(75,0,130,.4) 40%,rgba(0,0,0,.95));opacity:0;transition:opacity .25s}#domainfx.fx .dfx-layer{opacity:1;animation:dfxPulse 1s ease-out}@keyframes dfxPulse{0%{transform:scale(.5);opacity:0}35%{opacity:1}100%{transform:scale(1.3);opacity:0}}.dfx-rune{position:absolute;font-size:64px;color:var(--blood);opacity:0;text-shadow:0 0 18px var(--blood);animation:dfxRune .9s ease-out}@keyframes dfxRune{0%{transform:scale(.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(2.4) rotate(40deg);opacity:0}}.dfx-crack{position:absolute;width:3px;height:30px;background:linear-gradient(180deg,var(--blood),transparent);opacity:0;animation:dfxCrack .7s ease-out}@keyframes dfxCrack{0%{opacity:0;transform:scaleY(0)}50%{opacity:1}100%{opacity:0;transform:scaleY(2)}}
.ai-log{display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow-y:auto;padding:4px 0}.ai-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.7;white-space:pre-wrap}.ai-msg.player{align-self:flex-end;background:rgba(220,20,60,.18);border:1px solid var(--blood)}.ai-msg.ai{align-self:flex-start;background:#120a0c;border:1px solid var(--border)}.ai-msg .ai-tag{display:block;font-size:10px;color:var(--dim);margin-bottom:4px}.ai-input-row{display:flex;gap:8px;margin-top:10px}.ai-input-row input{flex:1;background:#0c0505;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font-size:13px;font-family:var(--font);min-height:40px}.ai-input-row input:focus{outline:none;border-color:var(--blood)}
.cfg-field{margin-bottom:10px}.cfg-field label{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}.cfg-field input{width:100%;background:#0c0505;border:1px solid var(--border);border-radius:7px;color:var(--text);padding:9px;font-size:12px;font-family:var(--font)}.cfg-field input:focus{outline:none;border-color:var(--blood)}
.imp-textarea{width:100%;min-height:90px;background:#0c0505;border:1px solid var(--border);border-radius:7px;color:var(--text);padding:9px;font-size:11px;font-family:monospace;resize:vertical}
.mech-list{font-size:12px;line-height:1.9}.mech-list .ml{display:flex;gap:6px;padding:4px 0;border-bottom:1px dashed var(--border)}.mech-list .ml .n{color:var(--gold-bright);font-weight:700;flex-shrink:0;min-width:96px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;text-align:center;background:var(--bg-card)}.shop-item .price{color:var(--gold-bright);font-weight:700}.shop-item.owned{opacity:.5}
.dev-card{border:1px solid var(--purple);border-radius:var(--radius-md);padding:10px;margin-bottom:8px;background:rgba(75,0,130,.12)}.dev-card .dtitle{font-size:12px;color:var(--purple-bright);font-weight:700;margin-bottom:6px}
.notice-body{max-height:46vh;overflow-y:auto;line-height:1.8;font-size:13px}
/* 战斗面板 */
.battlerow{display:flex;gap:10px;margin-bottom:8px}.bunit{flex:1;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;background:var(--bg-card)}.bunit .uname{font-size:13px;font-weight:700;color:var(--blood)}.bunit .umeta{font-size:10px;color:var(--dim);margin:2px 0 6px}.bunit .ubar{margin:3px 0}.bunit .ulabel{font-size:10px;color:var(--dim);display:flex;justify-content:space-between}.bunit.vs{align-self:center;font-size:16px;font-weight:900;color:var(--gold-bright);flex:0 0 auto}.battle-log{max-height:26vh;overflow-y:auto;background:#0c0505;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:12px;line-height:1.6;margin-bottom:8px}.battle-log div.danger{color:var(--danger)}.battle-log div.skill{color:var(--purple-bright)}.battle-log div.crit{color:var(--flash)}.battle-log div.damage{color:var(--text)}.battle-log div.heal{color:var(--success)}
/* 流派取舍独立覆盖层（与剧情overlay分离，避免被覆盖） */
#flavor-ov{position:fixed;inset:0;background:rgba(5,2,2,.94);display:none;align-items:center;justify-content:center;z-index:150;flex-direction:column;gap:16px;padding:16px}#flavor-ov.active{display:flex}
#flavor-ov .big{font-size:20px;font-weight:900;letter-spacing:2px;text-align:center;color:var(--gold-bright)}#flavor-ov .fcard{width:100%;max-width:400px}
/* ── 更新公告 · 版本索引条 ── */
.notice-tabs{display:flex;gap:6px;overflow-x:auto;width:100%;max-width:400px;padding:6px 2px;margin-top:-6px}
.notice-tabs::-webkit-scrollbar{height:3px}
.notice-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ntab{flex:0 0 auto;padding:4px 11px;font-size:11px;font-family:var(--font);color:var(--dim);background:#0c0505;border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;line-height:1.6}
.ntab:active{transform:scale(.94)}
.ntab.on{color:var(--blood);border-color:var(--blood);background:rgba(220,20,60,.14);box-shadow:0 0 10px rgba(220,20,60,.25);font-weight:700}