/* ============================================================
 * 阴阳师 · 百鬼夜行 — 横屏水墨和风 UI
 * 设计基准：安卓横屏 16:9（如 2340×1080 / 1920×1080）
 * ============================================================ */

:root{
  --ink-0:#080a12;
  --ink-1:#0e1220;
  --ink-2:#151b2e;
  --ink-3:#1e2740;
  --line:rgba(214,180,110,.28);
  --gold:#e8c877;
  --gold-2:#ffd88a;
  --gold-deep:#8a6a24;
  --paper:#f4ecd8;
  --text:#e9e4d6;
  --text-dim:#a8a292;
  --red:#c0392b;
  --jade:#7fe3d4;
  --ssr:#ffc94a;
  --sr:#c06bff;
  --r:#4aa8ff;
  --n:#9aa7b8;
  --panel:linear-gradient(180deg,rgba(24,31,52,.92),rgba(12,16,28,.96));
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --radius:14px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  background:var(--ink-0);
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
h1,h2,h3{font-family:"KaiTi","STKaiti","Songti SC","SimSun",serif;font-weight:700;margin:0;}
button{font-family:inherit;}

#app{
  position:fixed;inset:0;
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background:
    radial-gradient(1200px 700px at 15% -10%,rgba(60,80,160,.28),transparent 60%),
    radial-gradient(900px 600px at 100% 110%,rgba(150,60,50,.20),transparent 60%),
    linear-gradient(180deg,#0b0f1c,#070911 70%);
  overflow:hidden;
}

/* ==================== 通用按钮 ==================== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:.55em 1.1em;
  font-size:clamp(12px,1.5vh,16px);
  color:var(--text);
  background:linear-gradient(180deg,rgba(40,50,78,.95),rgba(20,26,44,.95));
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  transition:transform .12s ease,filter .18s ease,box-shadow .18s ease;
  letter-spacing:.06em;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.42;filter:grayscale(.6);cursor:not-allowed;}
.btn-gold{
  background:linear-gradient(180deg,#f3d289,#c39c3f 55%,#8a6a24);
  color:#22190a;border-color:#ffe9b0;font-weight:700;
  box-shadow:0 4px 14px rgba(232,200,119,.28),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-blue{background:linear-gradient(180deg,#4f8bd6,#2a5389);border-color:#9dc4f0;color:#eaf4ff;}
.btn-red{background:linear-gradient(180deg,#d1554a,#8e2b23);border-color:#ffb3a6;color:#fff;}
.btn-ssr{background:linear-gradient(180deg,#ffd977,#e0663f);border-color:#ffe9b0;color:#2a1405;font-weight:700;}
.btn-ink{background:linear-gradient(180deg,rgba(30,38,60,.9),rgba(14,18,30,.9));}
.btn-lg{font-size:clamp(14px,2vh,20px);padding:.7em 1.6em;border-radius:12px;}
.btn-mini{font-size:clamp(11px,1.35vh,14px);padding:.35em .7em;border-radius:8px;min-height:clamp(30px,4vh,38px);}
.btn-back{font-size:clamp(11px,1.4vh,15px);}
.hidden{display:none !important;}

/* ==================== 屏幕容器 ==================== */
.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  padding:inherit;
}
.screen.active{display:flex;animation:screenIn .28s ease;}
@keyframes screenIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.screen-head{
  display:flex;align-items:center;gap:1em;
  padding:.5em 1em;
  flex:0 0 auto;
}
.screen-head h2{
  font-size:clamp(16px,2.6vh,24px);
  letter-spacing:.3em;
  color:var(--gold-2);
  text-shadow:0 2px 10px rgba(232,200,119,.35);
}
.head-spacer{flex:1;}
.screen-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 1em 1em;-webkit-overflow-scrolling:touch;}

/* ==================== 标题画面 ==================== */
#screen-title{align-items:center;justify-content:center;}
.title-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(600px 400px at 50% 20%,rgba(232,200,119,.16),transparent 65%),
    radial-gradient(500px 500px at 12% 90%,rgba(120,60,180,.18),transparent 70%),
    radial-gradient(500px 500px at 88% 85%,rgba(180,60,60,.18),transparent 70%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;}50%{opacity:1;}}
.title-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6em;padding:1em;text-align:center;}
.title-logo{
  font-family:"KaiTi","STKaiti",serif;
  font-size:clamp(46px,14vh,120px);
  letter-spacing:.16em;
  color:#fff;
  text-shadow:0 0 18px rgba(232,200,119,.75),0 0 46px rgba(232,200,119,.4),0 6px 18px rgba(0,0,0,.8);
  animation:logoGlow 3.6s ease-in-out infinite;
}
@keyframes logoGlow{0%,100%{filter:brightness(1);}50%{filter:brightness(1.18);}}
.title-sub{
  font-size:clamp(12px,2vh,18px);letter-spacing:.45em;color:var(--gold);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.35em 1.4em;
}
.title-buttons{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center;margin-top:.8em;}
.title-hint{font-size:clamp(10px,1.3vh,13px);color:var(--text-dim);letter-spacing:.1em;}

/* ==================== 顶部资源栏 ==================== */
#topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:.6em;
  padding:.4em .9em;
  background:linear-gradient(180deg,rgba(18,24,42,.96),rgba(10,14,24,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.player-chip{display:flex;align-items:center;gap:.45em;padding:.25em .7em;border:1px solid var(--line);border-radius:999px;background:rgba(10,14,26,.7);}
.chip-avatar{font-size:clamp(14px,2vh,20px);}
.chip-name{font-size:clamp(11px,1.5vh,15px);color:var(--paper);max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip-lv{font-size:clamp(10px,1.3vh,13px);color:var(--gold);border-left:1px solid var(--line);padding-left:.45em;}
.resbar{display:flex;align-items:center;gap:.5em;flex:1;overflow-x:auto;scrollbar-width:none;}
.resbar::-webkit-scrollbar{display:none;}
.res{
  display:flex;align-items:center;gap:.3em;
  font-size:clamp(11px,1.5vh,15px);color:var(--paper);
  background:rgba(8,11,20,.72);border:1px solid var(--line);border-radius:999px;
  padding:.22em .7em;white-space:nowrap;
}
.res-jade{border-color:rgba(127,227,212,.4);}
.res-gold{border-color:rgba(232,200,119,.45);}
.res-stamina{border-color:rgba(255,157,94,.4);}

/* ==================== 主界面 ==================== */
#main-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:1em;min-height:0;}
.stage-card{
  display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center;
  padding:1.2em 2.4em;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  max-width:min(78vw,720px);
}
.stage-avatar{font-size:clamp(40px,11vh,90px);filter:drop-shadow(0 0 18px rgba(232,200,119,.5));animation:float 4s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.stage-title{font-family:"KaiTi",serif;font-size:clamp(20px,4vh,36px);letter-spacing:.28em;color:var(--gold-2);}
.stage-sub{font-size:clamp(11px,1.6vh,16px);color:var(--text-dim);}
.stage-hint{font-size:clamp(11px,1.5vh,15px);color:var(--paper);opacity:.85;margin-top:.2em;}

#dock{
  flex:0 0 auto;display:flex;justify-content:center;gap:.5em;
  padding:.45em .8em calc(.45em + var(--safe-b));
  background:linear-gradient(180deg,rgba(12,16,28,.6),rgba(8,11,20,.96));
  border-top:1px solid var(--line);
}
.dock-btn{
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  min-width:clamp(56px,9vh,86px);
  padding:.4em .6em;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,rgba(38,48,74,.85),rgba(16,21,36,.9));
  border:1px solid var(--line);color:var(--text);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s;
}
.dock-btn .ic{font-size:clamp(18px,3.2vh,28px);}
.dock-btn span:last-child{font-size:clamp(10px,1.4vh,14px);letter-spacing:.12em;}
.dock-btn:active{transform:scale(.95);box-shadow:0 0 18px rgba(232,200,119,.35);border-color:var(--gold);}

/* ==================== 探索 ==================== */
.stage-list{display:flex;flex-direction:column;gap:.5em;padding-bottom:1em;}
.stage-card-row{
  display:flex;align-items:center;gap:.8em;
  padding:.6em .9em;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
}
.stage-card-row.locked{opacity:.5;}
.stage-no{font-family:"KaiTi",serif;font-size:clamp(12px,1.7vh,17px);color:var(--gold);min-width:4.5em;}
.stage-info{flex:1;min-width:0;}
.stage-name{font-size:clamp(13px,1.9vh,19px);color:var(--paper);}
.stage-meta{font-size:clamp(10px,1.4vh,14px);color:var(--text-dim);}
.stage-side{display:flex;flex-direction:column;align-items:flex-end;gap:.25em;}
.stage-first{font-size:clamp(10px,1.3vh,13px);color:var(--jade);}
.tag-clear{font-size:.72em;color:#0d1622;background:var(--jade);border-radius:6px;padding:.05em .4em;}

/* ==================== 召唤 ==================== */
.summon-layout{display:flex;gap:1em;align-items:flex-start;flex-wrap:wrap;}
.summon-left{flex:1.1;min-width:min(100%,380px);display:flex;flex-direction:column;gap:.7em;}
.summon-right{flex:1;min-width:min(100%,300px);}
.summon-pool{padding:.9em 1.1em;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);}
.pool-title{font-family:"KaiTi",serif;font-size:clamp(14px,2vh,20px);color:var(--gold-2);margin-bottom:.5em;}
.pool-rates{display:flex;flex-direction:column;gap:.35em;}
.rate-row{display:flex;align-items:center;gap:.6em;font-size:clamp(11px,1.5vh,14px);}
.rate-row>span:first-child{width:3.2em;font-weight:700;}
.rate-row>span:last-child{width:3.6em;text-align:right;color:var(--text-dim);}
.rate-bar{flex:1;height:.55em;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;}
.rate-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--sr));}
.rar-SSR{color:var(--ssr);} .rar-SR{color:var(--sr);} .rar-R{color:var(--r);} .rar-N{color:var(--n);}
.pool-pity{margin-top:.6em;font-size:clamp(11px,1.5vh,14px);color:var(--paper);}
.pool-pity b{color:var(--ssr);}
.pool-note{font-size:clamp(10px,1.3vh,13px);color:var(--text-dim);margin-top:.2em;}
.summon-btns{display:flex;flex-wrap:wrap;gap:.6em;}
.pool-roster-title{font-size:clamp(12px,1.7vh,16px);color:var(--gold);margin-bottom:.5em;letter-spacing:.1em;}
.pool-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.4em;max-height:46vh;overflow-y:auto;padding-right:.3em;}
.mini-card{
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  padding:.35em .2em;border-radius:10px;background:rgba(10,14,26,.75);border:1px solid var(--line);
}
.mini-emoji{font-size:clamp(16px,2.6vh,24px);}
.mini-name{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* ==================== 式神录 ==================== */
.codex-filter{display:flex;gap:.4em;padding-bottom:.6em;flex-wrap:wrap;}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55em;padding-bottom:1em;}
.codex-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.1em;
  padding:.5em .3em;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,rgba(30,39,64,.9),rgba(12,16,28,.95));
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .18s;
}
.codex-card:active{transform:scale(.96);}
.codex-card.not-owned{filter:grayscale(.85) brightness(.7);}
.codex-card.rar-SSR{border-color:rgba(255,201,74,.65);box-shadow:0 0 16px rgba(255,201,74,.25),var(--shadow);}
.codex-card.rar-SR{border-color:rgba(192,107,255,.6);}
.codex-card.rar-R{border-color:rgba(74,168,255,.5);}
.cc-top{display:flex;justify-content:space-between;width:100%;font-size:clamp(9px,1.2vh,12px);padding:0 .2em;}
.cc-rarity{font-weight:700;}
.cc-emoji{font-size:clamp(26px,4.6vh,42px);line-height:1.1;}
.cc-name{font-size:clamp(10px,1.4vh,14px);color:var(--paper);}
.cc-own{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}

/* ==================== 队伍 ==================== */
.team-layout{display:flex;gap:1em;flex-wrap:wrap;align-items:flex-start;padding-bottom:1em;}
.team-slots{flex:1.2;min-width:min(100%,360px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.8em;box-shadow:var(--shadow);}
.team-roster{flex:1;min-width:min(100%,300px);}
.team-title{font-size:clamp(12px,1.7vh,16px);color:var(--gold);letter-spacing:.1em;margin-bottom:.5em;}
.slot-row{display:flex;gap:.5em;justify-content:center;flex-wrap:wrap;}
.team-slot{
  width:clamp(64px,11vh,104px);
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  padding:.5em .3em;border-radius:12px;border:1px dashed var(--line);
  background:rgba(8,11,20,.65);cursor:pointer;
}
.team-slot.filled{border-style:solid;background:linear-gradient(180deg,rgba(34,44,70,.92),rgba(12,16,28,.95));}
.slot-emoji{font-size:clamp(24px,4.4vh,40px);}
.slot-name{font-size:clamp(10px,1.4vh,14px);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.slot-lv{font-size:clamp(9px,1.2vh,12px);color:var(--gold);}
.slot-power{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.slot-empty{font-size:clamp(20px,3.6vh,32px);color:var(--text-dim);}
.team-tip{font-size:clamp(10px,1.3vh,13px);color:var(--text-dim);text-align:center;margin-top:.6em;}
.roster-grid{display:flex;flex-direction:column;gap:.4em;max-height:52vh;overflow-y:auto;padding-right:.3em;}
.roster-item{
  display:flex;align-items:center;gap:.6em;padding:.4em .6em;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,rgba(28,36,58,.9),rgba(12,16,28,.9));border:1px solid var(--line);
}
.roster-item.on{border-color:var(--gold);box-shadow:0 0 12px rgba(232,200,119,.22);}
.ri-emoji{font-size:clamp(18px,3vh,28px);}
.ri-info{flex:1;min-width:0;}
.ri-name{font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.ri-lv{color:var(--gold);font-size:.85em;}
.ri-meta{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.ri-state{font-size:clamp(9px,1.2vh,12px);color:var(--gold);}

/* ==================== 养成 ==================== */
.upg-layout{display:flex;gap:1em;flex-wrap:wrap;align-items:flex-start;padding-bottom:1em;}
.upg-list{flex:1;min-width:min(100%,300px);}
.upg-title{font-size:clamp(12px,1.7vh,16px);color:var(--gold);margin-bottom:.5em;letter-spacing:.1em;}
.upg-item{
  display:flex;align-items:center;gap:.6em;padding:.4em .6em;border-radius:10px;cursor:pointer;margin-bottom:.35em;
  background:linear-gradient(90deg,rgba(28,36,58,.88),rgba(12,16,28,.9));border:1px solid var(--line);
}
.upg-item.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(232,200,119,.25);}
.ui-emoji{font-size:clamp(18px,3vh,28px);}
.ui-info{flex:1;min-width:0;}
.ui-name{font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.ui-lv{color:var(--gold);font-size:.85em;}
.ui-meta{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.upg-detail{flex:1.25;min-width:min(100%,340px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9em;box-shadow:var(--shadow);}
.upg-empty{text-align:center;color:var(--text-dim);padding:2em 0;font-size:clamp(12px,1.8vh,17px);}
.upg-head{display:flex;gap:.8em;align-items:center;padding-bottom:.6em;border-bottom:1px solid var(--line);}
.uh-emoji{font-size:clamp(34px,6vh,56px);}
.uh-info{flex:1;min-width:0;}
.uh-name{font-size:clamp(14px,2.1vh,21px);color:var(--paper);}
.uh-lv{font-size:clamp(11px,1.5vh,15px);color:var(--gold);}
.uh-bar{height:.6em;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:.4em;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));transition:width .3s;}
.uh-bar-txt{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.upg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.4em;margin:.7em 0;}
.us-row{display:flex;justify-content:space-between;gap:.4em;font-size:clamp(10px,1.4vh,14px);background:rgba(8,11,20,.6);border:1px solid var(--line);border-radius:8px;padding:.25em .5em;}
.us-row span{color:var(--text-dim);}
.us-row b{color:var(--paper);}
.upg-actions{display:flex;flex-direction:column;gap:.4em;}
.upg-materials{font-size:clamp(10px,1.3vh,13px);color:var(--text-dim);margin-top:.6em;}
.upg-materials b{color:var(--gold);}

/* ==================== 战斗 ==================== */
#screen-battle{padding:0;}
#battle-stage{position:absolute;inset:0;overflow:hidden;}
#battle-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 50% -10%,rgba(90,60,140,.4),transparent 65%),
    radial-gradient(700px 400px at 10% 100%,rgba(150,60,50,.22),transparent 65%),
    linear-gradient(180deg,#141a2e,#0a0d16 70%);
}
#battle-sky::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 70% 20%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 40% 60%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.6px 1.6px at 85% 70%,rgba(255,255,255,.3),transparent);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.5;}50%{opacity:1;}}

.battle-row{
  position:absolute;left:0;right:0;
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,1.6vw,26px);
  padding:0 1em;
}
#enemy-row{top:clamp(30px,9vh,92px);align-items:flex-start;height:34%;}
#player-row{bottom:clamp(88px,20vh,150px);height:36%;align-items:flex-end;}

.battle-unit{
  position:relative;
  width:clamp(58px,10vh,104px);
  display:flex;flex-direction:column;align-items:center;gap:.15em;
  padding:.45em .3em;border-radius:14px;
  background:linear-gradient(180deg,rgba(26,34,56,.85),rgba(9,12,22,.92));
  border:1px solid var(--line);
  transition:transform .18s ease,box-shadow .2s ease,opacity .3s;
  animation:idle 3.4s ease-in-out infinite;
}
.battle-unit:nth-child(2n){animation-delay:.5s;}
.battle-unit:nth-child(3n){animation-delay:1.1s;}
@keyframes idle{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.battle-unit.rar-SSR{border-color:rgba(255,201,74,.7);box-shadow:0 0 14px rgba(255,201,74,.25);}
.battle-unit.rar-SR{border-color:rgba(192,107,255,.6);}
.battle-unit.boss{border-color:rgba(255,90,80,.8);box-shadow:0 0 22px rgba(255,80,70,.35);}
.battle-unit.bu-enemy{background:linear-gradient(180deg,rgba(52,26,30,.85),rgba(16,8,10,.92));}
.bu-boss{position:absolute;top:-.7em;font-size:clamp(8px,1.1vh,11px);background:var(--red);color:#fff;border-radius:6px;padding:.05em .4em;letter-spacing:.1em;}
.bu-emoji{font-size:clamp(24px,4.6vh,44px);line-height:1.1;}
.bu-name{font-size:clamp(9px,1.25vh,13px);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bu-hpwrap{width:100%;height:.5em;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.bu-hp{height:100%;width:100%;background:linear-gradient(90deg,#5effb0,#2fd48a);transition:width .3s ease;}
.bu-meta{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.bu-status{display:flex;gap:.1em;flex-wrap:wrap;justify-content:center;min-height:1em;}
.st{font-size:clamp(8px,1.1vh,12px);}
.battle-unit.low{animation:lowHp 1s ease-in-out infinite;}
@keyframes lowHp{0%,100%{box-shadow:0 0 0 rgba(255,60,60,0);}50%{box-shadow:0 0 18px rgba(255,60,60,.6);}}
.battle-unit.cast{transform:translateY(-10px) scale(1.06);box-shadow:0 0 22px rgba(232,200,119,.5);}
.battle-unit.hit{animation:shake .24s ease;}
.battle-unit.hit-crit{animation:shakeHard .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}
@keyframes shakeHard{0%,100%{transform:translate(0,0);}20%{transform:translate(-11px,3px);}60%{transform:translate(11px,-3px);}}
.battle-unit.dead{opacity:.32;filter:grayscale(1);transform:scale(.86) rotate(-6deg);animation:none;}
.battle-unit.targetable{cursor:pointer;border-color:var(--gold);box-shadow:0 0 20px rgba(232,200,119,.55);animation:targetPulse 1s ease-in-out infinite;}
@keyframes targetPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.05);}}
.battle-unit.status-flash{filter:brightness(1.5);}

#battle-log{
  position:absolute;left:.8em;top:clamp(30px,9vh,92px);
  width:min(30vw,320px);max-height:34vh;overflow:hidden;
  font-size:clamp(10px,1.35vh,13px);color:var(--text-dim);
  background:rgba(6,9,16,.5);border-left:2px solid var(--line);border-radius:8px;
  padding:.4em .6em;line-height:1.5;
}
.log-line{animation:logIn .3s ease;}
@keyframes logIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}

#battle-hud{position:absolute;left:0;right:0;bottom:0;padding:0 .8em calc(.5em + var(--safe-b));display:flex;flex-direction:column;gap:.4em;}
#turn-indicator{
  align-self:center;font-family:"KaiTi",serif;font-size:clamp(12px,1.9vh,18px);
  color:var(--gold-2);letter-spacing:.16em;text-shadow:0 2px 10px rgba(232,200,119,.4);
}
#turn-indicator.pulse{animation:turnPulse .5s ease;}
@keyframes turnPulse{0%{transform:scale(.92);opacity:.6;}100%{transform:scale(1);opacity:1;}}
#action-bar{
  display:flex;flex-direction:column;gap:.4em;align-items:center;
  background:linear-gradient(180deg,rgba(14,19,34,.9),rgba(8,11,20,.96));
  border:1px solid var(--line);border-radius:14px;padding:.5em .7em;min-height:3.4em;justify-content:center;
}
.act-info{font-size:clamp(11px,1.5vh,15px);color:var(--gold);}
.act-btns{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center;}
.act-btn{font-size:clamp(11px,1.5vh,15px);}
.act-ic{font-size:1.15em;}

.float-num{
  position:fixed;z-index:60;pointer-events:none;
  font-family:"KaiTi",serif;font-weight:700;
  font-size:clamp(18px,2.8vh,30px);
  animation:floatUp 1s ease-out forwards;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.7);}25%{opacity:1;transform:translateY(-6px) scale(1.15);}100%{opacity:0;transform:translateY(-46px) scale(1);}}
.fn-dmg{color:#ffe9e6;}
.fn-crit{color:#ffcf4a;font-size:clamp(26px,4.2vh,46px);}
.fn-heal{color:#7effc0;}
.fn-shield{color:#d9a6ff;font-size:clamp(14px,2vh,22px);}
.fn-burn{color:#ff8f6b;}
.fn-poison{color:#c8ff7a;}
.fn-buff{color:#9fe8ff;font-size:clamp(13px,1.9vh,20px);}
.fn-debuff{color:#b9b2a2;font-size:clamp(13px,1.9vh,20px);}

/* 战斗结算 */
.overlay{
  position:absolute;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;
  background:radial-gradient(circle at 50% 40%,rgba(10,14,24,.82),rgba(4,6,12,.96));
  animation:screenIn .3s ease;padding:1em;text-align:center;
}
.result-title{font-family:"KaiTi",serif;font-size:clamp(24px,4.4vh,44px);letter-spacing:.2em;}
.result-title.win{color:var(--gold-2);text-shadow:0 0 26px rgba(232,200,119,.6);}
.result-title.lose{color:#ff8f8a;text-shadow:0 0 22px rgba(255,90,80,.5);}
.result-first{color:var(--jade);font-size:clamp(12px,1.7vh,17px);}
.result-sub{color:var(--text-dim);font-size:clamp(11px,1.5vh,15px);}
.reward-row{display:flex;flex-wrap:wrap;gap:.4em;justify-content:center;max-width:80vw;}
.reward-chip{
  font-size:clamp(11px,1.5vh,15px);color:var(--paper);
  background:rgba(10,14,26,.85);border:1px solid var(--line);border-radius:999px;padding:.25em .8em;
  animation:chipIn .35s ease backwards;
}
.reward-chip:nth-child(2){animation-delay:.08s;}
.reward-chip:nth-child(3){animation-delay:.16s;}
.reward-chip:nth-child(4){animation-delay:.24s;}
.reward-chip:nth-child(5){animation-delay:.32s;}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9);}to{opacity:1;transform:none;}}
.result-btns{display:flex;gap:.7em;flex-wrap:wrap;justify-content:center;}

/* ==================== 弹层 ==================== */
.modal-root{position:fixed;inset:0;z-index:80;}
.modal-mask{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,10,.72);backdrop-filter:blur(3px);padding:1em;
  animation:screenIn .22s ease;
}
.modal{
  position:relative;width:min(92vw,560px);max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:.6em;align-items:stretch;
  padding:1.1em;border-radius:18px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.modal-wide{width:min(94vw,880px);}
.modal-summon{width:min(96vw,1000px);background:linear-gradient(180deg,rgba(28,20,40,.96),rgba(8,10,18,.98));}
.modal-title{font-family:"KaiTi",serif;font-size:clamp(16px,2.4vh,24px);color:var(--gold-2);letter-spacing:.2em;text-align:center;}
.gold-text{color:var(--gold-2);}
.modal-text{font-size:clamp(12px,1.6vh,16px);color:var(--paper);line-height:1.7;}
.modal .btn{align-self:center;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:clamp(12px,1.6vh,16px);padding:.35em .2em;border-bottom:1px dashed rgba(214,180,110,.16);}
.set-row input[type=range]{flex:1;max-width:50%;accent-color:#e8c877;}
.set-tip{text-align:center;font-size:clamp(10px,1.3vh,13px);color:var(--text-dim);}
.help-text{font-size:clamp(12px,1.6vh,16px);line-height:1.9;color:var(--paper);}

/* 签到 */
.signin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;}
.signin-cell{
  display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.45em .2em;border-radius:10px;
  background:rgba(8,11,20,.7);border:1px solid var(--line);
}
.signin-cell.done{opacity:.5;}
.signin-cell.today{border-color:var(--gold);box-shadow:0 0 14px rgba(232,200,119,.3);}
.signin-ic{font-size:clamp(16px,2.6vh,24px);}
.signin-val{font-size:clamp(11px,1.4vh,15px);color:var(--paper);}
.signin-day{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.signin-foot{text-align:center;font-size:clamp(11px,1.4vh,14px);color:var(--jade);}
.signin-reward{display:flex;flex-wrap:wrap;gap:.4em;justify-content:center;}

/* 成就 */
.ach-count{text-align:center;font-size:clamp(11px,1.4vh,14px);color:var(--jade);}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5em;}
.ach-cell{
  display:flex;flex-direction:column;gap:.15em;padding:.5em .6em;border-radius:10px;
  background:rgba(8,11,20,.72);border:1px solid var(--line);
}
.ach-cell.done{border-color:var(--gold);background:linear-gradient(180deg,rgba(60,48,20,.5),rgba(12,16,28,.85));}
.ach-ic{font-size:clamp(16px,2.4vh,22px);}
.ach-name2{font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.ach-desc2{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.ach-reward{font-size:clamp(9px,1.2vh,12px);color:var(--gold);}
.ach-name{text-align:center;font-size:clamp(15px,2.2vh,22px);color:var(--paper);}
.ach-desc{text-align:center;font-size:clamp(11px,1.4vh,14px);color:var(--text-dim);}

/* 式神详情 */
.detail-head{display:flex;gap:.9em;align-items:center;padding-bottom:.6em;border-bottom:1px solid var(--line);}
.detail-head.rar-SSR .dt-emoji{filter:drop-shadow(0 0 16px rgba(255,201,74,.7));}
.dt-emoji{font-size:clamp(38px,6.6vh,64px);}
.dt-info{flex:1;min-width:0;}
.dt-name{font-size:clamp(15px,2.2vh,22px);color:var(--paper);}
.dt-rarity{font-weight:700;}
.dt-role{font-size:.7em;color:var(--gold);border:1px solid var(--line);border-radius:6px;padding:.05em .4em;}
.dt-title{font-size:clamp(11px,1.4vh,14px);color:var(--gold);}
.dt-desc{font-size:clamp(10px,1.35vh,13px);color:var(--text-dim);margin-top:.2em;}
.detail-skills{display:flex;flex-direction:column;gap:.45em;}
.sk{display:flex;gap:.6em;background:rgba(8,11,20,.6);border:1px solid var(--line);border-radius:10px;padding:.45em .6em;}
.sk-ic{font-size:clamp(16px,2.4vh,22px);}
.sk b{font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.sk .cd{font-size:.75em;color:var(--jade);}
.sk-desc{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);line-height:1.55;}
.detail-rows{display:flex;flex-direction:column;gap:.4em;}
.dt-own-row{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;background:rgba(8,11,20,.6);border:1px solid var(--line);border-radius:10px;padding:.4em .6em;}
.dt-mini{font-size:clamp(10px,1.4vh,14px);color:var(--gold);}
.dt-stats{flex:1;font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);}
.dt-actions{display:flex;gap:.35em;}

/* 召唤动画 */
.summon-stage{display:flex;flex-direction:column;align-items:center;gap:.7em;width:100%;}
.summon-anim-title{font-family:"KaiTi",serif;font-size:clamp(14px,2.1vh,20px);color:var(--gold-2);letter-spacing:.2em;text-align:center;}
.summon-cards{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;width:100%;}
.summon-card{
  width:clamp(56px,11vh,96px);height:clamp(80px,16vh,140px);
  perspective:700px;
}
.sc-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.summon-card .sc-inner{transform:rotateY(180deg);}
.summon-card.flip .sc-inner{transform:rotateY(0deg);}
.sc-face{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  border-radius:10px;border:1px solid var(--line);backface-visibility:hidden;
  background:linear-gradient(180deg,rgba(30,38,62,.95),rgba(10,13,24,.98));
}
.sc-face.rar-SSR{background:linear-gradient(180deg,#5a4520,#241a08);border-color:var(--ssr);box-shadow:0 0 22px rgba(255,201,74,.55);}
.sc-face.rar-SR{background:linear-gradient(180deg,#3f2a58,#1a1026);border-color:var(--sr);box-shadow:0 0 16px rgba(192,107,255,.4);}
.sc-face.rar-R{background:linear-gradient(180deg,#243a58,#0e1626);border-color:var(--r);}
.ssr-card{animation:ssrPop .6s ease;}
@keyframes ssrPop{0%{transform:scale(.6);}60%{transform:scale(1.12);}100%{transform:scale(1);}}
.sc-emoji{font-size:clamp(22px,4.4vh,42px);}
.sc-name{font-size:clamp(9px,1.4vh,14px);color:var(--paper);}
.sc-rarity{font-size:clamp(8px,1.15vh,12px);color:var(--gold);}

/* ==================== Toast ==================== */
#achievement-toast{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%) translateY(14px);
  z-index:90;padding:.5em 1.2em;border-radius:999px;
  background:linear-gradient(180deg,rgba(24,31,52,.97),rgba(10,14,26,.97));
  border:1px solid var(--gold);color:var(--paper);
  font-size:clamp(11px,1.5vh,15px);box-shadow:0 8px 26px rgba(0,0,0,.6);
  opacity:0;transition:opacity .25s ease,transform .25s ease;max-width:80vw;text-align:center;
}
#achievement-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:70;}

/* ==================== 竖屏提示（安卓需横屏） ==================== */
#rotate-tip{
  position:fixed;inset:0;z-index:200;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1em;
  background:linear-gradient(180deg,#0b0f1c,#070911);text-align:center;padding:2em;
}
@media (orientation:portrait) and (max-width:900px){
  #rotate-tip{display:flex;}
  #app{filter:blur(2px);}
}
.rotate-icon{font-size:64px;animation:rotateHint 2s ease-in-out infinite;}
@keyframes rotateHint{0%,40%{transform:rotate(0);}60%,100%{transform:rotate(90deg);}}
.rotate-text{font-family:"KaiTi",serif;font-size:22px;color:var(--gold-2);letter-spacing:.2em;}

/* ==================== 小屏 / 低分辨率适配 ==================== */
@media (max-height:420px){
  #battle-log{max-height:26vh;font-size:10px;}
  .stage-card{padding:.7em 1.2em;}
  #dock{padding:.3em .5em;}
  .dock-btn{min-width:52px;padding:.3em .4em;}
}
@media (min-width:1100px){
  .codex-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
}
/* 横屏超宽比例（如 20:9）时压缩留白 */
@media (min-aspect-ratio:19/9){
  #enemy-row{top:6vh;}
  #player-row{bottom:16vh;}
}
/* ==================== 美术资源（程序化 SVG 立绘 / 场景） ==================== */
.art-img{
  display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
  width:auto;max-width:100%;object-fit:contain;
}
/* —— 标题画面：主视觉 + SSR 陈列 —— */
#screen-title .title-bg{
  background-size:cover;background-position:center 42%;
  filter:saturate(.95) brightness(.62);
}
#screen-title::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,rgba(8,10,20,.28),rgba(8,10,20,.82) 100%);
}
.title-showcase{
  position:absolute;left:0;right:0;bottom:1.2vh;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(4px,1.4vw,20px);pointer-events:none;z-index:2;
}
.ts-item{filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));animation:float 5s ease-in-out infinite;animation-delay:var(--d,0s);opacity:.96;}
.ts-0{transform:scale(1);} .ts-1{transform:scale(.92);} .ts-2{transform:scale(1.04);} .ts-3{transform:scale(.9);} .ts-4{transform:scale(.96);}
.art-ts{height:clamp(90px,24vh,210px);width:auto;}
/* —— 主界面主视觉卡片 —— */
.stage-card{position:relative;overflow:hidden;background-size:cover;background-position:center 40%;}
.stage-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,22,.42),rgba(10,12,22,.88));pointer-events:none;}
.stage-card>*{position:relative;z-index:1;}
.art-hero{height:clamp(56px,15vh,132px);width:auto;filter:drop-shadow(0 0 18px rgba(232,200,119,.5));animation:float 4s ease-in-out infinite;}
/* —— 探索关卡场景缩略图 —— */
.stage-thumb{
  position:relative;flex:0 0 auto;width:clamp(84px,15vw,168px);aspect-ratio:16/9;
  border-radius:10px;border:1px solid var(--line);overflow:hidden;
  background-size:cover;background-position:center;box-shadow:inset 0 0 24px rgba(0,0,0,.5);
}
.stage-thumb.dim{filter:grayscale(.85) brightness(.5);}
.stage-chapter{
  position:absolute;left:0;right:0;bottom:0;padding:.15em .5em;
  font-size:clamp(9px,1.2vh,12px);color:var(--gold-2);text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
}
/* —— 式神录 —— */
.cc-emoji{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(30px,5vh,48px);}
.art-cc{height:clamp(46px,8.4vh,84px);width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.cc-card:hover .art-cc{transform:translateY(-2px) scale(1.03);transition:transform .18s ease;}
.art-locked{filter:brightness(.16) grayscale(1) contrast(.8);opacity:.85;}
.cc-lock{position:absolute;font-size:clamp(14px,2.4vh,24px);color:rgba(255,255,255,.5);}
/* —— 召唤 —— */
.art-sc{height:clamp(44px,9vh,92px);width:auto;}
.art-mini{height:clamp(22px,3.6vh,36px);width:auto;}
.sc-face.rar-SSR .art-sc{filter:drop-shadow(0 0 12px rgba(255,201,74,.6));}
/* —— 队伍 / 养成 —— */
.art-slot{height:clamp(34px,6.4vh,64px);width:auto;}
.art-ri{height:clamp(26px,4.4vh,44px);width:auto;}
.art-ui{height:clamp(26px,4.4vh,44px);width:auto;}
.art-uh{height:clamp(52px,9.6vh,96px);width:auto;filter:drop-shadow(0 0 14px rgba(232,200,119,.4));}
.art-dt{height:clamp(58px,11vh,116px);width:auto;}
.slot-emoji{display:flex;align-items:center;justify-content:center;min-height:clamp(38px,6.8vh,68px);border-radius:12px;}
/* —— 战斗 —— */
.bu-emoji{display:flex;align-items:flex-end;justify-content:center;min-height:clamp(38px,7.6vh,74px);}
.art-bu{height:clamp(40px,8.2vh,82px);width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));}
.act-info{display:flex;align-items:center;gap:.4em;}
.art-act{height:clamp(22px,3.4vh,34px);width:auto;}
/* —— 顶栏徽记 —— */
.chip-torii{height:clamp(16px,2.3vh,24px);width:auto;display:block;}
/* 战斗中场景背景（含呼吸感） */
#battle-sky{background-repeat:no-repeat;transition:background-image .5s ease;}

/* 结算：新关卡解锁提示 */
.result-unlock{
  font-size:clamp(12px,1.8vh,18px);color:var(--jade);
  border:1px solid rgba(127,224,208,.4);background:rgba(127,224,208,.08);
  border-radius:10px;padding:.3em .9em;margin:.2em 0;
  animation:unlockPulse 1.6s ease-in-out infinite;
}
@keyframes unlockPulse{0%,100%{box-shadow:0 0 0 rgba(127,224,208,0);}50%{box-shadow:0 0 18px rgba(127,224,208,.35);}}

/* ==================== 战斗特效（Fx） ==================== */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;}
.fx{position:absolute;transform:translate(-50%,-50%);width:0;height:0;}
.fx-p{
  position:absolute;left:0;top:0;width:.55em;height:.55em;margin:-.27em 0 0 -.27em;
  background:var(--c,#fff);border-radius:40%;
  box-shadow:0 0 8px var(--c,#fff),0 0 16px var(--c,#fff);
  animation:fxFly .62s cubic-bezier(.2,.7,.3,1) forwards;
}
.fx-fire .fx-p{border-radius:60% 40% 55% 45%;}
.fx-ice .fx-p{width:.5em;height:.9em;border-radius:2px;transform-origin:50% 50%;}
.fx-thunder .fx-p{width:.28em;height:1.1em;border-radius:2px;}
.fx-slash .fx-p{width:1.5em;height:.18em;border-radius:2px;}
.fx-heal .fx-p{border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.fx-poison .fx-p{border-radius:50%;animation:fxRise .8s ease-out forwards;}
@keyframes fxFly{
  0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1;}
  70%{opacity:.95;}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.15) rotate(var(--rot));opacity:0;}
}
@keyframes fxRise{
  0%{transform:translate(0,0) scale(.5);opacity:1;}
  100%{transform:translate(var(--dx),calc(var(--dy) - 30px)) scale(1);opacity:0;}
}
.fx-flash{position:absolute;inset:0;animation:fxFlash .38s ease-out forwards;mix-blend-mode:screen;}
@keyframes fxFlash{0%{opacity:0;}25%{opacity:.85;}100%{opacity:0;}}
.fx-ring{
  position:absolute;width:1em;height:1em;margin:-.5em 0 0 -.5em;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);animation:fxRing .62s ease-out forwards;
}
.fx-ring-fire{border-color:rgba(255,138,58,.95);box-shadow:0 0 22px rgba(255,110,40,.7);}
.fx-ring-ice{border-color:rgba(143,212,255,.95);box-shadow:0 0 22px rgba(120,190,255,.7);}
.fx-ring-wind{border-color:rgba(143,232,192,.9);box-shadow:0 0 22px rgba(94,200,255,.6);}
.fx-ring-dark{border-color:rgba(201,143,255,.95);box-shadow:0 0 24px rgba(122,79,176,.75);}
.fx-ring-light{border-color:rgba(255,232,168,.95);box-shadow:0 0 26px rgba(255,212,94,.75);}
@keyframes fxRing{0%{transform:scale(.2);opacity:.95;}100%{transform:scale(7);opacity:0;}}
/* 受击 / 暴击 / 治疗 抖动反馈 */
.fx-hit{animation:fxHit .3s ease-out;}
.fx-slash{animation:fxSlash .34s ease-out;}
.fx-crit{animation:fxCrit .42s ease-out;}
.fx-healed{animation:fxHealed .5s ease-out;}
.fx-guard{animation:fxGuard .5s ease-out;}
@keyframes fxHit{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}60%{transform:translateX(4px);}}
@keyframes fxSlash{0%,100%{transform:translate(0,0);}30%{transform:translate(-8px,3px) rotate(-2deg);}65%{transform:translate(5px,-2px) rotate(1deg);}}
@keyframes fxCrit{0%,100%{transform:translateX(0) scale(1);}20%{transform:translateX(-11px) scale(1.06);}55%{transform:translateX(8px) scale(1.03);}80%{transform:translateX(-3px);}}
@keyframes fxHealed{0%,100%{filter:none;}40%{filter:brightness(1.35) drop-shadow(0 0 10px rgba(94,255,176,.7));}}
@keyframes fxGuard{0%,100%{filter:none;}45%{filter:brightness(1.2) drop-shadow(0 0 12px rgba(94,200,255,.8));}}
@media (prefers-reduced-motion: reduce){
  .fx-p,.fx-ring,.fx-flash{animation-duration:.2s;}
}

/* ==================== 御魂系统 ==================== */
.soul-layout{display:flex;gap:1em;padding-bottom:1em;align-items:flex-start;flex-wrap:wrap;}
.soul-left{flex:0 1 clamp(150px,17vw,220px);}
.soul-mid{flex:1 1 clamp(240px,26vw,340px);min-width:0;}
.soul-right{flex:1 1 clamp(280px,32vw,460px);min-width:0;}
.soul-title{font-size:clamp(11px,1.5vh,15px);color:var(--gold-2);margin-bottom:.4em;letter-spacing:.1em;}
.soul-count{color:var(--text-dim);font-size:.85em;}
.soul-shiki-list{display:flex;flex-direction:column;gap:.3em;max-height:58vh;overflow-y:auto;}
.soul-shiki{display:flex;align-items:center;gap:.45em;padding:.3em .5em;border-radius:10px;background:var(--panel);border:1px solid var(--line);cursor:pointer;}
.soul-shiki.on{border-color:var(--gold);box-shadow:0 0 14px rgba(232,200,119,.3);}
.soul-shiki .art-ri{height:clamp(20px,3.2vh,32px);}
.ss-name{flex:1;font-size:clamp(10px,1.4vh,14px);color:var(--paper);}
.ss-lv{font-size:clamp(9px,1.2vh,12px);color:var(--jade);}
.soul-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;}
.soul-slot{position:relative;border-radius:12px;padding:.5em .4em;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#151a2c,#0d101c);border:1.5px solid var(--line);min-height:clamp(56px,11vh,92px);}
.soul-slot.empty{border-style:dashed;opacity:.75;}
.soul-slot.rar-5{border-color:#c06bff;} .soul-slot.rar-6{border-color:#ffc94a;}
.soul-slot:not(.empty){border-color:var(--sc,#e8c877);box-shadow:0 0 12px -4px var(--sc,#e8c877) inset;}
.sl-no{position:absolute;left:.4em;top:.25em;font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.sl-set{font-size:clamp(10px,1.4vh,14px);color:var(--sc,#e8c877);font-weight:600;margin-top:.9em;}
.sl-main{font-size:clamp(9px,1.2vh,12px);color:var(--paper);}
.sl-lv{position:absolute;right:.4em;bottom:.2em;font-size:clamp(8px,1.1vh,11px);color:var(--gold);}
.sl-plus{font-size:clamp(16px,2.6vh,26px);color:var(--text-dim);}
.sl-label{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.soul-bonus{margin-top:.6em;}
.set-row{display:flex;gap:.5em;align-items:baseline;flex-wrap:wrap;font-size:clamp(9px,1.25vh,13px);
  padding:.25em .5em;border-radius:8px;background:rgba(255,255,255,.03);border-left:2px solid var(--sc,#e8c877);margin-bottom:.25em;}
.set-row b{color:var(--sc,#e8c877);} .set-row span{color:var(--text-dim);} .set-row span.on{color:var(--jade);}
.bonus-sum{font-size:clamp(9px,1.25vh,13px);color:var(--paper);opacity:.9;margin-top:.3em;}
.soul-filters{display:flex;gap:.25em;flex-wrap:wrap;margin-bottom:.5em;}
.soul-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(64px,8vw,88px),1fr));gap:.4em;max-height:52vh;overflow-y:auto;padding-right:.2em;}
.soul-card{border-radius:10px;padding:.3em;text-align:center;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#151a2c,#0b0e18);border:1.5px solid var(--line);}
.soul-card.rar-4{border-color:#5ec8ff;} .soul-card.rar-5{border-color:#c06bff;box-shadow:0 0 12px -5px #c06bff;}
.soul-card.rar-6{border-color:#ffc94a;box-shadow:0 0 14px -4px #ffc94a;}
.sc-head{display:flex;justify-content:space-between;font-size:clamp(8px,1.05vh,11px);color:var(--sc,#e8c877);}
.sc-body{display:flex;justify-content:center;} .art-soul{height:clamp(22px,3.6vh,34px);width:auto;}
.sc-main{font-size:clamp(8px,1.05vh,11px);color:var(--paper);line-height:1.2;}
.sc-lv{position:absolute;right:.25em;top:1.1em;font-size:clamp(8px,1vh,10px);color:var(--gold);}
.soul-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(70px,8vw,92px),1fr));gap:.4em;max-height:52vh;overflow-y:auto;margin:.6em 0;}
.soul-empty{color:var(--text-dim);font-size:clamp(10px,1.4vh,14px);padding:.8em;text-align:center;grid-column:1/-1;}
.soul-detail{text-align:center;padding:.4em 0;}
.soul-detail-main{font-size:clamp(15px,2.4vh,24px);color:var(--gold-2);}
.dt-plus{font-size:.55em;color:var(--text-dim);}
.soul-sub-list{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center;margin:.5em 0;font-size:clamp(10px,1.35vh,14px);color:var(--paper);}
.soul-sub-list>div{background:rgba(255,255,255,.05);border-radius:6px;padding:.15em .5em;}
.soul-sub-list .dim{color:var(--text-dim);}
.set-desc{font-size:clamp(9px,1.25vh,13px);color:var(--sc,#e8c877);border-top:1px solid var(--line);padding-top:.4em;margin-top:.3em;}
.soul-lvline{font-size:clamp(10px,1.3vh,13px);color:var(--gold);margin-top:.3em;}
.modal-btns{display:flex;gap:.5em;justify-content:center;flex-wrap:wrap;margin-top:.5em;}
.soul-drop-row{margin:.5em 0;display:flex;flex-direction:column;gap:.25em;align-items:center;}
.soul-drop-title{font-size:clamp(10px,1.4vh,14px);color:var(--gold-2);}
.soul-drop{display:flex;align-items:center;gap:.4em;font-size:clamp(9px,1.25vh,13px);color:var(--paper);
  background:rgba(255,255,255,.04);border-radius:8px;padding:.2em .6em;border-left:2px solid var(--sc,#e8c877);}
.soul-drop .art-soul{height:clamp(18px,2.8vh,26px);}
.sd-rar{color:var(--gold);} .sd-main{color:var(--text-dim);}

/* ==================== 主城 · 庭院 ==================== */
#main-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:.4em;}
.court{
  position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;
  background-size:cover;background-position:center 42%;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(.5em,1.4vh,1em);
}
.court-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,22,.35),rgba(10,12,22,.78) 60%,rgba(10,12,22,.9));pointer-events:none;}
.court-head,.court-grid,.court-foot{position:relative;z-index:1;}
.court-title{font-family:"KaiTi",serif;font-size:clamp(14px,2.4vh,24px);letter-spacing:.22em;color:var(--gold-2);text-shadow:0 2px 10px rgba(0,0,0,.8);}
.court-sub{font-size:clamp(9px,1.3vh,13px);color:var(--paper);opacity:.9;}
.court-sub b{color:var(--gold);}
.court-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.3em,1vh,.7em);align-content:center;}
.court-bld{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.15em;
  padding:clamp(.3em,1vh,.6em) .3em;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(26,32,52,.72),rgba(12,16,28,.82));
  border:1px solid rgba(232,200,119,.28);backdrop-filter:blur(2px);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.court-bld:hover,.court-bld:active{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 6px 22px -6px rgba(232,200,119,.6);}
.art-bld{height:clamp(28px,5.4vh,54px);width:auto;}
.cb-name{font-size:clamp(9px,1.35vh,14px);color:var(--paper);}
.cb-badge{position:absolute;right:.25em;top:.2em;font-size:clamp(8px,1.1vh,11px);background:var(--jade);color:#0b1018;border-radius:999px;padding:0 .4em;font-weight:700;}
.court-foot{display:flex;align-items:center;gap:.6em;}
.court-hint{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
/* ==================== 商店 ==================== */
.shop-layout{display:flex;gap:1em;align-items:flex-start;flex-wrap:wrap;padding-bottom:1em;}
.shop-left{flex:1 1 clamp(300px,46vw,620px);min-width:0;}
.shop-right{flex:1 1 clamp(260px,32vw,420px);min-width:0;}
.shop-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;margin-bottom:.5em;}
.shop-title{font-size:clamp(11px,1.6vh,16px);color:var(--gold-2);}
.shop-date{font-size:.8em;color:var(--text-dim);}
.shop-cur{font-size:clamp(10px,1.4vh,14px);color:var(--paper);}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(88px,11vw,124px),1fr));gap:.5em;}
.shop-item{background:linear-gradient(180deg,#151a2c,#0d101c);border:1px solid var(--line);border-radius:12px;
  padding:.5em .3em;text-align:center;display:flex;flex-direction:column;gap:.15em;align-items:center;}
.shop-item.soldout{opacity:.5;}
.si-icon{font-size:clamp(18px,3vh,28px);}
.si-name{font-size:clamp(9px,1.3vh,13px);color:var(--paper);}
.si-cost{font-size:clamp(9px,1.25vh,12px);color:var(--gold);}
.si-limit{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.shop-note{margin-top:.6em;font-size:clamp(9px,1.25vh,12px);color:var(--text-dim);}
/* ==================== 每日任务 ==================== */
.task-list{display:flex;flex-direction:column;gap:.4em;margin:.5em 0;max-height:56vh;overflow-y:auto;}
.task-row{display:flex;align-items:center;gap:.6em;padding:.4em .6em;border-radius:10px;background:var(--panel);border:1px solid var(--line);}
.task-row.done{opacity:.62;}
.task-info{flex:1;min-width:0;}
.task-name{font-size:clamp(10px,1.35vh,14px);color:var(--paper);}
.task-bar{height:.35em;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:.2em 0;}
.task-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ffb347);}
.task-prog{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
/* ==================== 公会 ==================== */
.guild-layout{display:flex;gap:1em;align-items:flex-start;flex-wrap:wrap;padding-bottom:1em;}
.guild-left{flex:1 1 clamp(240px,28vw,360px);min-width:0;display:flex;flex-direction:column;gap:.6em;}
.guild-mid{flex:1 1 clamp(300px,42vw,560px);min-width:0;display:flex;flex-direction:column;gap:.6em;}
.guild-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6em .7em;box-shadow:var(--shadow);}
.gc-head{font-size:clamp(11px,1.55vh,16px);color:var(--gold-2);margin-bottom:.3em;display:flex;gap:.4em;align-items:baseline;}
.gc-head b{color:var(--paper);}
.gc-lv{font-size:.78em;color:var(--gold);border:1px solid var(--line);border-radius:6px;padding:0 .35em;}
.gc-meta{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);}
.gc-coins{font-size:clamp(10px,1.4vh,14px);color:var(--paper);margin:.25em 0;}
.gc-coins b{color:var(--gold);}
.gc-btns{display:flex;gap:.35em;flex-wrap:wrap;margin-top:.3em;}
.boss-hpbar{position:relative;height:1.5em;border-radius:999px;background:rgba(255,60,60,.14);overflow:hidden;border:1px solid rgba(255,90,90,.3);}
.boss-hpbar i{display:block;height:100%;background:linear-gradient(90deg,#ff5a4d,#c8402f);transition:width .4s ease;}
.boss-hpbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.2vh,12px);color:#fff;text-shadow:0 1px 4px #000;}
.boss-note{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);margin:.35em 0;}
.boss-actions{display:flex;gap:.4em;flex-wrap:wrap;}
.boss-tip{font-size:clamp(8px,1.15vh,11px);color:var(--text-dim);margin-top:.35em;line-height:1.35;}
.rank-list{display:flex;flex-direction:column;gap:.2em;max-height:34vh;overflow-y:auto;}
.rank-row{display:flex;align-items:center;gap:.5em;padding:.22em .5em;border-radius:8px;font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.rank-row:nth-child(odd){background:rgba(255,255,255,.03);}
.rank-row.me{background:rgba(232,200,119,.14);border:1px solid rgba(232,200,119,.4);}
.rk-no{width:1.6em;color:var(--gold);text-align:center;}
.rk-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rk-rep{color:var(--text-dim);font-size:.9em;}
.rk-dmg{color:var(--gold-2);font-variant-numeric:tabular-nums;}
.gshop-list{display:flex;flex-direction:column;gap:.25em;}
.gshop-item{display:flex;align-items:center;gap:.5em;font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.gs-name{flex:1;}
.gs-cost{color:var(--gold);}
.guild-join{padding:1em;display:flex;flex-direction:column;gap:.8em;align-items:center;}
.gj-title{font-family:"KaiTi",serif;font-size:clamp(13px,2vh,20px);color:var(--gold-2);letter-spacing:.12em;}
.gj-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(180px,22vw,260px),1fr));gap:.7em;width:100%;max-width:900px;}
.gj-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.8em;text-align:center;box-shadow:var(--shadow);}
.gj-name{font-size:clamp(11px,1.5vh,16px);color:var(--paper);margin-bottom:.3em;}
.gj-meta{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);margin-bottom:.6em;}
.gj-note{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);max-width:760px;text-align:center;line-height:1.5;}

/* ==================== 扩展美术：图标 / 头像 / 内景 / 装饰 ==================== */
.art-ico{display:inline-block;vertical-align:middle;object-fit:contain;}
.res-ico{height:clamp(13px,1.9vh,20px);width:auto;margin-right:.15em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.res-extra{opacity:.92;}
.btn-ico{height:clamp(12px,1.8vh,18px);width:auto;margin-right:.25em;vertical-align:-2px;}
.ico-role{height:clamp(13px,1.9vh,20px);width:auto;}
.ico-rar{height:clamp(14px,2vh,22px);width:auto;}
.ico-stat{height:clamp(13px,1.9vh,19px);width:auto;margin-right:.2em;}
.ico-sk{height:clamp(18px,2.8vh,28px);width:auto;}
.ico-act{height:clamp(15px,2.2vh,22px);width:auto;}
.ico-st{height:clamp(12px,1.7vh,17px);width:auto;}
.stat-chip{display:inline-flex;align-items:center;gap:.15em;background:rgba(255,255,255,.05);border-radius:8px;padding:.1em .45em;margin:.1em .15em;}
/* Q 版头像 */
.art-avatar{border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),rgba(0,0,0,.35));border:1.5px solid var(--line);object-fit:cover;}
.art-cc-face{height:clamp(26px,4.4vh,40px);width:auto;position:absolute;left:50%;transform:translateX(-50%);opacity:.28;filter:blur(.4px);}
.art-ri-face{height:clamp(22px,3.6vh,34px);width:auto;}
.art-ui-face{height:clamp(22px,3.6vh,34px);width:auto;}
.art-mini-face{height:clamp(18px,3vh,28px);width:auto;}
.art-face{height:clamp(18px,3vh,28px);width:auto;margin-top:-.2em;opacity:.95;}
.bu-face{display:flex;justify-content:center;margin-top:-.3em;}
/* 觉醒立绘 */
.art-awakened{filter:saturate(1.2) brightness(1.07) drop-shadow(0 0 14px rgba(255,212,94,.5));}
/* 内景背景 */
#screen-explore,#screen-summon,#screen-codex,#screen-team,#screen-upgrade,#screen-souls,#screen-city,#screen-guild{
  background-size:cover;background-position:center 40%;background-attachment:local;
}
/* 庭院装饰 */
.court-deco{position:absolute;z-index:1;pointer-events:none;opacity:.85;}
.court-deco-l{left:.2em;top:.2em;}
.court-deco-r{right:.2em;bottom:2.6em;}
.art-deco{height:clamp(28px,5vh,54px);width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
/* 标题时段标记 */
.title-bg{background-size:cover;background-position:center 40%;}

/* ==================== 动态立绘（内联 SVG 动画） ==================== */
.art-live{display:inline-flex;align-items:flex-end;justify-content:center;line-height:0;}
.art-live svg{height:100%;width:auto;display:block;overflow:visible;}
.dt-live{display:inline-flex;height:clamp(88px,15vh,170px);align-items:flex-end;}
.art-dt-live{height:100%;}
.art-bu-live{height:clamp(46px,9vh,92px);}
.slot-emoji .art-slot-live{height:clamp(40px,7.4vh,76px);}
.art-uh-live{height:clamp(70px,12vh,126px);}
.art-ts-live{height:clamp(90px,24vh,210px);}
.uh-emoji .art-live,.bu-emoji .art-live{display:inline-flex;}
/* ==================== 技能 cut-in 全屏演出 ==================== */
.cutin{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:70;}
.ci-band{
  position:absolute;left:-10%;right:-10%;top:50%;height:clamp(120px,26vh,260px);transform:translateY(-50%) skewY(-5deg);
  background:linear-gradient(90deg,rgba(8,10,18,0) 0%,rgba(8,10,18,.92) 18%,rgba(8,10,18,.96) 78%,rgba(8,10,18,0) 100%);
  border-top:2px solid var(--cc);border-bottom:2px solid var(--cc);
  box-shadow:0 0 40px -6px var(--cc),inset 0 0 60px -20px var(--cc);
  animation:ciBand .78s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes ciBand{0%{transform:translate(-120%,-50%) skewY(-5deg);opacity:0;}18%{opacity:1;}70%{transform:translate(0,-50%) skewY(-5deg);opacity:1;}100%{transform:translate(6%,-50%) skewY(-5deg);opacity:0;}}
.ci-lines{position:absolute;inset:0;}
.ci-lines i{position:absolute;top:50%;left:0;height:2px;width:60%;background:linear-gradient(90deg,transparent,var(--cc),transparent);
  opacity:.75;transform:translateX(-100%) skewY(-5deg);animation:ciLine .6s ease-out forwards;animation-delay:calc(var(--i) * 60ms);}
.ci-lines i:nth-child(1){top:32%;} .ci-lines i:nth-child(2){top:40%;} .ci-lines i:nth-child(3){top:50%;}
.ci-lines i:nth-child(4){top:60%;} .ci-lines i:nth-child(5){top:68%;}
@keyframes ciLine{0%{transform:translateX(-100%) skewY(-5deg);}100%{transform:translateX(120%) skewY(-5deg);}}
.ci-portrait{
  position:absolute;left:0;top:50%;height:clamp(160px,40vh,380px);transform:translate(-40%,-50%) scale(.92);opacity:0;
  animation:ciPort .9s cubic-bezier(.16,.9,.3,1) forwards;
}
.ci-portrait img{height:100%;width:auto;display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.85)) drop-shadow(0 0 26px var(--cc));}
@keyframes ciPort{0%{transform:translate(-48%,-50%) scale(.9);opacity:0;}22%{opacity:1;}62%{transform:translate(-6%,-50%) scale(1);opacity:1;}100%{transform:translate(6%,-50%) scale(1.02);opacity:0;}}
.ci-text{position:absolute;left:clamp(30%,26vw,34%);top:50%;transform:translateY(-50%);text-align:left;animation:ciText .9s ease-out forwards;}
.ci-name{font-family:"KaiTi",serif;font-size:clamp(14px,2.4vh,26px);color:var(--paper);letter-spacing:.14em;text-shadow:0 2px 10px #000;}
.ci-skill{font-family:"KaiTi",serif;font-size:clamp(22px,4.6vh,54px);color:var(--cc);letter-spacing:.1em;
  text-shadow:0 0 22px var(--cc),0 4px 16px #000;margin-top:.1em;}
.ci-tag{display:inline-block;margin-top:.3em;font-size:clamp(9px,1.4vh,14px);color:#0b1018;background:var(--cc);border-radius:999px;padding:.1em .8em;}
@keyframes ciText{0%{opacity:0;transform:translate(-24px,-50%);}25%{opacity:1;}70%{opacity:1;transform:translate(0,-50%);}100%{opacity:0;transform:translate(10px,-50%);}}
.ci-flash{position:absolute;inset:0;background:radial-gradient(60% 50% at 26% 50%,var(--cc),transparent 70%);opacity:0;mix-blend-mode:screen;
  animation:ciFlash .5s ease-out forwards;}
@keyframes ciFlash{0%{opacity:0;}20%{opacity:.55;}100%{opacity:0;}}
.cutin-enemy .ci-portrait{left:auto;right:0;animation-name:ciPortR;}
@keyframes ciPortR{0%{transform:translate(48%,-50%) scale(.9);opacity:0;}22%{opacity:1;}62%{transform:translate(6%,-50%) scale(1);opacity:1;}100%{transform:translate(-6%,-50%) scale(1.02);opacity:0;}}
.cutin-enemy .ci-text{left:auto;right:clamp(30%,26vw,34%);text-align:right;}
.cutin-enemy .ci-band{background:linear-gradient(270deg,rgba(20,6,10,0) 0%,rgba(24,8,12,.93) 18%,rgba(24,8,12,.96) 78%,rgba(20,6,10,0) 100%);}
.cutin-aoe .ci-band{height:clamp(150px,34vh,330px);}
@media (prefers-reduced-motion: reduce){
  .ci-band,.ci-portrait,.ci-text,.ci-flash,.ci-lines i{animation-duration:.25s;}
}

/* ==================== 皮肤选择 ==================== */
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,12vw,140px),1fr));gap:.6em;margin:.6em 0;max-height:52vh;overflow-y:auto;}
.skin-card{background:linear-gradient(180deg,#151a2c,#0d101c);border:1.5px solid var(--line);border-radius:12px;padding:.5em .4em;text-align:center;display:flex;flex-direction:column;gap:.25em;align-items:center;}
.skin-card.on{border-color:var(--gold);box-shadow:0 0 16px -4px rgba(232,200,119,.6);}
.skin-art{display:flex;justify-content:center;}
.art-skin{height:clamp(64px,11vh,110px);width:auto;}
.skin-name{font-size:clamp(10px,1.35vh,14px);color:var(--paper);}
.skin-cond{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}
.skin-cond.ok{color:var(--jade);}
/* 建筑等级 */
.cb-lv{position:absolute;left:.25em;top:.15em;font-size:clamp(8px,1.05vh,11px);color:var(--gold);background:rgba(0,0,0,.45);border-radius:999px;padding:0 .35em;}
.court-bld.lv-5{border-color:var(--gold);box-shadow:0 0 18px -6px rgba(232,200,119,.75);}
.court-bld.lv-4{border-color:rgba(232,200,119,.5);}
.bld-modal{text-align:center;}
.bm-art{display:flex;justify-content:center;margin-bottom:.2em;}
.art-bld-lg{height:clamp(44px,8vh,76px);width:auto;}
.bm-tip{font-size:clamp(10px,1.35vh,14px);color:var(--text-dim);}
.bm-bonus{font-size:clamp(11px,1.5vh,15px);color:var(--paper);margin:.4em 0;}
.bm-bonus b{color:var(--jade);}

/* ==================== 细分图标包 ==================== */
.dock-ico{height:clamp(20px,3.2vh,32px);width:auto;display:block;margin:0 auto;}
.dock-btn .ic{display:block;}
.ico-stage{position:absolute;left:.25em;top:.25em;height:clamp(13px,1.9vh,20px);width:auto;opacity:.95;filter:drop-shadow(0 1px 3px #000);}
.ico-ach{height:clamp(20px,3.2vh,32px);width:auto;}
.ach-ic{position:relative;display:flex;justify-content:center;align-items:center;}
.ach-lock{position:absolute;right:0;bottom:0;opacity:.8;}
.ico-tiny{height:clamp(10px,1.5vh,14px);width:auto;vertical-align:-1px;}
.ico-shop{height:clamp(20px,3.2vh,32px);width:auto;}
.ico-slot{height:clamp(12px,1.8vh,18px);width:auto;}
.ico-el{height:clamp(13px,1.9vh,19px);width:auto;margin-right:.25em;}
.dt-element{font-size:clamp(9px,1.25vh,13px);color:var(--gold);display:flex;align-items:center;gap:.1em;}
.modal-deco{position:absolute;right:.8em;top:.6em;opacity:.9;}
.modal-deco .art-deco{height:clamp(24px,4vh,42px);}

/* ==================== 称号 / 头像框 / 胜利姿势 ==================== */
.chip-frame{height:clamp(20px,3vh,30px);width:auto;position:absolute;inset:-2px;pointer-events:none;}
.chip-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.chip-title{display:block;font-size:clamp(8px,1.05vh,11px);color:var(--gold);letter-spacing:.06em;line-height:1.1;}
.chip-name{line-height:1.15;}
.player-chip{cursor:pointer;}
.profile-head{display:flex;gap:1em;align-items:center;margin:.4em 0 .8em;}
.pf-avatar{position:relative;width:clamp(64px,11vh,104px);height:clamp(64px,11vh,104px);display:flex;align-items:center;justify-content:center;}
.pf-avatar-inner{display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:50%;width:82%;height:82%;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.1),rgba(0,0,0,.4));}
.art-pf{height:150%;}
.art-pf-frame{position:absolute;inset:0;width:100%;height:100%;}
.pf-name{font-family:"KaiTi",serif;font-size:clamp(15px,2.3vh,24px);color:var(--paper);}
.pf-title{display:flex;align-items:center;gap:.3em;font-size:clamp(11px,1.5vh,15px);color:var(--gold);}
.pf-stats{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);margin-top:.2em;}
.pf-section{font-size:clamp(10px,1.4vh,14px);color:var(--gold-2);margin:.6em 0 .3em;letter-spacing:.1em;}
.title-grid{display:flex;flex-wrap:wrap;gap:.35em;max-height:24vh;overflow-y:auto;}
.title-chip{display:flex;align-items:center;gap:.3em;font-size:clamp(9px,1.3vh,13px);color:var(--paper);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.2em .7em;cursor:pointer;}
.title-chip.on{border-color:var(--gold);background:rgba(232,200,119,.16);}
.title-chip:disabled{opacity:.5;cursor:not-allowed;}
.tk-lock{font-size:.85em;color:var(--text-dim);}
.ico-title{height:clamp(12px,1.8vh,18px);width:auto;}
.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(80px,10vw,108px),1fr));gap:.5em;max-height:26vh;overflow-y:auto;}
.frame-cell{background:linear-gradient(180deg,#151a2c,#0d101c);border:1.5px solid var(--line);border-radius:12px;padding:.4em;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.15em;}
.frame-cell.on{border-color:var(--gold);box-shadow:0 0 14px -4px rgba(232,200,119,.6);}
.art-frame-cell{height:clamp(34px,5.6vh,52px);width:auto;}
.fr-name{font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.fr-cond{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.fr-cond.ok{color:var(--jade);}
/* 胜利姿势 */
.result-pose{display:flex;flex-direction:column;align-items:center;margin-bottom:.2em;}
.art-pose-lg{height:clamp(90px,22vh,200px);}
.art-pose-lg svg{height:100%;}
.art-pose{animation:poseHop 1.6s ease-in-out infinite;}
@keyframes poseHop{0%,100%{transform:translateY(0) scale(1);}45%{transform:translateY(-6px) scale(1.015);}}
.pose-name{font-size:clamp(9px,1.3vh,13px);color:var(--gold);letter-spacing:.08em;}

/* ==================== 称号特效 ==================== */
.chip-title{position:relative;display:inline-block;}
.tf-glow{text-shadow:0 0 6px currentColor,0 0 14px currentColor;animation:tfGlow 2.4s ease-in-out infinite;}
@keyframes tfGlow{0%,100%{opacity:.85;}50%{opacity:1;text-shadow:0 0 10px currentColor,0 0 22px currentColor;}}
.tf-sparkle::after{content:"✦";margin-left:.25em;color:#fff8dc;animation:tfSparkle 1.8s ease-in-out infinite;}
@keyframes tfSparkle{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
.tf-flame{animation:tfFlame 1.2s ease-in-out infinite;}
@keyframes tfFlame{0%,100%{color:#ff8a3a;text-shadow:0 0 8px #ff6a2a;}50%{color:#ffd45e;text-shadow:0 0 16px #ff8a3a;}}
.tf-trail{background:linear-gradient(90deg,currentColor,rgba(255,255,255,.2),currentColor);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:tfTrail 2.6s linear infinite;}
@keyframes tfTrail{0%{background-position:0% 0;}100%{background-position:200% 0;}}
.tf-rainbow{background:linear-gradient(90deg,#ff8a5e,#ffd45e,#8fd18a,#7fe0d0,#9fc8ff,#c98fff,#ff8a5e);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:tfRainbow 4s linear infinite;}
@keyframes tfRainbow{0%{background-position:0% 0;}100%{background-position:300% 0;}}
.tf-moon{color:#cfe6ff;text-shadow:0 0 10px #9fc8ff,0 0 20px #c98fff;animation:tfMoon 3.4s ease-in-out infinite;}
@keyframes tfMoon{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35);}}
.tf-thunder{color:#fff3a8;animation:tfThunder 2.2s steps(2,end) infinite;}
@keyframes tfThunder{0%,88%,100%{text-shadow:0 0 6px #ffd45e;}92%{text-shadow:0 0 14px #ffffff,0 0 26px #9fd8ff;color:#fff;}}
/* ==================== 好感度 / 剧情 ==================== */
.dt-aff{display:flex;align-items:center;gap:.4em;margin:.2em 0;}
.aff-bar{height:.5em;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;flex:1;}
.aff-bar.mini{max-width:9em;height:.4em;}
.aff-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8fb0,#ffd45e);transition:width .4s ease;}
.aff-mini{font-size:clamp(9px,1.2vh,12px);color:var(--gold);white-space:nowrap;}
.aff-bar-wrap{padding:.2em 0 .5em;}
.aff-label{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);margin-top:.25em;}
.aff-label b{color:var(--gold);}
.story-list{display:flex;flex-direction:column;gap:.5em;max-height:46vh;overflow-y:auto;margin:.4em 0;}
.story-row{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5em .7em;}
.story-row.locked{opacity:.55;}
.story-head{display:flex;align-items:center;gap:.5em;font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.story-no{width:1.4em;height:1.4em;border-radius:50%;background:var(--gold);color:#0b1018;font-size:.8em;display:flex;align-items:center;justify-content:center;}
.story-req{font-size:.8em;color:var(--text-dim);margin-left:auto;}
.story-text{font-size:clamp(10px,1.35vh,14px);color:var(--paper);opacity:.9;line-height:1.65;margin:.4em 0;text-indent:2em;}
.gift-list{display:flex;flex-direction:column;gap:.5em;margin:.6em 0;}
/* ==================== 昼夜切换 ==================== */
.phase-btns{display:flex;gap:.25em;}
.phase-btn{padding:.2em .6em;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text-dim);
  font-size:clamp(9px,1.2vh,12px);cursor:pointer;}
.phase-btn.on{border-color:var(--gold);color:var(--gold);background:rgba(232,200,119,.15);}
/* 皮肤专属演出配色（风格化叠加） */
.cutin-st-snow .ci-lines i{background:linear-gradient(90deg,transparent,#eaf6ff,transparent);}
.cutin-st-flame .ci-band{border-top-color:#ff8a3a;border-bottom-color:#ff8a3a;}
.cutin-st-flame .ci-lines i{background:linear-gradient(90deg,transparent,#ff8a3a,transparent);}
.cutin-st-moon .ci-flash{background:radial-gradient(60% 50% at 26% 50%,#cfe6ff,transparent 70%);}
.cutin-st-petal .ci-lines i{background:linear-gradient(90deg,transparent,#ffb3c0,transparent);}
.cutin-st-wisp .ci-band{box-shadow:0 0 46px -4px #7fe8d0,inset 0 0 70px -24px #7fe8d0;}
.cutin-st-feather .ci-lines i{background:linear-gradient(90deg,transparent,#2a2f3a,transparent,#7fc7ff);}
.cutin-st-star .ci-flash{background:radial-gradient(60% 50% at 26% 50%,#ffd45e,transparent 70%);}
.cutin-st-water .ci-band{box-shadow:0 0 44px -6px #5ec8ff,inset 0 0 66px -24px #5ec8ff;}

/* ==================== 台词气泡 ==================== */
.vbubble{position:absolute;transform:translate(-50%,-100%);max-width:min(60vw,320px);
  background:linear-gradient(180deg,rgba(20,24,38,.96),rgba(12,15,26,.96));
  border:1px solid var(--gold);border-radius:12px;padding:.35em .7em;
  font-size:clamp(10px,1.45vh,15px);color:var(--paper);line-height:1.4;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.85);white-space:normal;
  animation:vbIn .28s cubic-bezier(.2,.9,.3,1) forwards;}
.vbubble::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--gold);}
.vbubble.out{animation:vbOut .45s ease-in forwards;}
@keyframes vbIn{0%{opacity:0;transform:translate(-50%,-90%) scale(.9);}100%{opacity:1;transform:translate(-50%,-100%) scale(1);}}
@keyframes vbOut{0%{opacity:1;}100%{opacity:0;transform:translate(-50%,-118%) scale(.96);}}
/* ==================== 结算：称号与头像框 ==================== */
.result-player{display:flex;align-items:center;gap:.4em;justify-content:center;margin:.25em 0 .4em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.15em .8em;}
.rp-frame{display:inline-flex;} .result-frame{height:clamp(16px,2.4vh,24px);width:auto;}
.rp-name{font-size:clamp(10px,1.4vh,14px);color:var(--paper);}
.rp-title{font-size:clamp(9px,1.25vh,13px);}
/* ==================== 昼夜横幅 ==================== */
.phase-banner{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;margin-bottom:.5em;
  border:1px solid var(--pc,#e8c877);border-left-width:4px;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));padding:.35em .7em;}
.pb-name{font-size:clamp(10px,1.4vh,14px);color:var(--pc);font-weight:600;}
.pb-label{font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.pb-hint{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);margin-left:auto;}
/* ==================== 公会聊天 ==================== */
.chat-box{max-height:16vh;overflow-y:auto;display:flex;flex-direction:column;gap:.2em;
  background:rgba(0,0,0,.28);border-radius:10px;padding:.4em .5em;margin-bottom:.35em;}
.chat-row{display:flex;gap:.35em;font-size:clamp(9px,1.25vh,13px);line-height:1.35;}
.chat-row.me{background:rgba(232,200,119,.13);border-radius:6px;padding:0 .25em;}
.chat-time{color:var(--text-dim);font-size:.85em;flex:0 0 auto;}
.chat-who{color:var(--gold);flex:0 0 auto;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-text{color:var(--paper);word-break:break-word;}
.chat-input{display:flex;gap:.35em;}
.chat-input input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:8px;color:var(--paper);font-size:clamp(10px,1.35vh,14px);padding:.3em .6em;font-family:inherit;}
.chat-input input:focus{outline:none;border-color:var(--gold);}
/* ==================== 好友助战 ==================== */
.support-note{font-size:clamp(8px,1.15vh,11px);color:var(--text-dim);margin-bottom:.3em;line-height:1.4;}
.support-list{display:flex;flex-direction:column;gap:.25em;max-height:20vh;overflow-y:auto;}
.support-row{display:flex;align-items:center;gap:.45em;padding:.2em .4em;border-radius:9px;background:rgba(255,255,255,.04);}
.support-row.on{border:1px solid var(--gold);background:rgba(232,200,119,.12);}
.art-support{height:clamp(22px,3.4vh,34px);width:auto;border-radius:50%;}
.sp-info{flex:1;min-width:0;}
.sp-name{font-size:clamp(9px,1.3vh,13px);color:var(--paper);}
.sp-from{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}

/* 昼夜按钮触控尺寸优化（移动端可点性） */
.phase-btn{min-height:clamp(28px,3.6vh,36px);min-width:clamp(40px,5vh,56px);padding:.25em .7em;display:inline-flex;align-items:center;justify-content:center;}
.phase-btns{gap:.3em;flex-wrap:wrap;}

/* 公会三栏布局（避免纵向滚动） */
.guild-right{flex:1 1 clamp(220px,24vw,330px);min-width:0;display:flex;flex-direction:column;gap:.6em;}
.guild-left,.guild-mid{flex:1 1 clamp(240px,28vw,360px);}
.guild-mid{flex:1 1 clamp(300px,38vw,520px);}
.chat-box{max-height:22vh;}
.support-list{max-height:24vh;}
@media (max-width:1200px){ .chat-box{max-height:16vh;} .support-list{max-height:18vh;} }

/* 触发式台词气泡配色 */
.vbubble.vb-hurt{border-color:#ff8a5e;} .vbubble.vb-hurt::after{border-top-color:#ff8a5e;}
.vbubble.vb-lowhp{border-color:#ff5a4d;background:linear-gradient(180deg,rgba(46,16,20,.96),rgba(24,8,12,.96));}
.vbubble.vb-lowhp::after{border-top-color:#ff5a4d;}
.vbubble.vb-defeat{border-color:#8f8a7a;opacity:.95;} .vbubble.vb-defeat::after{border-top-color:#8f8a7a;}
.vbubble.vb-star{border-color:#ffd45e;} .vbubble.vb-awaken{border-color:#7fe0d0;}
.vbubble.vb-win{border-color:#8fd18a;} .vbubble.vb-win::after{border-top-color:#8fd18a;}

/* ==================== 时段限定关卡 / 夜行图鉴 / 周常 ==================== */
.tag-phase{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);border:1px solid var(--line);border-radius:6px;padding:0 .35em;margin-left:.4em;}
.tag-phase.ok{color:var(--gold);border-color:var(--gold);}
.best-head{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;margin-bottom:.6em;}
.best-title{font-size:clamp(12px,1.8vh,18px);color:var(--gold-2);}
.best-note{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);flex:1;}
.best-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,17vw,220px),1fr));gap:.6em;padding-bottom:1em;}
.best-card{background:linear-gradient(180deg,#151a2c,#0d101c);border:1px solid var(--line);border-radius:12px;padding:.6em;display:flex;flex-direction:column;align-items:center;gap:.2em;text-align:center;}
.best-card.locked{opacity:.55;}
.best-art{display:flex;justify-content:center;}
.art-best{height:clamp(38px,6vh,60px);width:auto;border-radius:50%;}
.best-name{font-size:clamp(11px,1.5vh,15px);color:var(--paper);}
.best-hour{font-size:clamp(9px,1.2vh,12px);color:var(--gold);}
.best-desc{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);line-height:1.45;}
.best-meta{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.weekly-list{display:flex;flex-direction:column;gap:.3em;}
.weekly-row{display:flex;align-items:center;gap:.5em;padding:.25em .45em;border-radius:9px;background:rgba(255,255,255,.04);}
.weekly-row.done{opacity:.62;}
.wk-info{flex:1;min-width:0;}
.wk-name{font-size:clamp(9px,1.3vh,13px);color:var(--paper);}
.wk-lv{color:var(--gold);font-size:.85em;}
.wk-meta{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.weekly-note{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);margin-top:.3em;}
.double-badge{font-size:clamp(8px,1.1vh,11px);color:#0b1018;background:var(--gold);border-radius:999px;padding:0 .5em;margin-left:.4em;}

/* 公会三栏高度约束（页面不再纵向溢出，列内滚动） */
.guild-layout{align-items:stretch;}
.guild-left,.guild-mid,.guild-right{max-height:calc(100vh - 7.5em);overflow-y:auto;padding-right:.15em;}
.guild-left::-webkit-scrollbar,.guild-mid::-webkit-scrollbar,.guild-right::-webkit-scrollbar{width:6px;}
.guild-left::-webkit-scrollbar-thumb,.guild-mid::-webkit-scrollbar-thumb,.guild-right::-webkit-scrollbar-thumb{background:rgba(232,200,119,.35);border-radius:3px;}
.chat-box{max-height:14vh;}
.support-list{max-height:16vh;}
.rank-list{max-height:22vh;}
.weekly-row{padding:.2em .4em;}

/* ==================== 邮件系统 ==================== */
#btn-mail{position:relative;}
.mail-badge{position:absolute;right:-4px;top:-4px;background:var(--red,#ff5a4d);color:#fff;border-radius:999px;
  font-size:clamp(8px,1.05vh,11px);padding:0 .35em;line-height:1.4;font-weight:700;}
.mail-head{display:flex;align-items:center;gap:.6em;margin-bottom:.6em;}
.mail-title{font-size:clamp(12px,1.8vh,18px);color:var(--gold-2);}
.mail-count{font-size:.8em;color:var(--text-dim);}
.mail-list{display:flex;flex-direction:column;gap:.5em;padding-bottom:1em;max-height:74vh;overflow-y:auto;}
.mail-card{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:.55em .8em;}
.mail-card.unread{border-left-color:var(--gold);box-shadow:0 0 14px -6px rgba(232,200,119,.7);}
.mail-card.claimed{opacity:.68;border-left-color:var(--jade);}
.mail-top{display:flex;align-items:center;gap:.5em;}
.mail-tag{font-size:clamp(8px,1.1vh,11px);color:#0b1018;background:var(--gold);border-radius:999px;padding:0 .5em;}
.mail-subject{font-size:clamp(11px,1.5vh,15px);color:var(--paper);flex:1;}
.mail-ts{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.mail-body{font-size:clamp(10px,1.32vh,14px);color:var(--text-dim);line-height:1.6;margin:.35em 0;}
.mail-bottom{display:flex;align-items:center;gap:.5em;}
.mail-rewards{display:flex;gap:.3em;flex-wrap:wrap;flex:1;}
.mail-chip{display:inline-flex;align-items:center;gap:.15em;background:rgba(255,255,255,.06);border-radius:999px;
  padding:.1em .55em;font-size:clamp(9px,1.25vh,13px);color:var(--gold);}
.mail-done{font-size:clamp(9px,1.2vh,12px);color:var(--jade);}
/* ==================== 图鉴加成 ==================== */
.best-bonus{font-size:clamp(9px,1.25vh,13px);color:var(--paper);border:1px dashed var(--bc,#9fc8ff);border-radius:10px;
  padding:.3em .7em;background:rgba(255,255,255,.04);}
.best-bonus b{color:var(--bc,#9fc8ff);}
.best-all{margin-left:.4em;font-size:.9em;color:#0b1018;background:var(--gold);border-radius:999px;padding:0 .5em;}
/* ==================== 周常结算 ==================== */
.weekly-settle{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin-top:.4em;
  border-top:1px solid var(--line);padding-top:.4em;}
.ws-info{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);flex:1;}
.ws-info b{color:var(--gold);}

/* ==================== 邮件过期 / 批量删除 / 回赠 ==================== */
.mail-card.expired{opacity:.6;border-left-color:#8f8a7a;}
.mail-expire{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.mail-expire.soon{color:var(--gold);}
.mail-expire.over{color:var(--red,#ff5a4d);}
.mail-expired-txt{font-size:clamp(9px,1.2vh,12px);color:var(--red,#ff5a4d);}
.mail-pick{accent-color:var(--gold);}
.mail-selall{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);display:inline-flex;align-items:center;gap:.25em;}
.mail-head{flex-wrap:wrap;}
/* ==================== 图鉴展开 ==================== */
.best-card[data-best]{cursor:pointer;}
.best-expand{font-size:clamp(8px,1.1vh,11px);color:var(--gold);margin-top:.15em;}
.best-detail{margin-top:.35em;text-align:left;border-top:1px dashed var(--line);padding-top:.35em;}
.best-detail.hidden{display:none;}
.bd-sec{font-size:clamp(8px,1.15vh,12px);color:var(--text-dim);line-height:1.5;margin-bottom:.2em;}
.bd-sec b{color:var(--gold-2);display:block;}
.bd-skill{color:var(--paper);}
/* ==================== 周常结算历史 ==================== */
.hist-head,.hist-row{display:flex;gap:.5em;align-items:center;font-size:clamp(9px,1.25vh,13px);}
.hist-head{color:var(--gold-2);border-bottom:1px solid var(--line);padding-bottom:.25em;margin-bottom:.35em;}
.hist-row{padding:.25em .3em;border-radius:8px;color:var(--paper);}
.hist-row:nth-child(odd){background:rgba(255,255,255,.03);}
.hist-week{flex:0 0 6em;} .hist-rank{flex:0 0 7em;color:var(--gold);} .hist-dmg{flex:1;color:var(--paper);}
.hist-reward{flex:0 0 12em;color:var(--gold);} .hist-ts{flex:0 0 9em;color:var(--text-dim);}
.hist-list{max-height:42vh;overflow-y:auto;margin-bottom:.5em;}
.hist-total{font-size:clamp(9px,1.3vh,13px);color:var(--paper);border-top:1px solid var(--line);padding-top:.4em;margin-bottom:.5em;}

/* ==================== 图鉴阶梯奖励 ==================== */
.best-tiers{display:flex;gap:.4em;flex-wrap:wrap;margin-bottom:.4em;}
.best-tier{display:flex;flex-direction:column;align-items:center;gap:.15em;min-width:clamp(84px,9vw,116px);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:.3em .5em;}
.best-tier.reached{border-color:var(--gold);}
.best-tier.claimed{opacity:.6;border-color:var(--jade);}
.bt-need{font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.bt-reward{font-size:clamp(9px,1.2vh,12px);color:var(--gold);}
.bt-state{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
/* ==================== 好友列表 ==================== */
.friend-note{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);line-height:1.5;margin-bottom:.5em;}
.friend-list{display:flex;flex-direction:column;gap:.4em;max-height:56vh;overflow-y:auto;margin-bottom:.5em;}
.friend-row{display:flex;align-items:center;gap:.6em;padding:.4em .6em;border-radius:12px;background:var(--panel);border:1px solid var(--line);}
.friend-row.on{border-color:var(--gold);background:rgba(232,200,119,.1);}
.art-friend{height:clamp(28px,4.4vh,44px);width:auto;border-radius:50%;}
.fr-info{flex:1;min-width:0;}
.fr-name{font-size:clamp(10px,1.4vh,14px);color:var(--paper);}
.fr-tier{font-size:.85em;}
.fr-sub{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.fr-bar{height:.35em;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:.2em 0;max-width:16em;}
.fr-bar i{display:block;height:100%;background:linear-gradient(90deg,#9fc8ff,#ffd45e);}
.fr-meta{font-size:clamp(8px,1.1vh,11px);color:var(--gold);}
.fr-btns{display:flex;flex-direction:column;gap:.25em;}
/* ==================== 分享图 ==================== */
.share-wrap{display:flex;justify-content:center;margin:.4em 0;}
.share-img{max-height:60vh;width:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(0,0,0,.9);}
.share-note{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);text-align:center;margin-bottom:.4em;}

/* ==================== 图鉴奖励提示 ==================== */
.best-reward-hint{font-size:clamp(9px,1.25vh,13px);color:var(--gold);border:1px dashed rgba(232,200,119,.5);
  border-radius:10px;padding:.3em .7em;background:rgba(232,200,119,.06);margin-bottom:.4em;}
.best-reward-hint.done{color:var(--jade);border-color:rgba(127,224,208,.6);background:rgba(127,224,208,.08);}
/* ==================== 好友互访名册 ==================== */
.roster-list{display:flex;flex-direction:column;gap:.35em;max-height:48vh;overflow-y:auto;margin-bottom:.5em;}
.roster-row{display:flex;align-items:center;gap:.6em;padding:.35em .6em;border-radius:12px;background:var(--panel);border:1px solid var(--line);}
.roster-row.best{border-color:var(--gold);background:rgba(232,200,119,.1);}
.roster-best{font-size:clamp(8px,1.05vh,11px);color:#0b1018;background:var(--gold);border-radius:999px;padding:0 .45em;margin-left:.4em;}
.roster-borrowed{font-size:clamp(9px,1.2vh,12px);color:var(--jade);}
.roster-foot{font-size:clamp(9px,1.25vh,13px);color:var(--text-dim);margin-bottom:.4em;}

/* ==================== 资料页图鉴/碎片 ==================== */
.pf-best{display:flex;align-items:center;gap:.4em;flex-wrap:wrap;margin-top:.25em;}
.pf-best-info{font-size:clamp(9px,1.25vh,13px);color:var(--jade);}
.pf-shards{font-size:clamp(9px,1.25vh,13px);color:var(--gold);margin-top:.15em;}
.pf-shards b{color:#ffd45e;}
/* ==================== 互访榜 ==================== */
.visit-rank{display:flex;flex-direction:column;gap:.2em;max-height:24vh;overflow-y:auto;margin-bottom:.5em;}
.vr-row{display:flex;align-items:center;gap:.5em;padding:.2em .5em;border-radius:8px;font-size:clamp(9px,1.25vh,13px);color:var(--paper);}
.vr-row:nth-child(odd){background:rgba(255,255,255,.03);}
.vr-row.me{background:rgba(232,200,119,.14);border:1px solid rgba(232,200,119,.4);}
.vr-no{width:1.6em;color:var(--gold);text-align:center;}
.vr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vr-visits{color:var(--jade);}
.vbubble.vb-ally{border-color:#7fe8d0;background:linear-gradient(180deg,rgba(16,40,38,.96),rgba(8,22,20,.96));}
.vbubble.vb-ally::after{border-top-color:#7fe8d0;}

/* ==================== 互访榜/碎片商店/留言板/借用演出 ==================== */
.shard-entry{display:flex;align-items:center;gap:.5em;margin-bottom:.5em;flex-wrap:wrap;}
.shard-have{font-size:clamp(9px,1.25vh,13px);color:var(--gold);}
.shard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,12vw,140px),1fr));gap:.5em;max-height:54vh;overflow-y:auto;margin-bottom:.5em;}
.shard-card{background:linear-gradient(180deg,#151a2c,#0d101c);border:1px solid var(--line);border-radius:12px;padding:.4em;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.15em;}
.shard-card.owned{border-color:var(--jade);opacity:.7;}
.shard-art{display:flex;justify-content:center;}
.shard-name{font-size:clamp(9px,1.25vh,12px);color:var(--paper);}
.shard-cost{font-size:clamp(9px,1.2vh,12px);color:#c98fff;}
.board-list{display:flex;flex-direction:column;gap:.25em;max-height:40vh;overflow-y:auto;background:rgba(0,0,0,.25);border-radius:10px;padding:.4em .5em;margin-bottom:.5em;}
.bm-msg{display:flex;gap:.4em;font-size:clamp(9px,1.25vh,13px);line-height:1.4;color:var(--paper);}
.bm-msg.me{background:rgba(232,200,119,.13);border-radius:6px;padding:0 .25em;}
.bm-who{color:var(--gold);flex:0 0 auto;max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bm-text{flex:1;word-break:break-word;}
.bm-ts{color:var(--text-dim);font-size:.85em;}
.board-presets{display:flex;gap:.3em;flex-wrap:wrap;}
.ci-tag-borrow{background:#7fe8d0;color:#08181a;margin-left:.4em;}
.cutin-st-borrow .ci-band{border-top-color:#7fe8d0;border-bottom-color:#7fe8d0;box-shadow:0 0 46px -4px #7fe8d0,inset 0 0 70px -24px #7fe8d0;}
.cutin-st-borrow .ci-lines i{background:linear-gradient(90deg,transparent,#c8fff4,transparent);}

/* 碎片商店限时折扣 */
.shard-card.discount{border-color:var(--gold);box-shadow:0 0 16px -5px rgba(232,200,119,.8);}
.disc-tag{font-size:.85em;color:#0b1018;background:var(--gold);border-radius:999px;padding:0 .35em;}
.shard-disc{color:var(--gold);}
.shard-disc b{color:#ffd45e;}

/* 折扣倒计时 / 碎片合成 / 留言搜索 */
.shard-disc-count{font-variant-numeric:tabular-nums;color:#ffd45e;}
.shard-synth-row{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin-bottom:.4em;
  border:1px dashed rgba(159,200,255,.45);border-radius:10px;padding:.35em .6em;background:rgba(159,200,255,.06);}
.shard-synth-note{font-size:clamp(8px,1.1vh,11px);color:var(--text-dim);}
.board-search{display:flex;align-items:center;gap:.5em;margin-bottom:.4em;}
.board-search input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;
  color:var(--paper);font-size:clamp(10px,1.35vh,14px);padding:.3em .6em;font-family:inherit;}
.board-search input:focus{outline:none;border-color:var(--gold);}
.board-count{font-size:clamp(9px,1.2vh,12px);color:var(--text-dim);}

/* ==================== SP 稀有度 ==================== */
:root{ --sp:#ff7ab8; --sp-2:#ffd45e; }
.rar-SP{color:var(--sp);font-weight:700;text-shadow:0 0 8px rgba(255,122,184,.8);}
.codex-card.rar-SP{border-color:rgba(255,122,184,.8);box-shadow:0 0 20px rgba(255,122,184,.4),var(--shadow);}
.codex-card.rar-SP .cc-rarity{color:var(--sp);}
.battle-unit.rar-SP{border-color:rgba(255,122,184,.85);box-shadow:0 0 18px rgba(255,122,184,.35);}
.slot-emoji.rar-SP,.soul-slot.rar-SP{border-color:var(--sp);}
.sc-face.rar-SP{background:linear-gradient(180deg,#5a2050,#2a0a28);border-color:var(--sp);box-shadow:0 0 26px rgba(255,122,184,.6);}
.mini-card.rar-SP{border-color:rgba(255,122,184,.7);box-shadow:0 0 12px rgba(255,122,184,.3);}
.roster-item.rar-SP{border-color:rgba(255,122,184,.6);}
.rate-bar i.sp{background:linear-gradient(90deg,#ff7ab8,#ffd45e);}
.pool-pity.sp b{color:var(--sp);}
.dt-rarity.rar-SP{color:var(--sp);}

/* ==================== SP 专属演出（更高规格） ==================== */
.cutin-sp .ci-band{height:clamp(180px,40vh,380px);border-top-width:3px;border-bottom-width:3px;
  background:linear-gradient(90deg,rgba(20,4,18,0) 0%,rgba(28,6,26,.95) 16%,rgba(38,8,34,.97) 50%,rgba(28,6,26,.95) 84%,rgba(20,4,18,0) 100%);
  box-shadow:0 0 60px -6px #ff7ab8,inset 0 0 90px -26px #ffd45e;}
.cutin-sp .ci-lines i{height:3px;background:linear-gradient(90deg,transparent,#ffd45e,#ff7ab8,transparent);}
.cutin-sp .ci-name{font-size:clamp(16px,2.8vh,30px);}
.cutin-sp .ci-skill{font-size:clamp(26px,5.4vh,64px);text-shadow:0 0 26px #ff7ab8,0 0 44px #ffd45e,0 4px 18px #000;}
.cutin-sp .ci-flash{background:radial-gradient(60% 50% at 26% 50%,#ff9ad0,transparent 70%);}
.cutin-sp .ci-portrait img{filter:drop-shadow(0 12px 34px rgba(0,0,0,.9)) drop-shadow(0 0 34px #ff7ab8) drop-shadow(0 0 60px rgba(255,212,94,.5));}
.ci-tag-sp{background:linear-gradient(90deg,#ff7ab8,#ffd45e);color:#1d0a1c;font-weight:700;}
/* SP 双形态立绘增强 */
.art-spform svg{filter:drop-shadow(0 0 12px rgba(255,122,184,.55)) saturate(1.15);}
.dt-spform{display:inline-flex;height:clamp(92px,16vh,180px);}

/* ==================== SP 限时召唤池 ==================== */
.banner-tabs{display:flex;gap:.4em;margin-bottom:.5em;}
.banner-tab{flex:1;padding:.35em .6em;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text-dim);font-size:clamp(10px,1.4vh,14px);cursor:pointer;font-family:inherit;}
.banner-tab.on{color:var(--gold);border-color:var(--gold);background:rgba(232,200,119,.14);}
.banner-tab.sp.on{color:var(--sp);border-color:var(--sp);background:rgba(255,122,184,.16);box-shadow:0 0 14px -4px var(--sp);}
.tag-sp{font-size:clamp(8px,1.1vh,11px);color:#1d0a1c;background:linear-gradient(90deg,#ff7ab8,#ffd45e);
  border-radius:6px;padding:0 .4em;margin-left:.4em;font-weight:700;}

/* ==================== 召唤主视觉 / 副本徽记 / 装饰落地 ==================== */
.summon-pool{position:relative;background-size:cover;background-position:center 42%;border-radius:14px;overflow:hidden;}
.pool-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,20,.55),rgba(8,10,20,.9));pointer-events:none;}
.summon-pool>*{position:relative;z-index:1;}
.pool-sp-portraits{display:flex;gap:.4em;justify-content:center;margin-top:.4em;}
.psp-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1em;
  background:rgba(255,122,184,.08);border:1px solid rgba(255,122,184,.4);border-radius:10px;padding:.2em .3em;}
.psp-item.up{border-color:var(--gold);background:rgba(232,200,119,.14);box-shadow:0 0 14px -4px var(--sp);}
.art-psp{height:clamp(46px,8vh,84px);width:auto;}
.psp-item span{font-size:clamp(8px,1.1vh,11px);color:var(--paper);}
.psp-up{position:absolute;right:-4px;top:-6px;font-size:clamp(8px,1vh,10px);color:#1d0a1c;background:var(--gold);border-radius:999px;padding:0 .35em;}
.art-crest{position:absolute;right:.25em;top:.25em;height:clamp(14px,2.1vh,22px);width:auto;opacity:.95;filter:drop-shadow(0 1px 3px #000);}
.card-deco{position:absolute;pointer-events:none;opacity:.8;}
.card-deco.tr{right:.2em;top:.2em;}
.guild-card{position:relative;}
.result-deco{position:absolute;pointer-events:none;opacity:.85;}
.result-deco.l{left:.4em;top:.3em;}
.result-deco.r{right:.4em;top:.3em;}
#battle-result{position:relative;}

/* ==================== 表情变体 / 入场横幅 / 结算底图 / 妖气结界 ==================== */
.dt-moods{display:flex;gap:.3em;margin:.25em 0;justify-content:center;}
.mood-chip{font-size:clamp(9px,1.25vh,13px);padding:.15em .6em;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text-dim);cursor:pointer;font-family:inherit;}
.mood-chip:hover{border-color:var(--gold);color:var(--gold);}
.art-mood-img{display:none;}
/* 入场横幅 */
.stage-intro{position:absolute;inset:0;z-index:80;pointer-events:none;overflow:hidden;
  animation:siIn .42s cubic-bezier(.2,.85,.3,1) forwards;}
.si-scene{position:absolute;inset:0;background-size:cover;background-position:center 42%;filter:brightness(.5) saturate(.9);}
.si-banner{position:absolute;left:0;right:0;top:50%;height:clamp(120px,26vh,220px);transform:translateY(-50%);
  background-size:cover;background-position:center;box-shadow:0 0 50px -10px rgba(0,0,0,.95);}
.stage-intro.out{animation:siOut .4s ease-in forwards;}
@keyframes siIn{0%{opacity:0;transform:translateX(-6%);}100%{opacity:1;transform:translateX(0);}}
@keyframes siOut{0%{opacity:1;}100%{opacity:0;transform:translateX(5%);}}
/* 结算底图 */
#battle-result.themed{background-size:cover;background-position:center;}
/* 庭院妖气结界 */
.court-barrier{position:absolute;left:0;right:0;bottom:6%;height:54%;pointer-events:none;z-index:1;
  background-size:100% 100%;background-repeat:no-repeat;opacity:.85;animation:barrierPulse 5s ease-in-out infinite;}
@keyframes barrierPulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.95;transform:scale(1.015);}}
.court-barrier-tag{position:absolute;left:.6em;bottom:2.4em;z-index:2;display:flex;align-items:center;gap:.25em;
  font-size:clamp(9px,1.25vh,13px);color:#ff9ad0;background:rgba(29,10,28,.6);border:1px solid rgba(255,122,184,.5);
  border-radius:999px;padding:.1em .6em;pointer-events:none;}

/* ==================== 四季 / BOSS 横幅 / 警报 / 表情联动 ==================== */
.season-btn{position:relative;}
.phase-btns:not(#phase-btns-time){margin-bottom:.35em;}
.boss-intro .si-banner{box-shadow:0 0 70px -6px rgba(255,60,40,.75),0 0 30px rgba(255,60,40,.4);}
.boss-alert{position:absolute;left:8%;right:8%;top:34%;z-index:85;pointer-events:none;
  height:clamp(60px,12vh,110px);border-radius:12px;overflow:hidden;
  animation:baIn .38s cubic-bezier(.2,.85,.3,1) forwards;}
.boss-alert i,.boss-alert>div{display:block;width:100%;height:100%;background-size:cover;background-position:center;}
.boss-alert.out{animation:baOut .38s ease-in forwards;}
@keyframes baIn{0%{opacity:0;transform:scale(.9) translateY(-6px);}100%{opacity:1;transform:scale(1) translateY(0);}}
@keyframes baOut{0%{opacity:1;}100%{opacity:0;transform:translateY(-10px);}}

/* ==================== 阵型风格 / 四季粒子 / 季节关卡 ==================== */
.result-style{display:inline-block;font-size:clamp(9px,1.3vh,13px);color:#0b1018;background:linear-gradient(90deg,#7fe0d0,#a8e8ff);
  border-radius:999px;padding:.1em .7em;margin-bottom:.3em;}
.result-style.strike{background:linear-gradient(90deg,#ff8a5e,#ffd45e);}
.season-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.season-fx i{position:absolute;width:8px;height:8px;opacity:0;}
.season-fx.spring i{background:#ffc8d8;border-radius:60% 40% 60% 40%;animation:fxPetals 9s linear infinite;}
.season-fx.summer i{background:#c8ffb0;border-radius:50%;box-shadow:0 0 6px #c8ffb0;animation:fxFirefly 7s ease-in-out infinite;}
.season-fx.autumn i{background:#e08a3a;border-radius:40% 60% 50% 50%;animation:fxPetals 7s linear infinite;}
.season-fx.winter i{background:#fff;border-radius:50%;animation:fxSnow 10s linear infinite;}
@keyframes fxPetals{0%{transform:translate(0,-8px) rotate(0);opacity:0;}10%{opacity:.9;}100%{transform:translate(-40px,300px) rotate(340deg);opacity:0;}}
@keyframes fxFirefly{0%,100%{transform:translate(0,0);opacity:0;}25%{opacity:1;}50%{transform:translate(30px,-20px);opacity:.7;}75%{opacity:.9;}}
@keyframes fxSnow{0%{transform:translate(0,-10px);opacity:0;}10%{opacity:.9;}100%{transform:translate(20px,300px);opacity:.2;}}
.season-fx.spring i:nth-child(odd){animation-duration:11s;}
.season-fx.winter i:nth-child(3n){width:5px;height:5px;}
.season-fx.summer i:nth-child(2n){animation-duration:9s;}

/* 季节横幅标注 */
.pb-season{display:inline-block;margin-left:.6em;font-size:clamp(9px,1.25vh,13px);color:#c8ffb0;
  border:1px solid rgba(200,255,176,.45);border-radius:999px;padding:0 .6em;background:rgba(200,255,176,.08);}

/* ==================== 贴图材质层 ==================== */
/* 所有贴图为半透明噪声，用 blend-mode 叠加在原背景之上，不改变原配色 */
.panel,.guild-card,.codex-card,.shop-card,.stage-card-row,.result-box,.mail-item,.court-bld,.friend-note,.shard-synth-row{
  background-image:var(--tex-washi);background-blend-mode:soft-light;background-repeat:repeat;background-size:160px 160px;}
.modal{background-image:var(--tex-ink);background-blend-mode:soft-light;background-size:160px 160px;}
.btn-gold{background-image:var(--tex-gold);background-blend-mode:overlay;}
#screen-title .title-bg{background-image:var(--tex-ink);background-blend-mode:soft-light;background-size:160px 160px;}
.battle-unit{background-image:var(--tex-stone);background-blend-mode:soft-light;background-size:160px 160px;}

/* 纹理调试/展示用 */
.tex-swatch{width:96px;height:96px;border-radius:10px;border:1px solid var(--line);display:inline-block;margin:.2em;}