/* ============================================================
   admin.css —— 管理员验证触发流程（黑屏验证页）
   流程：LCD 故障动画(3~4s) → 骤然黑屏 → “管理员身份验证”浮现
         → 居中展开式输入框
   说明：仅服务于 admin.js 触发后的全屏黑层，不影响留言板原有功能
   ============================================================ */

/* 验证流程进行中：锁定页面滚动 */
.admin-locked { overflow: hidden; }

/* ---- 全屏黑层（默认隐藏；一旦显示完全盖住留言板页面） ---- */
.admin-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;          /* 高于留言板 lightbox(999) */
  background: #000;
  overflow: hidden;
}
/* display 相关属性覆盖 hidden 时必须显式隐藏（同 lightbox 的坑） */
.admin-screen[hidden] { display: none; }

/* ---- 第一阶段：Canvas 像素级故障动画层 ---- */
.admin-canvas {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* ---- 第二、三阶段：黑屏中央的验证文字与输入框 ---- */
.admin-verify {
  position: absolute;
  inset: 0;
  z-index: 2;              /* 位于 Canvas 故障层之上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;    /* 全屏容器点击穿透，避免拦截半钟数字点击 */
}
.admin-verify.is-showing { opacity: 1; }

/* ---- 验证页：纯黑背景 + 封面同款手电筒（mask 跟随鼠标） ---- */
.admin-page {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s ease;   /* 从纯黑中缓慢浮现（约 1.2s，各入口共用） */
  /* mask 的 alpha 即最终透明度：中心被手电筒照亮，边缘平滑淡出
     --mx / --my 由 JS 在鼠标移动时更新；默认居中让中央文字先可见 */
  -webkit-mask-image: radial-gradient(
    circle var(--mr, 36vmin) at var(--mx, 50%) var(--my, 50%),
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.9) 38%,
    rgba(0, 0, 0, 0.70) 58%,
    rgba(0, 0, 0, 0.45) 78%,
    rgba(0, 0, 0, 0.30) 100%
  );
  mask-image: radial-gradient(
    circle var(--mr, 36vmin) at var(--mx, 50%) var(--my, 50%),
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.9) 38%,
    rgba(0, 0, 0, 0.70) 58%,
    rgba(0, 0, 0, 0.45) 78%,
    rgba(0, 0, 0, 0.30) 100%
  );
}
.admin-screen.is-verify .admin-page { opacity: 1; }

/* ---- 左右半钟装饰（与封面背景钟同款，同样受手电筒影响） ---- */
.admin-clock {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 118vh;
  height: 118vh;
  pointer-events: none;
}
.admin-clock svg { width: 100%; height: 100%; display: block; }
/* 左钟 = 时钟右半（数字 1~6）：圆心贴屏幕左缘，切面与边缘完全对齐 */
.admin-clock-left  { left: 0; transform: translate(-50%, -50%); }
/* 右钟 = 时钟左半（数字 7~12）：圆心贴屏幕右缘，与左侧对称 */
.admin-clock-right { right: 0; transform: translate(50%, -50%); }
/* 可见数字可点击 */
.admin-clock .clock-num {
  pointer-events: auto;
  cursor: pointer;
}

/* ---- 数字点击黑屏过渡层 ---- */
.admin-blackout {
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.admin-blackout.on { opacity: 1; }
.admin-blackout[hidden] { display: none; }

/* ---- 文字与输入框所在区域（纯布局容器，无底色） ---- */
.admin-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding: 46px 56px;
}

.admin-verify-title {
  /* 衬线细体，保持古典锋利质感 */
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  color: #fff;
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-indent: 0.42em;     /* 抵消末字后多出的字距，保证视觉居中 */
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.25);
  opacity: 0;
  clip-path: inset(-30% 50% -30% 50%);   /* 初始：只露出中间 */
  transition: opacity 1.5s ease, clip-path 1.5s ease;
}
.admin-verify-title.is-visible {
  opacity: 1;
  clip-path: inset(-30% 0 -30% 0);       /* 从中间向两侧展开显示 */
}

/* ---- 输入框：光标居中、文字向两侧均匀展开 ---- */
.admin-input-wrap {
  position: relative;
  width: min(360px, 84vw);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s ease;
}
.admin-input-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.admin-password {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  pointer-events: auto;    /* 输入框仍需可点击/聚焦（父层已穿透） */
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  letter-spacing: 0.55em;
  text-indent: 0.55em;         /* 抵消首字符前字距，配合居中 */
  text-align: center;          /* 文字始终水平居中 → 逐字向两侧展开 */
  caret-color: transparent;    /* 隐藏原生光标，改用自绘居中光标 */
  padding: 12px 28px 10px;
  outline: none;
}
.admin-password::placeholder {
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.25em;
  text-indent: 0;
}
.admin-password:disabled { opacity: 0.6; }

/* 自绘居中闪烁光标：始终钉在输入框正中 */
.admin-caret {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1.35em;
  background: #fff;
  pointer-events: none;
  animation: admin-blink 1s steps(1, end) infinite;
}

/* 验证结果提示 */
.admin-result {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  opacity: 0;
  transition: opacity 0.4s ease;
  min-height: 1.2em;
}
.admin-result.is-visible { opacity: 1; }
.admin-result.ok  { color: #7dff7d; }
.admin-result.bad { color: #ff5050; }

/* 密钥错误时的轻微抖动 */
.admin-input-wrap.is-shake { animation: admin-shake 0.45s ease; }

/* 底部小提示 */
.admin-hint {
  position: absolute;
  bottom: 7vh;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.admin-hint.is-visible { opacity: 1; }

/* ============================================================
   关键帧
   ============================================================ */

/* 自绘光标闪烁 */
@keyframes admin-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 密钥错误抖动 */
@keyframes admin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ============================================================
   罗马数字Ⅱ 交互流程（管理员验证页 · js/roman2.js）
   原色对话框（姓名栏雪花马赛克 · 无人物 · 点击任意处关闭）
   选项按钮 / 输入界面 / 花屏 / 黑层
   ============================================================ */

/* ---- 全屏覆盖层（高于管理员验证层 admin-screen z-10000） ---- */
#roman2-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  background: rgba(0, 0, 0, 0.55);   /* 未进黑屏时（如冷却提示）作为暗化底 */
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#roman2-overlay.on { display: block; }
#roman2-overlay[hidden] { display: none; }

/* 黑层：黑屏过渡的渐入 / 渐出 */
.roman2-black {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ---- 重复访问互动界面背景图（与“家”页面氛围一致：占满屏幕 · 保持比例 · 逐渐浮现） ---- */
.roman2-home-bg {
  position: absolute;
  inset: 0;
  z-index: 2;                          /* 黑层(z1)之上、对话框(z3/4)之下 */
  background: none center / cover no-repeat;
  opacity: 0;
  pointer-events: none;                /* 不拦截任何点击 */
  transition: opacity 2.5s ease;       /* 与“家”页面背景图渐现节奏一致 */
}
.roman2-home-bg.show { opacity: 1; }

/* 花屏画布 */
.roman2-glitch {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ---- 原色对话框（姓名栏雪花 · 无人物 · 呼吸 · 居中） ---- */
.roman2-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: min(540px, 88vw);
  padding: clamp(22px, 3.2vw, 32px) clamp(18px, 2.6vw, 26px) clamp(24px, 3.4vw, 34px);
  background: rgba(22, 30, 40, 0.95);
  border: 3px solid #8ba6be;
  box-shadow: inset 0 0 0 3px #0c1118;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  animation: roman2-breathe 3.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.roman2-dialog.visible { opacity: 1; }
@keyframes roman2-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.02); }
}

/* 姓名栏：雪花马赛克 */
.roman2-name {
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 2;
  width: clamp(62px, 13vw, 90px);
  height: clamp(18px, 3.2vw, 24px);
  background: #000;
  border: 2px solid #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
  border-radius: 1px;
  overflow: hidden;
}
.roman2-name canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.roman2-text {
  margin: 0;
  padding: clamp(14px, 2.4vw, 20px) 6px 6px;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: #e8eef4;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 选项按钮（与整体风格一致） ---- */
.roman2-options {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.roman2-options.visible { display: flex; }

.roman2-option {
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #e8eef4;
  background: rgba(22, 30, 40, 0.85);
  border: 2px solid #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
  border-radius: 2px;
  padding: 12px 44px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.roman2-option:hover {
  background: rgba(52, 68, 86, 0.95);
  box-shadow: inset 0 0 0 2px #0c1118, 0 0 20px rgba(139, 166, 190, 0.35);
}
.roman2-option:active { transform: scale(0.97); }

/* ---- 输入界面：纯黑 · 无时钟 · 无任何文字 · 屏幕正中一条极简横线 + 确认按钮 ---- */
.roman2-input-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}
.roman2-input-screen.visible { display: flex; }
.roman2-input-screen.fading { opacity: 0; transition: opacity 1s ease; }

.roman2-input-wrap {
  position: relative;
  width: min(56vw, 720px);       /* 横线约占屏宽 50%~60% */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.roman2-input-wrap.shake { animation: roman2-shake 0.45s ease; }

/* 令牌输入框：一条极简横线（无边框 / 无背景 / 无装饰），文字从中间向两侧展开 */
.roman2-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;   /* 横线改由独立元素 .roman2-input-line 承载（延伸动画） */
  color: #e8eef4;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-align: center;             /* 文字从中间向两侧展开，始终居中对齐 */
  outline: none;
  padding: 12px 0;
  overflow: hidden;               /* 不允许任何滚动条 / 溢出提示 */
  resize: none;
  scrollbar-width: none;          /* Firefox 隐藏滚动条 */
  caret-color: rgba(255, 255, 255, 0.85);
}
.roman2-input::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 输入框底部横线：从屏幕中心向左右两侧同时延伸（每次输入框出现时重播） */
.roman2-input-line {
  width: 100%;
  height: 1px;
  margin-top: -1px;                     /* 紧贴 input 底边（盖住透明边框），不额外占布局 */
  background: rgba(230, 230, 230, 0.5); /* 暗白 / 浅灰，与整体风格一致 */
  transform: scaleX(0);                 /* 初始：中心一点 */
  transform-origin: center;             /* 从中心向两侧延伸 */
  pointer-events: none;
}
.roman2-input-line.grow {
  animation: roman2-line-grow 2s linear forwards;   /* 约 2 秒 · 匀速 · 平滑过渡，完成后保持 */
}
@keyframes roman2-line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 确认按钮：与原色对话框按钮风格统一（复古像素风 · 中文） */
.roman2-input-confirm {
  margin-top: 32px;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #e8eef4;
  background: rgba(22, 30, 40, 0.85);
  border: 2px solid #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
  border-radius: 2px;
  padding: 10px 44px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.roman2-input-confirm:hover:not(:disabled) {
  background: rgba(52, 68, 86, 0.95);
  box-shadow: inset 0 0 0 2px #0c1118, 0 0 20px rgba(139, 166, 190, 0.35);
}
.roman2-input-confirm:active:not(:disabled) { transform: scale(0.97); }
/* 禁用态（输入内容非①/②）：灰色不可点击 */
.roman2-input-confirm:disabled,
.roman2-input-confirm.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: #8a97a4;
  border-color: #5a6673;
  background: rgba(28, 36, 46, 0.6);
  box-shadow: inset 0 0 0 2px #0c1118;
}

.roman2-input-result {
  margin-top: 20px;
  min-height: 1.2em;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #7dff7d;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.roman2-input-result.visible { opacity: 1; }

/* 输入错误抖动 */
@keyframes roman2-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ============================================================
   重复访问问答（“家”对话流程已完成 → 节点二已解锁）
   暗红色对话框与 家.html 一致：姓名框 + 情绪头像（寻为原色）
   五个选项按钮
   ============================================================ */

/* ---- 暗红色对话框（底部居中 · 呼吸 · 带左右人物框） ---- */
.roman2-home-dialog {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 4;
  width: min(1000px, 96vw);
  height: clamp(150px, 33vh, 300px);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(12px, 1.8vw, 16px) clamp(12px, 2vw, 18px);
  background: rgba(54, 12, 16, 0.88);     /* 暗红半透明底 */
  border: 3px solid #a96d6d;
  box-shadow: inset 0 0 0 3px #2b090c;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  animation: roman2-home-breathe 3.6s ease-in-out infinite;
}
.roman2-home-dialog.visible { opacity: 1; }
@keyframes roman2-home-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.025); }
}

/* 寻的原色对话框变体 */
.roman2-home-dialog.origin {
  background: rgba(22, 30, 40, 0.95);
  border-color: #8ba6be;
  box-shadow: inset 0 0 0 3px #0c1118;
}
.roman2-home-dialog.origin .roman2-home-text {
  color: #e8eef4;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
}
.roman2-home-dialog.origin .roman2-home-name {
  border-color: #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
}
.roman2-home-dialog.origin .roman2-home-name-text { color: #dce6ee; }
.roman2-home-dialog.origin .roman2-home-slot {
  border-color: #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
}

/* ---- 左右人物框（正方形 · 展示胸像） ---- */
.roman2-home-slot {
  display: none;
  flex: 0 0 auto;
  width: clamp(100px, 16vw, 160px);
  aspect-ratio: 1 / 1;
  max-height: 100%;
  max-width: 34%;
  align-self: center;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid #a96d6d;
  box-shadow: inset 0 0 0 2px #2b090c;
  border-radius: 1px;
  overflow: hidden;
}
.roman2-home-slot.has-portrait { display: block; }
.roman2-home-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  filter: brightness(0.92);
}
@media (max-width: 560px) {
  .roman2-home-dialog { width: min(560px, 98vw); height: clamp(130px, 30vh, 200px); }
  .roman2-home-slot { width: clamp(64px, 15vw, 104px); }
}

/* ---- 对话主体 ---- */
.roman2-home-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- 姓名框（左上角） ---- */
.roman2-home-name {
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 2;
  width: clamp(62px, 13vw, 90px);
  height: clamp(18px, 3.2vw, 24px);
  background: #000;
  border: 2px solid #a96d6d;
  box-shadow: inset 0 0 0 2px #2b090c;
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roman2-home-name-text {
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #f0e2e2;
  white-space: nowrap;
}

/* ---- 对话文字 ---- */
.roman2-home-text {
  margin: 0;
  padding: clamp(12px, 2vw, 16px) 6px 4px;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.9vw, 1.15rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #f0e2e2;
  text-shadow: 0 0 8px rgba(255, 200, 200, 0.12);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

/* ---- 五个选项（与 家.html 选项框风格一致：原色按钮 · 竖直居中） ---- */
.roman2-home-options {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.roman2-home-options.visible { display: flex; }
.roman2-home-option {
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  font-weight: 300;
  font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #e8eef4;
  background: rgba(22, 30, 40, 0.9);
  border: 2px solid #8ba6be;
  box-shadow: inset 0 0 0 2px #0c1118;
  border-radius: 2px;
  padding: 12px 44px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
}
.roman2-home-option:hover {
  background: rgba(52, 68, 86, 0.95);
  box-shadow: inset 0 0 0 2px #0c1118, 0 0 20px rgba(139, 166, 190, 0.35);
}
.roman2-home-option:active { transform: scale(0.97); }