/* ══════════════════════════════════════════════════════════════
   彩蛋：故障 → 假警告 → 揭晓
   入口是页脚那个"不要点"的按钮（也可以命令行 easter / rm -rf /）
   ══════════════════════════════════════════════════════════════ */

/* ── 入口按钮：黄黑警示条纹，看着就不该点 ── */
.egg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ui) 14%, transparent);
}

/* 底部那片空当里居中：不贴边、不和小人/图标打架 */
.egg--center {
  justify-content: center;
  border-top: 0;
  padding: 34px 12px 26px;
  position: relative;
  z-index: 3;
}
.egg--center .egg__note { opacity: .45; }
/* 入口按钮：配色跟着主题走，不再用黄黑警示条 */
.egg {
  --egg-accent: var(--anom, #46ff8c);
  --egg-accent-2: var(--ui, #c8d6ea);
  --egg-ink: var(--bg, #0a0612);
}
html[data-scheme="sw"] .egg {
  --egg-accent: var(--sw-cyan);
  --egg-accent-2: var(--sw-pink);
  --egg-ink: #07040f;
}
html[data-scheme="paper"] .egg {
  --egg-accent: var(--ink);
  --egg-accent-2: var(--c-teal, #178f8c);
  --egg-ink: #fbf9f3;
}
html[data-scheme="ib"] .egg {
  /* ib 的页面底色很浅，用 accent(#5080b0) 当字色只有 3.2 的对比度，
     所以字用深墨蓝，斜纹才用 accent */
  --egg-accent: var(--ib-ink);
  --egg-accent-2: var(--ib-accent);
  --egg-ink: #ffffff;
}

.egg__btn {
  appearance: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: .22em;
  padding: 5px 13px;
  cursor: pointer;
  color: var(--egg-accent);
  border: 1px solid color-mix(in srgb, var(--egg-accent) 52%, transparent);
  /* 斜纹也用主题色，只给一点点，保留"看着不该点"的味道 */
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--egg-accent) 14%, transparent) 0 6px,
    transparent 6px 12px
  );
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease,
              box-shadow .2s ease, transform .12s ease;
}
.egg__btn:hover,
.egg__btn:focus-visible {
  color: var(--egg-ink);
  background-color: var(--egg-accent);
  border-color: var(--egg-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--egg-accent) 45%, transparent);
  outline: none;
  transform: translateY(-1px);
}
.egg__btn:active { transform: translateY(0); }
.egg__note { font-size: 10.5px; opacity: .6; }

/* ── 演出舞台：压在一切之上（比故障层 9999 还高） ── */
/* 舞台配色：三套主题各有自己的"崩坏屏" */
.eggstage {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  font-family: var(--mono);
  overflow: hidden;
  cursor: default;

  /* 默认（银狼）：深底 + 青粉紫 */
  --egg-c1: #38e1ff;
  --egg-c2: #ff4fd8;
  --egg-c3: #a855f7;
  --win-bg: #0d0a15;
  --win-bar: #1a1430;
  --win-ink: #dfe9f7;
  --win-ink2: #8b97ad;
  --win-line: #2b2440;
  --stage-bg: #07040d;
  --stage-curtain: rgba(6, 4, 12, .78);
  background: transparent;      /* 第一幕要能看见下面的页面（撕裂就发生在页面上） */
  color: #e8f6ff;
}
/* 第二幕才落下幕布：压暗页面，弹窗才看得清 */
.eggstage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--stage-curtain);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.eggstage.curtain::after { opacity: .78; }
html[data-scheme="paper"] .eggstage {
  --egg-c1: #1d2029;
  --egg-c2: #178f8c;
  --egg-c3: #b5532a;
  --win-bg: #fbf9f3;
  --win-bar: #ece8de;
  --win-ink: #1d2029;
  --win-ink2: #635f57;
  --win-line: rgba(29, 32, 41, .22);
  --stage-bg: #f2efe6;
  --stage-curtain: rgba(26, 22, 18, .84);   /* 纸面也压暗，别让米黄发浑 */
  color: #1d2029;
}
html[data-scheme="ib"] .eggstage {
  --egg-c1: #5080b0;
  --egg-c2: #16305f;
  --egg-c3: #6d3fc0;
  --win-bg: rgba(255, 255, 255, .9);
  --win-bar: #e8eef7;
  --win-ink: #16305f;
  --win-ink2: #5f739b;
  --win-line: rgba(80, 128, 176, .3);
  --stage-bg: #eef2f8;
  --stage-curtain: rgba(12, 26, 48, .8);
  color: #16305f;
}
.eggstage.on { display: block; }

/* 舞台底的扫描线 + 噪点 */
.eggstage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(56, 225, 255, .05) 0deg 90deg,
      rgba(255, 79, 216, .05) 90deg 180deg);
  background-size: auto, 4px 4px;
  opacity: .5;
  z-index: 1;
}

/* 故障期间：整块画面被推来推去 + 色差 */
.eggstage.glitching { animation: eggShake .11s steps(2, end) infinite; }
@keyframes eggShake {
  0%   { transform: translate(0, 0); filter: hue-rotate(0deg); }
  33%  { transform: translate(-3px, 1px); filter: hue-rotate(12deg) saturate(1.4); }
  66%  { transform: translate(3px, -1px); filter: hue-rotate(-10deg) saturate(1.3); }
  100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
}

/* 顶栏变红（舞台里那份假顶栏） */
.eggbar {
  position: relative;
  z-index: 3;
  color: var(--egg-c2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: .06em;
  background: color-mix(in srgb, var(--egg-c2) 14%, var(--win-bg));
  border-bottom: 1px solid var(--egg-c2);
}
.eggbar b { color: var(--egg-c1); }

/* ── 假警告窗口 ── */
.eggwin {
  position: absolute;
  z-index: 4;
  /* 宽高/字号每个窗口都不一样，JS 会写 --w 和 --fs */
  width: var(--w, 320px);
  max-width: min(560px, 86vw);
  background: var(--win-bg);
  color: var(--win-ink);
  border: 1px solid var(--c, var(--egg-c1));
  font-size: var(--fs, 11.5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--c, var(--egg-c1)) 22%, transparent);
  animation: winIn .18s steps(3, end) both;
}
@keyframes winIn {
  0%   { opacity: 0; transform: scale(.86) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* 到点自己淡出、缩小、消失 */
.eggwin--out { animation: winOut .3s steps(4, end) forwards; }
@keyframes winOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-8px); }
}

.eggwin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 6px 3px 9px;
  font-size: calc(var(--fs, 11.5px) * .92);
  letter-spacing: .14em;
  color: var(--win-bg);
  background: var(--c, var(--egg-c1));
  border-bottom: 1px solid var(--c, var(--egg-c1));
}
.eggwin__x {
  width: 14px; height: 13px;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--win-bg);
  background: var(--c, var(--egg-c1));
}
.eggwin__body { padding: 10px 11px 12px; line-height: 1.7; }
.eggwin__msg { color: var(--win-ink); }
.eggwin__code {
  margin-top: 7px;
  font-size: calc(var(--fs, 11.5px) * .9);
  color: var(--win-ink2);
  word-break: break-all;
}
.eggwin__ok {
  margin-top: 9px;
  display: inline-block;
  padding: 2px 10px;
  font-size: calc(var(--fs, 11.5px) * .9);
  color: var(--win-bg);
  background: var(--c, var(--egg-c1));
}

/* ── 揭晓那句话 ── */
.eggpunch {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  text-align: center;
  padding: 6vw;
}
.eggpunch.on { display: grid; }
.eggpunch p {
  margin: 0;
  font-size: clamp(16px, 3.4vw, 34px);
  line-height: 1.6;
  color: var(--egg-c1);
  text-shadow: 0 0 18px color-mix(in srgb, var(--egg-c1) 55%, transparent);
  animation: punchIn .4s steps(4, end) both;
}
@keyframes punchIn {
  0%   { opacity: 0; letter-spacing: .4em; }
  100% { opacity: 1; letter-spacing: .02em; }
}

/* ── 播放器 ── */
.eggplayer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  background: #000;
  padding: 0;
}
.eggplayer.on { display: block; }
/* 视频窗铺满整个网页（不是让浏览器进全屏）。
   iframe 按 16:9 撑到能撑的最大尺寸 —— 直接拉成 16:10 的整块，B站播放器会渲染成一片黑。 */
.eggplayer__box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #000;
  box-shadow: none;
}
.eggplayer__box iframe {
  position: static;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}
.eggplayer__box iframe {
  position: static;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  border: 0;
}
.eggplayer__tap {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: 13px;
  letter-spacing: .3em;
  color: #9df3ff;
  background: rgba(4, 2, 8, .55);
  text-shadow: 0 0 14px rgba(56, 225, 255, .7);
  pointer-events: none;
}
/* 提示层本来不挡鼠标，但显示出来时要点得动（点一下会用新手势重载 iframe） */
.eggplayer__tap.on {
  display: grid;
  pointer-events: auto;
  cursor: pointer;
  animation: tapPulse 1.1s steps(2, end) infinite;
}
@keyframes tapPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 退出提示 */
.eggexit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 8;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: #6f7f96;
}


/* 减少动效：不抖、不闪，只留文字 */
@media (prefers-reduced-motion: reduce) {
  .eggstage.glitching { animation: none; }
  .eggwin { animation: none; }
  .eggpunch p { animation: none; }
  .eggplayer__tap.on { animation: none; opacity: .9; }
}


/* 全屏按钮 */
.eggplayer__fs {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  appearance: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  padding: 3px 9px;
  cursor: pointer;
  color: var(--egg-c1);
  background: rgba(6, 4, 12, .72);
  border: 1px solid var(--egg-c1);
}
.eggplayer__fs:hover { color: var(--win-bg); background: var(--egg-c1); }

/* 进入全屏后：盒子铺满，iframe 填满 */
.eggplayer__box:fullscreen,
.eggplayer__box:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  padding: 0;
  background: #000;
  box-shadow: none;
}
.eggplayer__box:fullscreen iframe,
.eggplayer__box:-webkit-full-screen iframe {
  width: 100%;
  height: 100%;
}
.eggplayer__box:fullscreen .eggplayer__fs { top: 12px; right: 14px; }