/* 施工中占位页与 404 的版式（design M5）。
 *
 * 和入口页共用 tokens.css、贴纸与背景星尘，但布局是另一套：入口页是一整张会动的星图，
 * 这两页只是一张立正站好的卡片。所以不复用 orbit.css——那份文件从头到尾都在算落点坐标，
 * 拿来改成"居中一张卡"只会两边都别扭。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* 纸纹与星尘照抄入口页，让人一眼看出还在同一个站里。星尘这里只铺一层、更稀，
 * 因为这页的主角是中间那张卡，不需要把空当填满。 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(115% 85% at 50% 40%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(114deg, rgba(20, 52, 42, 0.026) 0 1px, transparent 1px 7px);
}

body::after {
  opacity: 0.24;
  background-repeat: no-repeat;
  background-image:
    url("/dust/dust-star.png"), url("/dust/dust-spark.png"), url("/dust/dust-wisp.png"),
    url("/dust/dust-star.png"), url("/dust/dust-cluster.png"), url("/dust/dust-spark.png"),
    url("/dust/dust-star.png"), url("/dust/dust-wisp.png"), url("/dust/dust-spark.png"),
    url("/dust/dust-cluster.png"), url("/dust/dust-star.png"), url("/dust/dust-spark.png");
  background-position:
     7% 13%,  19%  5%,  31% 24%,
    43%  8%,  57% 18%,  69%  6%,
    81% 27%,  93% 14%,   9% 76%,
    27% 89%,  74% 82%,  91% 63%;
  background-size: 22px 22px, 17px 17px, 26px 26px;
}

.note {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 7rem) 1.25rem 4rem;
  text-align: center;
}

/* 贴纸在这页是主角，比星图上大一圈；轻轻歪一点，跟卡片的手绘感对上。 */
.note__sticker {
  display: block;
  width: min(200px, 40vw);
  height: auto;
  margin: 0 auto 0.4rem;
  rotate: -4deg;
}

.note__stamp {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
  padding: 0.3em 0.6em 0.24em;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  rotate: -3deg;
}

.note__title {
  margin: 0.9rem 0 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.note__title small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62em;
  font-weight: 400;
  color: var(--ink-muted);
}

.note__blurb {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
}

/* 星名引文与点题：和卡片上同一套分工——引文是气质，点题是解释，字号拉开。 */
.note__myth {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-muted);
}

.note__why {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.note__say {
  margin-top: 2.2rem;
}

.note__heading {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.3;
}

/* 404 没有星，那句话就是整页的主角，可以再大一点。 */
.note__heading--solo {
  font-size: 2rem;
}

/* 而且它总共只有两三行，按占位页那套上边距排会孤零零吊在页顶——整块居中。
 * 用 :has() 认出"这页没有星"，好过给模板再开一个 body class。 */
.note:has(.note__heading--solo) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.25rem;
  padding-bottom: 4rem;
}

.note__line {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ── 口令门 ────────────────────────────────────────────────
 * 纯 HTML 表单，没有一行 JS：校验全在 Worker 里，客户端拿不到任何能比对的东西。
 */
.gate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.gate__label {
  font-family: var(--font-hand);
  font-size: 1.1rem;
}

.gate__input {
  width: min(11rem, 50vw);
  padding: 0.5em 0.7em;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  /* 口令就短短几个字母，拉开字距，打错了一眼看得出来。 */
  letter-spacing: 0.18em;
  text-align: center;
}

.gate__input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.gate__submit {
  padding: 0.5em 1.1em;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: translate 0.16s var(--ease-pop), box-shadow 0.16s var(--ease-pop);
}

.gate__submit:hover,
.gate__submit:focus-visible {
  translate: -2px -3px;
  box-shadow: var(--shadow-lift);
}

.gate__error {
  margin: 0.9rem 0 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: #b3261e;
}

@media (prefers-reduced-motion: reduce) {
  .gate__submit {
    transition: none;
  }
}

.note__back {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.5em 1.2em;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: translate 0.16s var(--ease-pop), box-shadow 0.16s var(--ease-pop);
}

.note__back:hover,
.note__back:focus-visible {
  translate: -2px -3px;
  box-shadow: var(--shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
  .note__back {
    transition: none;
  }
}