/*
 * 雲嵐仙途online 官方網站（apps/site）。照官網提案 v2 的 mock（docs/design/官方網站_提案_20261025/）。
 * 色票與字體沿用遊戲的雲海玉闕（apps/client/src/styles.css）；/art/ 由 scripts/build.py 從遊戲美術複製。
 */
@font-face {
  font-family: 'LXGW WenKai TC';
  src: url('/fonts/wenkai-site.woff2') format('woff2');
  font-display: swap;
}

:root {
  --night: #0b1823;
  --deep: #102b39;
  --jade: #7fd6c8;
  --jade-deep: #3f9f92;
  --moon: #e6f2f4;
  --mist: #a8c4d4;
  --gold: #e2c482;
  --gold-text: #f1d98f;
  --gold-deep: #9c7a3c;
  --cinnabar: #d8402f;
  --sky: #b8d9e6;
  --line: rgb(226 196 130 / 0.24);
  --panel: linear-gradient(180deg, rgb(22 55 71 / 0.96), rgb(11 24 35 / 0.96));
  --title: 'LXGW WenKai TC', 'Kaiti TC', 'STKaiti', 'BiauKai', serif;
  --sans: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', sans-serif;
  --gutter: 16px;
  --max: 1120px;
  --clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='56' viewBox='0 0 132 56'%3E%3Cg fill='none' stroke='%23e2c482' stroke-opacity='.12' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M8 40c0-7 6-11 12-9 1-7 9-11 15-7 3-6 13-7 17 0 6-3 13 2 12 9'/%3E%3Cpath d='M74 16c0-6 5-9 10-8 2-5 9-7 13-2 5-2 10 2 9 7'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 88px;
}

/* Controls answer the press at once (no double-tap wait) and never select their own label. */
a,
button,
summary {
  touch-action: manipulation;
}

button,
summary,
.jade-btn,
.ghost-btn {
  user-select: none;
  -webkit-user-select: none;
}

::selection {
  color: var(--night);
  background: var(--gold-text);
}

body {
  margin: 0;
  font: 400 16px/1.7 var(--sans);
  color: var(--moon);
  background:
    var(--clouds) 0 0 / 132px 56px,
    linear-gradient(180deg, var(--deep), var(--night) 60%);
}

a {
  color: var(--jade);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* ——— Header ——— */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(11 24 35 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
}

.site-mark img {
  height: 40px;
  width: auto;
}

.site-nav {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--mist);
  text-decoration: none;
}

.site-nav a[aria-current='page'] {
  color: var(--gold-text);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.menu-btn {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--moon);
  font: 600 13px/1 var(--sans);
}

/* The game's own painted 玉牌 buttons (9-slice art, the same slices as apps/client styles.css). */
.jade-btn,
.ghost-btn {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0;
  border: 0 solid transparent;
  border-width: 16px 26px;
  border-image: url('/art/ui/button-primary-normal@2x.webp') 31.25%
    13.34% fill / 16px 26px;
  /* Under the painted jade: the same colour in the content box only (the art's fill covers it
     exactly), so the label stays readable if the art has not arrived. */
  background: var(--jade) content-box;
  font: 700 18px/1.15 var(--title);
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: #0b2c31;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.5);
  text-decoration: none;
  cursor: pointer;
}

.ghost-btn {
  border-image-source: url('/art/ui/button-secondary-normal@2x.webp');
  background: var(--deep) content-box;
  color: var(--moon);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}

.jade-btn:active,
.ghost-btn:active {
  border-image-source: url('/art/ui/button-primary-pressed@2x.webp');
}

/* ——— Sections ——— */

.section {
  padding: 48px 0 8px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
}

.section-head h2 {
  margin: 0;
  font: 700 28px/1.2 var(--title);
  letter-spacing: 0.14em;
  color: var(--gold-text);
}

.section-head h2::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  vertical-align: 4px;
  rotate: 45deg;
  background: var(--cinnabar);
  box-shadow: 0 0 0 2px rgb(216 64 47 / 0.3);
}

.section-head a {
  margin-left: auto;
  font: 600 14px/1 var(--sans);
  text-decoration: none;
}

.lede {
  margin: -6px 0 18px;
  color: var(--mist);
}

/* News list */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.news-list li {
  border-bottom: 1px solid var(--line);
}

.news-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'tag title' 'tag date';
  column-gap: 12px;
  padding: 14px 4px;
  color: var(--moon);
  text-decoration: none;
}

.news-tag {
  grid-area: tag;
  align-self: start;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font: 700 12px/1.2 var(--sans);
  color: #0b2c31;
  background: var(--jade);
}

.news-tag[data-kind='活動'] {
  background: var(--gold-text);
}

.news-tag[data-kind='更新'] {
  color: var(--moon);
  background: #2c5566;
}

.news-title {
  grid-area: title;
  font-weight: 600;
  line-height: 1.5;
}

.news-date {
  grid-area: date;
  font-size: 13px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* Install */
.install {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.install-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}

.install-tabs button {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  font: 700 15px/1 var(--title);
  letter-spacing: 0.1em;
  color: var(--mist);
}

.install-tabs button[aria-selected='true'] {
  color: #0b2c31;
  background: var(--jade);
  border-color: var(--jade);
}

.install ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 10px;
}

.install li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.install li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font: 700 15px/1 var(--title);
  color: #3a2608;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c99a45 70%);
}

.install-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--mist);
}

/* Footer */
.site-foot {
  margin-top: 56px;
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(5 12 18 / 0.7);
  font-size: 13px;
  color: var(--mist);
}

.site-foot .wrap {
  display: grid;
  gap: 14px;
}

/* ——— Inner pages ——— */

.page-band {
  padding: 28px 0 18px;
  background:
    linear-gradient(180deg, rgb(11 24 35 / 0.1), var(--night)),
    url('/art/scene/hall-wide@1x.webp') center / cover;
  border-bottom: 1px solid var(--line);
}

.page-band h1 {
  margin: 0;
  font: 700 34px/1.2 var(--title);
  letter-spacing: 0.16em;
  color: var(--gold-text);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.6);
}

.page-band p {
  margin: 6px 0 0;
  color: var(--moon);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.7);
}

.crumbs {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--mist);
}

.crumbs a {
  color: var(--mist);
}

.featured .thread-media {
  border-radius: 0;
}

.aside-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
}

.aside-card img {
  width: 180px;
}

.aside-card p {
  margin: 0;
  color: var(--mist);
}

.featured {
  display: grid;
  overflow: hidden;
  margin: 18px 0 8px;
  border: 1px solid var(--gold-deep);
  border-radius: 14px;
  background: var(--panel);
}

.featured img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 40%;
}

.featured div {
  padding: 14px 16px 16px;
}

.featured h2 {
  margin: 6px 0 4px;
  font: 700 22px/1.35 var(--title);
  letter-spacing: 0.06em;
}

.featured p {
  margin: 0;
  font-size: 15px;
  color: var(--mist);
}

.menu-sheet {
  display: grid;
  padding: 4px var(--gutter) 12px;
  background: rgb(11 24 35 / 0.96);
  border-top: 1px solid var(--line);
}

.menu-sheet a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font: 700 17px/1 var(--title);
  letter-spacing: 0.12em;
  color: var(--moon);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.menu-sheet[hidden] {
  display: none;
}

/* ——— Hero: the trailer's gameplay loop under the logo and one action (endless.tw) ——— */

.hero {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 100svh;
  /* The loop and its scrim bleed to the edges; the words keep the page gutter. */
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
  background: var(--night) url('/img/hero-poster-540.webp') center / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The loop already keeps its middle quiet; a touch darker so the words lead. */
  filter: brightness(0.88);
}

/* Darker toward the words and the foot, so the logo, line and buttons read on any frame. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* endless.tw dims its loop to about half; ours keeps a little more of the jade daylight. */
  background:
    radial-gradient(70% 45% at 50% 66%, rgb(5 12 18 / 0.7), transparent 78%),
    linear-gradient(
      180deg,
      rgb(5 12 18 / 0.75) 0%,
      rgb(5 12 18 / 0.35) 22%,
      rgb(5 12 18 / 0.4) 50%,
      rgb(11 24 35 / 0.94) 88%,
      var(--deep)
    ),
    rgb(5 12 18 / 0.25);
}

.hero-body {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(100% - 2 * var(--gutter), 720px);
  padding: 96px 0 calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}

.hero h1 {
  margin: 0;
  width: min(84vw, 360px);
}

.hero h1 img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.55));
}

.hero-tag {
  margin: 0;
  font: 700 20px/1.4 var(--title);
  letter-spacing: 0.3em;
  color: var(--gold-text);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.85);
}

.facts {
  margin: 0;
  font: 500 15px/1.6 var(--sans);
  text-wrap: balance;
  letter-spacing: 0.08em;
  color: var(--moon);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.9);
}

.facts i {
  font-style: normal;
  color: var(--gold);
  padding-inline: 4px;
}

.hero-actions {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* The one main action: bigger than anything else on the screen, with a soft jade glow. */
.jade-btn--hero {
  min-width: 280px;
  min-height: 72px;
  font-size: 24px;
  letter-spacing: 0.32em;
  filter: drop-shadow(0 0 14px rgb(127 214 200 / 0.55)) drop-shadow(0 8px 18px rgb(0 0 0 / 0.5));
}

/* The trailer is a quiet text link under it. */
.trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--moon);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.9);
  text-decoration: underline;
  text-decoration-color: rgb(226 196 130 / 0.6);
  text-underline-offset: 5px;
  cursor: pointer;
}

.trailer-btn span {
  font-size: 11px;
  color: var(--gold-text);
  text-decoration: none;
}

/* WCAG 2.2.2: moving content longer than 5 s can be paused; a small round control. */
.motion-btn {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(168 196 212 / 0.4);
  border-radius: 50%;
  background: rgb(5 12 18 / 0.45);
  opacity: 0.8;
  cursor: pointer;
}

/* Two bars while playing, a triangle while paused. */
.motion-btn span {
  width: 12px;
  height: 14px;
  border-inline: 4px solid var(--moon);
}

.motion-btn[aria-pressed='true'] span {
  width: 12px;
  height: 14px;
  border-inline: 0;
  background: var(--moon);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 2px 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* ——— 怎麼玩: alternating device shots ——— */

.section--deep {
  background: linear-gradient(
    180deg,
    transparent,
    rgb(5 12 18 / 0.55) 30%,
    rgb(5 12 18 / 0.55) 70%,
    transparent
  );
}

.section-head--center {
  display: grid;
  justify-items: center;
  text-align: center;
}

.section-head--center h2::before {
  display: none;
}

.section-head--center .lede {
  margin: 8px 0 0;
}

.plays {
  display: grid;
  gap: 40px;
}

.play {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.play .device {
  width: min(70%, 280px);
}

.device {
  margin: 0;
  padding: 6px;
  border-radius: 22px;
  background: linear-gradient(160deg, #e9d29a, var(--gold-deep) 40%, #6f5427);
  box-shadow: 0 16px 34px rgb(0 0 0 / 0.5);
}

.device img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
  border-radius: 17px;
}

.play-seal {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 8px;
  font: 700 22px/1 var(--title);
  color: #fff3e8;
  background: var(--cinnabar);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25);
  rotate: -4deg;
}

.play h3 {
  margin: 0 0 6px;
  font: 700 22px/1.35 var(--title);
  letter-spacing: 0.08em;
  color: var(--gold-text);
}

.play p {
  margin: 0;
  font-size: 15px;
  color: var(--mist);
}

.wrap--narrow {
  width: min(100% - 2 * var(--gutter), 760px);
}

.thread-media {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.thread-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.thread-media span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 18px;
  color: #3a2608;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c99a45 70%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.5);
}

/* ——— The trailer player: a jade-framed dialog ——— */

dialog.trailer {
  width: min(100vw - 24px, 1100px);
  padding: 0;
  border: 2px solid var(--gold-deep);
  border-radius: 14px;
  background: var(--night);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 24px 60px rgb(0 0 0 / 0.7);
}

dialog.trailer::backdrop {
  background: rgb(5 12 18 / 0.86);
}

dialog.trailer video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.trailer-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(5 12 18 / 0.7);
  font: 600 24px/1 var(--sans);
  color: var(--moon);
  cursor: pointer;
}

/* ——— Phone held sideways and wider ——— */

@media (min-width: 600px), (orientation: landscape) {
  .hero {
    background-image: url('/img/hero-poster-1280.webp');
  }

  .hero-body {
    padding-bottom: 56px;
  }

  .hero-actions {
    display: flex;
  }

  .menu-btn {
    margin-left: 0;
  }
}

/* Short landscape phones: the logo and actions side by side. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero-body {
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 28px;
    width: calc(100% - 2 * var(--gutter));
    padding: 72px 0 20px;
    text-align: left;
    justify-items: start;
  }

  .hero h1 {
    grid-row: 1 / span 3;
    width: min(38vw, 300px);
  }

  .hero-tag {
    font-size: 17px;
  }

  .facts {
    justify-content: start;
  }

  .jade-btn--hero {
    min-width: 200px;
    min-height: 56px;
    font-size: 19px;
  }

  .hero-actions {
    justify-items: start;
  }
}

/* ——— Desktop ——— */

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
  }

  .menu-btn {
    display: none;
  }

  .site-nav {
    display: flex;
  }

  .site-head .wrap {
    height: 72px;
  }

  .hero h1 {
    width: 560px;
  }

  .hero-tag {
    font-size: 26px;
  }

  .hero-body {
    padding-bottom: 72px;
  }

  .section {
    padding-top: 80px;
  }

  .section-head h2 {
    font-size: 34px;
  }

  .plays {
    gap: 72px;
  }

  /* One row of four devices, each with its line under it. */
  .plays {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }

  .play .device {
    width: 100%;
  }

  .play h3 {
    font-size: 23px;
  }

  .play-seal {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  .install {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
  }

  .install-tabs {
    flex-direction: column;
  }

  .page-band {
    padding: 56px 0 32px;
  }

  .page-band h1 {
    font-size: 44px;
  }

  .news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
  }

  .featured {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .featured img {
    height: 100%;
    aspect-ratio: auto;
  }

  .news-aside {
    position: sticky;
    top: 96px;
    margin-top: 18px;
  }

  .site-foot .wrap {
    grid-template-columns: 1fr 1.4fr;
    column-gap: 48px;
  }
}

/* Each fact stays whole. A narrow phone puts the long one on its own line instead of leaving a
   「・」 hanging at a line end. */
.facts span {
  white-space: nowrap;
}

/* The three facts fit one line from 600 px up (landscape phones too); below that the long one
   always takes its own line, so no width leaves a 「・」 at a line end (402 did). */
@media (max-width: 599px) {
  .facts-sep {
    display: none;
  }

  .facts span:last-child {
    display: block;
  }
}

/* The play marks are drawn, not a text glyph: one solid triangle in every place a trailer opens. */
.trailer-btn span,
.thread-media span {
  display: inline-grid;
  place-items: center;
  font-size: 0;
}

.trailer-btn span::before,
.thread-media span::before {
  content: '';
  display: block;
  width: 10px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 1px 0;
}

.trailer-btn span::before {
  width: 8px;
  height: 10px;
}

.thread-media span::before {
  width: 16px;
  height: 18px;
  translate: 2px 0;
}

/* Phone portrait: the pause control sits under the header, clear of the trailer link. */
@media (max-width: 599px) and (orientation: portrait) {
  .motion-btn {
    top: calc(72px + env(safe-area-inset-top));
    bottom: auto;
  }
}

/* Phone landscape: the words sit in the lower half; that half is darkened so the loop's figures
   never sit under text, while the upper half (where each shot puts its figure) stays clear. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgb(5 12 18 / 0.35) 0%,
      transparent 14%,
      transparent 36%,
      rgb(5 12 18 / 0.84) 60%,
      rgb(5 12 18 / 0.92) 100%
    );
  }
}


/* ——— Launch countdown: the date in the game's lettering, four jade plates ——— */

.launch {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 6px;
}

.launch-when {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  font: 700 19px/1.3 var(--title);
  letter-spacing: 0.12em;
  color: var(--moon);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.85);
}

.launch-date {
  letter-spacing: 0.04em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.countdown {
  display: flex;
  gap: 8px;
}

.cd-cell {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 64px;
  height: 70px;
  border: 1px solid rgb(226 196 130 / 0.55);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(127 214 200 / 0.16), transparent 46%),
    linear-gradient(180deg, rgb(16 43 57 / 0.92), rgb(5 12 18 / 0.92));
  box-shadow:
    inset 0 0 0 3px rgb(5 12 18 / 0.6),
    inset 0 0 0 4px rgb(226 196 130 / 0.18),
    0 6px 16px rgb(0 0 0 / 0.45);
}

.cd-cell b {
  font: 700 30px/1.05 var(--title);
  font-variant-numeric: tabular-nums;
  color: var(--gold-text);
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.7);
}

.cd-cell small {
  font: 700 12px/1.2 var(--title);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--mist);
}

.launch-tz {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.9);
}

/* After the launch the plates give way to one line; set by site.js from the server's clock. */
.launch-open {
  display: none;
  margin: 0;
  font: 700 19px/1.3 var(--title);
  letter-spacing: 0.14em;
  color: var(--gold-text);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.85);
}

.launch[data-open] .launch-when,
.launch[data-open] .countdown,
.launch[data-open] .launch-tz {
  display: none;
}

.launch[data-open] .launch-open {
  display: block;
}

/* The moment it opens (only if the visitor watched it reach zero): the line rises in once. */
.launch[data-just-opened] .launch-open {
  animation: launch-open 600ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes launch-open {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch[data-just-opened] .launch-open {
    animation-name: launch-open-fade;
  }

  @keyframes launch-open-fade {
    from {
      opacity: 0;
    }
  }
}

@media (min-width: 900px) {
  .launch-when,
  .launch-open {
    font-size: 23px;
  }

  .cd-cell {
    width: 76px;
    height: 82px;
  }

  .cd-cell b {
    font-size: 36px;
  }
}

/* Short landscape phones: the countdown sits in the right column, plates a size down. */
@media (orientation: landscape) and (max-height: 540px) {
  .launch {
    justify-items: start;
    margin-top: 0;
  }

  .launch-when,
  .launch-open {
    font-size: 16px;
    justify-content: start;
  }

  .cd-cell {
    width: 52px;
    height: 54px;
  }

  .cd-cell b {
    font-size: 23px;
  }

  .launch-tz {
    display: none;
  }
}

/* ——— News page: every notice whole on the page ——— */

.notice p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--moon);
}

.notice .thread-media {
  margin-top: 4px;
  max-width: 560px;
}

.featured h2 {
  color: var(--gold-text);
}

.featured .notice {
  margin-top: 12px;
  padding: 0;
}

.notice-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.notice-list li {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}

.notice-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'tag title' 'tag date';
  column-gap: 12px;
  margin-bottom: 10px;
}

.notice-head h2 {
  grid-area: title;
  margin: 0;
  font: 700 19px/1.4 var(--title);
  letter-spacing: 0.06em;
  color: var(--moon);
}

.notice-head .news-tag {
  grid-area: tag;
}

.notice-head .news-date {
  grid-area: date;
}

/* A notice reached from the home list gets a brief gold edge so the eye lands on it. */
.featured:target,
.notice-list li:target {
  box-shadow: 0 0 0 2px var(--gold);
  border-radius: 14px;
}

/* ——— Header v3 (endless.tw's layout, 業主 10/31): fixed on every page, the brand, the sections,
   Threads and 立即遊玩 always there; over the first screen it is a soft shade, past it solid. ——— */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  background: rgb(11 24 35 / 0.92);
  backdrop-filter: blur(10px);
  transition: background-color 200ms ease;
}

.home .site-head:not([data-solid]) {
  /* Over the border too: a gradient sized to the padding box repeats a dark line under it. */
  background: linear-gradient(180deg, rgb(5 12 18 / 0.8), rgb(5 12 18 / 0)) border-box;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

body:not(.home) main {
  padding-top: 60px;
}

.head-play {
  margin-left: auto;
  min-height: 44px;
  border-width: 12px 20px;
  border-image-width: 12px 20px;
  font-size: 15px;
  letter-spacing: 0.12em;
}

.head-threads {
  display: none;
}

.menu-btn {
  margin-left: 0;
  flex: none;
}

.site-mark {
  flex: none;
}

/* 360 wide: the brand a size down so 立即遊玩 and 選單 keep their 44 px. */
@media (max-width: 380px) {
  .site-head .wrap {
    gap: 10px;
  }

  .site-mark img {
    height: 32px;
  }

  .head-play {
    border-width: 12px 14px;
    border-image-width: 12px 14px;
    letter-spacing: 0.06em;
  }
}

@media (min-width: 900px) {
  body:not(.home) main {
    padding-top: 72px;
  }

  .site-nav {
    margin-left: auto;
  }

  .head-play {
    margin-left: 0;
  }

  .head-threads {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    font: 600 14px/1 var(--sans);
    letter-spacing: 0.06em;
    color: var(--moon);
    text-decoration: none;
  }
}

/* ——— First screen extras: Threads at the foot-left, a scroll cue on wide screens ——— */

.hero-threads {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: none;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid rgb(226 196 130 / 0.45);
  border-radius: 10px;
  background: rgb(5 12 18 / 0.55);
  font: 600 14px/1.3 var(--sans);
  color: var(--moon);
  text-decoration: none;
}

.hero-threads small {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% 0;
}

.hero-scroll span {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--gold-text);
  border-bottom: 2px solid var(--gold-text);
  rotate: 45deg;
  translate: 0 -4px;
}

@media (min-width: 900px) and (min-height: 700px) {
  .hero-threads {
    display: grid;
  }

  .hero-scroll {
    display: grid;
  }
}

/* ——— 實機畫面: one wide fight, then four phones ——— */

.shot-wide {
  position: relative;
  margin: 0 0 32px;
  padding: 6px;
  border-radius: 18px;
  background: linear-gradient(160deg, #e9d29a, var(--gold-deep) 40%, #6f5427);
  box-shadow: 0 16px 34px rgb(0 0 0 / 0.5);
}

.shot-wide img {
  width: 100%;
  border-radius: 13px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.shot-wide figcaption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 8px;
  font-size: 15px;
  line-height: 1.7;
  color: #2a1d08;
}

.shot-wide figcaption b {
  display: block;
  font: 700 21px/1.35 var(--title);
  letter-spacing: 0.08em;
  color: #2a1d08;
}

.shot-wide .play-seal {
  flex: none;
  margin: 2px 0 0;
}

@media (min-width: 900px) {
  /* Bottom right: the open ground of the fight, clear of every fighter. */
  .shot-wide figcaption {
    position: absolute;
    right: 28px;
    bottom: 72px;
    max-width: 420px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgb(5 12 18 / 0.82);
    color: var(--moon);
  }

  .shot-wide figcaption b {
    color: var(--gold-text);
  }
}

/* ——— 遊戲特色: the game's own numbers on jade-edged plates ——— */

.numbers {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbers li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'num label' 'num note';
  column-gap: 16px;
  align-items: baseline;
  padding: 16px 18px;
  border: 1px solid rgb(226 196 130 / 0.35);
  border-radius: 14px;
  background: var(--panel);
}

.numbers b {
  grid-area: num;
  min-width: 3.2ch;
  font: 700 40px/1 var(--title);
  font-variant-numeric: tabular-nums;
  color: var(--gold-text);
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.6);
}

.numbers span {
  grid-area: label;
  font: 700 18px/1.3 var(--title);
  letter-spacing: 0.08em;
}

.numbers small {
  grid-area: note;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
}

@media (min-width: 640px) {
  .numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .numbers li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'num' 'label' 'note';
    row-gap: 8px;
    padding: 24px;
  }

  .numbers b {
    font-size: 52px;
  }
}

/* ——— 養成三條路: three tall cards, the game's own art on each ——— */

.paths {
  display: grid;
  gap: 16px;
}

.path {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgb(226 196 130 / 0.35);
  border-radius: 16px;
  background: var(--panel);
}

.path-art {
  display: grid;
  place-items: center;
  height: 200px;
  background:
    radial-gradient(60% 70% at 50% 60%, rgb(127 214 200 / 0.18), transparent 70%),
    linear-gradient(180deg, rgb(16 43 57 / 0.6), rgb(5 12 18 / 0.2));
  border-bottom: 1px solid var(--line);
}

.path-art img {
  max-height: 180px;
  width: auto;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.5));
}

.path-art--deity img {
  max-height: none;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 30%;
}

.path h3 {
  margin: 4px 18px 0;
  font: 700 23px/1.3 var(--title);
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.path ul {
  margin: 0 18px;
  padding: 0 0 0 1.1em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--moon);
}

@media (min-width: 900px) {
  .paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .path-art,
  .path-art--deity img {
    height: 240px;
  }

  .path-art img {
    max-height: 210px;
  }
}

/* ——— 世界首領: the five forms side by side ——— */

.forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.form {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 12px 16px;
  border: 1px solid rgb(226 196 130 / 0.35);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
}

.form img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 512 / 650;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.55));
}

.form b {
  font: 700 19px/1.3 var(--title);
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.form span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}

/* The fifth form centred under the two pairs on a phone. */
.form:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 6px);
}

@media (min-width: 900px) {
  .forms {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }

  .form:last-child {
    grid-column: auto;
    width: auto;
  }
}

/* ——— 最新公告 beside the 開服 card ——— */

.news-split {
  display: grid;
  gap: 28px;
}

.open-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--gold-deep);
  border-radius: 16px;
  background: var(--panel);
}

.open-card h3 {
  margin: 0;
  text-wrap: balance;
  font: 700 21px/1.35 var(--title);
  letter-spacing: 0.06em;
  color: var(--gold-text);
}

.open-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.open-facts div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(5 12 18 / 0.45);
}

.open-facts dt {
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.12em;
  color: var(--mist);
}

.open-facts dd {
  margin: 4px 0 0;
  font: 700 15px/1.4 var(--sans);
  color: var(--moon);
}

.open-card .jade-btn {
  width: 100%;
}

.open-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}

.open-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 14px/1 var(--sans);
  text-decoration: none;
}

@media (min-width: 900px) {
  .news-split {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
  }
}

/* ——— 常見問題: every answer open ——— */

.faq-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.faq-list div {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(11 24 35 / 0.6);
}

.faq-list dt {
  font: 700 18px/1.4 var(--title);
  letter-spacing: 0.06em;
  color: var(--gold-text);
}

.faq-list dd {
  margin: 6px 0 0;
  color: var(--mist);
}

/* ——— Footer: the brand, four link columns, the notices ——— */

.site-foot .wrap {
  display: grid;
  gap: 24px;
}

.foot-brand {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.foot-brand img {
  width: 156px;
}

.foot-brand p {
  margin: 0;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.foot-cols h2 {
  margin: 0 0 4px;
  font: 700 15px/1.3 var(--title);
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.foot-cols div {
  display: grid;
  align-content: start;
}

.foot-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--moon);
  text-decoration: none;
}

.foot-note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}

@media (min-width: 900px) {
  .site-foot .wrap {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 56px;
  }

  .foot-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .foot-note {
    grid-column: 1 / -1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover,
  .foot-cols a:hover,
  .open-links a:hover {
    color: var(--gold-text);
  }
}

/* The ten-pull sits mid-screen: its crop is taken from the middle, not the top. */
.device img.shot-mid {
  object-position: center;
}