/* ── 自定义光标：一枚跟着走的小灯 ─────────────────────── */

html.custom-cursor, html.custom-cursor * {
  cursor: none !important;
}

.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 200ms ease;
}

.cursor-ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--garnet);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--garnet);
  box-shadow: 0 0 12px 3px var(--garnet-glow);
}

html.custom-cursor .cursor-ring,
html.custom-cursor .cursor-dot {
  opacity: 1;
}

.cursor-ring.is-hovering {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-color: var(--teal);
}

/* 拉绳区域的专属光标：一只手，靠近变张开，按住变握拳 */

.cursor-hand {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  z-index: 9999;
  color: var(--garnet);
  opacity: 0;
  transition: opacity 150ms ease;
}

.cursor-hand svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 110ms ease, transform 110ms ease;
}

.cursor-hand .hand-grip {
  opacity: 0;
  transform: scale(0.8);
}

.cursor-hand.is-gripping .hand-open {
  opacity: 0;
  transform: scale(0.8);
}

.cursor-hand.is-gripping .hand-grip {
  opacity: 1;
  transform: scale(1);
}

html.custom-cursor .cursor-hand.is-active {
  opacity: 1;
}

html.custom-cursor.cord-active .cursor-ring,
html.custom-cursor.cord-active .cursor-dot {
  opacity: 0;
}

/* ── Konami 彩蛋触发提示：不管你在页面哪个位置都能看到 ───── */

.konami-toast {
  position: fixed;
  top: clamp(16px, 4vw, 32px);
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -12px);
  padding: 10px 18px;
  background: rgba(24, 20, 15, 0.95);
  border: 1px solid var(--garnet);
  border-radius: 100px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.konami-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── 悬浮面板统一的关闭按钮：dev-panel / 隐藏终端 / 彩蛋提示
   三个面板都用这一个样式，固定在右上角，不用每个面板各记一套
   位置和尺寸——包括点击热区也统一做到 32px，手机上点得中 ───── */

.panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(24, 20, 15, 0.6);
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 180ms ease, background 180ms ease;
}

.panel-close:hover,
.panel-close:focus-visible {
  color: var(--ink);
  background: var(--surface-hover);
  outline: none;
}

/* ── 隐藏的开发者面板（按 D 呼出） ───────────────────────── */

.dev-panel {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 8;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 面板本身不滚，只有下面数据那一段滚——不然右上角关闭按钮会跟着内容一起滚没了 */
  padding: 14px 16px;
  background: rgba(24, 20, 15, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-dim);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.dev-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dev-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 8px;
  padding-right: 36px; /* 给右上角悬浮的关闭按钮留位置，标题文字不会被压到下面 */
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.dev-panel-scroll {
  overflow-y: auto;
  min-height: 0; /* flex 子项默认不会收缩到比内容还小，得显式清零才能真的滚动而不是把面板撑爆 */
}

.dev-panel-title .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px 1px var(--teal-glow);
}

.dev-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0;
}

.dev-panel dt { color: var(--ink-faint); }
.dev-panel dd { margin: 0; color: var(--ink); text-align: right; }

.dev-panel-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-faint);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── 隐藏的终端彩蛋（按 ` 呼出，几个真的读页面状态的小命令） ── */

.hidden-terminal {
  position: fixed;
  left: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 9;
  width: min(480px, 90vw);
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 16, 12, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-dim);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.hidden-terminal.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.term-output {
  padding: 12px 14px 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.term-output p { margin: 0 0 6px; }
.term-output .term-cmd { color: var(--ink); }
.term-output .term-cmd::before { content: '$ '; color: var(--garnet); }
.term-output .term-err { color: var(--garnet); }

.term-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}

.term-prompt {
  color: var(--garnet);
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
}

.term-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font: inherit;
  caret-color: var(--garnet);
}

@media (max-width: 640px) {
  .term-prompt { display: none; }
  /* iOS Safari 有个约定：聚焦的输入框实际 font-size 小于 16px 时会自动放大整个
     页面方便看清楚，且不会自己缩回去。.term-input 平时靠 font: inherit 继承
     终端的 12px，手机上一点输入框就整页跳大——这里单独把输入框字号提到 16px
     绕开这条触发线，只有输入框本身看着比周围文字大一点，权衡下来比"每次呼出
     终端整页跳一下"更不打扰 */
  .term-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring, .cursor-dot { display: none; }
  .hidden-terminal { transition: none; }
}

@media (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}