/* AFTERTONE — 最小可运行场景视图
   画布填满窗口，不锁定宽高比：投影以「每世界单位占多少像素」为准（见 app.js），
   窗口左右变窄只会裁掉两侧，上下变矮只会裁掉上下，终端本身的大小不变。 */

/* 日期标签用的两套字体，随项目一起发布，不依赖访问者机器上装了什么。
   字体文件合计约 36 KB；缺了它们，日期图集会回退到系统字体，不同平台排版就变了。 */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #05070a;
  --ink: #c8d2ce;
  --ink-dim: #6d7a75;
  --line: #1b2422;
  --signal: #6fd6a8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  overflow: hidden;
  overscroll-behavior: none;
}

#stage {
  position: fixed;
  inset: 0;
}

/* 铺满窗口，不做 letterbox */
#frame {
  position: absolute;
  inset: 0;
  background: #04060a;
  overflow: hidden;
}

#viewport {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

/* CRT owns the visible legal row; these native links retain Tab / Enter / assistive access.
   Focus is shown on the matching CRT text by the entry renderer. */
.entry-legal-links {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 启动黑幕（CRT 开机）----------

   启动画面**不在 DOM 里**：它由 `src/boot-stage.js` 用与真实主屏同一个 CRT shader
   在屏幕空间渲染（同一块画布、同一段 GLSL、同一个投影矩形），装配完成时直接把这块
   画布转交给真实屏幕 —— 所以交接处逐像素同源。

   这一层只做一件事：盖住 WebGL 还没画出第一帧的那几十毫秒。第一帧出来之后立刻移除，
   而且**不做长溶解** —— 黑幕底下与画面底色都是黑的，切换本来就看不见；反倒是慢溶解
   会让两层质感同时可见，把割裂感放大（曾经是 300 ms）。 */

.boot {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: #04060a;
  transition: opacity 80ms linear, visibility 80ms linear;
}

.boot[data-state="done"] {
  opacity: 0;
  visibility: hidden;
}

/* 模块脚本没能跑起来时的说明（正常流程下始终隐藏） */
.boot__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  margin: 0 auto;
  width: min(76%, 560px);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #8c4040;
  text-align: left;
}

.boot__note[hidden] { display: none; }

/* WebGL 不可用或模型加载失败时的替代说明 */
.fallback {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 8%;
  background: #060a0c;
  text-align: left;
}

.fallback[hidden] { display: none; }

.fallback__inner { width: min(78%, 560px); }

.fallback h1 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #e0b0a8;
}

.fallback p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .boot { transition: none; }
}