/* === COMMON CSS — Shared across all pages === */
/* 万能对抗模拟器 Design System */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#06060a;
  --surface:rgba(255,255,255,.03);
  --surface2:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.06);
  --border2:rgba(255,255,255,.1);
  --red:#ff3b4e;
  --red-soft:#ff6b7a;
  --red-glow:rgba(255,59,78,.4);
  --red-dim:rgba(255,59,78,.12);
  --cyan:#00d4ff;
  --cyan-soft:#5ce5ff;
  --cyan-glow:rgba(0,212,255,.4);
  --cyan-dim:rgba(0,212,255,.12);
  --gold:#e8b838;
  --gold-light:#ffd666;
  --gold-glow:rgba(232,184,56,.3);
  --gold-dim:rgba(232,184,56,.06);
  --hp-high:#34d399;
  --hp-mid:#fbbf24;
  --hp-low:#f87171;
  --text:#ede9e3;
  --text2:#9a9aad;
  --text3:#5a5a72;
  --font-title:'LXGW WenKai Screen','Songti SC','Noto Serif SC',serif;
  --font-body:'LXGW WenKai Screen',-apple-system,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

/* === ATMOSPHERE === */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmosphere .glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.08;animation:glowDrift 25s ease-in-out infinite}
.atmosphere .glow:nth-child(1){width:50vw;height:50vw;max-width:600px;max-height:600px;background:var(--red);top:-15%;left:-10%;animation-delay:0s}
.atmosphere .glow:nth-child(2){width:45vw;height:45vw;max-width:500px;max-height:500px;background:var(--cyan);bottom:-15%;right:-10%;animation-delay:-12s}
.atmosphere .glow:nth-child(3){width:30vw;height:30vw;max-width:300px;max-height:300px;background:var(--gold);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-6s;opacity:.04}
@keyframes glowDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-30px) scale(1.05)}66%{transform:translate(-15px,20px) scale(.95)}}

/* Grain */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === LAYOUT === */
.app{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:20px 24px 80px}

/* === ERROR TOAST === */
.error-toast-container{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:99999;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  pointer-events:none;width:min(420px,92vw);
}
.error-toast{
  pointer-events:auto;
  width:100%;
  background:rgba(20,14,28,.92);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,59,78,.25);
  border-radius:16px;
  padding:16px 20px;
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 60px rgba(255,59,78,.08),inset 0 1px 0 rgba(255,255,255,.05);
  animation:toastIn .4s var(--ease-out-expo) forwards;
  cursor:pointer;
  transition:opacity .3s ease,transform .3s ease;
}
.error-toast.dismiss{animation:toastOut .35s ease forwards}
.error-toast-icon{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.error-toast-emoji{font-size:1.3rem;line-height:1}
.error-toast-title{
  font-family:var(--font-title);font-size:.92rem;font-weight:600;
  color:var(--red-soft);letter-spacing:.02em;
}
.error-toast-msg{
  font-size:.82rem;color:var(--text2);line-height:1.6;
  margin-bottom:10px;
}
.error-toast-hint{
  font-size:.72rem;color:var(--text3);
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:8px;
  display:flex;align-items:center;gap:6px;
}
.error-toast-hint::before{
  content:'';display:inline-block;width:4px;height:4px;
  background:var(--text3);border-radius:50%;flex-shrink:0;
}
.error-toast-progress{
  position:absolute;bottom:0;left:16px;right:16px;height:2px;
  border-radius:0 0 16px 16px;overflow:hidden;
}
.error-toast-progress-bar{
  height:100%;background:linear-gradient(90deg,var(--red),var(--red-soft));
  border-radius:2px;
  animation:toastProgress 5s linear forwards;
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(-20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-12px) scale(.97)}
}
@keyframes toastProgress{from{width:100%}to{width:0%}}