/* ═══════════════════════════════════════════════════════
   AllianceGame — 公共样式
   所有页面共享，浏览器缓存后后续页面零额外下载
   ═══════════════════════════════════════════════════════ */

/* ── CSS 变量 ── */
:root{
--bg:#0c0c18;--bg2:#12122a;--bg3:#181835;--card:#161630;--card2:#1c1c3a;
--accent:#6c5ce7;--accent2:#a29bfe;--accent-glow:rgba(108,92,231,0.25);
--orange:#ff6b35;--orange2:#ff8c5a;--green:#00e676;--cyan:#00d4ff;
--border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.1);
--text:#eef0f6;--text2:#9498b0;--text3:#5c6080;
}

/* ── 基础重置 ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#0c0c18;background:var(--bg);
  color:#eef0f6;color:var(--text);
  font-family:-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  line-height:1.6;overflow-x:hidden
}

/* ── 滚动条 ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}

/* ── 视频背景 ── */
.video-bg{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;pointer-events:none;background:linear-gradient(135deg,#0c0c18 0%,#181835 100%)}
.video-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background:rgba(12,12,24,0.6);opacity:.6}

/* ── 导航栏 ── */
.top-bar{background:rgba(12,12,24,0.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.08);position:fixed;top:0;left:0;width:100%;z-index:200}
.top-inner{padding:0 2rem;height:56px;display:flex;align-items:center;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;font-size:1.2rem;color:var(--text);white-space:nowrap}
.logo-mark{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--orange));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;font-weight:900}
.nav-tabs{display:flex;gap:0;list-style:none;height:100%;flex-shrink:0;white-space:nowrap}
.nav-tabs li{height:100%}
.nav-tabs a{display:flex;align-items:center;height:100%;padding:0 1rem;font-size:.9rem;color:var(--text2);text-decoration:none;border-bottom:2px solid transparent;transition:all .25s}
.nav-tabs a:hover,.nav-tabs a.active{color:var(--text);border-bottom-color:var(--accent)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.online-pill{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--green);background:rgba(0,230,118,0.06);border:1px solid rgba(0,230,118,0.15);padding:.3rem .8rem;border-radius:20px}
.online-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.menu-toggle{display:none;background:none;border:1px solid var(--border2);color:var(--text);padding:.3rem .6rem;border-radius:6px;cursor:pointer;font-size:1.1rem}

/* ── 用户/登录 标签 ── */
.user-pill{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--text);font-size:.82rem;padding:.25rem .6rem .25rem .3rem;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid var(--border2);transition:all .25s}
.user-pill:hover{border-color:var(--accent);background:rgba(108,92,231,0.08)}
.login-pill{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--accent2);font-size:.82rem;padding:.3rem .8rem;border-radius:20px;border:1px solid rgba(162,155,254,0.2);background:rgba(108,92,231,0.06);transition:all .25s}
.login-pill:hover{border-color:var(--accent);background:rgba(108,92,231,0.15);color:#fff}

/* ── 页脚 ── */
footer{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:.75rem;border-top:1px solid var(--border);margin-top:2rem;position:relative;z-index:1}
footer a{color:var(--accent2);text-decoration:none}

/* ── Toast 通知 ── */
.ag-toast-container{position:fixed;top:70px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.ag-toast{pointer-events:auto;padding:.6rem 1.2rem;border-radius:8px;font-size:.82rem;color:var(--text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border2);animation:toastIn .3s ease-out;max-width:320px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ag-toast.success{background:rgba(0,230,118,0.12);border-color:rgba(0,230,118,0.25);color:var(--green)}
.ag-toast.warning{background:rgba(255,107,53,0.12);border-color:rgba(255,107,53,0.25);color:var(--orange)}
.ag-toast.error{background:rgba(255,50,50,0.12);border-color:rgba(255,50,50,0.25);color:#ff6666}
.ag-toast.info{background:rgba(108,92,231,0.12);border-color:rgba(108,92,231,0.25);color:var(--accent2)}
.ag-toast.fade-out{animation:toastOut .3s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* ── 骨架屏加载动画 ── */
.ag-loading{background:linear-gradient(90deg,var(--bg3) 25%,var(--card2) 50%,var(--bg3) 75%);background-size:200% 100%;animation:agShimmer 1.5s infinite;border-radius:4px;color:transparent !important;display:inline-block;min-width:2em}
@keyframes agShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 网络状态横幅 ── */
.ag-offline-bar{position:fixed;top:56px;left:0;width:100%;z-index:199;background:rgba(255,107,53,0.15);border-bottom:1px solid rgba(255,107,53,0.3);color:var(--orange);text-align:center;font-size:.78rem;padding:.4rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none}
.ag-offline-bar.visible{display:block}

/* ── backdrop-filter 降级 ── */
@supports not (backdrop-filter:blur(1px)){
  .top-bar{background:rgba(12,12,24,0.92)}
  .ag-toast{background:rgba(12,12,24,0.95)}
  .ag-offline-bar{background:rgba(255,107,53,0.2)}
}

/* ── 响应式：移动端导航 ── */
@media(max-width:768px){
  .nav-tabs{display:none;position:absolute;top:56px;left:0;width:100%;flex-direction:column;background:rgba(12,12,24,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.5rem 0}
  .nav-tabs.open{display:flex}
  .nav-tabs li{height:auto}
  .nav-tabs a{padding:.7rem 1.5rem;border-bottom:none}
  .menu-toggle{display:block}
  .online-pill{font-size:.7rem;padding:.2rem .5rem}
}
@media(max-width:480px){
  .top-inner{padding:0 .8rem;gap:.8rem}
  .logo{font-size:1rem}
  .logo span:last-child{display:none}
}

/* ── PC 基础适配（1024px+） ── */
@media(min-width:1024px){
  html{font-size:16px}
  .top-inner{height:58px;gap:1.2rem;padding:0 2rem}
  .logo{font-size:1.15rem}
  .logo-mark{width:30px;height:30px;font-size:.8rem}
  .nav-tabs a{font-size:15px;padding:0 14px}
  .nav-right{gap:.8rem}
  .online-pill{font-size:13px;padding:4px 10px}
  .user-pill{font-size:13px;padding:4px 10px 4px 6px}
  .login-pill{font-size:13px;padding:4px 10px}
  footer{font-size:.78rem}
}

/* ── 大屏适配（1600px+） ── */
@media(min-width:1600px){
  html{font-size:17px}
  .top-inner{height:62px;gap:1.5rem;padding:0 2.5rem}
  .wrapper,.hero,.features{max-width:1500px!important}
  .wrapper{grid-template-columns:1fr 320px!important;gap:1.5rem!important}
  .features{gap:1.2rem!important;padding:1rem 1.5rem 1.5rem!important}
  .logo{font-size:1.2rem}
  .logo-mark{width:32px;height:32px;font-size:.85rem}
  .nav-tabs a{padding:0 16px;font-size:16px}
  .nav-right{gap:1rem}
  .online-pill{font-size:14px;padding:5px 12px}
  .user-pill{font-size:14px;padding:5px 12px 5px 7px}
  .login-pill{font-size:14px;padding:5px 12px}
  .profile-wrap{max-width:900px!important}
  .auth-box{max-width:480px!important;padding:2.5rem}
  footer{font-size:.8rem;padding:2rem 1.2rem}
}

/* ── 超大屏适配（1920px+） ── */
@media(min-width:1920px){
  html{font-size:18px}
  .top-inner{height:66px;gap:2rem;padding:0 3rem}
  .wrapper,.hero,.features{max-width:1700px!important}
  .wrapper{grid-template-columns:1fr 360px!important;gap:1.8rem!important}
  .features{gap:1.5rem!important;padding:1.2rem 2rem 2rem!important}
  .logo{font-size:1.3rem}
  .logo-mark{width:34px;height:34px;font-size:.9rem}
  .nav-tabs a{padding:0 20px;font-size:17px}
  .nav-right{gap:1.2rem}
  .online-pill{font-size:15px;padding:6px 14px}
  .user-pill{font-size:15px;padding:6px 14px 6px 8px}
  .login-pill{font-size:15px;padding:6px 14px}
  .profile-wrap{max-width:1100px!important}
  .auth-box{max-width:540px!important;padding:3rem}
  footer{font-size:.82rem;padding:2.5rem 1.5rem}
}