/* ⚡ 物理封神录 - 共享样式 */
:root {
  --bg: #060618; --card: rgba(14,14,50,0.94); --border: rgba(100,140,255,0.25);
  --gold: #ffd700; --green: #00e887; --red: #ff5252; --purple: #a78bfa;
  --text: #d8d8f0; --muted: rgba(255,255,255,0.42);
  --hp-bar: #ff4757; --hp-bg: rgba(255,255,255,0.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:var(--bg);min-height:100vh;padding:20px 10px 60px;
  background-image:radial-gradient(ellipse at 20% 10%,rgba(60,100,220,0.10) 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(120,40,200,0.08) 0%,transparent 60%)}
.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d) ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
.app{position:relative;z-index:1;width:100%;max-width:900px;margin:0 auto}
/* 通用卡片 */
.fscard{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:24px 28px;
  box-shadow:0 0 60px rgba(60,100,255,0.08),0 16px 48px rgba(0,0,0,0.5);margin-bottom:16px}
/* 标题 */
.fstitle{text-align:center;font-size:1.7em;font-weight:900;
  background:linear-gradient(135deg,#5bc0ff,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* HP 血条 */
.hpbar{display:flex;align-items:center;gap:8px;margin:8px 0}
.hpbar .hplabel{font-size:.82em;color:var(--muted)}
.hpbar .hptrack{flex:1;height:10px;background:var(--hp-bg);border-radius:5px;overflow:hidden}
.hpbar .hpfilled{height:100%;background:linear-gradient(90deg,var(--hp-bar),#ff6b81);border-radius:5px;transition:width .5s}
.hpbar .hpnum{font-size:.8em;font-weight:700;color:#ff6b81;min-width:30px}
/* 连击 */
.combowrap{text-align:center;min-height:36px;margin:4px 0}
.combo{display:inline-block;padding:6px 18px;border-radius:20px;font-weight:700;font-size:.85em;transition:all .3s;opacity:0;transform:scale(.5)}
.combo.show{opacity:1;transform:scale(1)}
.combo.c1{background:rgba(0,232,135,.12);color:var(--green)}
.combo.c2{background:rgba(91,192,255,.12);color:#5bc0ff}
.combo.c3{background:rgba(255,193,7,.12);color:var(--gold)}
.combo.c4{background:rgba(167,139,250,.12);color:var(--purple);animation:pulse .6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* 剧情弹窗 */
.story-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:500;
  display:flex;align-items:center;justify-content:center;animation:fadeIn .4s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.story-box{background:linear-gradient(135deg,#0a0a3a,#1a1040);border:2px solid rgba(167,139,250,.4);border-radius:20px;
  padding:32px 28px;max-width:420px;width:90%;text-align:center;box-shadow:0 0 80px rgba(139,92,246,.3)}
.story-box .realm-icon{font-size:3em;margin-bottom:8px}
.story-box .realm-name{font-size:1.4em;font-weight:900;color:var(--gold);margin:4px 0}
.story-box .story-text{color:var(--text);font-size:.9em;line-height:1.8;margin:16px 0}
.story-box .story-text em{color:#f472b6;font-style:normal;font-weight:600}
.story-btn{padding:12px 36px;border:none;border-radius:25px;background:linear-gradient(135deg,#8b5cf6,#f472b6);
  color:#fff;font-size:.95em;font-weight:700;cursor:pointer;margin-top:8px;transition:all .3s;font-family:inherit}
.story-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.4)}
/* 境界突破 */
.breakthrough{position:fixed;top:0;left:0;width:100%;height:100%;z-index:600;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);animation:fadeIn .5s}
.breakthrough .bt-inner{text-align:center}
.breakthrough .bt-icon{font-size:5em;animation:btBounce 1s ease-out}
@keyframes btBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.breakthrough .bt-title{font-size:2em;font-weight:900;color:var(--gold);margin:12px 0;text-shadow:0 0 30px rgba(255,215,0,.5)}
.breakthrough .bt-sub{color:var(--text);font-size:.95em;margin:4px 0}
/* 粒子层 */
#particleLayer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:400}
.part{position:absolute;pointer-events:none;font-weight:700;font-size:1.3em;animation:fly 1.2s ease-out forwards}
@keyframes fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.6)}}
/* 浮动提示 */
.toast{position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:700;
  padding:10px 24px;border-radius:20px;font-weight:700;font-size:.9em;animation:toastIn .8s ease-out forwards;pointer-events:none}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(20px)}20%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}
.toast.ok{background:rgba(0,232,135,.15);color:var(--green);border:1px solid rgba(0,232,135,.3)}
.toast.warn{background:rgba(255,82,82,.15);color:var(--red);border:1px solid rgba(255,82,82,.3)}
.toast.combo{background:rgba(255,193,7,.15);color:var(--gold);border:1px solid rgba(255,193,7,.3)}
/* 屏幕震动 */
.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
/* 毕业证书 */
.cert-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:800;
  display:flex;align-items:center;justify-content:center;flex-direction:column}
.cert{background:#fffef5;color:#2a1a0a;padding:40px 36px;border-radius:12px;max-width:400px;width:92%;text-align:center;
  border:6px double #8b5cf6;box-shadow:0 0 60px rgba(139,92,246,.4);font-family:'KaiTi','STKaiti','serif'}
.cert h2{font-size:1.6em;margin:4px 0;color:#6d28d9}
.cert .cert-seal{font-size:4em;margin:12px 0}
.cert .cert-info{font-size:.85em;line-height:2;color:#555}
.cert .cert-btn{margin-top:16px;padding:12px 32px;border:none;border-radius:20px;
  background:linear-gradient(135deg,#8b5cf6,#f472b6);color:#fff;font-size:.9em;font-weight:700;cursor:pointer}
/* 响应式 */
@media(max-width:600px){
  .fscard{padding:16px 12px;border-radius:14px}
  .fstitle{font-size:1.3em}
  .story-box{padding:24px 18px}
  .breakthrough .bt-title{font-size:1.5em}
  .cert{padding:24px 18px}
}