body {
  margin:0; padding:0; font-family: "Helvetica Neue", sans-serif;
  background:#000; color:#00ff00;   /* 终端风格 */
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/bg.jpg') no-repeat center center;
  background-size: cover;   /* 铺满整个屏幕 */
  opacity: 0.6;             /* 提高透明度，0~1之间，越大越清晰 */
  pointer-events: none;     /* 不影响点击 */
  z-index: 0;
}
.wrap {
  display:flex; justify-content:center; padding-top:40px;opacity: 0.7;
  position: relative; z-index: 1;
}
.menu-frame {
  background:#000; border:1px solid #00ff00;
  border-radius:8px; max-width:500px; width:90%; padding:24px;
  box-shadow:0 0 10px rgba(0,255,0,0.2);
}
.menu-head { text-align:center; margin-bottom:24px; }
.menu-title { font-size:1.8em; margin:0; color:#00ff00; }
.menu-info { color:#0f0; margin-top:8px; }

.menu-list { display:flex; flex-direction:column; gap:16px; }
.menu-item {
  display:flex; justify-content:space-between; align-items:center;
  background:#000; padding:12px 16px; border:1px solid #00ff00;
  border-radius:8px; transition:0.3s;
}
.menu-item:hover { background:#001900; transform:translateY(-2px); }
.menu-name { margin:0; font-size:1.1em; }
.menu-name a { text-decoration:none; color:#0f0; }
.menu-price { font-weight:bold; color:#0f0; }

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #0f0;
  padding: 10px 0;
  background: rgba(220, 220, 220, 0.3);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* 增大心形和文字间距 */
}

.heart-small {
  display: inline-block;
  position: relative;
  width: 12px;  /* 缩小心形尺寸 */
  height: 12px;
  background: red;
  transform: rotate(-45deg);
  transform-origin: center;
  animation: heartbeat 1s ease-in-out infinite;
}

.heart-small::before,
.heart-small::after {
  content: "";
  position: absolute;
  width: 12px;  /* 相应缩小 */
  height: 12px;
  background: red;
  border-radius: 50%;
}

.heart-small::before {
  top: -6px;  /* 调整为心形尺寸的一半 */
  left: 0;
}

.heart-small::after {
  top: 0;
  left: 6px;  /* 调整为心形尺寸的一半 */
}

@keyframes heartbeat {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(1.3); }
}

/* 添加时间显示样式 */
.time-display {
  position: fixed;
  bottom: 3px;
  right: 10px;
  color: #0f0;
  font-family: monospace;
  font-size: 14px;
  z-index: 10;
  background: #000;
  padding: 5px 6px;
  border-radius: 4px;
  border: 1px solid #00ff00;
  width: 260px; /* 固定宽度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.time-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 新增代码雨样式 */
.code-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -5; /* 放在内容层后面 */
  overflow: hidden;
}

.code-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.code-rain-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fe5757;
  animation: colorChange 30s ease-in-out infinite;
  animation-fill-mode: both;
  mix-blend-mode: overlay;
  opacity: 0;
}

@keyframes colorChange {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}