/* Pixio Pets · 官网版式
   一套组件贯穿全页：.sh（版块标题）、.card（卡片）、.g2/.g3/.g4/.g5（等宽网格）、.kv（键值行）、.tile（数据格）。
   所有版块左对齐到同一条网格线，间距只用 8 的倍数：卡片内 24，网格间距 24，版块上下 96。
   像素字只用 12 / 24 / 36 / 48 四个字号。 */
@import url("ui.css");

:root { --gap: 24px; --pad: 24px; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--night); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.7;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 6px 6px; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a.btn, a.lang, a.brand { text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--f-px); -webkit-font-smoothing: none; text-shadow: 3px 3px 0 var(--ink); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-left, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------ 顶栏 */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(18, 14, 36, .94); box-shadow: 0 4px 0 var(--ink); backdrop-filter: blur(6px); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--f-px); font-size: 24px; line-height: 24px; color: var(--gold); -webkit-font-smoothing: none; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.brand img { width: 32px; height: 32px; }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--mute); text-decoration: none; padding: 10px 10px 12px; -webkit-font-smoothing: none; white-space: nowrap; }
.links a:hover { color: var(--gold); }
.lang { font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--fg); text-decoration: none; padding: 8px 10px 10px; box-shadow: 0 0 0 2px var(--hi); -webkit-font-smoothing: none; }
.lang:hover { box-shadow: 0 0 0 2px var(--gold); color: var(--gold); }
.nav .btn { margin: 0 3px; }

/* ------------------------------------------------------------ 版块 */
section { padding: 96px 0 0; }
section:last-of-type { padding-bottom: 96px; }
.sh { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; margin-bottom: 40px; }
.sh .no { font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--ink); background: var(--gold); padding: 6px 8px 8px; box-shadow: 0 0 0 3px var(--ink); -webkit-font-smoothing: none; }
.sh h2 { font-size: 36px; line-height: 44px; color: var(--fg); }
.sh p { grid-column: 1 / -1; max-width: 680px; color: var(--mute); font-size: 16px; }

/* ------------------------------------------------------------ 网格与卡片 */
.g2, .g3, .g4, .g5 { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stack { display: grid; gap: var(--gap); }
.sub-h { font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--label); -webkit-font-smoothing: none; margin: 0 0 -8px; }

.card {
  display: flex; flex-direction: column; gap: 16px; padding: var(--pad); margin: 4px; min-width: 0;
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--ink), inset 0 4px 0 var(--hi), inset 0 -4px 0 var(--lo), 8px 8px 0 4px rgba(3, 2, 10, .5);
}
.card.dark { background: var(--win); box-shadow: 0 0 0 4px var(--ink), inset 0 4px 0 #2b2152, inset 0 -4px 0 #0f0b20, 8px 8px 0 4px rgba(3, 2, 10, .5); }
.card > p, .card .txt { color: var(--mute); }
.ch { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.ch h3 { font-size: 24px; line-height: 28px; color: var(--fg); }
.ch .ic { width: 48px; height: 48px; }
.ch .ic img { width: 32px; height: 32px; }
.ch .tag { margin-left: auto; }
.card .foot { margin-top: auto; padding-top: 16px; box-shadow: inset 0 2px 0 var(--lo); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card .foot span { font-size: 13px; color: var(--dim); }
.card .foot b { font-family: var(--f-px); font-weight: 400; font-size: 12px; color: var(--gold); -webkit-font-smoothing: none; white-space: nowrap; }
.step { font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--label); -webkit-font-smoothing: none; }

/* 键值行：左标签，右数值，统一行高 */
.kv { display: grid; }
.kv > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; background: var(--row); font-size: 14px; }
.kv > div:nth-child(even) { background: var(--row2); }
.kv span { color: var(--mute); }
.kv b { font-family: var(--f-px); font-weight: 400; font-size: 12px; color: var(--fg); -webkit-font-smoothing: none; text-align: right; }

/* 表格行（福袋、合约） */
.tbl { display: grid; }
.tbl .tr { cursor: default; --cols: 96px minmax(0, 1fr) 72px; min-height: 52px; }
.tbl .tr:hover { background: var(--row); }
.tbl .tr:nth-child(even):hover { background: var(--row2); }
.tbl .thead { --cols: 96px minmax(0, 1fr) 72px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.addr { color: var(--sky); text-decoration: none; white-space: nowrap; }
.addr:hover { color: var(--gold); }
.code-tbl .tr, .code-tbl .thead { --cols: 120px minmax(0, 1fr) 170px; }

/* ------------------------------------------------------------ 首屏 */
.hero { padding-top: 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.eyebrow { justify-self: start; display: inline-block; font-family: var(--f-px); font-size: 12px; line-height: 12px; color: var(--gold); padding: 8px 10px 10px; box-shadow: 0 0 0 2px var(--gold-d); -webkit-font-smoothing: none; }
.hero-l { display: grid; gap: 24px; justify-items: start; }
.hero h1 { font-size: 48px; line-height: 64px; color: var(--fg); }
.hero h1 b { font-weight: 400; color: var(--gold); }
.hero .lead { max-width: 560px; font-size: 17px; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); padding: 6px 12px; background: var(--strip); box-shadow: 0 0 0 2px var(--ink); }
.chips span::before { content: ""; width: 8px; height: 8px; background: var(--jade); box-shadow: 0 0 0 1px var(--ink); }
.hero .bar { width: min(100%, 520px); }
.hero .btn.big { font-size: 24px; }
.facts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; box-shadow: 0 0 0 4px var(--ink); background: var(--strip); }
.facts > div { padding: 16px 20px 18px; box-shadow: inset -2px 0 0 var(--lo); }
.facts > div:last-child { box-shadow: none; }
.facts b { display: block; font-family: var(--f-px); font-weight: 400; font-size: 24px; line-height: 28px; color: var(--gold); -webkit-font-smoothing: none; text-shadow: 2px 2px 0 var(--ink); }
.facts span { font-size: 13px; color: var(--dim); }

.show { margin: 14px; }
.show .title b { font-size: 24px; }
.show .stagebox { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 45%, #3a2d6e 0, var(--well) 70%); box-shadow: inset 0 -4px 0 var(--ink); }
.show .stagebox img { width: min(100%, 312px); height: auto; aspect-ratio: 1; }
.show .kv > div { min-height: 44px; padding: 0 16px; }

/* ------------------------------------------------------------ 数据看板 */
.dash { padding: 0; gap: 0; }
.dash .dh { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad) 16px; background: linear-gradient(#3a2d12, #2a200c); box-shadow: inset 0 -4px 0 var(--ink), inset 0 3px 0 #5a4518; }
.dash .dh b { font-family: var(--f-px); font-weight: 400; font-size: 12px; color: var(--gold); -webkit-font-smoothing: none; }
.dash .dh span { margin-left: auto; font-size: 13px; color: #d9b45a; }
.live { display: inline-block; width: 10px; height: 10px; background: var(--dim); box-shadow: 0 0 0 2px var(--ink); }
.live.on { background: var(--jade); animation: blink 1.6s steps(2) infinite; }
.live.bad { background: var(--red); }
@keyframes blink { 50% { opacity: .35; } }
.dgroup { display: grid; grid-template-columns: 160px minmax(0, 1fr); box-shadow: inset 0 -2px 0 var(--lo); }
.dgroup:last-child { box-shadow: none; }
.dgroup > h4 { margin: 0; display: flex; align-items: center; padding: 0 var(--pad); background: var(--strip); box-shadow: inset -2px 0 0 var(--lo); font-family: var(--f-px); font-weight: 400; font-size: 12px; color: var(--label); -webkit-font-smoothing: none; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { display: grid; align-content: start; gap: 6px; padding: 20px var(--pad) 22px; box-shadow: inset -2px 0 0 var(--lo); min-height: 132px; }
.tile:last-child { box-shadow: none; }
.tile .k { font-size: 13px; color: var(--mute); }
.tile .v { font-family: var(--f-px); font-size: 36px; line-height: 40px; color: var(--gold); -webkit-font-smoothing: none; text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v small { font-size: 12px; line-height: 12px; color: var(--dim); text-shadow: none; margin-left: 6px; }
.tile .v.t { font-size: 24px; }
.tile .v.ok { color: var(--jade); } .tile .v.off { color: var(--mute); }
.tile .s { font-size: 12px; color: var(--dim); }
.meter { height: 8px; background: var(--well); box-shadow: 0 0 0 2px var(--ink); margin-top: 4px; }
.meter i { display: block; height: 100%; width: 0; background: var(--gold); box-shadow: inset 0 -2px 0 var(--gold-d); transition: width .6s steps(12); }

/* ------------------------------------------------------------ Agent */
.day .tr { cursor: default; --cols: 88px minmax(0, 1fr); min-height: 64px; align-items: center; }
.day .tr:hover { background: var(--row); } .day .tr:nth-child(even):hover { background: var(--row2); }
.day .t { font-family: var(--f-px); font-size: 12px; color: var(--gold); -webkit-font-smoothing: none; }
.prompt-box { background: var(--well); box-shadow: 0 0 0 3px var(--ink); padding: 16px 18px; font-size: 14px; line-height: 1.8; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; color: var(--mute); font-size: 14px; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 0 1px var(--ink); transform: translateY(-2px); }

/* ------------------------------------------------------------ 福袋 */
.bagbox { align-items: center; text-align: center; justify-content: center; }
.bagbox .bagimg { width: 128px; height: 128px; filter: drop-shadow(6px 6px 0 var(--ink)); animation: bob 1.4s steps(4) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.bagbox .left { font-family: var(--f-px); font-size: 36px; line-height: 40px; color: var(--gold); -webkit-font-smoothing: none; text-shadow: 3px 3px 0 var(--ink); }
.bagbox .left small { font-size: 12px; color: var(--dim); text-shadow: none; }
.bagbox .bar { width: 100%; }
.check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; align-items: center; }
.check .inp { width: 100%; height: 38px; margin: 3px; }
.check-out { min-height: 22px; font-size: 13px; color: var(--mute); }

/* ------------------------------------------------------------ 进化 */
.stage { align-items: stretch; }
.stage .art { height: 128px; display: grid; place-items: center; background: var(--well); box-shadow: 0 0 0 3px var(--ink); }
.stage .spr { width: 104px; height: 104px; background-size: 2496px 104px; background-repeat: no-repeat; image-rendering: pixelated; animation: spr 2.4s steps(24) infinite; }
@keyframes spr { to { background-position: -2496px 0; } }
.stage .ch { min-height: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
.chip { white-space: nowrap; }
.stage .kv > div { padding: 0 10px; min-height: 36px; font-size: 13px; }
.ghost { flex-direction: row; align-items: center; gap: 24px; }
.ghost .art { flex: none; width: 104px; height: 104px; background: var(--well); box-shadow: 0 0 0 3px var(--ink); display: grid; place-items: center; }
.ghost .spr { width: 88px; height: 88px; background-size: 2112px 88px; animation: spr8 2.4s steps(24) infinite; }
@keyframes spr8 { to { background-position: -2112px 0; } }
.ghost > div:last-child { display: grid; gap: 8px; }

/* ------------------------------------------------------------ 图鉴 */
.gallery { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1; background: var(--well); box-shadow: 0 0 0 3px var(--ink); }

/* ------------------------------------------------------------ 路线 */
.phase .ch .no { font-family: var(--f-px); font-size: 24px; line-height: 24px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); background: var(--panel2); box-shadow: 0 0 0 3px var(--ink); -webkit-font-smoothing: none; }
.phase.now .ch .no { background: var(--gold); }

/* ------------------------------------------------------------ 问答 */
.faq { padding: 0; gap: 0; }
.faq details { box-shadow: inset 0 -2px 0 var(--lo); }
.faq details:last-child { box-shadow: none; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 var(--pad); font-size: 16px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-px); font-size: 24px; color: var(--gold); -webkit-font-smoothing: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--row2); }
.faq details p { padding: 0 var(--pad) 20px; color: var(--mute); max-width: 860px; }

/* ------------------------------------------------------------ 页脚 */
footer { box-shadow: 0 -4px 0 var(--ink); background: var(--deep); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; min-height: 96px; font-size: 13px; color: var(--dim); }
footer .brand { font-size: 12px; }
footer .brand img { width: 24px; height: 24px; }
footer .r { margin-left: auto; }

/* ------------------------------------------------------------ 响应式 */
@media (max-width: 1100px) {
  .links { display: none; }
  .lang { margin-left: auto; }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(2n) { box-shadow: none; }
  .tile:nth-child(-n+2) { box-shadow: inset -2px -2px 0 var(--lo); }
  .tile:nth-child(2) { box-shadow: inset 0 -2px 0 var(--lo); }
  .dgroup { grid-template-columns: minmax(0, 1fr); }
  .dgroup > h4 { min-height: 40px; box-shadow: inset 0 -2px 0 var(--lo); }
}
@media (max-width: 640px) {
  :root { --gap: 16px; --pad: 18px; }
  .wrap { padding: 0 16px; }
  section { padding-top: 72px; }
  section:last-of-type { padding-bottom: 72px; }
  .nav .wrap { height: 64px; gap: 12px; }
  .brand { font-size: 12px; } .brand img { width: 24px; height: 24px; }
  .nav .btn { padding: 0 10px 2px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 36px; line-height: 48px; }
  .hero .btn.big { font-size: 12px; line-height: 12px; height: 48px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { box-shadow: inset 0 -2px 0 var(--lo); }
  .sh { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .sh .no { justify-self: start; }
  .sh h2 { font-size: 24px; line-height: 32px; }
  .sh p { grid-column: 1; font-size: 15px; }
  .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .tile .v { font-size: 24px; line-height: 32px; }
  .tile { min-height: 112px; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ghost { flex-direction: column; align-items: flex-start; }
  .code-tbl .tr, .code-tbl .thead { --cols: 90px minmax(0, 1fr); }
  .code-tbl .role { display: none; }
  .tbl .tr, .tbl .thead { --cols: 72px minmax(0, 1fr) 56px; }
  .ch h3 { font-size: 24px; }
  footer .r { margin-left: 0; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 24px; line-height: 36px; }
}