/* aiin.fyi —— 与 video/ 两支成片同一套视觉语言:
   暗底 + 星点 + 衬线标题 + 等宽小字。无外部字体(国内可达性 + 速度)。 */

:root {
  --bg: #08090b;
  --ink: #e9e5db;
  --dim: #9a968c;
  --line: rgba(240, 236, 228, 0.14);
  --panel-bg: rgba(13, 15, 19, 0.92);
  --serif: "Iowan Old Style", "Songti SC", "Noto Serif SC", Palatino, Georgia, serif;
  --mono: "SF Mono", Menlo, Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 舞台 ── */
#stage {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 44%, #14161b 0%, #08090b 62%);
}
#stars, #gl { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 读内容的时候魔方整个让开,它收进标题栏那颗立方体按钮里,点它回来。
   淡入(关面板)跟面板滑出同速,回来得利索;淡出(开面板)稍慢并带一点延迟,
   能看见魔方转向刚点的那一面再隐去。 */
#gl { touch-action: none; cursor: grab; transition: opacity 0.42s ease; }
body.panel-open #gl { opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.05s; }
#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 48%, rgba(0,0,0,0.62) 100%);
}

/* ── 顶部品牌 ── */
.brand {
  position: fixed; z-index: 10;
  top: calc(20px + env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  pointer-events: none;
}
.brand b { font: 600 21px/1 var(--serif); letter-spacing: 0.30em; }
/* 字距会在最后一个字母后面也留一份,居中时整组因此右偏半格——负 margin 把它吃掉 */
.brand span {
  font: 500 10px/1 var(--mono); color: var(--dim);
  letter-spacing: 0.34em; margin-right: -0.34em;
}

/* ── 底部提示 ── */
#introhint {
  position: fixed; z-index: 10; left: 0; right: 0;
  bottom: calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  font: 500 10px var(--mono); color: var(--dim); letter-spacing: 0.26em;
  opacity: 0; animation: hintin 1s 1.2s forwards;
  pointer-events: none;
}
@keyframes hintin { to { opacity: 0.6; } }
body.ready #introhint { display: none; }

/* ── 面板 ── */
#backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(5, 6, 9, 0.35);
  opacity: 0; transition: opacity 0.35s;
}
#backdrop.open { opacity: 1; }

/* 读的时候就整屏读 —— 半屏内容配半屏魔方,两件事都做不好。
   不透明底(而不是半透明 + blur):全屏尺寸下 backdrop-filter 要为下面每帧的星点重算模糊,
   贵且没人看得见;JS 那边也因此可以把星点和魔方一起停掉。 */
#panel {
  position: fixed; z-index: 30;
  inset: 0;
  display: flex; flex-direction: column;
  background: #0a0c0f;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.24, 1);
}
#panel.open { transform: none; }
@media (min-width: 820px) { #panel { transform: translateX(100%); } }

/* 标题栏与正文限同一条宽度、居中对齐:(W-564)/2 + 22 == (W-520)/2,两者左边缘严丝合缝 */
.panel-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 564px; margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top)) 22px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.chip { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.panel-head h2 { margin: 0; font: 600 19px/1 var(--serif); letter-spacing: 0.16em; }
.panel-en { font: 500 9px/1 var(--mono); color: var(--dim); letter-spacing: 0.30em; margin-top: 2px; }
.panel-close {
  margin-left: auto; padding: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--dim); cursor: pointer;
  transition: color 0.2s;
}
.panel-close svg { transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.24, 1); }
.panel-close:hover { color: var(--ink); }
/* 转一下——图标画的是那只可以拖着转的魔方 */
.panel-close:hover svg { transform: rotate(-32deg); }
/* 三个面上色,描边用魔方本体那个黑(见 app.js 的 bodyMat)——图标的缝就是真格子之间的缝。
   别让描边跟着 currentColor 走:hover 时它会变成近白,和顶面的白糊成一片,形状就散了。
   默认压着透明度,免得一个关闭按钮比标题还抢眼;hover 才给足。 */
.panel-close svg path { fill-opacity: 0.72; transition: fill-opacity 0.25s; }
.panel-close svg path:nth-of-type(1) { fill: #f0ede5; }   /* 顶 白 */
.panel-close svg path:nth-of-type(2) { fill: #cf4436; }   /* 左 红 */
.panel-close svg path:nth-of-type(3) { fill: #3a78c4; }   /* 右 蓝 */
.panel-close:hover svg path { fill-opacity: 1; }

.panel-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 22px calc(56px + env(safe-area-inset-bottom));
}
/* 面板宽了,但正文行长要压住:一行 30 出头个汉字,再宽读着就累 */
.page { display: none; max-width: 520px; margin: 0 auto; }
#panel[data-page="story"]    #page-story    { display: block; }
#panel[data-page="codex"]    #page-codex    { display: block; }
#panel[data-page="films"]    #page-films    { display: block; }
#panel[data-page="roles"]    #page-roles    { display: block; }
#panel[data-page="timeline"] #page-timeline { display: block; }
#panel[data-page="about"]    #page-about    { display: block; }

/* ── 内容排版 ── */
.page p { margin: 0 0 16px; font: 400 15px/1.95 var(--serif); color: var(--ink); }
.page h3 {
  margin: 28px 0 14px;
  font: 500 10px/1 var(--mono); color: var(--dim); letter-spacing: 0.28em;
}

.epigraph {
  margin: 4px 0 22px; padding: 2px 0 2px 16px;
  border-left: 2px solid var(--acc, var(--dim));
  font: 400 15px/1.9 var(--serif);
}
.epigraph cite { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--dim); }

.books { list-style: none; margin: 0 0 20px; padding: 0; }
.books li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.books .num { font: 500 10px var(--mono); color: var(--dim); letter-spacing: 0.1em; }
.books b { font-weight: 600; letter-spacing: 0.12em; }
.books .st { margin-left: auto; font: 500 10px var(--mono); color: var(--dim); letter-spacing: 0.18em; }

.placeholder {
  margin: 24px 0 0; padding: 14px;
  border: 1px dashed var(--line); border-radius: 10px;
  text-align: center;
  font: 500 11px var(--mono) !important; color: var(--dim) !important;
  letter-spacing: 0.22em;
}

.linkcard {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none;
  font: 500 13px var(--mono); letter-spacing: 0.06em;
  transition: border-color 0.25s, background 0.25s;
}
.linkcard svg { margin-left: auto; color: var(--dim); }
.linkcard:hover { border-color: var(--acc, var(--dim)); background: rgba(240, 236, 228, 0.04); }

.film { margin: 0 0 26px; }
.film video {
  display: block; width: 100%; max-width: 300px; margin: 0 auto;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 1px solid var(--line); border-radius: 12px;
}
.film figcaption { max-width: 300px; margin: 12px auto 0; }
.film h3 { margin: 0 0 8px; font: 600 15px/1 var(--serif); color: var(--ink); letter-spacing: 0.14em; }
.film h3 span { font: 500 10px var(--mono); color: var(--dim); margin-left: 8px; }
.film figcaption p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dim); }

.role { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.role h3 { margin: 0 0 8px; font: 600 16px/1 var(--serif); color: var(--ink); letter-spacing: 0.14em; }
.role h3 .en { font: 500 9px var(--mono); color: var(--dim); letter-spacing: 0.3em; margin-left: 10px; }
.role p { margin: 0; font-size: 14px; color: var(--ink); }
.role.redacted h3, .role.redacted p { color: var(--dim); opacity: 0.75; }
.role.redacted p { font: 500 11px var(--mono); letter-spacing: 0.2em; }

.stages { width: 100%; border-collapse: collapse; margin: 4px 0 16px; }
.stages th {
  text-align: left; padding: 8px 10px 10px 2px;
  font: 500 9px var(--mono); color: var(--dim); letter-spacing: 0.24em;
  border-bottom: 1px solid var(--line);
}
.stages td {
  padding: 13px 10px 13px 2px; font-size: 13.5px; line-height: 1.6;
  border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.stages td:first-child { font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
.stages .sealed td { color: var(--dim); }
.stages .sealed td:not(:first-child) { font: 500 11px var(--mono); letter-spacing: 0.2em; }

.fineprint { font: 500 10px var(--mono) !important; color: var(--dim) !important; letter-spacing: 0.18em; }

/* ── 杂项 ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript {
  position: fixed; inset: auto 16px 16px; z-index: 40;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-bg); font: 400 13px/1.8 var(--serif);
}
.noscript a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #panel, #backdrop, .gh, .panel-close, .panel-close svg, #gl, .linkcard { transition: none; }
  .panel-close:hover svg { transform: none; }
  #introhint { animation: none; }
}