/* Island Evolution — 站点样式
   配色直接取自游戏：深海 / 浅海 / 奶油板 / 木棕 / 金。
   正文用系统无衬线（SEO 页文字量大，可读性优先），只有标题和按钮用游戏的点阵字。 */

@font-face {
  font-family: "PixelUI";
  src: url("assets/pixel.woff2") format("woff2");
  font-display: swap;
}

:root {
  --sea-deep: #14375f;
  --sea: #1f5fa1;
  --sea-light: #2f7fc1;
  --cream: #f3e6c8;
  --cream-dim: #e2cfa6;
  --ink: #2a1c12;
  --ink-soft: #5b4630;
  --wood: #c47e5b;
  --wood-dark: #8d5a3c;
  --gold: #f2c14e;
  --max-w: 1240px;
  --radius: 14px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--sea-deep);
  /* 海面横条纹，跟游戏里的海一个味道，但压得很淡不抢内容 */
  background-image: repeating-linear-gradient(
    180deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,0) 2px 8px);
}

img { max-width: 100%; height: auto; display: block; }
a { color: #1b5e9c; }
a:hover { color: #0f4478; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

/* 像素图一律关平滑 */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── 顶栏 ───────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 55, 95, .92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid rgba(0,0,0,.35);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 22px;
  height: 58px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 6px; }
.brand span {
  font-family: "PixelUI", var(--sans);
  font-size: 17px; color: var(--cream); letter-spacing: .5px;
}
.site-nav { margin-left: auto; display: flex; gap: 20px; }
.site-nav a {
  color: var(--cream-dim); text-decoration: none; font-size: 15px; font-weight: 600;
}
.site-nav a:hover { color: #fff; }

/* ── 首屏 ───────────────────────────────────────────── */
/* 纵向节奏：首屏内部 12/14/28，正文区块统一 48 一档（2026-09-17 定）
   顶栏到 logo 用 10px 而不是 28：logo 图顶部 25 行只有稀疏的叶尖
   （最宽 50px/611），渲染后约等于自带 21px 空白，按光学边缘补偿掉。 */
.hero { padding: 10px 0 0; }
.hero-logo { width: min(520px, 86%); margin: 0 auto 12px; }
h1 {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.2;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.tagline {
  margin: 0 auto 28px; max-width: 700px; text-align: center;
  color: #cfe2f5; font-size: clamp(16px, 2.1vw, 19px);
}
.tagline b { color: var(--gold); }

/* 游戏区：单列居中（广告不做侧栏，只放游戏正下方——用户 2026-09-17 定） */
/* 宽度必须是 426×328 画布的**整数倍**加上 3px 边框（box-sizing 是 border-box）：
   900px 时画面被拉成 2.0986 倍，每隔十几列就多复制一列像素，
   物品栏图标看着左右间距不一样、水和船的细蓝线粗细不匀。858 = 426×2 + 6。
   中间尺寸由 site.js 的 snapStage() 钉到整数倍。 */
.stage-row {
  /* 允许冲出 .wrap（1240）去够 426×3=1278 这一档：整数倍才不会有半像素。
     够不到 3 倍时 site.js 的 snapStage() 会自动退回 2 倍（852）。 */
  width: min(100vw - 40px, 1284px);
  max-width: none;
  /* 本行比父级 .wrap（1240）宽时 margin:auto 会失效——没有剩余空间可分，
     auto 取 0，整行就贴着父级左边向右溢出。改用相对父级中心对齐。 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.stage {
  /* snapStage() 会把宽度钉成整数倍（如 852），比本行（最宽 1284）窄，
     不写 auto 就会靠左站着。 */
  margin-inline: auto;
  position: relative;
  background: #0d2744;
  border: 3px solid rgba(0,0,0,.45);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
  aspect-ratio: 426 / 328;
}
.stage img.poster { width: 100%; height: 100%; object-fit: cover; }
.stage .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,25,45,.25), rgba(10,25,45,.72));
  display: grid; place-content: center; gap: 14px; text-align: center;
}
.play-btn {
  font-family: "PixelUI", var(--sans);
  font-size: 22px; letter-spacing: 1px;
  color: var(--ink); background: var(--gold);
  border: 0; border-bottom: 4px solid #b98a24;
  padding: 14px 42px; border-radius: 10px; cursor: pointer;
}
.play-btn:hover { filter: brightness(1.06); }
.play-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.play-btn:disabled { cursor: default; filter: none; }
.play-note { color: #d8e6f6; font-size: 14px; margin: 0; }

/* 加载进度条：59MB 要下一会儿，光靠按钮里的百分比数字反馈太弱。
   方块填充，跟像素风一致，不用圆角不用渐变。 */
.load-bar {
  width: 240px; height: 10px; margin: 0 auto;
  background: rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.25);
  padding: 2px;
  overflow: hidden;            /* 走马灯靠平移，超出部分要裁掉 */
}
.load-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s linear; }

/* 下完之后还有一段在编译 wasm / 起引擎（实测热缓存都要 2 秒，慢机器更久）。
   这段报不出数，换成走马灯表示「还活着」。
   ⚠️ 必须用 transform 做动画，不能用 width 过渡或 background-position：
   后两者跑在**主线程**上，而这 2 秒主线程正被 wasm 编译占满，
   条纹一帧都不会动、宽度也卡在 0 —— 看着就是卡死（实测过）。
   transform / opacity 走合成器，主线程卡死也照样动。 */
.load-bar.is-working i {
  width: calc(100% + 16px);    /* 多出一个条纹周期，平移一个周期即无缝循环 */
  transition: none;            /* width 过渡同样走主线程，这里必须关掉 */
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, #c99a33 8px 16px);
  animation: bar-march .55s linear infinite;
  will-change: transform;      /* 提升到独立层，交给合成器 */
}
@keyframes bar-march { from { transform: translateX(-16px); } to { transform: translateX(0); } }

/* 交叉淡出：加载完别硬切。画布这时已经在海报上面画好了，
   淡掉海报和遮罩就行，让游戏自己的标题屏浮出来。 */
.stage .poster, .stage .veil { transition: opacity .45s ease; }
.stage .is-leaving { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .stage .poster, .stage .veil, .load-bar i { transition: none; }
  .load-bar.is-working i { animation: none; }
}

/* ── 广告位 ─────────────────────────────────────────
   规则写在这里，别再踩：广告不压画面、不贴在玩家会点的地方、
   不做成游戏 UI 的样子。位置固定预留高度，避免 CLS。
   只放游戏下方和内容区之间的横幅，不做侧栏（用户 2026-09-17 定）。 */
.ad-slot {
  display: grid; place-content: center;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 10px;
  color: #90b4d6; font-size: 12px; letter-spacing: 1px;
}
.ad-slot::before { content: "ADVERTISEMENT"; }
/* 真广告进来之后：撤掉虚线占位框，标签缩成一行小字压在上方。
   保留标签是有意的——把广告标明白是规矩，也避免玩家误以为是游戏内容。 */
.ad-slot.is-filled {
  background: none; border: 0; padding: 0;
  grid-template-rows: auto 1fr; gap: 3px;
}
.ad-slot.is-filled::before { font-size: 9.5px; opacity: .45; letter-spacing: .8px; }
.ad-slot.is-filled iframe { display: block; border: 0; }
/* 上下都用 48，跟全站节奏一致。原来上 24 下 48（下方 sheet 的 margin），
   看着就是不对称。 */
.ad-under { width: 100%; max-width: 900px; height: 120px; margin: 48px auto 0; }
/* 两个宽槽都按横幅（728x90）留高度：槽高 250 时选尺寸的逻辑会挑中
   300x250（面积更大），结果是一个方块悬在 970 宽的槽里两边空一片。
   方块留给文章正文中段——在文字栏里嵌 300x250 是标准做法，也更值钱。 */
.ad-inline { width: 100%; max-width: 970px; height: 120px; margin: 48px auto; }
/* 文章正文中段：它已经在 .body（68ch）里了，直接撑满即可。
   不要在这里写 max-width:68ch —— ch 按本元素 12px 字号算，只有正文的七成宽。 */
.ad-post { width: 100%; height: 270px; margin: 30px 0; }   /* 容得下 300x250 + 标签 */

/* ── 内容区 ─────────────────────────────────────────── */
.sheet {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 34px clamp(20px, 4vw, 46px);
  margin: 48px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.sheet h2 {
  font-size: clamp(22px, 3vw, 29px);
  margin: 0 0 6px; color: var(--ink);
}
.sheet h2 + .sub { margin: 0 0 20px; color: var(--ink-soft); }
.sheet h3 { font-size: 19px; margin: 26px 0 6px; }
.sheet p, .sheet li { color: #3a2a1c; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.steps li {
  background: #fff8e8; border: 2px solid var(--cream-dim);
  border-radius: 10px; padding: 16px 18px;
}
.steps b { display: block; font-size: 15px; color: var(--wood-dark); margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-size: 15.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cream-dim); }
th { background: #fff8e8; color: var(--ink-soft); font-size: 13.5px; text-transform: uppercase; letter-spacing: .6px; }
td.lv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chain { color: #3a2a1c; }
.chain i { font-style: normal; color: #9a8a74; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { background: #fff8e8; border: 2px solid var(--cream-dim); border-radius: 10px; padding: 14px; text-align: center; }
.facts b { display: block; font-family: "PixelUI", var(--sans); font-size: 26px; color: var(--wood-dark); }
.facts span { font-size: 13.5px; color: var(--ink-soft); }

/* 剧透折叠 */
details.spoiler {
  margin: 18px 0 0; border: 2px solid var(--cream-dim); border-radius: 10px; background: #fff8e8;
}
details.spoiler summary {
  cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--wood-dark);
  list-style: none;
}
details.spoiler summary::-webkit-details-marker { display: none; }
details.spoiler summary::before { content: "▸ "; }
details.spoiler[open] summary::before { content: "▾ "; }
details.spoiler .body { padding: 0 18px 18px; }
.order-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.order-chips li {
  font-family: "PixelUI", var(--sans); font-size: 14px;
  background: var(--wood); color: #2a1c12; border-bottom: 3px solid var(--wood-dark);
  padding: 7px 13px; border-radius: 7px;
}

.faq dt { font-weight: 700; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: #3a2a1c; }

/* footer 顶部不再自己垫空：上一块的 48px 外边距就是它跟内容的距离，全页一个刻度 */
.site-foot { color: #9fc0de; font-size: 14px; padding: 0 0 56px; text-align: center; }
.site-foot p { margin: 0 0 10px; }
.site-foot a { color: #cfe2f5; }
.foot-links a { margin: 0 10px; }

/* ── 博客 ───────────────────────────────────────────────
   /blog/ 列表 + /blog/<slug>/ 文章页。一篇文章一个 URL，
   这是 SEO 的入口；正文宽度单独收到 68ch，不跟着 .sheet 的 1240 走。 */
.page-head { padding: 28px 0 0; text-align: center; }
.page-head h1 { font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 10px; }
.page-head .sub { margin: 0 auto; max-width: 620px; color: #cfe2f5; }

.crumbs { font-size: 13.5px; color: #9fc0de; padding: 20px 0 0; }
.crumbs a { color: #cfe2f5; }
.crumbs span { color: #7fa3c4; margin: 0 6px; }

.post-grid {
  display: grid; gap: 22px; margin: 28px 0 48px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* 首页底部的博客导流块（深色底，跟上面几块奶油板拉开）
   注意不要自己加 padding-top：上一块 .sheet 的 48px margin 已经是间距，
   padding 不跟 margin 合并，加了就变成 96px。 */
.blog-teaser { padding: 0; }
.blog-teaser h2 { font-size: clamp(22px, 3vw, 29px); color: var(--cream); margin: 0 0 6px; }
.blog-teaser p { margin: 0; max-width: 640px; color: #cfe2f5; }
.post-card {
  background: var(--cream); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
}
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sea); }
.post-card .card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
/* flex 容器里 inline-block 会被拉满一行，标签得自己收住 */
.post-card .card-body .tag { align-self: flex-start; }
.post-card h2 { font-size: 19px; line-height: 1.35; margin: 8px 0 6px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--wood-dark); }
.post-card p { margin: 0 0 14px; font-size: 15px; color: #4a3626; }
.post-card .meta { margin-top: auto; }

.tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  background: var(--wood); color: #2a1c12;
  padding: 3px 9px; border-radius: 5px;
}
.meta { font-size: 13px; color: #7d6448; }
.meta time { font-variant-numeric: tabular-nums; }

/* 文章页收成一条可读的居中栏：正文本来就只有 68ch，
   让奶油板铺满 1240 的话右边会空掉两百多像素，文字全挤在左边。
   820 = 68ch 正文 + 左右各 46 的内边距。列表页（.post-card）不受影响。 */
.sheet.post { max-width: 820px; margin-inline: auto; }
.post ~ .ad-inline { max-width: 820px; }

/* 文章正文 */
/* 全局 h1 是给深色首屏写的（奶油字 + 投影），文章标题在奶油板上必须整套覆盖掉 */
.post .post-title {
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.22; margin: 0 0 10px;
  color: var(--ink); text-shadow: none; text-align: left;
}
.post > .meta { margin: 0 0 22px; }
.post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin: 0 0 26px; }
.post .body { max-width: 68ch; }
.post .body > p:first-of-type { font-size: 18px; color: #35261a; }
.post .body h2 { font-size: 22px; margin: 30px 0 8px; }
.post .body h3 { font-size: 18px; margin: 24px 0 6px; }
.post .body ul, .post .body ol { padding-left: 22px; }
.post .body li { margin: 6px 0; }
.post .body blockquote {
  margin: 20px 0; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--cream-dim); color: #4a3626; font-style: italic;
}

/* 文章里回游戏的转化位 */
.play-cta {
  margin: 34px 0 0; padding: 22px 24px;
  background: #fff8e8; border: 2px solid var(--cream-dim); border-radius: 10px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.play-cta p { margin: 0; flex: 1; min-width: 220px; }
.play-cta b { display: block; font-size: 17px; margin-bottom: 2px; }
.play-cta .btn {
  font-family: "PixelUI", var(--sans); font-size: 16px;
  background: var(--gold); color: var(--ink); text-decoration: none;
  padding: 11px 24px; border-radius: 8px; border-bottom: 4px solid #b98a24;
  white-space: nowrap;
}
.play-cta .btn:hover { filter: brightness(1.06); }
.play-cta .btn:active { transform: translateY(2px); border-bottom-width: 2px; }

/* ── Cookie 同意条 ──────────────────────────────────────
   固定在底部，不挤压页面（所以不会造成 CLS），也不盖住游戏画面。 */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 34px);
  background: rgba(13, 34, 58, .97);
  border-top: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
  color: #d8e6f6; font-size: 14.5px; line-height: 1.5;
}
.consent p { margin: 0; flex: 1; min-width: 260px; }
.consent a { color: var(--gold); }
.consent-btns { display: flex; gap: 10px; margin-left: auto; }

.btn-solid, .btn-ghost {
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  padding: 9px 20px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.btn-solid { background: var(--gold); color: var(--ink); border: 0; border-bottom: 3px solid #b98a24; }
.btn-ghost { background: transparent; color: #cfe2f5; border: 1px solid rgba(255,255,255,.35); }
.btn-solid:hover { filter: brightness(1.06); }
.btn-ghost:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-solid:active { transform: translateY(2px); border-bottom-width: 1px; }

/* ── 窄屏 ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ad-under { height: 100px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-nav { display: none; }
  .sheet { padding: 24px 18px; margin: 32px 0; }
  .ad-inline { margin: 32px auto; }
  /* 手机上正文栏只有 299 宽，比 300x250 差 1px 就什么都渲染不出来。
     向两侧借内容板自己的 18px 内边距补足，不会溢出页面。 */
  .ad-post { width: calc(100% + 18px); margin-inline: -9px; }
  .post-grid { gap: 18px; }
}