/* 小格 · Xiaoge —— 皮肤文件：颜色、字体、排版、动画都在这里。
   想换颜色：改最上面「配色」里的变量就行，全站会跟着变。 */

/* ========== 1. 配色和字体 ========== */
@font-face {
  font-family: "Xiaoge Pixel";
  src: url("../fonts/xiaoge-pixel.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg-0: #0b0e22;      /* 最深的夜色，页面底色 */
  --bg-1: #151a3a;      /* 稍亮一点的夜色，卡片底色 */
  --ink: #f3efe2;       /* 正文文字 */
  --ink-dim: #a9a7c2;   /* 次要文字 */
  --xg: #ffc93c;        /* 小格黄 */
  --xg-hi: #ffe58f;
  --xg-shade: #e39a22;
  --line: #2a190b;      /* 小格的深棕色轮廓 */
  --pink: #ff8fb8;      /* 头顶花的粉色 */
  --pink-dark: #d6568a;
  --paper: #fff7dc;     /* 对话气泡的暖白 */

  /* 像素字体只在 12 的整数倍字号下最清晰：12 / 24 / 36 / 48 */
  --font-pixel: "Xiaoge Pixel", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --p: 4px;             /* 一个「像素」的边长，边框台阶都用它 */
  --topbar-h: 68px;     /* 顶栏高度（含进度条那一行） */
}

/* ========== 2. 基础 ========== */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg-0);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

img, canvas, svg { display: block; }

/* 键盘用户按 Tab 时，当前位置要看得见 */
:focus-visible {
  outline: var(--p) solid var(--xg);
  outline-offset: 2px;
}

/* 只给读屏软件看、屏幕上不显示的内容 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 8px; top: -100px; z-index: 100;
  padding: 8px 12px; background: var(--xg); color: var(--line);
  font: 12px/1.5 var(--font-pixel); text-decoration: none;
}
.skip-link:focus { top: 8px; }

.noscript { padding: 24px; text-align: center; color: var(--ink); }

/* ========== 3. 顶栏和「视频进度条」 ========== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color 0.2s;
}
.topbar.is-solid { background: rgba(11, 14, 34, 0.94); }

.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 8px 0 16px;
}

/* 站名平时藏着（首屏已有大标题），滚离首屏后才显示 */
.brand {
  display: inline-flex; align-items: center; min-height: 44px; /* 手机上手指点得准：至少 44 像素高 */
  font: 24px/1 var(--font-pixel); color: var(--xg); text-decoration: none;
  opacity: 0; transition: opacity 0.2s;
}
.topbar.is-solid .brand { opacity: 1; }

.topbar-tools { display: flex; align-items: center; gap: 4px; }

.icon-btn, .lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--ink);
}
.icon { width: 24px; height: 24px; }
.icon-btn[aria-pressed="false"] .icon-waves { display: none; }
.icon-btn[aria-pressed="true"] .icon-mute { display: none; }
.icon-btn:hover { color: var(--xg); }

.lang-toggle { gap: 0; padding: 0 4px; }
.lang-opt {
  padding: 6px 8px; font: 12px/1 var(--font-pixel);
  color: var(--ink-dim); background: rgba(243, 239, 226, 0.1);
}
.lang-opt.is-active { color: var(--line); background: var(--xg); }

/* 进度条那一行：小格站在这根细条上，往下滑他往右走 */
.progress-zone { position: relative; height: 24px; }
.progress-track {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--p);
  background: rgba(243, 239, 226, 0.22);
}
.progress-fill { width: 0; height: 100%; background: var(--xg); }
.playhead {
  position: absolute; left: 0; bottom: var(--p);
  width: 20px; height: 24px; pointer-events: none; will-change: transform;
}

/* 进度条尽头种下的花（彩蛋）：画在右端、小格站的位置的左边 */
.end-flower { position: absolute; right: 32px; bottom: var(--p); width: 20px; height: 16px; pointer-events: none; }

/* ========== 4. 首屏 ========== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  background: var(--bg-0);
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.danmaku { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }

/* 首屏上的文字内容。自己不拦截点击，这样点击能穿到下面的画布（戳小格） */
.hero-ui {
  position: relative; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; min-height: inherit;
  padding: calc(var(--topbar-h) + 20px) 20px 32px;
}
.hero-title {
  font: 36px/1.2 var(--font-pixel); color: var(--xg);
  text-shadow: var(--p) var(--p) 0 var(--line);
}
.hero-sub { margin-top: 8px; font: 12px/1.6 var(--font-pixel); color: var(--ink); opacity: 0.85; }

/* ---- 对话气泡：left / top 由脚本设置，让它贴着小格的头顶；--tail-x 是尾巴的位置 ---- */
.bubble {
  position: absolute; left: 0; top: 0;
  transform: translateY(-100%);
  display: grid; width: max-content; max-width: min(72vw, 340px);
  padding: 12px 16px;
  font: 24px/1.5 var(--font-pixel);
  background: var(--paper); color: var(--line);
  /* 四边各推出 1 个像素，做成带台阶角的像素边框 */
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line),
    0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line);
}
.bubble[hidden] { display: none; }
/* 隐形的整句话撑出最终大小，可见的那层一个字一个字地打出来 */
.bubble-ghost, .bubble-typed { grid-area: 1 / 1; overflow-wrap: anywhere; }
.bubble-ghost { visibility: hidden; }
/* 气泡的小尾巴，指向小格 */
.bubble::after {
  content: ""; position: absolute; left: var(--tail-x, 20px); bottom: calc(var(--p) * -3);
  width: calc(var(--p) * 2); height: calc(var(--p) * 2);
  background: var(--paper);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line), 0 var(--p) 0 0 var(--line),
    var(--p) calc(var(--p) * -1) 0 0 var(--paper);
}

/* ---- 「开始播放」按钮 ---- */
.cta {
  position: relative; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  margin: auto auto 0; padding: 12px 24px;
  font: 24px/1 var(--font-pixel);
  background: var(--xg); color: var(--line); border: 0;
  /* 像素边框 + 底部一条阴影，按下时压下去 */
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line),
    0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line),
    0 calc(var(--p) * 2) 0 0 var(--xg-shade);
}
.cta:hover { background: var(--xg-hi); }
.cta:active { transform: translateY(var(--p)); box-shadow: calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line), 0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line); }
.cta[hidden] { display: none; }
.cta-icon { width: 12px; height: 21px; }
.cta.is-ready { animation: cta-bob 1.2s steps(2, jump-none) infinite; }
@keyframes cta-bob { from { translate: 0 0; } to { translate: 0 calc(var(--p) * -1); } }

/* ---- 弹幕：从右向左滚过天空 ---- */
.dm {
  position: absolute; left: 0; white-space: nowrap;
  font: 24px/1 var(--font-pixel); color: rgba(243, 239, 226, 0.8);
  text-shadow: 2px 0 0 var(--bg-0), -2px 0 0 var(--bg-0), 0 2px 0 var(--bg-0), 0 -2px 0 var(--bg-0);
  animation: dm-fly var(--dur, 12s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes dm-fly { from { transform: translateX(100vw); } to { transform: translateX(-120%); } }

/* ========== 5. 作品屏和播放器 ========== */
:root {
  /* 手机框的尺寸：先定屏幕的高度（不超过视口高度的 74%、也不超过 720px），宽度按 9:16 算出来，再加上边框 */
  --phone-h: min(74vh, 720px);
  --phone-w: calc(var(--phone-h) * 0.5625 + 24px);
  /* 台阶式的四个角：像素风「圆角」。用法：clip-path: var(--stepped) */
  --stepped: polygon(
    8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px),
    4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px);
}

/* 手机浏览器的地址栏会伸缩，svh 是「地址栏收起时也够用」的视口高度；不支持的浏览器继续用上面的 vh */
@supports (height: 1svh) { :root { --phone-h: min(74svh, 720px); } }

.work {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--topbar-h) + 24px) 16px 56px;
}
#works .work:nth-child(even) { background: #0e1230; } /* 相邻两屏底色略有深浅，滑动时有节奏 */

.work-inner { width: min(100%, 960px); display: grid; gap: 20px; }

.work-head { display: grid; gap: 8px; }
.work-no { font: 12px/1 var(--font-pixel); color: var(--pink); letter-spacing: 0.1em; }
.work-title { font: 36px/1.2 var(--font-pixel); color: var(--xg); text-shadow: var(--p) var(--p) 0 var(--line); }
.work-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 8px; font: 12px/1 var(--font-pixel); color: var(--ink-dim); background: rgba(243, 239, 226, 0.1); }

.work-text { display: grid; gap: 16px; justify-items: start; }
.work-tagline { max-width: 36em; font-size: 17px; line-height: 1.7; }
.work-quote { margin: 0; }
.work-quote p {
  display: inline-block; padding: 10px 16px;
  font: 24px/1.5 var(--font-pixel);
  background: var(--paper); color: var(--line);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line),
    0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line);
}
/* 台词两边的引号，按页面语言加：中文用「」，英文用 “ ” */
html:lang(zh) .work-quote p::before { content: "「"; }
html:lang(zh) .work-quote p::after { content: "」"; }
html:lang(en) .work-quote p::before { content: "\201C"; }
html:lang(en) .work-quote p::after { content: "\201D"; }

/* ---- 播放器：封面 → 点击 → 视频 ---- */
.player { display: grid; justify-items: center; gap: 12px; }
.screen { width: 100%; padding: 8px; background: #1d2350; clip-path: var(--stepped); }
.player-stage { position: relative; width: 100%; overflow: hidden; background: #000; }
.player--landscape .player-stage { aspect-ratio: 16 / 9; }
.player--portrait .player-stage { aspect-ratio: 9 / 16; }
/* 手机框：宽度由「想要的高度」推出来，窄屏上最多撑满一行，不会溢出 */
.screen--phone { width: min(100%, var(--phone-w)); padding: 14px 12px; }

.player-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; }
.player-poster img { width: 100%; height: 100%; object-fit: cover; }
/* 封面底部压一层渐变，让按钮和时长在任何画面上都看得清；按钮放在左下角，不挡住画面中间的小格 */
.player-poster::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 36%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 28, 0.75), rgba(8, 10, 28, 0));
}
.player-time {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  padding: 6px 8px; font: 12px/1 var(--font-pixel); color: var(--ink); background: rgba(8, 10, 28, 0.85);
}
.player-play {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--xg); color: var(--line);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line),
    0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line),
    0 calc(var(--p) * 2) 0 0 var(--xg-shade);
  transition: transform 0.1s;
}
.player-play svg { width: 12px; height: 21px; }
.player-poster:hover .player-play, .player-poster:focus-visible .player-play { background: var(--xg-hi); transform: scale(1.1); }

.player-stage video, .player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.player-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 12px/1 var(--font-pixel); color: var(--ink-dim); }
.player-line { min-height: 44px; padding: 0 14px; border: 0; font: inherit; color: var(--ink-dim); background: rgba(243, 239, 226, 0.1); }
.player-line[aria-pressed="true"] { color: var(--line); background: var(--xg); }

.player-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; font-size: 14px; background: #3a1f2f; }
.player-error[hidden] { display: none; }
.player-retry { min-height: 44px; padding: 0 16px; border: 0; font: 12px/1 var(--font-pixel); background: var(--xg); color: var(--line); }

/* ========== 6. 认识小格、幕后、关于和联系、片尾 ========== */
:root { --edge: #2b3478; } /* 卡片边框的颜色 */

.info { padding: 96px 16px; }
.info-inner { width: min(100%, 1040px); margin: 0 auto; display: grid; gap: 32px; }
.info-title { font: 36px/1.2 var(--font-pixel); color: var(--xg); text-shadow: var(--p) var(--p) 0 var(--line); }
.info-lead { margin-top: -16px; font-size: 18px; color: var(--ink-dim); }
.info--behind { background: #0e1230; }

/* 卡片：像素边框的深色底板 */
.cards { display: grid; gap: 20px; }
.card {
  padding: 20px; background: var(--bg-1);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--edge), var(--p) 0 0 0 var(--edge),
    0 calc(var(--p) * -1) 0 0 var(--edge), 0 var(--p) 0 0 var(--edge);
}
.card-title { margin-bottom: 8px; font: 24px/1.3 var(--font-pixel); color: var(--pink); }
.card-text { line-height: 1.8; }

/* 认识小格、幕后：一块画布 + 几张卡片 */
.character-grid { display: grid; gap: 32px; align-items: center; }
.character-canvas, .reveal-canvas { width: min(100%, 320px); height: 340px; margin: 0 auto; }

/* 关于和联系 */
.about-grid { display: grid; gap: 40px; }
.about-body { margin-top: 20px; max-width: 34em; font-size: 18px; line-height: 1.9; }
.links { display: grid; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.link-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 20px; font: 24px/1 var(--font-pixel); text-decoration: none;
  background: var(--xg); color: var(--line);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--line), var(--p) 0 0 0 var(--line),
    0 calc(var(--p) * -1) 0 0 var(--line), 0 var(--p) 0 0 var(--line),
    0 calc(var(--p) * 2) 0 0 var(--xg-shade);
}
a.link-btn:hover { background: var(--xg-hi); }
.link-btn.is-soon {
  background: #242a52; color: var(--ink-dim);
  box-shadow:
    calc(var(--p) * -1) 0 0 0 var(--edge), var(--p) 0 0 0 var(--edge),
    0 calc(var(--p) * -1) 0 0 var(--edge), 0 var(--p) 0 0 var(--edge);
}
.link-soon { font: 12px/1 var(--font-pixel); }

/* 片尾：整屏的夜晚草地，两句话和按钮依次淡入 */
.info--end {
  position: relative; display: grid; justify-items: center; align-items: start;
  min-height: 100vh; min-height: 100svh; padding: 0; overflow: hidden; background: var(--bg-0);
}
.end-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.end-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; margin-top: 16vh; padding: 0 20px; text-align: center; }
.end-line {
  font: 36px/1.4 var(--font-pixel); color: var(--ink); text-shadow: var(--p) var(--p) 0 var(--bg-0);
  opacity: 0; transform: translateY(8px); transition: opacity 0.8s, transform 0.8s;
}
.end-line--2 { color: var(--xg); transition-delay: 1s; }
.end-btn { margin: 20px 0 0; opacity: 0; transition: opacity 0.8s 2s; }
.info--end.is-visible .end-line, .info--end.is-visible .end-btn { opacity: 1; transform: none; }

/* ========== 7. 页脚 ========== */
.site-footer {
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12px; color: var(--ink-dim);
}
.site-footer p + p { margin-top: 4px; }

/* ========== 8. 宽屏（电脑）：画面里的像素放大了，界面的字和边框也跟着放大，保持比例 ========== */
@media (min-width: 900px) {
  :root { --p: 6px; }
  .work-title { font-size: 48px; }
  .work-tagline { font-size: 20px; }
  .work-quote p { font-size: 36px; padding: 14px 24px; }
  .info-title { font-size: 48px; }
  .character-grid { grid-template-columns: 340px 1fr; gap: 56px; }
  .cards--row { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }
  .end-line { font-size: 48px; }
  /* 竖屏片：手机框在左，标题、简介和台词在右 */
  .work--portrait .work-inner {
    grid-template-columns: var(--phone-w) 1fr; grid-template-areas: "media head" "media text";
    column-gap: 64px; align-items: center;
  }
  .work--portrait .screen--phone { width: 100%; }
  .work--portrait .work-head { grid-area: head; align-self: end; }
  .work--portrait .work-media { grid-area: media; }
  .work--portrait .work-text { grid-area: text; align-self: start; }
  .hero-ui { padding-left: 40px; padding-right: 40px; }
  .hero-title { font-size: 48px; }
  .hero-sub { font-size: 24px; }
  .bubble { font-size: 36px; max-width: min(60vw, 560px); padding: 16px 24px; }
  .cta { font-size: 36px; padding: 16px 32px; }
  .cta-icon { width: 16px; height: 28px; }
}

/* ========== 9. 减少动画（系统设置，或网址带 ?reduced=1 调试时） ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .danmaku { display: none; }
}
html.reduced { scroll-behavior: auto; }
html.reduced *, html.reduced *::before, html.reduced *::after { animation: none !important; transition: none !important; }
html.reduced .danmaku { display: none; }