/* 下載頁（download.html）的樣式。刻意不走 Flutter app：來這頁的人只是要找載點，
   不該為此先抓整包 wasm。配色取自 app icon 的深藍與青綠（docs/store/play/feature-graphic.png），
   與法務頁的 legal.css 分開——那幾頁要讀長文，這頁要賣東西。 */
:root {
  color-scheme: dark;
  --bg: #07131b;
  --bg-glow: #0e3b4a;
  --surface: #0d1f2a;
  --surface-raised: #123140;
  --rule: #1d3a49;
  --fg: #eef6f8;
  --muted: #9bb3bd;
  --brand: #7fe3f3;
  --brand-deep: #93eefa;
  --on-brand: #04202a;
  --radius: 16px;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* hero 的截圖有旋轉與放大，transform 不佔版面但會撐出水平捲軸。 */
  overflow-x: clip;
  background:
    radial-gradient(900px 520px at 85% -10%, var(--bg-glow) 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 30%, #0b2a36 0%, transparent 60%),
    var(--bg);
  color: var(--fg);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.3; margin: 0; letter-spacing: -.01em; }

h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  margin-bottom: 1.25rem;
}

main > section, .top, footer {
  width: min(var(--max), 100% - 2rem);
  margin-inline: auto;
}

main > section { padding: 3.5rem 0; }

/* ── 頂欄 ─────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}

.brand img { border-radius: 9px; }

.top nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: .95rem;
}

.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--fg); }

.top .pill {
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .4rem .9rem;
}

@media (max-width: 640px) {
  .top nav a:not(.pill) { display: none; }
}

/* ── Hero ─────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 2.5rem;
  padding-top: 2.5rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 800;
}

.lead {
  color: var(--muted);
  font-size: 1.15rem;
  margin: .9rem 0 1.75rem;
}

/* 商店 badge 走官方圖檔與規範：高度一致、四周留白至少 badge 高度的 1/4（48px → 12px）、
   不改色不變形。Windows 沒有官方 badge，自己畫一顆同高、同黑底白框的按鈕放旁邊。
   Apple：https://developer.apple.com/app-store/marketing/guidelines/
   Google：https://play.google.com/intl/zh-TW/badges/ */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.badge { display: inline-flex; line-height: 0; }

.badge img { height: 48px; width: auto; display: block; }

.store {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 48px;
  padding: 0 1rem 0 .85rem;
  border-radius: 7px;
  border: 1px solid #a6a6a6;
  background: #000;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

.store:hover { border-color: #fff; }

.store svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

.store span { display: inline-flex; align-items: baseline; gap: .45rem; font-weight: 700; font-size: 1.05rem; }

.store em { font-style: normal; font-weight: 500; font-size: .8rem; color: #c7c7c7; }

.hero-shots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 1.5rem .75rem;
  overflow: hidden;
}

.hero-shots img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  background: var(--surface);
}

.hero-shots img:nth-child(1) { transform: translate(18%, 7%) rotate(-5deg); z-index: 1; }
.hero-shots img:nth-child(2) { transform: translateY(-3%) scale(1.06); z-index: 3; }
.hero-shots img:nth-child(3) { transform: translate(-18%, 7%) rotate(5deg); z-index: 2; }

@media (max-width: 860px) {
  /* 一定要 minmax(0, 1fr)：純 1fr 的最小值是 auto，會被 .hero-shots 的 max-width
     撐開到 30rem，整個 hero 在 390px 的手機上往右溢出。 */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-shots { width: 100%; max-width: 30rem; margin-inline: auto; }
}

/* ── 功能 ─────────────────────────────────────────── */
.grid {
  display: grid;
  /* 四張卡一列排完；auto-fit 在 1120px 會排成 3+1，落單那張很醜。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

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

@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}

.grid svg {
  width: 28px;
  height: 28px;
  margin-bottom: .9rem;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grid article {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}

.grid h3 { font-size: 1.05rem; margin-bottom: .4rem; }

.grid p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ── Windows ──────────────────────────────────────── */
.windows .sub { color: var(--muted); margin: -.75rem 0 1.25rem; }

.assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.asset {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.asset:hover { border-color: var(--brand); background: var(--surface-raised); }

.asset-kind { font-weight: 700; font-size: 1.1rem; color: var(--brand-deep); }

.asset-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.asset-meta { color: var(--muted); font-size: .9rem; }

.asset-meta em { font-style: normal; color: var(--fg); }

.fine { color: var(--muted); font-size: .88rem; margin: 1.25rem 0 0; }

/* ── 頁尾 ─────────────────────────────────────────── */
footer {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .85rem;
}

footer .links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; }

footer .links a { color: var(--muted); text-decoration: none; }
footer .links a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .store, .asset { transition: none; }
}