/* ==========================================================================
   Typewriter — BYOK 电纸书写作器（拟物）
   几何单位统一用 cqw：1cqw = 机身宽度的 1%（机身 100cqw × 62.5cqw = 8:5）
   ========================================================================== */

@font-face {
  font-family: 'Fusion Pixel 12';
  src: url('assets/fonts/fusion-pixel-12px-zh-hans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* 屏幕初始是空的，用 block 避免回退字体先渲染再跳变 */
  font-display: block;
}

:root {
  /* 点阵字体：拉丁最大半宽 8px、CJK 全宽 12px，全是整数 */
  --pixel: 'Fusion Pixel 12', 'Zpix', 'SimSun', ui-monospace, monospace;
  --ui: system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* 未开背光：室内光下的电纸屏（灰绿） */
  --ink-off: #14170f;

  /* 开背光：暖琥珀前光下的纸面 */
  --ink-on: #4a3418;

  /* 屏上状态提示条（复制/粘贴/清空的回执） */
  --toast-bg: #ecdfb4;
  --toast-ink: #4a3418;
  --toast-ms: 260ms;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --lamp-ms: 540ms;

  /* 屏上文字：字号必须是字体设计尺寸 12px 的整数倍，否则像素格会碎。
     这几项由 JS 按屏幕实测尺寸重算，这里只是无 JS 时的兜底值。 */
  --screen-font: 24px;
  --screen-leading: 36px;
  --text-x: 6.5%;
  --text-top: 6%;
  --text-h: 88%;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #120906;
}

body {
  font-family: var(--ui);
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 桌面 ───────────────────────────────────────────────────────────── */

.desk {
  position: fixed;
  inset: 0;
  background: url('assets/wood.jpg?v=2') center / cover no-repeat;
  /* 转过之后矩形角会往内收，倍数不够就会在左上、右下露出底色。
     实际倍数由 JS 按窗口长宽比算出来写进 --desk-scale，这里只是兜底值。 */
  transform: rotate(-7deg) scale(var(--desk-scale, 1.45));
  transform-origin: 50% 50%;
}

/* 桌面灯光：上方暖光池 + 四周暗角 + 整体压暗（背光暖雾在 .stage::before） */
.desk::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(86% 66% at 50% 26%, rgba(255, 200, 132, .28), rgba(255, 198, 126, 0) 64%),
    radial-gradient(140% 116% at 50% 38%, rgba(0, 0, 0, 0) 30%, rgba(8, 2, 0, .66) 100%),
    linear-gradient(rgba(30, 9, 2, .24), rgba(30, 9, 2, .24));
}

.desk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── 舞台 ───────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

/* 背光点亮 → 设备周围浮起一层暖雾 */
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 48% at 50% 50%, rgba(255, 188, 112, .17), rgba(255, 176, 96, 0) 74%),
    radial-gradient(120% 96% at 50% 50%, rgba(255, 172, 92, .07), rgba(255, 172, 92, 0) 84%);
  opacity: 1;
  transition: opacity var(--lamp-ms) var(--ease);
  pointer-events: none;
}
:root[data-lamp='off'] .stage::before { opacity: 0; }

.device {
  --w: min(84vw, 86vh, 920px);
  width: var(--w);
  aspect-ratio: 8 / 5;
  container-type: size;
  position: relative;
}

/* 屏幕背光外溢的光晕 */
.halo {
  position: absolute;
  inset: -24cqw -22cqw;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 200, 134, .34), rgba(255, 178, 98, .13) 46%, rgba(255, 162, 82, 0) 72%);
  opacity: 1;
  transition: opacity var(--lamp-ms) var(--ease);
  pointer-events: none;
}
/* 默认是开灯；只有明确存了关灯才切换，首帧不会闪 */
:root[data-lamp='off'] .halo { opacity: 0; }

/* ── 机身 ───────────────────────────────────────────────────────────── */

.body {
  position: absolute;
  inset: 0;
  border-radius: 4.2cqw;
  background:
    linear-gradient(118deg, rgba(255, 238, 214, .06) 0%, rgba(255, 238, 214, .015) 36%, rgba(255, 238, 214, 0) 60%),
    linear-gradient(0deg, rgba(255, 176, 116, .035) 0%, rgba(255, 176, 116, 0) 14%),
    linear-gradient(180deg, rgba(255, 230, 200, .13) 0%, rgba(255, 230, 200, .025) 11%, rgba(255, 230, 200, 0) 30%),
    linear-gradient(177deg, #2b2c2b 0%, #242525 30%, #1a1b1a 64%, #111212 100%);
  box-shadow:
    0 .3cqw .45cqw rgba(14, 5, 0, .60),
    0 1.7cqw 2.4cqw rgba(14, 5, 0, .55),
    0 4.2cqw 6cqw rgba(12, 4, 0, .46),
    0 8.5cqw 13cqw rgba(10, 3, 0, .34);
}

/* 机身倒角：左上受光、右下背光的一圈细边 */
.body::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .16cqw;
  background: linear-gradient(152deg,
    rgba(255, 234, 205, .26) 0%,
    rgba(255, 234, 205, .07) 16%,
    rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, .42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* 哑光塑料的颗粒 */
.body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise);
  background-size: 17cqw 17cqw;
  opacity: .055;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}

/* ── 屏幕凹槽 ───────────────────────────────────────────────────────── */

.well {
  position: absolute;
  inset: 5.0cqw 11.0cqw 7.8cqw 5.4cqw;
  border-radius: 1.6cqw;
  background: #050607;
  box-shadow:
    inset 0 .6cqw 1cqw rgba(0, 0, 0, .96),
    inset 0 .1cqw .18cqw rgba(0, 0, 0, 1),
    inset 0 -.08cqw .12cqw rgba(120, 130, 145, .10),
    0 .1cqw 0 rgba(255, 240, 220, .10);
}

/* 背光对屏框的溢光 */
.bleed {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 1.5cqw .18cqw rgba(255, 187, 112, .34);
  opacity: 1;
  transition: opacity var(--lamp-ms) var(--ease);
  pointer-events: none;
}
:root[data-lamp='off'] .bleed { opacity: 0; }

/* ── 屏幕面板 ───────────────────────────────────────────────────────── */

.panel {
  position: absolute;
  inset: .5cqw;
  border-radius: 1.15cqw;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 -.07cqw .13cqw rgba(255, 246, 228, .22);
}

.paper {
  position: absolute;
  inset: 0;
  transition: opacity var(--lamp-ms) var(--ease);
}

/* 关灯：室内光下的电纸屏，冷灰绿，边缘更沉 */
.paper.unlit {
  opacity: 0;
  background:
    radial-gradient(120% 86% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 58%),
    radial-gradient(66% 70% at 50% 46%, #7f8573 12%, #7a8070 54%, #747a6a 100%);
}

/* 开灯：暖琥珀前光，纸面透亮、边角收暗 */
.paper.lit {
  opacity: 1;
  background:
    radial-gradient(74% 58% at 50% 10%, rgba(255, 250, 226, .30), rgba(255, 250, 226, 0) 72%),
    radial-gradient(76% 70% at 50% 44%, #e9dcae 8%, #e0cd99 52%, #c9ad74 82%, #b3935c 100%);
}
:root[data-lamp='off'] .paper.lit { opacity: 0; }
:root[data-lamp='off'] .paper.unlit { opacity: 1; }

/* 电纸屏的表面颗粒（尺寸绑定机身宽度，小屏不放大颗粒） */
.grain {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 17cqw 17cqw;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 极轻的环境反光，避免屏幕死平 */
.sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(107deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .03) 47%,
    rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

/* ── 屏幕上的字 ─────────────────────────────────────────────────────── */

.ink {
  position: absolute;
  left: var(--text-x);
  right: var(--text-x);
  top: var(--text-top);
  height: var(--text-h);
  overflow: hidden;
  font-family: var(--pixel);
  font-size: var(--screen-font);
  line-height: var(--screen-leading);
  font-weight: 400;
  color: var(--ink-on);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transition: color var(--lamp-ms) var(--ease);
  -webkit-font-smoothing: antialiased;
}
:root[data-lamp='off'] .ink { color: var(--ink-off); }


.caret {
  color: inherit;
  animation: caret-blink 1.06s steps(1, end) infinite;
}
@keyframes caret-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 透明输入层：真正的输入、选区、IME 都在这里发生。
   盒子与排版必须与 .ink 完全一致，否则点屏幕定位光标会错位。 */
.pad {
  position: absolute;
  left: var(--text-x);
  right: var(--text-x);
  top: var(--text-top);
  height: var(--text-h);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-family: var(--pixel);
  font-size: var(--screen-font);
  line-height: var(--screen-leading);
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* 不给 I 形光标：那个形状是在承诺"能点、能选、能定位光标"，
     而这里三样都禁掉了。光标的承诺得跟机器的行为一致。 */
  cursor: default;
  overflow: hidden;
  /* 打字机只能往前写：禁止鼠标/触屏划选，也禁止长按弹出选择菜单 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 屏上状态提示条：从屏幕底边往上滑出来。纯呈现层，不挡点击。 */
.toast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--screen-font) var(--text-x) calc(var(--screen-font) * .75);
  font-family: var(--pixel);
  font-size: var(--screen-font);
  line-height: var(--screen-leading);
  background: var(--toast-bg);
  color: var(--toast-ink);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--toast-ms) var(--ease), transform var(--toast-ms) var(--ease);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: none;
}
:root[data-lamp='off'] .toast {
  --toast-bg: #7c8271;
  --toast-ink: #14170f;
}

.pad::selection { background: transparent; }
.pad::-moz-selection { background: transparent; }

/* ── 机身按键 ───────────────────────────────────────────────────────── */

.knob {
  position: absolute;
  right: 1.8cqw;
  width: 7.4cqw;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #2a2e34 0%, #1d2024 52%, #15171a 100%);
  --knob-shadow:
    0 0 0 .36cqw #0a0b0d,
    0 0 0 .5cqw rgba(255, 236, 208, .055),
    inset 0 .15cqw .1cqw rgba(255, 255, 255, .14),
    inset 0 -.22cqw .26cqw rgba(0, 0, 0, .72);
  box-shadow: var(--knob-shadow);
  transition: box-shadow 180ms var(--ease), filter 180ms var(--ease),
              transform 120ms var(--ease), opacity 180ms var(--ease);
  z-index: 2;
}

/* 放大的点击区域：物理按键小，但手指要够得着 */
.knob::after {
  content: '';
  position: absolute;
  inset: -.5cqw -.7cqw;
}

.knob:hover { filter: brightness(1.24); }
.knob:active {
  transform: translateY(.12cqw);
  box-shadow:
    0 0 0 .36cqw #0a0b0d,
    0 0 0 .5cqw rgba(255, 236, 208, .03),
    inset 0 .15cqw .14cqw rgba(0, 0, 0, .5),
    inset 0 -.06cqw .1cqw rgba(255, 255, 255, .05);
}
.knob:focus-visible {
  outline: .34cqw solid rgba(255, 190, 118, .75);
  outline-offset: .7cqw;
}

/* 背光键：右下角的圆形按键，与左侧两枚翻页键同一列（圆心对齐） */
.knob-lamp {
  right: 3.6cqw;
  bottom: 2.6cqw;
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 50%;
}
.knob-lamp::after { inset: -.7cqw; }   /* 圆形键四周等量放大点击区 */

.knob-lamp .led {
  width: .72cqw;
  height: .72cqw;
  margin: -.36cqw 0 0 -.36cqw;
}

/* 右侧竖排一格六键：清除 / 复制 / 粘贴 / 上滚 / 字号 / 下滚
   图标本身就是指示灯，用和背光键那盏 LED 同款的暖琥珀：
   灭 = 这个动作现在没得做（键身照旧，绝不发灰变禁用），亮 = 按下去有用。 */
.knob-nav {
  height: 4cqw;
  color: #4e555d;
}
.knob-nav.live { color: #ffc98a; }
/* 清除放在最顶：离常用的翻页、字号最远，减少误触 */
.knob-clear { top: 14.85cqw; }
.knob-copy { top: 20.05cqw; }
.knob-paste { top: 25.25cqw; }
.knob-up { top: 30.45cqw; }
.knob-zoom { top: 35.65cqw; }
.knob-down { top: 40.85cqw; }

.knob-nav svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.8cqw;
  height: 1.8cqw;
  margin: -.9cqw 0 0 -.9cqw;
  transition: color 180ms var(--ease), filter 180ms var(--ease);
}

/* 亮起来的图标自己带一圈同色淡光，跟背光键那盏 LED 一样是"发光"而不是"颜色浅"。
   光打在图标（svg）上而不是键身上——键身一圈始终不发光。 */
.knob-nav.live svg {
  filter: drop-shadow(0 0 .38cqw color-mix(in srgb, currentColor 50%, transparent));
}

/* 清除键"上膛"：只有垃圾桶图标在闪，暖琥珀一明一灭——键身周围一圈不发光 */
@keyframes knob-arm {
  0%, 100% { color: #4e555d; }
  50% { color: #ffc98a; }
}
.knob.armed { animation: knob-arm 640ms ease-in-out infinite; }
/* 呼吸期间关掉图标滤镜的过渡，否则光圈颜色会比图标慢半拍 */
.knob.armed svg { transition: none; }

/* 复制/粘贴执行成功时的一次短促提亮 */
@keyframes knob-ack {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(2.1); }
}
.knob.ack { animation: knob-ack 420ms var(--ease); }

/* 背光键上的指示灯：亮=背光开 */
.led {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .62cqw;
  height: .62cqw;
  margin: -.31cqw 0 0 -.31cqw;
  border-radius: 50%;
  background: #ffc98a;
  box-shadow: 0 0 .9cqw rgba(255, 178, 96, .8), inset 0 0 .1cqw rgba(255, 255, 255, .6);
  transition: background var(--lamp-ms) var(--ease), box-shadow var(--lamp-ms) var(--ease);
}
:root[data-lamp='off'] .led {
  background: #3a2a18;
  box-shadow: inset 0 0 .12cqw rgba(0, 0, 0, .8);
}

/* ── 压印字标 ───────────────────────────────────────────────────────── */

.wordmark {
  position: absolute;
  left: 6.2cqw;
  bottom: 2.9cqw;
  font-family: var(--ui);
  font-size: 2.9cqw;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  color: #24282c;
  text-shadow:
    0 .09cqw .02cqw rgba(255, 240, 216, .07),
    0 -.08cqw .1cqw rgba(0, 0, 0, .85);
  pointer-events: none;
  z-index: 2;
}

.wordmark .reg {
  font-size: .64em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: .62em;
  margin-left: .16em;
}

/* ── 自适应 ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .device { --w: min(94vw, 100vh, 920px); }
}

/* 横屏手机等极矮视口：让机身尽量占满可用高度 */
@media (max-height: 440px) {
  .device { --w: min(94vw, 92vh, 920px); }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: 1; }
  :root { --lamp-ms: 1ms; }
  .knob, .knob:active { transition: none; transform: none; }
}