@font-face {
  font-family: "Noto Emoji";
  font-weight: 500;
  src: url("../static/Noto_Emoji.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "VT323";
  src: url("../static/VT323.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Share Tech Mono";
  src: url("../static/ShareTechMono.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "IBM VGA";
  src: url("../static/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: swap;
}

:root {
  --main-bg: #0a0a0a;
  --text-color: #00ff41;
  --highlight-color: #f0f0f0;
  --error-color: #ff3333;
  --love-color: #ff69b4;
  --bsod-bg: #0000aa;
  --bsod-text: #ffffff;
  --font-main: "Share Tech Mono", monospace;
  --font-display: "VT323", monospace;
}

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-bg);
  color: var(--text-color);
  font-family: var(--font-main);
  overflow: hidden;
  text-shadow: 0 0 3px var(--text-color), 0 0 6px var(--text-color);
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2vw;
}

/* CRT Effects */
#container::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 3px, 4px 100%;
  pointer-events: none;
  animation: scanline 8s linear infinite;
}
#container::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 2;
  pointer-events: none;
}
@keyframes scanline {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  z-index: 100;
  font-size: 2.5em;
  font-family: var(--font-display);
  transition: opacity 1s;
}
#overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.fade-out {
  transition: opacity 1s;
  opacity: 0;
}
#overlay-cursor {
  animation: blink 1s step-end infinite;
  text-shadow: none;
}
.cursor {
  text-shadow: none;
}
.blink {
  animation: blink 1s step-end .5s infinite;
}
#visuals {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  overflow: hidden;
}

.line {
  display: block;
  margin-bottom: 0.5em;
  white-space: pre-wrap;
}
.line > .prompt {
  opacity: 0.6;
}

.emphasis {
  font-family: var(--font-display);
  font-size: 2.5em;
  color: var(--highlight-color);
  text-shadow: 0 0 8px var(--highlight-color);
  display: block;
  text-align: center;
  letter-spacing: 5px;
  animation: fadeIn 0.5s;
}
.error {
  color: var(--error-color);
  text-shadow: 0 0 8px var(--error-color);
}
.love {
  color: var(--love-color);
  text-shadow: 0 0 8px var(--love-color);
  animation: reversePulse 1.5s infinite;
}

/* Animations */
@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.screenShake {
  animation: screenShake 0.15s infinite;
}
@keyframes screenShake {

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  25% {
    transform: translate(-1px, 0.5px) rotate(-0.15deg);
  }

  50% {
    transform: translate(0.8px, -1px) rotate(0.15deg);
  }

  75% {
    transform: translate(0.5px, 1px) rotate(-0.1deg);
  }
}
@keyframes reversePulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

/* Updated: Removed rotation, only blur */
.dizzy {
  animation: blurEffect 2s linear infinite;
}
@keyframes blurEffect {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}

.ac-mode {
  --text-color: #ff4444 !important;
}
.dc-mode {
  --text-color: #4444ff !important;
}

/* Ensure AC/DC effects apply to all child elements */
.ac-mode * {
  color: var(--text-color);
  text-shadow: 0 0 5px var(--text-color), 0 0 10px var(--text-color);
}
.dc-mode * {
  color: var(--text-color);
  text-shadow: 0 0 5px var(--text-color), 0 0 10px var(--text-color);
}
.blind {
  filter: blur(5px) brightness(0.3);
}
.time-travel {
  animation: timeWarp 3s ease-in-out;
}
@keyframes timeWarp {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(180deg) sepia(1);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Special Effects Elements */
#binary-canvas,
#bsod-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.code-snippet,
.progress-bar-container {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--text-color);
  padding: 1em;
  margin: 1em 0;
  white-space: pre;
  font-family: var(--font-main);
}
.progress-bar {
  display: block;
  height: 1.2em;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.5em;
}
.progress-bar::-webkit-progress-bar {
  background-color: rgba(0, 0, 0, 0.3);
}
.progress-bar::-webkit-progress-value {
  background-color: var(--text-color);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar::-moz-progress-bar {
  background-color: var(--text-color);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.code-snippet code{
  text-shadow:none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-x: auto;
}

/* 既有样式 */
.token.keyword {
  color: #cc7832;
}

.token.class-name {
  color: #a9b7c6;
}

.token.function {
  color: #ffc66d;
}

.token.string {
  color: #6a8759;
}

/* 补全样式：Darcula 风格下的属性与布尔值 */
.token.property {
  color: #9876aa;
  /* 紫色：对应 world */
}

.token.boolean {
  color: #cc7832;
  /* 橙色：对应 true */
}
.token.parameter {
  color: #a9b7c6; /* 参数变量颜色 */
}
#bsod-screen {
  background-color: var(--bsod-bg);
  color: var(--bsod-text);
  font-family: "IBM VGA", "Lucida Console", monospace;
  text-shadow: none;
  padding: 1em;
  z-index: 50;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 768px) {
  #bsod-screen {
    justify-content: center;
    align-items: center;
  }
}
.bsod-text {
  font-size: clamp(0.6em, 1.8vw, 1.9em);
  text-align: left;
  line-height: 1.1;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 768px) {
  .bsod-text {
    text-align: center;
  }
}
.bsod-dump {
  margin-top: 2em;
}

.shape {
  position: absolute;
}
.point,
.sine-dot {
  width: 5px;
  height: 5px;
  background-color: var(--highlight-color);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--highlight-color);
}
.point {
  opacity: 0;
}
.sine-dot {
  opacity: 0;
}
.circle {
  border: 2px solid var(--highlight-color);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--highlight-color);
  animation: fadeIn 1s;
}
.tangent-line {
  border-top: 2.5px dashed var(--love-color);
  transform-origin: center center;
  transform: scaleX(0);
}
.limit-line {
  border-top: 2px solid var(--error-color);
  transform: scaleX(0);
  transform-origin: left;
}
.chaos-text {
  position: absolute;
  font-family: var(--font-display);
  opacity: 0.8;
  animation: chaosFadeIn 0.2s ease-out forwards;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  z-index: 20;
}
@keyframes chaosFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
}
.execution-spam {
  position: absolute;
  overflow: hidden;
  max-width: calc(100vw - 2vw);
  pointer-events: none;
  font-size: clamp(1.5em, 5vw, 3.5em);
  letter-spacing: 2px;
  white-space: nowrap;
  line-height: 1;
}

/* New effect styles */
.emoji-display {
  position: absolute;
  font-size: 3em;
  font-family: "Noto Emoji", sans-serif;
  animation: bounceIn 0.8s ease-out;
  z-index: 15;
}
@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.gender-symbol {
  position: absolute;
  font-size: 4em;
  animation: genderSwitch 1s ease-in-out;
  z-index: 15;
}
@keyframes genderSwitch {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg) scale(1.2);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.time-display {
  position: absolute;
  font-family: "Courier New", monospace;
  font-size: 2em;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.5em;
  border: 2px solid var(--text-color);
  animation: digitalClock 2s ease-in-out;
}
@keyframes digitalClock {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

.molecule {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
  border-radius: 50%;
  animation: moleculeFloat 3s ease-in-out infinite;
}
@keyframes moleculeFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.sound-wave {
  position: absolute;
  height: 4px;
  background: linear-gradient(to right, var(--love-color), transparent);
  animation: soundWave 1s ease-in-out infinite;
}
@keyframes soundWave {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    opacity: 0;
  }
}

.year-display {
  position: absolute;
  font-family: var(--font-display);
  font-size: 3em;
  color: gold;
  text-shadow: 0 0 10px gold;
  animation: timeTravel 0.5s ease-in-out;
}
@keyframes timeTravel {
  0% {
    opacity: 0;
    transform: scale(2) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }
}

.trance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(255, 105, 180, 0.3) 100%
  );
  animation: trance 4s ease-in-out;
  z-index: 8;
}
@keyframes trance {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.7;
  }
}

/* New: Power line effect */
.power-line {
  position: absolute;
  height: 2px;
  background: var(--text-color);
  box-shadow: 0 0 10px var(--text-color);
  animation: powerPulse 0.5s infinite alternate;
  z-index: 5;
}
@keyframes powerPulse {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* New: Protection shield */
.protection-shield {
  position: absolute;
  border: 3px solid var(--text-color);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--text-color);
  animation: shieldPulse 2s infinite;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes shieldPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

/* New: Object creation effect */
.object-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--text-color);
  border-radius: 50%;
  animation: particleFloat 3s ease-in-out;
  z-index: 7;
}
@keyframes particleFloat {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}
.heart-formula-label {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--love-color);
  font-weight: 700;
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.heart-formula-label.show {
  opacity: 1;
}

/* 手機端樣式：單行不換行、字體清晰加粗 */
@media (max-width: 768px) {
  .heart-formula-label {
    top: calc(50% - 20px + 27vw);
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: none;
    font-size: clamp(0.8rem, 3.8vw, 0.95rem);
    font-weight: 700;
  }
}
/* 结合动画容器 */
.unite-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 15;
  /* 隔离混合模式，确保混合只发生在两个符号之间 */
  isolation: isolate;
}

.unite-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 核心解决方案：开启屏幕滤色混合模式 */
.unite-female-group,
.unite-male-group {
  /* 粉色 + 蓝色重叠时会融合为靓丽的紫白亮光，不再是被蓝色挡住 */
  mix-blend-mode: screen;
}

/* 女性符号 ♀ (粉色) 动画 */
.unite-female-group {
  animation: mergeFemale 2.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 男性符号 ♂ (蓝色) 动画 */
.unite-male-group {
  animation: mergeMale 2.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* --- 女性符号关键帧：平滑淡入 -> 靠近 -> 完全融合 -> 爆发消散 --- */
@keyframes mergeFemale {
  0% {
    opacity: 0;
    transform: translate(-120px, 0) scale(0.3);
    filter: drop-shadow(0 0 0px transparent);
  }

  /* 25% 处：柔和淡入显现，并移动到两侧准备相撞 */
  25% {
    opacity: 1;
    transform: translate(-45px, 0) scale(1);
    filter: drop-shadow(0 0 10px #ff69b4);
  }

  /* 60% 处：精准重合在中心，极光交织 */
  60% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: drop-shadow(0 0 20px #ff69b4);
  }

  /* 85% 处：融合成一体并爆发光芒 */
  85% {
    opacity: 1;
    transform: translate(0, 0) scale(1.6);
    filter: drop-shadow(0 0 35px #ffffff);
  }

  /* 100% 处：平滑渐隐消散 */
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(2.6);
    filter: drop-shadow(0 0 0px transparent);
  }
}

/* --- 男性符号关键帧：平滑淡入 -> 靠近 -> 完全融合 -> 爆发消散 --- */
@keyframes mergeMale {
  0% {
    opacity: 0;
    transform: translate(120px, 0) scale(0.3);
    filter: drop-shadow(0 0 0px transparent);
  }

  /* 25% 处：柔和淡入显现，并移动到两侧准备相撞 */
  25% {
    opacity: 1;
    transform: translate(45px, 0) scale(1);
    filter: drop-shadow(0 0 10px #00bfff);
  }

  /* 60% 处：精准重合在中心，极光交织 */
  60% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: drop-shadow(0 0 20px #00bfff);
  }

  /* 85% 处：融合成一体并爆发光芒 */
  85% {
    opacity: 1;
    transform: translate(0, 0) scale(1.6);
    filter: drop-shadow(0 0 35px #ffffff);
  }

  /* 100% 处：平滑渐隐消散 */
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(2.6);
    filter: drop-shadow(0 0 0px transparent);
  }
}

/* 结合融合时爆开的中心冲击波 */
.unite-pulse-wave {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 25px var(--love-color), inset 0 0 25px var(--love-color);
  animation: pulseWaveExpand 1.3s ease-out 1.2s forwards;
  opacity: 0;
}

@keyframes pulseWaveExpand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.5);
  }
}
/* 旋轉指針容器 SVG */
.compass-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
  opacity: 0;
  /* 預設隱藏，待第一幀座標計算完成後顯示 */
}

/* 指針劃過留下的紅色圓弧軌跡 */
.compass-arc-path {
  fill: none;
  stroke: var(--love-color, #ff4081);
  /* 紅色 */
  stroke-width: 3px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--love-color, #ff4081));
}

/* 旋轉虛線指針 */
.compass-line {
  stroke: var(--text-color);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
}

/* 圓心固定點 */
.compass-center-dot {
  r: 4px;
  fill: var(--love-color, #ff4081);
}

/* 指針末端點（圓周運動點） */
.compass-tip-dot {
  r: 5px;
  fill: var(--love-color, #ff4081);
  filter: drop-shadow(0 0 6px var(--love-color, #ff4081));
}

/* 隨指針末端移動的周長標籤 */
.compass-label {
  position: absolute;
  font-family: var(--font-main);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-color);
  background: rgba(10, 10, 10, 0.85);
  padding: 4px 10px;
  border: 1px solid var(--text-color);
  border-radius: 4px;
  box-shadow: 0 0 10px var(--text-color);
  pointer-events: none;
  white-space: nowrap;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.terminal-line {
  font-size: 7.2vmin;
}