:root {
  --bg: #fffaf0;
  --panel: #fffef9;
  --panel2: #fff5dc;
  --text: #342f2b;
  --muted: #7d746d;
  --blue: #e8b936;
  --cyan: #e8b936;
  --orange: #ef9fbb;
  --line: rgba(124, 98, 52, 0.16);
  --shadow: 0 20px 55px rgba(114, 83, 38, 0.13);
}

body {
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(224, 180, 57, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 180, 57, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 86% 8%, rgba(247, 198, 216, 0.32), transparent 28%),
    radial-gradient(circle at 8% 74%, rgba(250, 216, 112, 0.2), transparent 24%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.site-header {
  height: 76px;
  background: rgba(255, 253, 246, 0.9);
  border-bottom: 1px solid rgba(178, 136, 45, 0.2);
  box-shadow: 0 9px 30px rgba(106, 78, 38, 0.1);
  backdrop-filter: blur(18px);
}

.nav-wrap {
  height: 76px;
}

.brand {
  color: #3c342c;
  font-family: inherit;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.brand img {
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(248, 208, 91, 0.22), 0 8px 24px rgba(227, 164, 68, 0.18);
}

.nav a {
  position: relative;
  color: #776d64;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.nav a::after {
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #e8b936, #ef9fbb);
  transform: scaleX(0);
  transition: 0.24s;
}

.nav a:hover,
.nav a.active {
  color: #4b3e30;
  background: rgba(244, 195, 66, 0.1);
  text-shadow: none;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}

.hero {
  min-height: 650px;
  background:
    linear-gradient(90deg, #fffaf0 0%, rgba(255, 250, 240, 0.96) 39%, rgba(255, 250, 240, 0.66) 66%, rgba(255, 250, 240, 0.14)),
    url("../images/screenshot2.jpg") 70% center / cover;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(110deg, transparent 0 67%, rgba(246, 181, 205, 0.2)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(225, 177, 46, 0.035) 80px);
  clip-path: none;
}

.hero::after {
  height: 120px;
  background: linear-gradient(transparent, var(--bg));
}

.hero-content {
  width: min(680px, 100%);
}

.eyebrow {
  color: #b68414;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
}

.eyebrow::before {
  background: linear-gradient(90deg, #e3b42e, #ef9fbb);
}

.hero h1 {
  color: #352e27;
  letter-spacing: -2px;
  text-shadow: 0 10px 30px rgba(132, 89, 29, 0.13);
}

.hero h1 span {
  color: #352e27;
  text-shadow: 0 0 28px rgba(232, 185, 54, 0.17);
  -webkit-text-stroke: 0;
}

.hero p {
  color: #665d55;
  font-size: 17px;
}

.btn {
  border-radius: 9px;
  letter-spacing: 0.3px;
}

.btn-primary,
.btn-blue {
  color: #49370c;
  background: linear-gradient(135deg, #f7d86f, #edbd37);
  box-shadow: 0 12px 32px rgba(213, 157, 30, 0.25);
}

.btn-primary:hover,
.btn-blue:hover {
  box-shadow: 0 16px 38px rgba(213, 157, 30, 0.34);
}

.btn-ghost {
  color: #5c4e42;
  background: rgba(255, 254, 249, 0.75);
  border-color: rgba(221, 168, 47, 0.4);
}

.section-head h2,
.page-hero h1,
.info-copy h2,
.download-panel h2,
.article h1 {
  color: #372f29;
  font-family: inherit;
}

.section-head p,
.page-hero p,
.feature-card p,
.info-copy p,
.article-copy p,
.download-panel p {
  color: var(--muted);
}

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 252, 0.98), rgba(255, 248, 231, 0.98));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #e8b936, #efafc5);
}

.card::after {
  top: auto;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-right: 1px solid rgba(231, 169, 188, 0.48);
  border-bottom: 1px solid rgba(231, 169, 188, 0.48);
}

.feature-card:hover {
  border-color: rgba(221, 164, 34, 0.35);
  box-shadow: 0 24px 60px rgba(191, 139, 38, 0.18);
  transform: translateY(-6px);
}

.icon {
  color: #a9790d;
  background: linear-gradient(135deg, rgba(248, 211, 100, 0.23), rgba(247, 198, 216, 0.24));
  border: 1px solid rgba(221, 169, 47, 0.22);
  border-radius: 11px;
}

.fact {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--line);
}

.fact b,
.meta {
  color: #a9790d;
}

.logo-panel {
  background: radial-gradient(circle, rgba(247, 198, 216, 0.3), transparent 54%), linear-gradient(145deg, #fffdf6, #fff2cd);
}

.slider {
  border-color: rgba(168, 124, 38, 0.2);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.slider-btn {
  color: #fff;
  background: rgba(74, 56, 36, 0.72);
  border-radius: 9px;
}

.slider-btn:hover {
  background: linear-gradient(135deg, #e7b72f, #e99bb7);
}

.dot.active {
  background: #e7b72f;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: 86px;
  background: linear-gradient(110deg, rgba(248, 210, 96, 0.14), transparent 44%, rgba(247, 198, 216, 0.26));
  border-bottom: 1px solid var(--line);
}

.page-hero::before {
  position: absolute;
  right: 5%;
  bottom: -6px;
  color: rgba(117, 84, 28, 0.045);
  content: "AGENT 17 / MISSION DATABASE";
  font: 800 clamp(32px, 6vw, 82px) / 1 Arial, sans-serif;
  white-space: nowrap;
}

.page-hero::after {
  top: 24%;
  right: 8%;
  bottom: auto;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e99db8);
  clip-path: none;
}

.breadcrumb {
  color: #8c8177;
}

.breadcrumb span {
  color: #d98ca8;
}

.timeline-item {
  border-left-color: rgba(222, 172, 42, 0.28);
}

.timeline-item::before {
  background: #ef9fbb;
  box-shadow: 0 0 0 6px rgba(239, 159, 187, 0.16);
}

.timeline-item time {
  color: #a9790d;
}

.timeline-item ul {
  color: #70675f;
}

.notice {
  color: #66574e;
  background: rgba(247, 198, 216, 0.2);
  border-left-color: #e99db8;
}

.code-box {
  color: #8b670d;
  background: #fffdf7;
  border-color: rgba(218, 164, 34, 0.34);
}

.copy {
  color: #553f0a;
  background: linear-gradient(135deg, #f8d86d, #efb7ca);
  border-radius: 7px;
}

.article-body,
.article-body p,
.article-body li {
  color: #5f5852;
}

.article-body h2 {
  color: #3a312b !important;
  border-left-color: #e4b22c !important;
}

.article-body h3 {
  color: #a9790d !important;
}

.article-body strong {
  color: #c06f8c !important;
}

.article-body div[style] {
  color: #5b5149 !important;
  background: #fff6dc !important;
  border-left-color: #edabc1 !important;
}

.side-links a {
  color: #6f655d;
}

.side-links a:hover {
  color: #bd758f;
}

.download-panel {
  background: radial-gradient(circle at 50% 0, rgba(247, 198, 216, 0.32), transparent 52%), linear-gradient(145deg, #fffef9, #fff3d3);
}

.site-footer {
  color: #80766f;
  background: #fff5dc;
  border-top: 1px solid rgba(188, 140, 40, 0.2);
  font-family: inherit;
}

.footer-links a {
  color: #5f554c;
}

.footer-links a:hover {
  color: #c57894;
}

.footer-links span {
  color: #cbbda8;
}

.game-notice strong {
  color: #675d54;
}

.game-notice p {
  color: #8a8077;
}

.footer-bottom {
  color: #a09589;
  border-top-color: rgba(108, 82, 43, 0.1);
}

@media (max-width: 850px) {
  .nav {
    top: 76px;
    background: rgba(255, 251, 241, 0.99);
  }

  .hero {
    background-position: 64% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(255, 250, 240, 0.45), rgba(247, 198, 216, 0.12));
  }
}

@media (max-width: 580px) {
  .hero {
    min-height: 590px;
    background: linear-gradient(90deg, rgba(255, 250, 240, 0.97), rgba(255, 250, 240, 0.78)), url("../images/screenshot2.jpg") 65% center / cover;
  }

  .hero p {
    color: #645b53;
  }

  .card {
    border-radius: 11px;
  }

  .page-hero::before {
    font-size: 34px;
  }
}

.menu-btn {
  color: #4b3e30;
}