/* ============================================================
   TEYVAT GUIDE v3 — Premium Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --bg-deep: #04040d;
  --bg-cosmic: #080818;
  --bg-surface: #0c0c22;
  --bg-card: #111130;
  --bg-card-hover: #181840;
  --bg-glass: rgba(12,12,34,0.75);
  --bg-input: #0a0a1e;
  --gold: #c9a96e;
  --gold-light: #e8d5a3;
  --gold-dim: #8a7040;
  --gold-bright: #f0d070;
  --text-primary: #eeece8;
  --text-secondary: #a09db0;
  --text-muted: #6e6b80;
  --border-subtle: #1a1a38;
  --border-gold: #3a3020;
  --border-active: #5a4a30;
  --pyro: #ef7938; --pyro-glow: rgba(239,121,56,0.35);
  --hydro: #4cc2f1; --hydro-glow: rgba(76,194,241,0.35);
  --anemo: #74c2a8; --anemo-glow: rgba(116,194,168,0.35);
  --electro: #af8fd1; --electro-glow: rgba(175,143,209,0.35);
  --dendro: #a5d63e; --dendro-glow: rgba(165,214,62,0.35);
  --cryo: #9fd6e3; --cryo-glow: rgba(159,214,227,0.35);
  --geo: #fab72e; --geo-glow: rgba(250,183,46,0.35);
  --star5: #ffb13b; --star4: #b687c8; --star3: #5a8fb0;
  --success: #4caf50; --warning: #ff9800; --danger: #f44336;
  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-full: 50px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --nav-height: 66px;
  --max-width: 1280px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'DM Sans',sans-serif;
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-height);
  /* 背景：深色底 + 暗色叠加（各页面通过 page-specific 样式设置角色背景） */
  background:
    linear-gradient(180deg, rgba(4,4,13,0.78) 0%, rgba(4,4,13,0.60) 50%, rgba(4,4,13,0.82) 100%);
  background-attachment: fixed;
  background-color: var(--bg-deep);
}
a { color:var(--gold-light); text-decoration:none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }
h1,h2,h3,h4 { font-family:'Cinzel',serif; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dim); }

/* ---- Starfield Canvas ---- */
#starfield { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0; }

/* ---- NAVIGATION ---- */
.nav {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-height);
  background:rgba(4,4,13,0.65); backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;transition:all 0.35s var(--ease-out);
}
.nav.scrolled {
  background:rgba(4,4,13,0.96);
  border-bottom-color:var(--border-gold);
  box-shadow:0 1px 24px rgba(201,169,110,0.06);
}
.nav-logo {
  font-family:'Cinzel',serif;font-size:1.55rem;font-weight:900;
  background:linear-gradient(135deg,var(--gold-light),var(--gold),#a08050);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:2px;text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.nav-logo i { color:var(--gold);-webkit-text-fill-color:var(--gold);font-size:1.3rem; }
.nav-links { display:flex;gap:2rem;align-items:center; }
.nav-links a {
  color:var(--text-secondary);text-decoration:none;
  font-size:0.8rem;font-weight:500;letter-spacing:0.6px;
  text-transform:uppercase;transition:color 0.2s;position:relative;
  padding:5px 0;
}
.nav-links a::after {
  content:'';position:absolute;bottom:-1px;left:0;width:0;height:2px;
  background:var(--gold);transition:width 0.3s var(--ease-out);
}
.nav-links a:hover,.nav-links a.active { color:var(--gold-light); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-hamburger { display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem; }
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  display:none;position:absolute;top:100%;left:0;min-width:210px;
  background:rgba(8,8,24,0.98);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:0.5rem 0;margin-top:10px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a {
  display:block;padding:9px 18px;font-size:0.78rem;text-transform:none;
  transition:background 0.2s;
}
.nav-dropdown-menu a:hover { background:rgba(201,169,110,0.1); }
.nav-dropdown-menu a::after { display:none; }

/* ---- HERO ---- */
.hero {
  position:relative;z-index:1;text-align:center;
  padding:5rem 2rem 4rem;min-height:60vh;
  display:flex;align-items:center;justify-content:center;
}
.hero::before {
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(201,169,110,0.08) 0%,transparent 65%);
  pointer-events:none;
}
.hero::after {
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,110,0.25),transparent);
}
.hero-sub {
  position:relative;z-index:1;text-align:center;padding:2.5rem 2rem 1.5rem;
}
.hero-sub h1 {
  font-family:'Cinzel',serif;font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;background:linear-gradient(180deg,#fff,var(--gold-light),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-content { position:relative;z-index:2;max-width:750px; }
.hero-badge {
  display:inline-block;padding:7px 22px;border-radius:var(--radius-full);
  background:rgba(201,169,110,0.1);border:1px solid var(--border-gold);
  color:var(--gold);font-size:0.78rem;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;margin-bottom:2rem;
  animation:fadeInUp 0.8s var(--ease-out);
}
.hero h1 {
  font-family:'Cinzel',serif;font-size:clamp(2.8rem,7vw,5.5rem);
  font-weight:900;line-height:1.1;letter-spacing:2px;
  background:linear-gradient(180deg,#fff 0%,var(--gold-light) 35%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeInUp 0.8s 0.1s var(--ease-out) both;
}
.hero p {
  font-size:1.15rem;color:var(--text-secondary);max-width:560px;
  margin:1.5rem auto 2.5rem;line-height:1.7;
  animation:fadeInUp 0.8s 0.2s var(--ease-out) both;
}
.hero-cta { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp 0.8s 0.3s var(--ease-out) both; }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;border-radius:var(--radius-full);
  font-family:'DM Sans',sans-serif;font-size:0.92rem;
  font-weight:600;text-decoration:none;cursor:pointer;border:none;
  transition:all 0.3s var(--ease-out);letter-spacing:0.3px;
}
.btn-primary {
  background:linear-gradient(135deg,var(--gold),#b8943a);
  color:#111;box-shadow:0 4px 24px rgba(201,169,110,0.25);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 36px rgba(201,169,110,0.45); }
.btn-outline {
  background:transparent;color:var(--gold-light);
  border:1.5px solid var(--border-gold);
}
.btn-outline:hover { background:rgba(201,169,110,0.08);border-color:var(--gold); }
.btn-sm { padding:9px 20px;font-size:0.8rem; }
.btn-xs { padding:5px 13px;font-size:0.72rem;border-radius:var(--radius-sm); }
.btn:disabled { opacity:0.4;cursor:not-allowed;transform:none!important; }

/* ---- SECTION ---- */
.section { position:relative;z-index:1;padding:5rem 2rem; }
.section-inner { max-width:var(--max-width);margin:0 auto; }
.section-header { text-align:center;margin-bottom:3.5rem; }
.section-tag {
  display:inline-block;padding:5px 16px;border-radius:var(--radius-full);
  background:rgba(201,169,110,0.08);color:var(--gold);
  font-size:0.72rem;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;margin-bottom:0.8rem;
}
.section-header h2 {
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:700;letter-spacing:1.5px;margin-bottom:0.6rem;
}
.section-header p { color:var(--text-secondary);max-width:520px;margin:0 auto; }

/* ---- SECTION DIVIDER ---- */
.section-divider {
  width:80px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
  margin:0 auto 1.5rem;
}

/* ---- CARDS (glass morphism) ---- */
.card {
  background:rgba(12,12,34,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:1.5rem;
  transition:all 0.4s var(--ease-out);
}
.card:hover {
  border-color:var(--border-active);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,0.35),0 0 0 1px rgba(201,169,110,0.06);
}
.card-header { display:flex;align-items:center;gap:12px;margin-bottom:1rem; }

/* ---- GRIDS ---- */
.grid-1 { display:grid;grid-template-columns:1fr;gap:1.5rem; }
.grid-2 { display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.5rem; }
.grid-3 { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem; }
.grid-4 { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem; }
.grid-5 { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem; }

/* ---- FILTER BAR ---- */
.filter-bar {
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem;
  justify-content:center;align-items:center;
}
.filter-bar input[type="text"] {
  padding:11px 20px;border-radius:var(--radius-full);
  border:1px solid var(--border-subtle);background:var(--bg-input);
  color:var(--text-primary);font-size:0.88rem;min-width:250px;
  outline:none;transition:border-color 0.25s;
}
.filter-bar input[type="text"]:focus { border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,110,0.08); }
.filter-chip {
  padding:8px 18px;border-radius:var(--radius-full);
  border:1px solid var(--border-subtle);background:transparent;
  color:var(--text-secondary);font-size:0.8rem;font-weight:500;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.filter-chip:hover { border-color:var(--gold-dim);color:var(--text-primary); }
.filter-chip.active { border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,0.1); }

/* ---- ELEMENT BADGE ---- */
.element-badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--radius-full);
  font-size:0.7rem;font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:0.5px;
}
.element-icon {
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:#fff;
}

/* ---- TAG ---- */
.tag {
  display:inline-block;padding:3px 10px;border-radius:var(--radius-full);
  font-size:0.7rem;font-weight:600;letter-spacing:0.5px;
}

/* ---- TOOL PANEL ---- */
.tool-panel {
  background:var(--bg-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:2rem;
}
.tool-panel h3 { font-size:1.3rem;margin-bottom:0.5rem; }
.tool-grid { display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start; }

/* ---- TABLES ---- */
.stat-table { width:100%;border-collapse:collapse; }
.stat-table th,.stat-table td {
  padding:11px 16px;text-align:left;border-bottom:1px solid var(--border-subtle);
  font-size:0.88rem;
}
.stat-table th {
  color:var(--text-muted);font-weight:600;text-transform:uppercase;
  font-size:0.72rem;letter-spacing:1px;
}
.stat-table tr:hover td { background:rgba(255,255,255,0.015); }

/* ---- TABS ---- */
.tabs { display:flex;gap:2px;border-bottom:1px solid var(--border-subtle);margin-bottom:1.5rem;overflow-x:auto; }
.tab-btn {
  padding:11px 22px;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--text-muted);font-size:0.85rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:all 0.2s;
}
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { color:var(--gold);border-bottom-color:var(--gold); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ---- PROGRESS BAR ---- */
.progress-bar { height:8px;background:var(--border-subtle);border-radius:4px;overflow:hidden; }
.progress-fill { height:100%;border-radius:4px;transition:width 0.5s var(--ease-out); }

/* ---- CHARACTER CARD ---- */
.char-card {
  background:rgba(17,17,48,0.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all 0.4s var(--ease-out);cursor:pointer;
}
.char-card:hover {
  border-color:var(--border-active);
  transform:translateY(-6px);
  box-shadow:0 20px 56px rgba(0,0,0,0.5),0 0 0 1px rgba(201,169,110,0.12),0 0 80px rgba(201,169,110,0.04);
}
.char-card.expanded { grid-column:1/-1; }
.char-card-top { position:relative; }
.char-card-img {
  width:100%;padding-bottom:100%;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;font-weight:900;color:#fff;
  transition:filter 0.4s;
}
/* Ensure image containers have positioning for absolute children */
.char-card-img,
.tier-chip-avatar,
.banner-char-avatar,
.home-team-slot-avatar,
.build-img-wrap,
.wpn-img-side { position:relative; overflow:hidden; }
.char-card:hover .char-card-img { filter:brightness(1.08); }
.char-card-img img {
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
}
img.img-ok { /* loaded successfully */ }
img.img-fail { opacity:0 !important; visibility:hidden !important; }
.char-card-body { padding:1rem; }
.char-card-body h3 { font-size:1rem;font-weight:700; }
.char-card-detail { display:none;padding:0 1rem 1rem;border-top:1px solid var(--border-subtle);margin-top:0.75rem;animation:fadeInUp 0.35s var(--ease-out); }
.char-card.expanded .char-card-detail { display:block; }

/* ---- WEAPON CARD ---- */
.wpn-card {
  background:rgba(17,17,48,0.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all 0.4s var(--ease-out);display:flex;align-items:stretch;
}
.wpn-card:hover {
  border-color:var(--border-active);transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(0,0,0,0.4),0 0 0 1px rgba(201,169,110,0.06);
}
.wpn-img-side {
  width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  position:relative;font-size:2.5rem;color:#fff;
}
.wpn-img-side img { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; }
.wpn-info { flex:1;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:5px; }
.wpn-info h3 { font-size:1rem;font-weight:700; }
.wpn-stats { display:flex;gap:1rem;font-size:0.82rem;color:var(--text-secondary); }
.wpn-passive { font-size:0.8rem;color:var(--text-secondary);line-height:1.5; }
.wpn-best { font-size:0.76rem;color:var(--gold-light);margin-top:auto; }

/* ---- BOSS CARD ---- */
.boss-card {
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all 0.4s var(--ease-out);
}
.boss-card:hover {
  border-color:var(--border-active);transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,0.35);
}
.boss-card-header-bar { padding:1.25rem;display:flex;align-items:center;gap:12px; }
.boss-card-body { padding:0 1.25rem 1.25rem; }

/* ---- FOOTER ---- */
.footer {
  position:relative;z-index:1;border-top:1px solid var(--border-subtle);
  padding:3.5rem 2rem 2.5rem;text-align:center;margin-top:2rem;
  background:rgba(4,4,13,0.5);
}
.footer-logo {
  font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;
  color:var(--gold);letter-spacing:2px;margin-bottom:0.5rem;
}
.footer-links { display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0; }
.footer-links a { color:var(--text-secondary);font-size:0.85rem;transition:color 0.2s; }
.footer-links a:hover { color:var(--gold-light); }
.footer-disclaimer { font-size:0.72rem;color:var(--text-muted);max-width:520px;margin:1.5rem auto 0;line-height:1.6; }

/* ---- RESULT CARD ---- */
.result-card {
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:1rem;text-align:center;
}
.result-value {
  font-family:'Cinzel',serif;font-size:2rem;font-weight:900;color:var(--gold-light);
}

/* ---- NO RESULTS ---- */
.no-results {
  text-align:center;padding:3rem;color:var(--text-muted);grid-column:1/-1;
}
.no-results i { font-size:2.5rem;margin-bottom:1rem;display:block;color:var(--border-subtle); }

/* ---- MODAL ---- */
.modal-overlay {
  position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
.modal {
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:2rem;max-width:600px;width:100%;
  max-height:80vh;overflow-y:auto;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
  from { opacity:0;transform:translateY(35px); }
  to { opacity:1;transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes pulse-glow {
  0%,100% { box-shadow:0 0 20px var(--gold-dim); }
  50% { box-shadow:0 0 45px var(--gold-light); }
}
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}

/* ---- SCROLL REVEAL ---- */
.reveal { opacity:0;transform:translateY(50px);transition:all 0.8s var(--ease-out); }
.reveal.visible { opacity:1;transform:translateY(0); }

/* ---- ALTERNATING SECTION ---- */
.section-alt {
  background:linear-gradient(180deg,rgba(255,255,255,0.008) 0%,rgba(201,169,110,0.02) 50%,rgba(255,255,255,0.008) 100%);
  border-top:1px solid rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.02);
}

/* ---- STATS BAR ---- */
.stats-bar {
  text-align:center;font-size:0.84rem;color:var(--text-muted);
  margin-bottom:1.5rem;letter-spacing:0.5px;
}
.stats-bar span { color:var(--gold);font-weight:600; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px) {
  .tool-grid { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex;flex-direction:column;position:absolute;
    top:var(--nav-height);left:0;right:0;
    background:rgba(4,4,13,0.98);padding:1.5rem;gap:1rem;
    border-bottom:1px solid var(--border-subtle);z-index:999;
  }
  .nav-hamburger { display:block; }
  .hero { padding:3rem 1.5rem 2.5rem;min-height:40vh; }
  .hero h1 { font-size:2rem; }
  .grid-3,.grid-4,.grid-5 { grid-template-columns:1fr; }
  .section { padding:3rem 1.5rem; }
}
@media (max-width:480px) {
  .section { padding:2.5rem 1rem; }
  .hero h1 { font-size:1.7rem; }
  .btn { padding:10px 22px;font-size:0.84rem; }
}