/* ============ GAMELIST SKIN — 开服计时器 · 终端美学 ============ */
:root {
  --bg: #0b0d10;
  --bg-2: #10141a;
  --ink: #e9ede4;
  --ink-dim: rgba(233, 237, 228, 0.76);
  --ink-faint: rgba(233, 237, 228, 0.56);
  --line: rgba(233, 237, 228, 0.13);
  --accent: #b8e62e;
  --accent-ink: #0b0d10;
  --amber: #ffb020;
  --f-display: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-sans: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-serif: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "SF Mono", monospace;
}

.accent { color: var(--accent); }
.amber { color: var(--amber); }

/* ---------- backdrop layers ---------- */
.gridbg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }
.scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(233, 237, 228, 0.008) 0 1px, transparent 1px 6px);
}
.hero, main, .footer { position: relative; z-index: 2; }

/* ---------- status badges ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink-dim); white-space: nowrap;
}
.badge--now { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.badge--next { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.badge--ended { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

.tag-demo {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  padding: 1px 7px; border-radius: 2px; vertical-align: middle; white-space: nowrap;
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.hero__inner { padding-top: calc(var(--nav-h) + 5vh); padding-bottom: 5vh; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 40px); }
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__clock { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 10px; }
.hero__clock .ic { color: var(--accent); width: 14px; height: 14px; }
.hero__ok { color: var(--accent); font-weight: 500; font-style: normal; }
.hero__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(42px, 8.2vw, 144px); line-height: 1.04; letter-spacing: -0.02em;
}
.hero__title .stroke-text { -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 65%, var(--ink)); -webkit-text-stroke-width: 1.5px; }
.hero .lead { max-width: 46em; }

/* ---------- countdown module ---------- */
.count {
  position: relative;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 3.6vw, 64px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  padding: clamp(22px, 3vw, 46px);
}
.count::before, .count::after {
  content: "+"; position: absolute; z-index: 1;
  font-family: var(--f-mono); font-size: 15px; line-height: 1; color: var(--accent);
  background: var(--bg); padding: 0 3px;
}
.count::before { top: -8px; left: -6px; }
.count::after { bottom: -8px; right: -6px; }
.count__label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.count__label .ic { width: 14px; height: 14px; color: var(--amber); }
.count__digits {
  display: flex; align-items: flex-end;
  margin-top: clamp(8px, 1.4vh, 18px);
  font-weight: 700; font-size: clamp(34px, 8.5vw, 176px); line-height: 0.9; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.count__grp { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.count__grp i { font-style: normal; font-size: 10px; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--ink-faint); }
.count__sep { font-style: normal; color: var(--accent); padding-bottom: 26px; transition: opacity 0.3s var(--e-out); }
.count__sep.is-dim { opacity: 0.2; }
.count__verdict {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(14px, 2vh, 22px);
  font-size: clamp(13px, 1.25vw, 16px); letter-spacing: 0.14em; color: var(--ink-dim);
  transition: color 0.4s;
}
.count__verdict::before { content: ">"; font-weight: 700; color: var(--accent); }
.count__verdict.is-ready { color: var(--amber); }
.count__verdict.is-ready::before { color: var(--amber); }
.count__verdict.is-go {
  color: var(--accent); padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 1px solid var(--accent);
  animation: verdict-pulse 1.2s var(--e-in-out) infinite;
}
.count__verdict.is-go::before { color: var(--accent); }
@keyframes verdict-pulse { 50% { background: color-mix(in srgb, var(--accent) 26%, transparent); } }
.count__side {
  display: flex; flex-direction: column; gap: 18px;
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2.4vw, 40px);
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-dim);
}
.count__meta { display: flex; flex-direction: column; gap: 5px; }
.count__meta-k { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.count__bar { display: block; height: 4px; margin-top: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.count__fill { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.count__hint {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 10.5px; line-height: 1.9; letter-spacing: 0.08em; color: var(--ink-faint);
}

/* ---------- hero foot & ticker ---------- */
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hero__chips .ic { width: 13px; height: 13px; color: var(--accent); }
.hero__ticker {
  position: relative; border-block: 1px solid var(--line); padding-block: 13px;
  font-size: 12px; letter-spacing: 0.14em; color: var(--ink-dim);
}
.hero__ticker .tk { display: inline-flex; align-items: center; gap: 12px; }
.hero__ticker .ic { width: 12px; height: 12px; color: var(--accent); flex: none; }

/* ---------- section scaffold ---------- */
.sec-head {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3.4vw, 64px);
  align-items: start; margin-bottom: clamp(44px, 5.5vw, 90px);
}
.sec-no {
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(64px, 8vw, 150px); line-height: 0.82;
  -webkit-text-stroke-width: 1px; opacity: 0.55;
}
.sec-head__text { display: flex; flex-direction: column; gap: 20px; }
.sec-head .display-2 { max-width: 15em; }
.legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint);
}
.legend .badge + * { margin-left: -2px; }
.legend span.gap { margin-right: 14px; }
.sec-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.sec-note .ic { width: 14px; height: 14px; color: var(--amber); flex: none; }

/* ---------- terminal window ---------- */
.term { position: relative; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 82%, transparent); }
.term::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(233, 237, 228, 0.012) 0 1px, transparent 1px 6px);
}
.term__bar {
  display: flex; align-items: center; gap: 18px;
  padding: 13px clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
}
.term__dots { display: inline-flex; gap: 6px; }
.term__dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.term__dots i:nth-child(2) { background: color-mix(in srgb, var(--amber) 55%, transparent); }
.term__dots i:nth-child(3) { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.term__meta { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-faint); }

/* ---------- today timeline ---------- */
.tl { position: relative; z-index: 1; }
.tl__row {
  position: relative;
  display: grid; grid-template-columns: 150px 1.3fr 150px;
  grid-template-areas: "time what status" "bar bar bar";
  gap: 16px 24px; align-items: center;
  padding: 20px clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s;
}
.tl__row:last-child { border-bottom: 0; }
.tl__row.is-now { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tl__row.is-now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.tl__row.is-first-next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--amber); }
.tl__row.is-ended .tl__what, .tl__row.is-ended .tl__time { opacity: 0.4; }
.tl__time { grid-area: time; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-dim); }
.tl__what { grid-area: what; }
.tl__what b { font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; margin-right: 10px; }
.tl__what p { margin-top: 5px; font-size: 13px; color: var(--ink-faint); }
.tl__status { grid-area: status; justify-self: end; text-align: right; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint); }
.tl__status em { display: block; margin-top: 6px; font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tl__bar { grid-area: bar; display: block; height: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.tl__fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.tl__row.is-next .tl__fill { background: var(--amber); }
.tl__row.is-ended .tl__fill { background: color-mix(in srgb, var(--ink) 22%, transparent); }

/* ---------- week + limited ---------- */
.tl-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; margin-top: 24px; align-items: stretch; }
.wk { position: relative; z-index: 1; }
.wk li {
  display: grid; grid-template-columns: 26px 110px 1fr; gap: 14px; align-items: start;
  padding: 18px clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--line);
}
.wk li:last-child { border-bottom: 0; }
.wk .ic { width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
.wk__d { font-size: 12px; letter-spacing: 0.08em; color: var(--amber); padding-top: 2px; }
.wk b { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15.5px; font-weight: 600; }
.wk p { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }
.limited {
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
  background: color-mix(in srgb, var(--amber) 4%, var(--bg-2));
  padding: clamp(20px, 2.4vw, 32px);
}
.limited__head { display: flex; align-items: flex-start; gap: 16px; }
.limited__head .ic { width: 22px; height: 22px; color: var(--amber); flex: none; margin-top: 2px; }
.limited__head b { font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; }
.limited__head p { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }
.limited__head .tag-demo { margin-left: auto; }
.limited__bar { height: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.limited__fill { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.limited__meta { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* ---------- alerts steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps .card { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 40px); }
.steps__no { font-size: 12px; letter-spacing: 0.24em; color: var(--ink-faint); }
.steps .card > .ic { width: 30px; height: 30px; color: var(--accent); }
.steps h3 { font-family: var(--f-display); font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.steps p { font-size: 14px; line-height: 1.9; color: var(--ink-dim); }

/* ---------- system cards ---------- */
.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sys__card { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 3vw, 40px); }
.sys__card header { display: flex; align-items: center; gap: 14px; color: var(--accent); }
.sys__card header .ic { width: 22px; height: 22px; }
.sys__card header .mono { font-size: 10px; letter-spacing: 0.3em; color: var(--ink-faint); }
.sys__card h3 { font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.sys__card ul { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.sys__card li { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.7; color: var(--ink-dim); }
.sys__card li .ic { width: 12px; height: 12px; color: var(--accent); flex: none; transform: translateY(1px); }

/* ---------- disclaimer + get app ---------- */
.disc {
  display: flex; gap: 20px; max-width: 920px;
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
  padding: clamp(22px, 3vw, 36px);
}
.disc .ic { width: 22px; height: 22px; color: var(--amber); flex: none; margin-top: 4px; }
.disc p { font-size: 14.5px; line-height: 2.05; color: var(--ink-dim); }
.getapp { display: flex; flex-direction: column; gap: 20px; margin-top: clamp(48px, 6vw, 90px); }
.getapp__cmd {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 80%, transparent);
  padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 42px);
  font-size: clamp(18px, 2.6vw, 34px); letter-spacing: 0.04em;
}
.getapp__prompt { color: var(--accent); font-weight: 700; }
.getapp__name { color: var(--accent); margin-left: 12px; font-weight: 700; }
.getapp__caret { width: 0.55em; height: 1.1em; background: var(--accent); animation: caret-blink 1.1s steps(2, jump-none) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.getapp__note { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- footer ---------- */
.footer__top { align-items: flex-start; }
.footer__brand { font-family: var(--f-display); font-weight: 700; }
.footer__v { font-size: 10px; letter-spacing: 0.5em; color: var(--ink-faint); }
.footer__about { font-size: 14px; line-height: 1.9; color: var(--ink-dim); }
.footer__legal {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed var(--line); padding: 14px 18px; margin-bottom: 24px;
  font-size: 12px; line-height: 1.8; color: var(--ink-dim);
}
.footer__legal .ic { width: 14px; height: 14px; color: var(--amber); flex: none; }
.footer__sig { letter-spacing: 0.3em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .count { grid-template-columns: 1fr; }
  .count__side { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 22px; }
  .count__hint { margin-top: 4px; }
}
@media (max-width: 960px) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-no { font-size: clamp(48px, 12vw, 96px); }
  .tl-duo { grid-template-columns: 1fr; }
  .steps, .sys { grid-template-columns: 1fr; }
  .hero__chips { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .tl__row { grid-template-columns: 1fr auto; grid-template-areas: "time status" "what what" "bar bar"; }
  .tl__status { min-width: 120px; }
  .wk li { grid-template-columns: 26px 1fr; grid-template-areas: "ic d" "ic body"; }
  .wk .ic { grid-area: ic; }
  .wk__d { grid-area: d; }
  .wk div:last-child { grid-area: body; }
}
@media (max-width: 480px) {
  .count { padding: 20px 16px; }
  .count__digits {
    font-size: clamp(32px, 8.5vw, 44px);
    gap: 4px;
  }
  .count__grp { gap: 6px; }
  .count__grp i { font-size: 9px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .count__sep { padding-bottom: 10px; }
}