@font-face {
  font-family: "mf";
  src: url("/staticweb/two_subset.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink-base: #06070a;
  --paper: rgba(18, 22, 30, 0.86);
  --paper-strong: rgba(10, 14, 20, 0.92);
  --border: rgba(198, 171, 118, 0.35);
  --border-soft: rgba(198, 171, 118, 0.18);
  --gold: #d6b97a;
  --gold-soft: rgba(214, 185, 122, 0.15);
  --jade: #6f9a86;
  --jade-deep: #3f5c52;
  --ink: #e8e1d2;
  --ink-muted: #a59c8b;
  --violet: #7a6bb7;
  --shadow: rgba(6, 8, 12, 0.6);
  --radius: 16px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  color: var(--ink);
  background-color: var(--ink-base);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.35), rgba(4, 6, 10, 0.95)),
    url("/staticweb/web_bg.webp") center top / cover no-repeat;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 3rem 6vw;
  animation: fadeIn 0.9s ease-out both;
}

.shell {
  width: min(980px, 100%);
  display: grid;
  gap: 2.2rem;
}

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2.6rem;
  box-shadow: 0 40px 70px var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: floatCard 6s ease-in-out infinite;
}

.center-card {
  text-align: center;
}

.center-card .header {
  justify-content: center;
  text-align: center;
  width: 100%;
}

.center-card .header > div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.center-card .header h1 {
  width: 100%;
}

.center-card .subtitle {
  text-align: center;
}

.center-text {
  text-align: center;
}

.card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px dashed var(--border-soft);
  pointer-events: none;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.seal {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, #c24b3c, #8f2f27);
  display: grid;
  place-items: center;
  color: #f6e6c8;
  font-size: 2rem;
  font-family: "mf", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  box-shadow: 0 10px 26px rgba(158, 60, 48, 0.45);
  animation: sealPulse 3.8s ease-in-out infinite;
}

.header h1 {
  font-size: 2.9rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-family: "mf", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  text-align: center;
  width: 100%;
  margin-right: -0.18em;
}

.subtitle {
  color: var(--ink-muted);
  margin-top: 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

.form {
  display: grid;
  gap: 1.4rem;
}

.label {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.field {
  display: grid;
  gap: 0.5rem;
}

input,
select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(10, 14, 20, 0.65);
  color: var(--ink);
  outline: none;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

input:focus,
select:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(111, 154, 134, 0.25);
  transform: translateY(-1px);
}

input::placeholder {
  color: rgba(232, 225, 210, 0.45);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.18em;
  background:
    linear-gradient(135deg, rgba(85, 120, 107, 0.95), rgba(53, 78, 70, 0.95)),
    linear-gradient(90deg, rgba(214, 185, 122, 0.25), rgba(214, 185, 122, 0.05));
  color: #efe7d6;
  border: 1px solid rgba(214, 185, 122, 0.45);
  box-shadow:
    0 12px 24px rgba(38, 58, 52, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 30px rgba(38, 58, 52, 0.6),
    0 0 18px rgba(214, 185, 122, 0.2);
}

.btn:active {
  transform: translateY(0);
}

.btn-outline {
  background: rgba(111, 154, 134, 0.1);
  color: var(--jade);
  border-color: rgba(111, 154, 134, 0.4);
  box-shadow: none;
  letter-spacing: 0.08em;
}

.btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(63, 92, 82, 0.25);
}

.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.link {
  color: var(--gold);
  text-decoration: none;
  position: relative;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.link:hover::after {
  opacity: 1;
}

.badge-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 5vw;
  z-index: 50;
}

.modal.show {
  display: flex;
}

.modal-card {
  width: min(420px, 92vw);
  background: rgba(12, 16, 22, 0.92);
  border: 1px solid rgba(214, 185, 122, 0.35);
  border-radius: 18px;
  padding: 1.8rem 2rem 1.6rem;
  text-align: center;
  box-shadow: 0 30px 60px var(--shadow);
  animation: rise 0.35s ease;
}

.modal-card .section-title {
  font-size: 1.6rem;
  letter-spacing: 0.28em;
  margin-bottom: 0.8rem;
  white-space: nowrap;
}

.modal-card p {
  line-height: 1.7;
}

#telegram-login-widget iframe {
  border-radius: 999px;
  overflow: hidden;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.suggestion-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  display: none;
  box-shadow: 0 16px 30px rgba(4, 6, 8, 0.45);
}

.show .suggestion-panel {
  display: block;
}

.suggestion-item {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid rgba(214, 185, 122, 0.08);
  cursor: pointer;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: rgba(214, 185, 122, 0.08);
}

.search-row {
  position: relative;
}

.badge {
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(10, 14, 20, 0.55);
  color: var(--ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.ink-panel {
  position: relative;
  background: var(--paper-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: 0 25px 50px rgba(5, 7, 12, 0.55);
  animation: rise 0.7s ease both;
}

.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.tab-button {
  background: rgba(6, 8, 12, 0.6);
  border: 1px solid var(--border-soft);
  color: var(--ink-muted);
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-button.active,
.tab-button:hover {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(214, 185, 122, 0.2);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  font-size: 0.95rem;
  word-break: break-word;
}

.table th {
  color: var(--gold);
  letter-spacing: 0.14em;
}

.table tr:hover {
  background: rgba(214, 185, 122, 0.08);
}

.rank {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
}

.section-title {
  color: var(--gold);
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 1.3rem;
}

.sub-title {
  color: var(--ink-muted);
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.5rem;
  letter-spacing: 0.12em;
}

.search-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.2rem;
}

.search-row button {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(111, 154, 134, 0.2);
  color: var(--ink);
  cursor: pointer;
}

.footer {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.loader {
  text-align: center;
  padding: 2rem;
  color: var(--ink-muted);
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  width: 220px;
  padding: 0.6rem 0.8rem;
  background: rgba(10, 14, 18, 0.95);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 0.85rem;
}

.tooltip:hover .tip {
  opacity: 1;
}

.float-sigil {
  position: absolute;
  right: -70px;
  top: 6px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(214, 185, 122, 0.22);
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 14, 20, 0.95) 0 32%, transparent 33%),
    conic-gradient(from 0deg, rgba(214, 185, 122, 0.75) 0 180deg, rgba(10, 14, 20, 0.85) 180deg 360deg);
  opacity: 0.55;
  filter: blur(0.4px);
  animation: sigilSpin 14s linear infinite;
  pointer-events: none;
}

.float-sigil::before,
.float-sigil::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(214, 185, 122, 0.35);
}

.float-sigil::after {
  inset: 24px;
  border: 1px solid rgba(214, 185, 122, 0.25);
  background:
    radial-gradient(circle, transparent 58%, rgba(214, 185, 122, 0.25) 59%, transparent 60%),
    linear-gradient(90deg, transparent 46%, rgba(214, 185, 122, 0.4) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(214, 185, 122, 0.4) 50%, transparent 54%);
}

.float-sigil .bagua {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  pointer-events: none;
}

.float-sigil .bagua::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      rgba(214, 185, 122, 0.9) 0deg 8deg,
      transparent 8deg 37deg,
      rgba(214, 185, 122, 0.9) 37deg 45deg,
      transparent 45deg 82deg,
      rgba(214, 185, 122, 0.9) 82deg 90deg,
      transparent 90deg 128deg,
      rgba(214, 185, 122, 0.9) 128deg 136deg,
      transparent 136deg 173deg,
      rgba(214, 185, 122, 0.9) 173deg 181deg,
      transparent 181deg 218deg,
      rgba(214, 185, 122, 0.9) 218deg 226deg,
      transparent 226deg 263deg,
      rgba(214, 185, 122, 0.9) 263deg 271deg,
      transparent 271deg 308deg,
      rgba(214, 185, 122, 0.9) 308deg 316deg,
      transparent 316deg 360deg
    );
  mask:
    radial-gradient(circle, transparent 0 62%, black 63% 70%, transparent 71%);
}

.float-sigil .bagua::after {
  content: "乾";
  position: absolute;
  inset: 0;
  font-size: 0.85rem;
  color: rgba(214, 185, 122, 0.75);
  display: grid;
  place-items: center;
  text-shadow: 0 0 8px rgba(214, 185, 122, 0.25);
}

.float-sigil .bagua span {
  position: absolute;
  font-size: 0.8rem;
  color: rgba(214, 185, 122, 0.7);
  letter-spacing: 0.08em;
}

.float-sigil .bagua .qian {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

.float-sigil .bagua .kun {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes sealPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sigilSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .header {
    flex-direction: column;
    align-items: center; /* 确保纵向排列时水平居中 */
    width: 100%;
  }

  .header > div {
    width: 100%;
    display: flex;
    justify-content: center;
  }


  .header h1 {
    /* 截图里的文字看起来有点挤，稍微调小一点字号防止在更窄的手机上溢出 */
    font-size: 2.4rem; 
    margin-right: -0.18em; /* 移动端也要记得抵消间距 */
  }
}

@media (max-width: 640px) {
  .page {
    padding: 2.5rem 4vw;
  }

  .tab-button {
    font-size: 0.9rem;
  }

  .header h1 {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
  }

  .search-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}