/* 纸片词汇机 — 模拟器样式（墨水屏灰度风格）
 * 灰度语言：ink100 #1a1a1a（默认文本）/ ink70（次要）/ ink30（划掉后）
 *           ink20 #c6c2b8（极淡文字）/ paper #f6f3ea（纸面）
 * 仅用于模拟器观感；真机 16 级灰度对应关系见规格书 §11。
 */
:root {
  --paper: #f6f3ea;
  --paper-deep: #efe9db;
  --ink100: #1a1a1a;
  --ink70: #5b5649;
  --ink50: #8a857a;
  --ink30: #b3ac9c;
  --ink20: #cfc9ba;
  --ink05: #e9e4d6;
  --bezel: #2b2b2e;
  --accent: #4a4a4a;
  --row-h: 46px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
/* ---------- 自动缩放（手机/小窗） ---------- */
#appRoot { transform-origin: top center; will-change: transform; }
body {
  background: #3a3a3f;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 12px 26px;
  min-height: 100vh;
}
.title { color: #d8d4c8; font-size: 13px; letter-spacing: 3px; margin-bottom: 12px; font-weight: 300; }

/* 设备外壳（模拟） */
.device {
  background: var(--bezel);
  border-radius: 26px;
  padding: 18px 18px 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* 墨水屏 */
.screen {
  width: 640px; height: 800px;
  background: var(--paper);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.screen::after { /* 细微纸纹 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 3px);
}

/* ---------- 纸片视图 ---------- */
#sheetView { position: absolute; inset: 0; opacity: 0; transition: opacity .18s ease; }
#sheetView.on { opacity: 1; }
#sheetView.fading { opacity: 0; transition: opacity .4s ease; }

#list {
  position: absolute; top: 30px; left: 30px; right: 30px; bottom: 46px;
}
.row {
  height: var(--row-h);
  display: flex; align-items: center;
  padding: 0 14px 0 34px;
  font-size: 17px;
  color: var(--ink100);
  white-space: nowrap; overflow: hidden;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}
.row .en { overflow: hidden; text-overflow: ellipsis; display: block; flex: 1 1 auto; min-width: 0; transition: color .15s ease; }
.row .ans { flex: 0 0 auto; margin-left: 10px; font-size: 12px; letter-spacing: .5px; color: var(--ink30); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.focused { background: rgba(0,0,0,.05); }
.row.done-struck .en { color: var(--ink30); text-decoration: line-through; text-decoration-color: var(--ink30); }
.row.done-kept .en { color: #000; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }

/* 光标（左侧细竖条 + 圆点） */
#cursor {
  position: absolute; left: 6px; width: 8px; height: 34px;
  transition: top .12s linear;
  pointer-events: none;
}
#cursor::before { content:""; position:absolute; left:0; top:8px; width:4px; height:18px; background:#000; border-radius:2px; }

/* 释义淡显小字（D1：停留≥800ms 才出现） */
#zhChip {
  position: absolute; right: 0;
  height: var(--row-h);
  display: flex; align-items: center;
  font-size: 12px; color: var(--ink70);
  max-width: 46%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
  z-index: 7;
  background: linear-gradient(90deg, rgba(246,243,234,0), var(--paper) 26%);
  padding-left: 18px;
}
#zhChip.show { opacity: 1; }

/* 划线动画：从左到右一条线扫过（150ms） */
#strikeLine {
  position: absolute; height: 2px; background: var(--ink30);
  left: 34px; width: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
#strikeLine.anim { opacity: 1; }
#cursor { z-index: 5; }

/* 留下：抖动两次 */
@keyframes rowshake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.shake { animation: rowshake .13s linear; }

/* 底部计数器 */
#counter {
  position: absolute; left: 30px; bottom: 16px;
  font-size: 12px; letter-spacing: 1px; color: var(--ink70);
}

/* ---------- 白屏待机 ---------- */
#sleepView {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: var(--paper);
  color: var(--ink50);
  font-size: 15px; letter-spacing: 2px;
  cursor: default;
}
#sleepView.on { display: flex; }

/* ---------- 帮助层 ---------- */
#helpView {
  position: absolute; inset: 0;
  display: none; flex-direction: column; justify-content: center;
  padding: 0 44px;
  background: var(--paper);
  font-size: 16px; color: var(--ink100);
  z-index: 20;
}
#helpView.on { display: flex; }
#helpView .help-title { font-size: 13px; letter-spacing: 4px; color: var(--ink50); margin-bottom: 18px; }
#helpView .help-row { margin: 7px 0; }
#helpView .help-row b { font-weight: 700; }
#helpView .faint { color: var(--ink50); margin-top: 22px; font-size: 13px; letter-spacing: 2px; }

/* ---------- 屏幕下方：模拟器控制台（非产品部分） ---------- */
.console {
  margin-top: 14px; width: 676px;
  color: #cfcabc; font-size: 12.5px; line-height: 1.7;
}
.console .keys b { color: #fff; font-weight: 600; }
.console .keys { background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: 8px; }
.console .tools { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.console button {
  background: rgba(255,255,255,.09); color: #efece2; border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.console button:hover { background: rgba(255,255,255,.18); }
#debugPanel { margin-top: 8px; display: none; }
#debugPanel.on { display: block; }
#debugPanel pre {
  background: rgba(0,0,0,.35); color: #b9f0c0; font-size: 11.5px;
  padding: 10px 12px; border-radius: 8px; max-height: 260px; overflow: auto;
  white-space: pre-wrap;
}
#toast {
  margin-top: 8px; min-height: 18px; color: #9fd3a8; font-size: 12px;
}
.foot-note { margin-top: 10px; color: #9c978a; font-size: 11.5px; }