/* Cheerly 官網樣式。
   不變式：間距、圓角、字級、行距、顏色只在 :root 定義，其他地方只引用變數；行距不低於 1.5（標題也是）；
   文字寬度跟著容器，不設行長上限；只有深色一套（遊戲官網，使用者 2026-11-03 指定深色）。
   段落：token → 基本 → 頁首 → 主視覺 → 手機框 → 區塊標題 → 玩法 → 三步 → 下載（收尾畫面） → 頁尾 → 條款頁與 404 → 動態 → 窄螢幕 */

/* --- token --- */
:root {
  color-scheme: dark;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.5rem;
  --radius-phone: 2.25rem;
  --radius-pill: 999px;
  --text-s: 0.9375rem;
  --text-b: 1.0625rem;
  --text-l: 1.25rem;
  --text-h3: 1.625rem;
  --text-h2: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  --text-h1: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  --text-stat: 2rem;
  --line: 1.75;
  --line-heading: 1.5;
  --page: 72rem;
  --phone: min(21rem, 78vw);
  --phone-small: min(17rem, 72vw);
  --bezel: 0.5rem;
  --font-body: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --font-title: "Noto Serif TC", "Microsoft JhengHei", serif;
  --night: #0b0a1d;
  --night-2: #13113a;
  --panel: #1a1745;
  --panel-2: #221d57;
  --edge: rgba(242, 196, 90, 0.32);
  --edge-strong: rgba(242, 196, 90, 0.7);
  --ink: #f6f1e4;
  --muted: #c3bcdb;
  --gold: #f2c45a;
  --gold-light: #ffe7a3;
  --gold-deep: #d98f2b;
  --ink-on-gold: #2a1606;
  --cinnabar: #ff7a63;
  --jade: #5fd6b3;
  --bezel-color: #05040f;
  --ground: #110e2c; /* backdrop.svg 最前面那層山的顏色 */
  --glow: rgba(242, 196, 90, 0.18);
  --shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.55);
}

/* --- 基本 --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-7); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--night);
  color: var(--ink);
  font: var(--text-b) / var(--line) var(--font-body);
}
h1, h2, h3 { margin: 0; font-family: var(--font-title); line-height: var(--line-heading); }
p, ul, ol { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--gold-light); }
img, video { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--space-4); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-3); top: var(--space-3); z-index: 10; padding: var(--space-1) var(--space-2); background: var(--gold); color: var(--ink-on-gold); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.button.primary {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  color: var(--ink-on-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 1.5rem var(--glow), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}
.button.primary:hover { filter: brightness(1.08); }
.button.large { padding: var(--space-3) var(--space-5); font-size: var(--text-l); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* --- 頁首 --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(11, 10, 29, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.topbar-row { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font: 900 var(--text-l) / var(--line-heading) var(--font-title);
  text-decoration: none;
}
.brand img { width: 2.25rem; height: 2.25rem; }
.brand.small { font-size: var(--text-b); }
.brand.small img { width: 1.75rem; height: 1.75rem; }
.nav { display: flex; gap: var(--space-4); margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--gold-light); }

/* --- 主視覺 --- */
.hero {
  position: relative;
  overflow-x: clip; /* 月亮與角色可以超出版心，但不撐寬整頁 */
  padding: var(--space-6) 0 var(--space-7);
  background: var(--night) url("/art/backdrop.svg") center bottom / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--space-6);
  background: linear-gradient(transparent, var(--night));
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-5); align-items: center; }
.eyebrow {
  display: inline-block;
  padding: 0 var(--space-3);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-pill);
  background: rgba(11, 10, 29, 0.6);
  color: var(--gold-light);
  font-size: var(--text-s);
}
.hero h1 {
  margin-top: var(--space-3);
  font-size: var(--text-h1);
  font-weight: 900;
  letter-spacing: 0.04em;
  word-break: keep-all;
}
/* 金色漸層字：漸層只鋪在框裡，框不能比字窄（字超出框的部分會變透明） */
.hero h1, .finale h2 {
  background: linear-gradient(180deg, #fff8e2 20%, var(--gold) 70%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.25rem 1.25rem rgba(242, 196, 90, 0.25));
}
.lead { margin-top: var(--space-3); color: var(--ink); font-size: var(--text-l); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); padding: 0; list-style: none; color: var(--muted); }
.stats strong { display: block; color: var(--gold); font: 900 var(--text-stat) / var(--line-heading) var(--font-title); }

.stage { --moon: 12rem; position: relative; display: grid; place-items: center; padding: var(--space-5) 0; }
/* 月亮的圓心壓在手機框的右緣：一半藏在手機後面，永遠在主標與按鈕之外 */
.stage::before {
  content: "";
  position: absolute;
  left: calc(50% + var(--phone) / 2 - var(--moon) / 2);
  top: var(--space-4);
  width: var(--moon);
  height: var(--moon);
  border-radius: 50%;
  background: #f8e9bd;
  box-shadow: 0 0 5rem 1.5rem rgba(255, 231, 168, 0.28);
}
.float { position: absolute; z-index: 2; height: auto; pointer-events: none; filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.5)); }
.fox { width: 15rem; left: -2rem; bottom: -1rem; }
.whale { width: 11rem; right: -1.5rem; top: 15rem; z-index: 0; }
.meteor { width: 10rem; left: 0; top: -1rem; z-index: 0; }
.thunder { width: 8rem; right: 0; bottom: 4rem; }

/* --- 手機框 --- */
.phone {
  position: relative;
  z-index: 1;
  width: var(--phone);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--bezel) solid var(--bezel-color);
  border-radius: var(--radius-phone);
  background: var(--night-2);
  box-shadow: 0 0 0 1px var(--edge-strong), 0 0 3rem var(--glow), var(--shadow);
}
.phone.small { width: var(--phone-small); }
.phone video { width: 100%; height: 100%; object-fit: cover; }

/* --- 區塊標題 --- */
.section { padding: var(--space-7) 0 0; }
.section-head { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.section-head p { color: var(--muted); }
.section-head .kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold);
  font-size: var(--text-s);
  letter-spacing: 0.3em;
}
.kicker::before, .kicker::after { content: ""; width: var(--space-5); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker::after { transform: scaleX(-1); }
.section-head h2 { font-size: var(--text-h2); font-weight: 900; }

/* --- 玩法 --- */
.mode {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
}
.mode.flip .mode-media { order: 2; }
.mode-media { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
figcaption { color: var(--muted); font-size: var(--text-s); text-align: center; }
.mode-copy { display: grid; gap: var(--space-3); justify-items: start; }
.mode-copy h3 { font-size: var(--text-h2); font-weight: 900; color: var(--gold-light); }
.seal {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--cinnabar);
  border-radius: var(--radius-s);
  color: var(--cinnabar);
  font: 900 var(--text-l) / var(--line-heading) var(--font-title);
  transform: rotate(-6deg);
}
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.tags li {
  padding: 0 var(--space-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--text-s);
}
.caution { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--cinnabar); background: rgba(255, 122, 99, 0.08); color: var(--ink); font-size: var(--text-s); }

.keys {
  display: grid;
  gap: var(--space-3);
  width: min(24rem, 100%);
  padding: var(--space-4);
  border: 1px solid var(--edge);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow);
}
.keys-title { color: var(--gold); font-weight: 700; letter-spacing: 0.1em; }
.key-row { display: grid; grid-template-columns: 4.5rem auto 1fr auto; align-items: center; gap: var(--space-2); }
.gem { color: var(--jade); font-weight: 700; white-space: nowrap; }
.arrow { color: var(--muted); }
.caps { display: flex; gap: var(--space-1); }
kbd {
  min-width: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 4px;
  border-radius: var(--radius-s);
  background: var(--night-2);
  color: var(--ink);
  font: 700 var(--text-b) / var(--line-heading) Consolas, "Cascadia Mono", monospace;
  text-align: center;
}
.key-name { color: var(--gold-light); font-weight: 700; white-space: nowrap; }

/* --- 三步 --- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--edge);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  color: var(--ink-on-gold);
  font: 900 var(--text-l) / var(--line-heading) var(--font-title);
  box-shadow: 0 0 1rem var(--glow);
}
.step h3 { font-size: var(--text-l); color: var(--gold-light); }
.step p { margin-top: var(--space-2); color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }

/* --- 下載（收尾畫面） --- */
/* 跟主視覺同一片山景；角色站在最下面一層山上。角色的高度與內容的讓位讀同一個 --cast-h，字永遠在角色上方 */
.finale {
  --cast-h: 10rem;
  position: relative;
  overflow-x: clip;
  margin-top: var(--space-7);
  padding: var(--space-6) 0 calc(var(--cast-h) + var(--space-5));
  background:
    linear-gradient(var(--night), transparent var(--space-7)),
    radial-gradient(ellipse 45% 40% at 50% 38%, var(--glow), transparent),
    var(--night) url("/art/backdrop.svg") center bottom / cover no-repeat;
}
.finale-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.finale-inner > p { color: var(--muted); font-size: var(--text-l); }
.finale h2 { font-size: var(--text-h1); font-weight: 900; letter-spacing: 0.04em; }
.finale .button { margin-top: var(--space-2); }
.finale .tags { justify-content: center; }
.smartscreen {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--edge);
  border-radius: var(--radius-l);
  background: rgba(11, 10, 29, 0.65);
}
.smartscreen-title { color: var(--gold-light); font-weight: 700; word-break: keep-all; text-wrap: balance; }
.smartscreen-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); padding: 0; list-style: none; counter-reset: smartscreen; }
.smartscreen-steps li { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.smartscreen-steps li::before {
  counter-increment: smartscreen;
  content: counter(smartscreen);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  color: var(--ink-on-gold);
  font-weight: 900;
  font-size: var(--text-s);
}
.smartscreen-note { color: var(--muted); font-size: var(--text-s); }
.finale-inner .only-touch { display: none; color: var(--muted); font-size: var(--text-s); }
@media (hover: none) and (pointer: coarse) { .finale-inner .only-touch { display: block; } }

.cast { position: absolute; inset: auto 0 0; height: var(--cast-h); pointer-events: none; }
.actor { position: absolute; height: auto; filter: drop-shadow(0 0.75rem 1rem rgba(0, 0, 0, 0.55)); }
.actor-fox { width: var(--cast-h); left: 6%; bottom: var(--space-2); }
.actor-hopper { width: calc(var(--cast-h) * 0.6); left: calc(6% + var(--cast-h) * 0.9); bottom: var(--space-3); }
.actor-hopper-small { width: calc(var(--cast-h) * 0.4); right: calc(8% + var(--cast-h) * 0.75); bottom: var(--space-4); }
.actor-rabbit { width: calc(var(--cast-h) * 0.7); right: 8%; bottom: var(--space-3); }

/* --- 頁尾 --- */
/* 底色＝backdrop.svg 最前面那層山（#110e2c）：首頁的山景直接接進頁尾 */
.footer { padding: var(--space-4) 0 var(--space-5); background: var(--ground); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.footer-row + .footer-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--edge); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; list-style: none; font-size: var(--text-s); }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--gold-light); text-decoration: underline; }
.fine { color: var(--muted); font-size: var(--text-s); }

/* --- 條款頁與 404 --- */
.doc { padding: var(--space-6) 0; }
.doc h1 { font-size: var(--text-h2); font-weight: 900; color: var(--gold-light); }
.doc h2 { margin-top: var(--space-5); font-size: var(--text-l); color: var(--gold-light); }
.doc p, .doc ul { margin-top: var(--space-2); color: var(--ink); }
.doc ul { padding-left: var(--space-4); }
.doc li + li { margin-top: var(--space-1); }
.doc .updated { color: var(--muted); font-size: var(--text-s); }
.lost { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-4); text-align: center; }
.lost img { width: 8rem; height: auto; }
.lost h1 { font-size: var(--text-h2); font-weight: 900; color: var(--gold-light); }
.lost p { color: var(--muted); }

/* --- 動態 --- */
@keyframes bob { 50% { translate: 0 -0.75rem; } }
.fox { animation: bob 5s ease-in-out infinite; }
.whale { animation: bob 6s ease-in-out infinite 1s; }
.thunder { animation: bob 4s ease-in-out infinite 0.5s; }
@keyframes hop { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 0 -1.25rem; } }
.actor-hopper { animation: hop 2.4s ease-in-out infinite; }
.actor-hopper-small { animation: hop 2.4s ease-in-out infinite 0.6s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .actor { animation: none; }
}

/* --- 窄螢幕 --- */
@media (max-width: 56rem) {
  .hero { padding: var(--space-5) 0 var(--space-5); }
  .section { padding-top: var(--space-6); }
  .hero-grid, .mode { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { text-align: center; }
  .hero-actions, .stats { justify-content: center; }
  .mode { gap: var(--space-4); }
  .mode.flip .mode-media { order: 0; }
  .mode-copy { justify-items: center; text-align: center; }
  .tags { justify-content: center; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 40rem) {
  .wrap { padding: 0 var(--space-3); }
  .nav { display: none; }
  .stage { --moon: 8rem; }
  .fox { width: 9rem; left: -0.5rem; }
  .whale { width: 7rem; right: -0.5rem; top: 12rem; }
  .meteor { width: 6rem; }
  .thunder { width: 5rem; }
  .finale { --cast-h: 7rem; }
  .smartscreen { padding: var(--space-3); }
}