/* VibeGame 的网站。颜色从游戏里来：机身的淡紫塑料、烈风的红、子弹的黄、海的蓝、夜里的深蓝。
   点阵字只用 12 的整数倍（24、36、48 像素），不糊。边框一律是缺了角的像素框。 */

@font-face {
  font-family: "VibeGame Pixel";
  src: url("fonts/pixel.woff") format("woff");
  font-display: swap;
}

:root {
  --lilac: #e4dff0;
  --lilac-lo: #cbc2e0;
  --lilac-hi: #f4f1fa;
  --ink: #241a3a;
  --ink-2: #5a4e76;
  --red: #d83030;
  --red-lo: #801828;
  --red-hi: #ff7058;
  --yellow: #ffd23f;
  --sea: #1c4c90;
  --night: #141c3c;
  --night-hi: #26305c;
  --device: #2c2244;
  --device-hi: #43386a;
  --px: 4px;
  --pixel: "VibeGame Pixel", ui-monospace, monospace;
  --text: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 32px;
}

* { box-sizing: border-box; }
/* 两种语言都写在页面里，只显示选中的那种。 */
html[data-lang="en"] body [lang="zh"], html[data-lang="zh"] body [lang="en"] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lilac);
  color: var(--ink);
  font: 17px/1.75 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--sea); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: var(--px) solid var(--yellow); outline-offset: var(--px); }

h1, h2, h3, .mark, nav, .lang, .btn, .price, .start, .node-name, .targets b, .steps > li::before, .carts b, dt {
  font-family: var(--pixel);
  font-weight: normal;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
h1 { font-size: 48px; line-height: 60px; margin: 0 0 24px; }
h2 { font-size: 36px; line-height: 48px; margin: 0 0 12px; }
h3 { font-size: 24px; line-height: 36px; margin: 0 0 6px; }
p { margin: 0 0 14px; max-width: 34em; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--lilac-hi); padding: 1px 5px; }

main > section, .top, .foot { padding-left: var(--gutter); padding-right: var(--gutter); }
main > section > *, .top, .foot > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
main > section { padding-top: 96px; padding-bottom: 24px; }
/* 段落和标题左边对齐，但一行不超过 34 个字。 */
main > section > p { max-width: 34em; margin-left: max(0px, calc((100% - 1120px) / 2)); margin-right: 0; }
main > section > p, .lede { color: var(--ink-2); }

/* 缺角的像素框：四条边各一道，角上空一格。 */
.pixel-box, .btn, .node, .carts a, pre, .agent-shot img, .way, .start {
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(-1 * var(--px)) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink);
}

/* ---------- 顶上 ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 20px; padding-bottom: 20px;
}
.mark { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; line-height: 24px; color: var(--ink); text-decoration: none; }
.mark svg { width: 36px; height: 36px; fill: var(--red); shape-rendering: crispEdges; }
nav { display: flex; gap: 24px; align-items: center; font-size: 24px; line-height: 24px; }
.lang {
  padding: 6px 10px; border: 0; cursor: pointer; font-size: 24px; line-height: 24px;
  background: var(--ink); color: var(--lilac-hi);
}
.lang:hover { background: var(--red); }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { color: var(--red); }

/* ---------- 按钮 ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.btn {
  display: inline-block; padding: 12px 20px; font-size: 24px; line-height: 24px;
  background: var(--red); color: var(--lilac-hi); text-decoration: none;
  box-shadow:
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--red-lo),
    inset var(--px) var(--px) 0 0 var(--red-hi),
    0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
    calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink);
}
.btn:hover { color: var(--yellow); }
.btn:active { transform: translateY(var(--px)); }
.btn.quiet {
  background: var(--lilac-hi); color: var(--ink);
  box-shadow:
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--lilac-lo),
    0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
    calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink);
}
.btn.quiet:hover { color: var(--red); }

/* ---------- 开头：掌机 ---------- */
main > section.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center;
  max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding-top: 48px; padding-bottom: 72px;
}
.hero > * { margin: 0; max-width: none; }
.hero h1 { font-size: 60px; line-height: 72px; }
.lede { font-size: 19px; }

.device { container-type: inline-size; margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.unit { position: relative; }
.shell { display: block; width: 100%; height: auto; }
.shell .body { fill: var(--device); }
.shell .body-hi { fill: var(--device-hi); }
.shell .bezel { fill: var(--ink); }
.shell .glass { fill: #000; }
.shell .led { fill: var(--red-hi); }
.shell .hinge { fill: #1a1430; }
.shell .hinge-hi { fill: var(--device-hi); }
.shell .speaker rect { fill: #1a1430; }

/* 屏：和 SVG 里的玻璃对齐（x 18、y 10、宽 124，按 160×176 换成百分比）。 */
.screen { position: absolute; left: 11.25%; top: 5.682%; width: 77.5%; aspect-ratio: 3 / 2; background: #000; }
.screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.start {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  padding: 8px 14px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--yellow); color: var(--ink); font-size: 24px; line-height: 24px;
}
.start:hover { background: var(--lilac-hi); }
.device.on .start { display: none; }

/* 按键：放在 SVG 的下半块上（y 102 到 172）。 */
.pad {
  position: absolute; left: 9%; right: 9%; top: 61%; height: 34%;
  display: flex; align-items: center; justify-content: space-between;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.pad button { padding: 0; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dpad { display: grid; grid-template-columns: repeat(3, 6.5cqw); grid-template-rows: repeat(3, 6.5cqw); grid-template-areas: ". u ." "l m r" ". d ."; }
.dpad button, .dpad-mid { background: var(--lilac-lo); box-shadow: inset 0 -1cqw 0 0 #9a90b8; }
.dpad [data-key="up"] { grid-area: u; }
.dpad [data-key="left"] { grid-area: l; }
.dpad-mid { grid-area: m; }
.dpad [data-key="right"] { grid-area: r; }
.dpad [data-key="down"] { grid-area: d; }
.mid { display: flex; gap: 4cqw; align-self: flex-end; margin-bottom: 9cqw; }
.mid button { width: 8cqw; height: 2.5cqw; background: var(--lilac-lo); }
.ab { display: flex; gap: 4cqw; align-items: center; }
.ab button {
  width: 11cqw; height: 11cqw; background: var(--red); color: var(--lilac-hi);
  font: 3.6cqw/1 var(--pixel);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: inset -1cqw -1cqw 0 0 var(--red-lo);
}
.ab [data-key="a"] { margin-bottom: 6cqw; }
.ab [data-key="b"] { margin-top: 6cqw; }
.pad button.down { filter: brightness(0.75); transform: translateY(0.5cqw); }
.device figcaption { margin-top: 20px; font-size: 15px; color: var(--ink-2); }

/* 淡紫到深蓝的抖动过渡：一格 4 像素，越往下越密。 */
.dither {
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8' shape-rendering='crispEdges' fill='%23141c3c'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='3' height='1'/%3E%3Crect x='1' y='5' width='3' height='1'/%3E%3Crect x='0' y='6' width='4' height='2'/%3E%3C/svg%3E") repeat-x 0 0 / 16px 32px;
  image-rendering: pixelated;
}

/* ---------- 同一份代码 ---------- */
main > section.where { background: var(--night); color: var(--lilac); padding-top: 72px; padding-bottom: 96px; }
.where > p { color: #b8b0d4; }
.where code { background: var(--night-hi); color: var(--yellow); }
.flow { display: grid; grid-template-columns: auto 48px auto 48px 1fr; align-items: center; margin-top: 48px; }
.node { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: var(--night-hi); box-shadow: 0 -4px 0 0 var(--lilac), 0 4px 0 0 var(--lilac), -4px 0 0 0 var(--lilac), 4px 0 0 0 var(--lilac); }
.node.wasm { background: var(--sea); }
.node-name { font-size: 24px; line-height: 24px; color: var(--lilac-hi); }
.node-note { font-size: 14px; color: #b8b0d4; }
.wire { height: 4px; background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, transparent 8px 16px); }
.targets { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 4px dashed var(--yellow); display: grid; gap: 20px; }
.targets li { display: grid; grid-template-columns: 96px auto 1fr; gap: 16px; align-items: baseline; font-size: 15px; color: #b8b0d4; }
.targets b { font-size: 24px; line-height: 24px; color: var(--lilac-hi); }

/* ---------- 卡带 ---------- */
.carts { list-style: none; padding: 0; margin: 40px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.carts a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 24px 16px 18px; background: var(--lilac-lo); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
/* 卡带上面的防滑纹。 */
.carts a::before { content: ""; position: absolute; left: 16px; right: 36px; top: 8px; height: 8px; background: repeating-linear-gradient(90deg, #a79dc4 0 4px, transparent 4px 8px); }
.carts img { width: 100%; height: auto; aspect-ratio: 6 / 5; box-shadow: 0 0 0 4px var(--ink); margin-bottom: 16px; }
.carts b { font-size: 24px; line-height: 36px; }
.carts span { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.carts a:hover { background: var(--lilac-hi); transform: translateY(calc(-1 * var(--px))); }

/* ---------- 五步 ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 48px auto 0; display: grid; gap: 48px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 32px; align-items: start; }
.steps > li::before {
  content: counter(step); grid-row: span 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 36px; line-height: 36px; background: var(--yellow); color: var(--ink);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}
.steps h3, .steps p { grid-column: 2; }
.steps p { color: var(--ink-2); }
.steps pre { grid-column: 3; grid-row: 1 / span 3; }
pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  background: var(--night); color: var(--lilac);
  font: 14px/1.7 var(--mono);
}
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* ---------- agent ---------- */
main > section.agent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; }
.agent > * { margin: 0; }
.agent p { color: var(--ink-2); }
.agent pre { margin-top: 20px; }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frames img:first-child { grid-column: 1 / -1; }
.agent-shot img { display: block; width: 100%; height: auto; }
.agent-shot figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* ---------- 装到掌机 ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.way { padding: 24px 28px 14px; background: var(--lilac-hi); }
.way p { color: var(--ink-2); }
.way code { background: var(--lilac); }

/* ---------- 规格 ---------- */
.specs dl { margin: 32px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.specs dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-top: 4px dotted var(--lilac-lo); }
dt { font-size: 24px; line-height: 28px; }
dd { margin: 0; color: var(--ink-2); }

/* ---------- 底下 ---------- */
.foot { margin-top: 96px; padding-top: 40px; padding-bottom: 48px; background: var(--night); color: #b8b0d4; font-size: 15px; }
.foot a { color: var(--yellow); }
.foot p { max-width: 1120px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1000px) {
  .carts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; justify-items: start; gap: 0; }
  .wire { width: 4px; height: 40px; margin-left: 40px; background: repeating-linear-gradient(180deg, var(--yellow) 0 8px, transparent 8px 16px); }
  .targets { margin-left: 40px; }
}
@media (max-width: 820px) {
  :root { --gutter: 16px; }
  main > section { padding-top: 64px; }
  main > section.hero, main > section.agent { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 48px; line-height: 60px; }
  .device { justify-self: center; }
  h2 { font-size: 24px; line-height: 36px; }
  nav { gap: 16px; }
  nav a:not(:last-child) { display: none; }
  .carts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .steps > li { grid-template-columns: 56px minmax(0, 1fr); }
  .steps pre { grid-column: 1 / -1; grid-row: auto; }
  .ways, .specs dl { grid-template-columns: 1fr; }
  .targets li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 36px; line-height: 48px; }
  .btn { font-size: 24px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .carts a:hover, .pad button.down { transform: none; }
}

/* 购买：一张卡片，价格用点阵字放大。 */
.buy { padding-top: 72px; }
.buy-card {
  display: grid; grid-template-columns: 192px 1fr; gap: 40px; align-items: start;
  padding: 36px; background: var(--lilac-hi);
}
.buy-card img { width: 192px; height: 160px; }
.buy-text h2 { margin-bottom: 0; }
.price { font-size: 48px; line-height: 60px; margin: 0 0 12px; color: var(--red); }
.price small { font-size: 24px; color: var(--ink-2); }
.buy-text ul { margin: 0 0 24px; padding-left: 1.2em; }
.buy-note { margin: 0 0 12px; padding: 8px 12px; background: var(--yellow); }
.buy-fine { font-size: 14px; color: var(--ink-2); margin: 0; }
#buy-btn[disabled] { opacity: 0.6; cursor: wait; }
@media (max-width: 820px) {
  .buy-card { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .buy-card img { width: 144px; height: 120px; }
}

/* 付完款回来的那页。 */
.thanks { max-width: 34em; margin: 96px auto; padding: 0 var(--gutter); text-align: center; }
.thanks img { width: 192px; height: 160px; }