/* Cell War 展示页
 *
 * 配色全部照游戏：game/scripts/ui/cw_style.gd（界面色）、board.gd（组织块色）、
 * scenes/MainMenu.tscn（LOGO 的字色、投影、三层青色辉光）。
 *
 * 字号规矩照游戏（game/assets/fonts/README.md）：点阵字只能取网格的整数倍，否则点阵被重采样、边缘发糊。
 *   缝合像素 10px（中文与正文）→ 10 / 20 / 30 / 40 …
 *   Silkscreen（拉丁大标题）   → 8 的整数倍：16 / 24 / 32 / 48 / 64 / 96 …
 * 行高同理取整，并让 (行高 − 字号) 是偶数，基线落在整像素上。
 */

@font-face {
  font-family: "CW Pixel";
  src: url("assets/fonts/fusion_pixel_10px.subset.woff") format("woff");
  font-display: swap;
  /* 原字体 ascent 1100 / descent 300，行框比字形高出一截、字偏下（cw_style.gd 的 keycap 注释踩过）。
     压成 900 / 100：字形带（-100..800）基本居中，且 10 的整数倍字号下基线都落在整像素 */
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "CW Logo";
  src: url("assets/fonts/silkscreen_bold.ttf") format("truetype");
  font-display: swap;
  /* 字形 0..625（5 格 × 125），行框压成 812.5 / 187.5 让大写字母居中；16 的整数倍字号下都是整像素 */
  ascent-override: 81.25%;
  descent-override: 18.75%;
  line-gap-override: 0%;
}

:root {
  /* cw_style.gd */
  --ground: #141f2e;        /* 画布底 */
  --panel: #0f1822;         /* 面板底 */
  --btn-bg: #0a1018e6;      /* 按钮底（半透明） */
  --immune: #30d1fa;        /* 免疫方 / 强调色 */
  --cancer: #ffb03a;        /* 癌方 */
  --line: #3fa5b6;          /* 描边基色 */
  --line-a: #3fa5b673;      /* 描边，45% */
  --text-hi: #eaf8fc;       /* 主要文字 */
  --text: #cfe2e6;          /* 常规文字 */
  --text-dim: #7b929b;      /* 次要文字 */
  --text-off: #5c737c;      /* 灰掉的文字 */
  --gain: #8fd9a2;          /* 能量进账 */
  --loss: #e8899c;          /* 能量出账 */
  /* board.gd / 截图取色 */
  --tissue: #2e4a41;        /* 健康组织顶面（03b 截图取色） */
  --tissue-cancer: #b04a5a; /* 癌组织顶面（board.gd:35） */
  --core: #3f9d5f;          /* 代谢核心满圈（board.gd:17） */
  --marrow: #b07fe0;        /* 骨髓满圈（board.gd:17） */
  /* MainMenu.tscn 的 LOGO */
  --logo: #e9f6fa;
  --logo-shadow: #1a1a2e;

  --gutter: 16px;
  --wrap: 984px;            /* = 两张 480 宽的截图 + 24 间距；头图视频 960 + 边框 */
  --font: "CW Pixel", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-logo: "CW Logo", "CW Pixel", monospace;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 20px/30px var(--font);
  -webkit-font-smoothing: none;     /* mac 上关掉抗锯齿，点阵字才是干净的方块 */
  font-smooth: never;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--immune); text-decoration: none; }
a:hover { color: #fff; text-shadow: 0 0 6px #ffffff80; }   /* cw_style.gd link_hot：转白 + 白光 */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--immune); outline-offset: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
b { font-weight: normal; color: var(--text-hi); }

/* 像素图：放大用最近邻。缩小时由页尾脚本加 .px-soft 换回平滑（最近邻缩小会丢整行像素） */
.px { image-rendering: crisp-edges; image-rendering: pixelated; }
.px.px-soft { image-rendering: auto; }

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

/* ---------- 按钮（照对局配置面板：主按钮青底深字，次按钮 2px 描边） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 20px;
  border: 2px solid var(--line-a);
  background: var(--btn-bg);
  color: var(--text-hi);
  font: inherit;
  line-height: 30px;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.btn:hover {
  color: #fff;
  border-color: var(--immune);
  box-shadow: 0 0 0 2px #30d1fa33, 0 0 16px #30d1fa40;
  text-shadow: 0 0 6px #ffffff80;
  transform: translateY(-2px);       /* 主菜单悬停「微微上浮」 */
}
.btn-primary { background: var(--immune); border-color: var(--immune); color: var(--panel); }
.btn-primary:hover { background: var(--text-hi); border-color: var(--text-hi); color: var(--panel); text-shadow: none; }
.btn-sm { min-height: 40px; padding: 5px 10px; }
.btn-lg { min-height: 60px; padding: 15px 30px; }
.btn-primary .diamond { background: var(--panel); box-shadow: none; }

/* 待填的链接：虚线框 + 角标，一眼看出没接上 */
.btn-todo { border-style: dashed; }
.todo {
  display: inline-block;
  padding: 0 5px;
  background: var(--cancer);
  color: var(--panel);
  line-height: 30px;
}
.todo-line { color: var(--cancer); }

/* 焦点菱形（cw_style.gd focus_marker：14px 青方块转 45°）+ 轻微慢闪（HALO_PERIOD 2.0，透明度 0.35↔1.0） */
.diamond {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--immune);
  transform: rotate(45deg);
  box-shadow: 0 0 10px #30d1fa99;
  animation: halo 2s ease-in-out infinite alternate;
}
@keyframes halo { from { opacity: .35; } to { opacity: 1; } }

/* ---------- 顶栏 ---------- */
.topbar {
  border-bottom: 2px solid var(--line-a);
  background: var(--panel);
}
.topbar-in { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--logo);
  font: 16px/24px var(--font-logo);
  margin-right: auto;
}
.brand img { width: 24px; height: 24px; }
.nav { display: none; gap: 20px; }
.nav a { color: var(--text); }
.nav a:hover { color: #fff; }

/* ---------- ① 头图 ---------- */
.hero {
  position: relative;
  padding: 40px 0 56px;
  /* 底纹 = 游戏自己的组织块按棋盘排法铺的图（_tools/build_assets.py build_pattern），压到很暗 */
  background:
    radial-gradient(ellipse at 70% 30%, #141f2e99, #141f2ef2 70%),
    linear-gradient(#141f2ecc, #141f2e),
    url("assets/bg/board_tile.png") 0 0 / 432px 240px;
  image-rendering: pixelated;
  border-bottom: 2px solid var(--line-a);
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-areas: "head" "trailer" "cta";
  gap: 30px;
}
.hero-head { grid-area: head; position: relative; z-index: 1; }
.kicker {
  color: var(--immune);
  font-size: 20px;
  line-height: 30px;
}
.logo {
  margin: 10px 0 20px;
  color: var(--logo);
  font: 48px/48px var(--font-logo);
  white-space: nowrap;
  /* MainMenu.tscn：投影下移 1 个字像素（#1a1a2e），外加三层青色辉光（不透明度 .28 / .12 / .10） */
  text-shadow:
    0 0.125em 0 var(--logo-shadow),
    0 0 0.125em #30d1fa47,
    0 0 0.25em #30d1fa1f,
    0 0 0.375em #30d1fa1a;
}
.pitch {
  color: var(--text-hi);
  font-size: 30px;
  line-height: 40px;
  padding-left: 18px;
  border-left: 2px solid var(--immune);   /* 主菜单 LOGO 下那道青色竖线 */
}
.pitch span { white-space: nowrap; }
.sub { margin-top: 20px; color: var(--text); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tags li {
  padding: 0 10px;
  border: 2px solid var(--line-a);
  background: var(--btn-bg);
  color: var(--text);
}

.hero-cells { display: none; }

.trailer {
  grid-area: trailer;
  position: relative;
  padding: 6px;
  border: 2px solid var(--line-a);
  background: var(--panel);
}
.trailer-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* poster 属性在没有片源时有的内核不画（WebKit 实测是黑框），底图再垫一份同样的图兜底 */
  background: var(--ground) url("assets/shots/960/hero_board.png") center / cover no-repeat;
}
.trailer-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 2px solid var(--immune);
  background: #0a1018f2;
  color: var(--text-hi);
  font-size: 20px;
  line-height: 30px;
}

.hero-cta { grid-area: cta; display: grid; gap: 10px; }
.hero-cta .btn { width: 100%; }
.touch-note { margin-top: 10px; color: var(--text-dim); }

/* ---------- 通用段落 ---------- */
.sec { padding: 56px 0; }
.sec-alt { background: var(--panel); border-block: 2px solid #3fa5b640; }
.sec-head { margin-bottom: 30px; }
.sec-head h2 { color: var(--text-hi); font-size: 30px; line-height: 40px; }
.sec-note { margin-top: 10px; color: var(--text-dim); }

/* ---------- ② 怎么玩 ---------- */
.how { display: grid; gap: 20px; }
.how-item {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 2px solid var(--line-a);
  background: var(--panel);
}
.how-text h3 { color: var(--text-hi); font-size: 20px; line-height: 30px; margin-bottom: 10px; }
.t-immune { color: var(--immune); }
.t-cancer { color: var(--cancer); }

.how-art { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.side { display: flex; align-items: center; justify-content: center; gap: 4px; }
.side img { width: 64px; height: 64px; }          /* 32px 精灵 ×2 */
.side img.s24 { width: 48px; height: 48px; }      /* 24px 精灵 ×2 */
.side img.s16 { width: 32px; height: 32px; }      /* 16px 精灵 ×2：小细胞肺癌在游戏里本来就小 */
.vs { color: var(--text-dim); font: 16px/24px var(--font-logo); width: 100%; text-align: center; }

.tiles figure { display: grid; justify-items: center; gap: 4px; width: 80px; }
.tiles img { width: 64px; height: 68px; }         /* 32×34 组织块 ×2 */
.tiles figcaption { color: var(--text-dim); font-size: 20px; line-height: 30px; white-space: nowrap; }

.cards { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
/* 手机上一张卡一行：种类 · 张数 · 例子；平板起竖排成三张小卡 */
.card {
  display: grid;
  grid-template-columns: 40px 50px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--line-a);
  border-left-width: 6px;
  background: var(--ground);
}
.card-immune { border-left-color: var(--immune); }
.card-cancer { border-left-color: var(--cancer); }
.card-kind { color: var(--text-hi); }
.card-n { color: var(--text-hi); font-size: 30px; line-height: 40px; }   /* 大数字用点阵正文字体，同游戏「第 7 回合」 */
.card-eg { color: var(--text-dim); overflow-wrap: anywhere; }
.card-eg::before { content: "如 "; }

.tags-more { margin-top: 30px; }

/* ---------- ③ 截图墙 ---------- */
.wall { display: grid; gap: 24px; }
.shot a { display: block; border: 2px solid var(--line-a); background: var(--ground); }
.shot a:hover { border-color: var(--immune); box-shadow: 0 0 16px #30d1fa40; }
.shot img { width: 100%; aspect-ratio: 16 / 9; }
.shot figcaption { margin-top: 10px; color: var(--text); }

/* ---------- ④ 下载 ---------- */
.dl-grid { display: grid; gap: 20px; }
.dl-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 2px solid var(--line-a);
  background: var(--panel);
}
.dl-card h3 { display: flex; align-items: center; gap: 10px; color: var(--text-hi); font-size: 30px; line-height: 40px; }
.os-tag {
  padding: 0 6px;
  background: var(--immune);
  color: var(--panel);
  font: 16px/24px var(--font-logo);
}
.dl-file { color: var(--text-dim); }
.dl-links { display: grid; gap: 10px; margin: 10px 0; }
.dl-links .btn { padding-inline: 10px; }
.first-run { color: var(--text); }
.dl-hints { margin-top: 30px; display: grid; gap: 10px; color: var(--text-dim); }
.dl-hints li { padding-left: 20px; position: relative; }
.dl-hints li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; background: var(--line); }

/* ---------- ⑤ 怎么做出来的 ---------- */
.story { display: grid; gap: 40px; }
.story-text { display: grid; gap: 30px; justify-items: start; }
.story-text p { color: var(--text-hi); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.stat { padding: 10px; border: 2px solid var(--line-a); background: var(--ground); }
.stat dt {
  color: var(--text-hi);
  font-size: 30px;
  line-height: 40px;    /* Silkscreen 的 4 是一块实心方块，数字改用点阵正文字体 */
  text-shadow: 0 0 0.25em #30d1fa47;
  white-space: nowrap;
}
.stat dd { margin: 0; color: var(--text-dim); }

/* ---------- ⑥ 团队 ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 10px;
  border: 2px dashed var(--line-a);
  background: var(--panel);
  text-align: center;
}
.avatar {
  display: grid; place-items: center;
  width: 80px; height: 80px;
  margin-bottom: 10px;
  background: var(--ground);
  border: 2px solid var(--line-a);
}
.avatar img { width: 64px; height: 64px; }
.avatar img[width="24"] { width: 48px; height: 48px; }
.m-name { color: var(--cancer); }
.m-role { color: var(--text-hi); }
.m-line { color: var(--text-dim); }

/* ---------- 页脚 ---------- */
.foot { padding: 40px 0 56px; border-top: 2px solid var(--line-a); background: var(--panel); }
.foot-in { display: grid; gap: 10px; color: var(--text-dim); }
.foot-logo { color: var(--logo); font: 24px/32px var(--font-logo); text-shadow: 0 0.125em 0 var(--logo-shadow); }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-fine { color: var(--text-off); }
.foot-fine a { color: var(--text-dim); }

/* ---------- 触屏（手机）才显示的提示 ---------- */
.touch-note { display: none; }
@media (hover: none), (max-width: 719px) {
  .touch-note { display: block; }
}

/* ---------- < 360：最窄的手机（320 宽）LOGO 再小一档，不然 CELL WAR 一行放不下 ---------- */
@media (max-width: 359px) {
  .logo { font-size: 40px; line-height: 40px; }
}

/* ---------- ≥ 480：卡片里的按钮排成一行，LOGO 放大一档 ---------- */
@media (min-width: 480px) {
  .logo { font-size: 64px; line-height: 64px; }
  .dl-links { grid-auto-flow: column; grid-auto-columns: 1fr; }   /* 按钮几个就几列（网盘链接到了会多一个） */
  .hero-cta { grid-template-columns: 1fr 1fr; }
  .hero-cta .touch-note { grid-column: 1 / -1; }
}

/* ---------- ≥ 720：平板 ---------- */
@media (min-width: 720px) {
  .sec { padding: 80px 0; }
  .sec-head h2 { font-size: 40px; line-height: 50px; }
  .nav { display: flex; }
  .wall { grid-template-columns: 1fr 1fr; }
  .shot-wide { grid-column: 1 / -1; }
  .how-item { grid-template-columns: 1fr 1fr; align-items: center; padding: 30px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat dt { font-size: 40px; line-height: 50px; }
  .cards { flex-direction: row; }
  .card {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: none;
    align-content: start;
    justify-items: start;
    gap: 4px;
    border-left-width: 2px;
    border-top-width: 6px;
  }
  .card-immune { border-left-color: var(--line-a); border-top-color: var(--immune); }
  .card-cancer { border-left-color: var(--line-a); border-top-color: var(--cancer); }
  .card-n { font-size: 40px; line-height: 50px; }
  .team { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥ 1000：桌面。头图左字右按钮，宣传片 960 原生宽 ---------- */
@media (min-width: 1000px) {
  .hero { padding: 64px 0 80px; }
  .hero-grid {
    grid-template-columns: 1fr auto;
    grid-template-areas: "head cta" "trailer trailer";
    column-gap: 40px;
    row-gap: 40px;
  }
  .logo { font-size: 96px; line-height: 96px; margin: 20px 0 30px; }
  .pitch { font-size: 40px; line-height: 50px; }
  .hero-cta { grid-template-columns: auto; align-self: end; width: 280px; }
  .hero-cta .touch-note { grid-column: auto; }
  .trailer { padding: 10px; }      /* 960 + 10×2 + 2×2 = 984 = --wrap */

  /* 主菜单那几只漂浮的细胞，挪到头图右上角 */
  /* 放在按钮上方那块空地里：280 × 170，按钮列顶在它下面（头部约 330 高、按钮约 134 高） */
  .hero-cells { display: block; position: absolute; top: 10px; right: 0; width: 280px; height: 170px; pointer-events: none; }
  .hero-cells img { position: absolute; animation: drift 6s steps(6) infinite alternate; }
  /* 只用整数倍放大：32px 精灵 ×2 = 64、×3 = 96，24px 精灵 ×3 = 72 */
  .hero-cells .c1 { width: 64px; height: 64px; left: 10px; top: 6px; }
  .hero-cells .c2 { width: 72px; height: 72px; left: 116px; top: 0; animation-delay: -2s; }
  .hero-cells .c3 { width: 96px; height: 96px; left: 180px; top: 64px; animation-delay: -4s; }
  .hero-cells .c4 { width: 64px; height: 64px; left: 64px; top: 92px; animation-delay: -1s; }

  .how-item { grid-template-columns: 450px 1fr; }   /* 450 = 五块组织 80 × 5 + 间距 10 × 4，一行排得下 */
  .story { grid-template-columns: 1fr 1fr; align-items: start; }
  .dl-grid { grid-template-columns: 1fr 1fr; }   /* 平板宽度并排放不下三颗按钮，桌面才并排 */
  .stats { grid-template-columns: 1fr 1fr; }
  .wall { grid-template-columns: 480px 480px; }   /* 480 CSS 宽 = 视网膜屏上 960 设备像素，与缩略图 1:1 */
}

@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(6px, -12px); }
}

/* ---------- 系统要求减少动态效果：全部停下 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}