/* ============================================================
   全局变量 & Reset  —  火焰红主题 #FF2200
   ============================================================ */
:root {
  /* ── 主色板（火焰系：橙红→亮红，热烈如炽焰）── */
  --red:          #FF2200;   /* 主红：橙焰红，比 #EE0000 更鲜亮跳跃 */
  --red-deep:     #E01000;   /* 深红：收敛但仍饱和 */
  --red-bright:   #FF5500;   /* 亮红：橙红焰尖，视觉冲击力极强 */
  --crimson:      #9B0000;   /* 酒红：深底色锚点 */
  --rose:         #FF7744;   /* 玫红→暖橙玫，与火焰调性统一 */
  --gold:         #FFCC00;   /* 琥珀金→更亮的柠檬金，与火焰对比更跳 */
  --gold-deep:    #E6A800;

  /* ── 背景（微微提亮，像火场余热）── */
  --bg:           #080100;
  --bg2:          #0f0200;
  --card:         rgba(35, 4, 0, 0.75);

  /* ── 发光阴影（范围更大、透明度更高，燃烧感）── */
  --glow-red:    0 0 22px rgba(255,34,0,.75),  0 0 70px rgba(224,16,0,.4),  0 0 120px rgba(180,0,0,.18);
  --glow-rose:   0 0 20px rgba(255,119,68,.65), 0 0 60px rgba(220,60,0,.3);
  --glow-gold:   0 0 20px rgba(255,204,0,.65),  0 0 60px rgba(230,168,0,.3);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #ffe8e8;
  font-family: 'Noto Serif SC', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================================
   樱花 Canvas
   ============================================================ */
#sakura-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
   全局光扫线  →  红色
   ============================================================ */
.scan-line {
  position: fixed;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,34,0,.9), transparent);
  animation: scanDown 9s linear infinite;
  pointer-events: none;
  z-index: 100;
}
@keyframes scanDown {
  0%   { top: -2px; }
  100% { top: 100vh; }
}

/* ============================================================
   静音按钮
   ============================================================ */
.mute-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,34,0,.5);
  background: rgba(12,0,0,.78);
  color: var(--red);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: var(--glow-red);
  transition: transform .25s, box-shadow .25s;
}
.mute-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 32px rgba(255,34,0,.8);
}
.mute-btn.muted {
  border-color: rgba(255,102,136,.4);
  color: var(--rose);
  box-shadow: var(--glow-rose);
}

/* ============================================================
   滚动淡入
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* LQIP 占位：极小 base64 webp，瞬间显示模糊背景 */
  background-image: url('data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAABQBQCdASooABYAPzmCulOvKCYkMBVdUeAnCWMAvsAI31yZ66txE12URQqVK2wbSYJuQYAAxu94bUz0L37RCYo5WvybrtzZVabGGRXmBIJMi+R+0TffxJUtOu+tEVgqfHiqzhcrSAA=');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 20%;  /* 人物身体部分居中，顶部留出头部 */
  filter: brightness(.52) saturate(1.4) hue-rotate(-10deg);
  transform: scale(1.06);
  will-change: transform;
  transition: background-image 0.6s ease;
}
/* 主图加载完毕后由 JS 切换 class */
.hero-bg.loaded {
  background-image: url('../poster.webp');
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,0,0,.18)  0%,
    rgba(6,0,0,.12)  40%,
    rgba(6,0,0,.68)  82%,
    var(--bg)        100%
  );
}

/* 动态光晕  →  左红 右玫 */
.hero-glow-left {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,34,0,.25) 0%, transparent 70%);
  top: 5%; left: -12%;
  animation: floatGlow 9s ease-in-out infinite;
  pointer-events: none;
}
.hero-glow-right {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,136,.18) 0%, transparent 70%);
  top: 18%; right: -18%;
  animation: floatGlow 11s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes floatGlow {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.1); }
}

/* 文字内容 */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
}

/* 顶部小标  →  金色 */
.hero-subtitle-top {
  font-family: 'Orbitron', monospace;
  font-size: clamp(.65rem, 1.4vw, .95rem);
  letter-spacing: .55em;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  margin-bottom: 22px;
  animation: fadeSlideDown 1.2s ease forwards;
  opacity: 0;
}

/* 主标题  →  白底 + 红色发光 */
.hero-title-main {
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 0 22px rgba(255,34,0,.9),
    0 0 65px rgba(224,16,0,.55),
    0 0 130px rgba(224,16,0,.2);
  margin-bottom: 14px;
  animation: glitchReveal 1.5s ease forwards .3s;
  opacity: 0;
  position: relative;
  display: inline-block;
}
.hero-title-main::before,
.hero-title-main::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-title-main::before {
  color: var(--gold);
  animation: glitch1 4s infinite 2.5s;
  clip-path: polygon(0 18%, 100% 18%, 100% 38%, 0 38%);
}
.hero-title-main::after {
  color: var(--rose);
  animation: glitch2 4s infinite 2.9s;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}

/* 副标题  →  玫红 */
.hero-title-sub {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.9rem, 2.6vw, 1.9rem);
  color: var(--rose);
  text-shadow: var(--glow-rose);
  letter-spacing: .18em;
  margin-bottom: 28px;
  animation: fadeSlideUp 1.2s ease forwards .8s;
  opacity: 0;
}

/* 日期  →  红色 */
.hero-date {
  font-family: 'Orbitron', monospace;
  font-size: clamp(.95rem, 2vw, 1.45rem);
  color: var(--red);
  text-shadow: var(--glow-red);
  letter-spacing: .32em;
  animation: fadeSlideUp 1.2s ease forwards 1.1s;
  opacity: 0;
}

/* 地点 */
.hero-venue {
  font-family: 'Orbitron', monospace;
  font-size: clamp(.72rem, 1.6vw, 1rem);
  letter-spacing: .22em;
  color: rgba(255,232,232,.6);
  margin-top: 18px;
  margin-bottom: 14px;
  animation: fadeSlideUp 1.2s ease forwards 1.35s;
  opacity: 0;
}

/* 场次标签行 */
.hero-sessions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: fadeSlideUp 1.2s ease forwards 1.55s;
  opacity: 0;
}
.session-tag {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,34,0,.55);
  color: var(--red-bright);
  background: rgba(255,34,0,.1);
}
.session-time {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 16px rgba(255,34,0,.85);
}
.session-sep {
  color: var(--rose);
  opacity: .5;
  font-size: 1.2rem;
  margin: 0 4px;
}

/* 倒计时副注 */
.countdown-session-note {
  margin-top: 14px;
  font-family: 'Orbitron', monospace;
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(255,170,0,.45);
}

/* 向下提示 */
.hero-scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: .55;
  animation: scrollBounce 2.2s ease infinite 1.8s;
}
.hero-scroll-hint span {
  font-family: 'Orbitron', monospace;
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--rose);
}
.scroll-arrow {
  width: 18px; height: 18px;
  border-right: 2px solid var(--rose);
  border-bottom: 2px solid var(--rose);
  transform: rotate(45deg);
}

/* ============================================================
   通用 Section
   ============================================================ */
.content-section {
  padding: 100px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

/* Section Tag  →  金色描边 */
.section-tag {
  display: inline-block;
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  letter-spacing: .42em;
  color: var(--gold);
  border: 1px solid rgba(255,170,0,.42);
  padding: 4px 16px;
  border-radius: 2px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Section 大标题渐变  →  红→玫→金 */
.section-title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, var(--rose) 0%, var(--red) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

/* 分割线  →  玫→红→金 */
.section-divider {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--red), var(--gold), transparent);
  margin: 0 auto;
}

.section-hint {
  margin-top: 20px;
  font-family: 'Orbitron', monospace;
  font-size: .78rem;
  letter-spacing: .25em;
  color: rgba(255,34,0,.45);
}

/* ============================================================
   倒计时
   ============================================================ */
#countdown-section { text-align: center; }

.countdown-wrapper {
  display: flex;
  justify-content: flex-start; /* 徽章在左，数字从左到右 */
  align-items: center;
  gap: clamp(6px, 1.5vw, 18px);
  flex-wrap: nowrap;           /* 强制一行 */
  flex: 1;                     /* 填满剩余宽度 */
}

.countdown-card {
position: relative;
background: var(--card);
border: 1px solid rgba(255,34,0,.35);
border-radius: 10px;
padding: 22px 16px 12px;
min-width: 80px;
flex: 1;              /* 均匀分配宽度 */
text-align: center;
backdrop-filter: blur(14px);
box-shadow: var(--glow-red), inset 0 1px 0 rgba(255,255,255,.04);
overflow: hidden;
}
.countdown-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,34,0,.08), transparent 60%);
  pointer-events: none;
}
.countdown-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.countdown-number {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 22px rgba(255,34,0,.9), 0 0 60px rgba(224,16,0,.45);
  line-height: 1;
  display: block;
}
.countdown-number.flip {
  animation: numFlip .28s ease;
}

.countdown-label {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .32em;
  color: var(--red-bright);
  margin-top: 10px;
  display: block;
}

/* 冒号  →  玫红 */
.countdown-colon {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
  color: var(--rose);
  text-shadow: var(--glow-rose);
  animation: colonBlink 1s ease infinite;
  padding-bottom: 22px;
  user-select: none;
}

/* ============================================================
   曲目单
   ============================================================ */
.setlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.setlist-item {
  background: var(--card);
  border: 1px solid rgba(255,34,0,.15);
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.setlist-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--rose), var(--red));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s ease;
  border-radius: 0 0 0 8px;
}
.setlist-item:hover {
  border-color: rgba(255,34,0,.5);
  box-shadow: 0 0 22px rgba(255,34,0,.14), inset 0 0 28px rgba(255,34,0,.05);
  transform: translateX(5px);
}
.setlist-item:hover::before { transform: scaleY(1); }

.setlist-num {
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  color: var(--red-bright);
  width: 28px;
  flex-shrink: 0;
  opacity: .65;
}

.setlist-name {
  font-size: 1.05rem;
  font-weight: 400;
  color: #ffe8e8;
  flex: 1;
}
.setlist-name.tbd {
  color: rgba(255,34,0,.35);
  font-style: italic;
  letter-spacing: .08em;
  font-size: .92rem;
}

/* ============================================================
   黑胶唱片样式 - 已公布曲目
   ============================================================ */
.setlist-announced {
  background: linear-gradient(180deg, #F5DEB3 0%, #E8D4A0 100%);
  padding: 50px 20px 70px;
  margin: 40px 0 60px;
  border-radius: 0;
  position: relative;
}

.setlist-announced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    #8B2500 0px,
    #8B2500 8px,
    #A0522D 8px,
    #A0522D 10px,
    transparent 10px,
    transparent 18px,
    #8B2500 18px
  );
}

.setlist-announced::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    #8B2500 0px,
    #8B2500 8px,
    #A0522D 8px,
    #A0522D 10px,
    transparent 10px,
    transparent 18px,
    #8B2500 18px
  );
}

.vinyl-card {
  display: flex;
  flex-direction: column;
  margin: 50px auto;
  max-width: 900px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  transition: transform .3s ease;
  /* 透明大卡片 */
  min-height: 350px;
}

.vinyl-card:hover {
  transform: translateY(-3px);
}

/* 黑胶和播放器的组合容器 - 这是横线部分 */
.vinyl-combo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

/* 奇数行：黑胶在左边，文字贴右 */
.vinyl-card:nth-child(odd) {
  align-items: flex-end;
}

.vinyl-card:nth-child(odd) .vinyl-tag {
  text-align: right;
  justify-content: flex-end;
  padding-right: 28px;
  width: 480px;
}

.vinyl-card:nth-child(odd) .vinyl-combo {
  flex-direction: row;
  justify-content: flex-end;
  align-self: flex-end;
}

.vinyl-card:nth-child(odd) .vinyl-disc {
  position: relative;
  z-index: 3;
  margin-right: -60px;
}

.vinyl-card:nth-child(odd) .vinyl-player {
  text-align: right;
}

.vinyl-card:nth-child(odd) .vinyl-player .vinyl-title {
  text-align: right;
}

.vinyl-card:nth-child(odd) .vinyl-player .vinyl-desc {
  text-align: right;
}

/* 偶数行：黑胶在右边，文字贴左 */
.vinyl-card:nth-child(even) {
  align-items: flex-start;
}

.vinyl-card:nth-child(even) .vinyl-tag {
  text-align: left;
  justify-content: flex-start;
  padding-left: 28px;
  width: 480px;
  align-self: flex-start;
}

.vinyl-card:nth-child(even) .vinyl-combo {
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-self: flex-start;
}

.vinyl-card:nth-child(even) .vinyl-disc {
  position: relative;
  z-index: 3;
  margin-left: -60px;
}

.vinyl-card:nth-child(even) .vinyl-player {
  text-align: left;
}

.vinyl-card:nth-child(even) .vinyl-player .vinyl-title {
  text-align: left;
}

.vinyl-card:nth-child(even) .vinyl-player .vinyl-desc {
  text-align: left;
}

/* 黑胶唱片容器 - 比播放器大 */
.vinyl-disc {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #000 0%, #000 35%, #1a1a1a 36%, #0a0a0a 45%, #000 50%),
    repeating-conic-gradient(from 0deg, #000 0deg, #1a1a1a 2deg, #000 4deg);
  box-shadow:
    0 20px 50px rgba(0,0,0,.8),
    0 10px 30px rgba(0,0,0,.6),
    inset 0 0 50px rgba(0,0,0,.7),
    inset 0 -5px 15px rgba(0,0,0,.5);
  animation: vinyl-spin 12s linear infinite paused;
  /* 3D 厚度效果 */
  border: 8px solid #000;
}

.vinyl-disc {
  animation-play-state: running;
}

.vinyl-card:hover .vinyl-disc {
  animation-duration: 6s;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 唱片封面 */
.vinyl-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  background: #222;
  border: 4px solid #111;
  box-shadow:
    0 0 40px rgba(0,0,0,.9),
    inset 0 0 30px rgba(0,0,0,.6);
}

.vinyl-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 唱片中心孔 */
.vinyl-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
  border: 3px solid #1a1a1a;
  box-shadow:
    0 4px 12px rgba(0,0,0,.95),
    inset 0 2px 8px rgba(255,255,255,.08);
}

/* 播放器卡片 - 固定宽高，四个角都缺角的长方形 */
.vinyl-player {
  background: rgba(255, 248, 235, 0.95);
  border: 1px solid rgba(139, 69, 19, 0.3);
  padding: 22px 28px 18px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.2),
    inset 0 1px 3px rgba(255,255,255,.6);
  position: relative;
  z-index: 2;
  /* 固定宽度和高度 */
  width: 480px;
  min-height: 200px;
  flex-shrink: 0;
  /* 四个角都缺角 */
  clip-path: polygon(
    0 15px,
    15px 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px)
  );
}

/* 播放器内的标题 */
.vinyl-player .vinyl-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #3D2817;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.1);
  letter-spacing: 0.02em;
}

/* 播放器内的描述 - 使用龙藏体 */
.vinyl-player .vinyl-desc {
  font-size: 0.92rem;
  color: #6B5644;
  line-height: 1.6;
  margin: 0 0 15px 0;
  font-style: normal;
  font-weight: 400;
  font-family: 'Long Cang', cursive;
}

.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(139, 69, 19, 0.15);
}

.player-btn {
  background: transparent;
  border: none;
  color: #8B4513;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.player-btn:hover {
  background: rgba(139, 69, 19, 0.12);
  color: #654321;
  transform: scale(1.2);
}

.player-btn.play-btn {
  background: rgba(139, 69, 19, 0.18);
  color: #654321;
  font-size: 16px;
  width: 36px;
  height: 36px;
}

.player-btn.play-btn:hover {
  background: rgba(139, 69, 19, 0.28);
  transform: scale(1.15);
}

/* 标签在大卡片上部，紧贴横线 */
.vinyl-tag {
  font-size: 0.95rem;
  color: #8B4513;
  letter-spacing: 0.02em;
  line-height: 1.5;
  font-weight: 400;
  margin: 0 0 5px 0;
  z-index: 1;
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

/* 待猜曲目区域 */
.setlist-mystery {
  background: linear-gradient(180deg, #F5DEB3 0%, #E8D4A0 100%);
  padding: 50px 30px 60px;
  margin: 0;
  border-radius: 0;
  position: relative;
}

.setlist-mystery::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    #8B2500 0px,
    #8B2500 8px,
    #A0522D 8px,
    #A0522D 10px,
    transparent 10px,
    transparent 18px,
    #8B2500 18px
  );
}

.setlist-mystery::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: repeating-linear-gradient(
    90deg,
    #8B2500 0px,
    #8B2500 8px,
    #A0522D 8px,
    #A0522D 10px,
    transparent 10px,
    transparent 18px,
    #8B2500 18px
  );
}

/* 待猜曲目头部 */
.mystery-header {
  text-align: center;
  margin-bottom: 40px;
}

.mystery-intro {
  font-size: 1.1rem;
  color: #654321;
  margin-bottom: 8px;
  font-weight: 500;
}

.mystery-hashtag {
  font-size: 0.95rem;
  color: #8B4513;
  margin-bottom: 20px;
}

.mystery-reward {
  display: inline-block;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 30px;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.reward-star {
  color: #FFD700;
  font-size: 1.2rem;
  margin: 0 8px;
}

.reward-text {
  color: #654321;
  font-size: 1rem;
  font-weight: 500;
}

/* 图片叠加容器 */
.mystery-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 40px auto;
  background: transparent;
}

/* 占位元素 - 保持 1080x1440 比例 */
.mystery-image-placeholder {
  width: 100%;
  padding-bottom: 133.33%; /* 1440/1080 */
  position: relative;
}

/* 内容叠加层 - 在下层，有底色，使用百分比定位 */
.mystery-content-overlay {
  position: absolute;
  left: 3.2%;
  top: 31.48%;
  width: 94.3%;
  height: 55.21%;
  z-index: 1;
  background: rgba(255, 248, 240, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  /* padding 由 JS 动态设置 */
}

/* 背景图片 - 在上层，盖住内容 */
.mystery-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* 待猜卡片容器 */
.mystery-cards {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* gap 由 JS 动态设置 */
}

/* 昵称输入区域 - 所有尺寸由 JS 动态设置 */
.mystery-nickname {
  text-align: left;
  margin: 0;
  display: flex;
  align-items: center;
  /* gap 由 JS 动态设置 */
}

.mystery-nickname label {
  color: #654321;
  font-weight: 600;
  letter-spacing: 0.05em;
  /* font-size 由 JS 动态设置 */
}

.mystery-nickname input {
  border: none;
  border-bottom: 2px dashed rgba(139, 69, 19, 0.4);
  color: #EE0000;
  background: transparent;
  transition: border-color .3s ease;
  text-align: center;
  font-weight: 400;
  font-family: 'Ma Shan Zheng', cursive;
  /* padding, font-size, width, border-width 由 JS 动态设置 */
}

.mystery-nickname input:focus {
  outline: none;
  border-bottom-color: #EE0000;
}

.mystery-nickname input::placeholder {
  color: rgba(238, 0, 0, 0.3);
}

/* 单个待猜卡片 - 使用相对定位，不用 grid */
.mystery-card {
  background: rgba(255, 250, 245, 0.9);
  border: 2px solid rgba(139, 69, 19, 0.25);
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* padding, border-radius, border-width, height 由 JS 动态设置 */
}

.mystery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

.mystery-card-num {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  color: #8B4513;
  position: absolute;
  white-space: nowrap;
  /* font-size, left, top 由 JS 动态设置 */
}

.mystery-card-text {
  color: #3D2817;
  font-weight: 500;
  font-family: 'ZCOOL KuaiLe', cursive;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  /* font-size, left, top, width 由 JS 动态设置 */
}

/* 答案输入框 - 只有虚线下划线，使用 Ma Shan Zheng */
.mystery-card-answer {
  border: none;
  border-bottom: 2px dashed rgba(139, 69, 19, 0.4);
  color: #EE0000;
  background: transparent;
  transition: border-color .3s ease;
  text-align: center;
  font-weight: 400;
  font-family: 'Ma Shan Zheng', cursive;
  position: absolute;
  /* padding, font-size, width, border-width, right, top 由 JS 动态设置 */
}

.mystery-card-answer:focus {
  outline: none;
  border-bottom-color: #EE0000;
}

.mystery-card-answer::placeholder {
  color: rgba(238, 0, 0, 0.3);
  font-size: 0.95rem;
}

/* 底部标识 */
.mystery-footer {
  text-align: center;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.mystery-footer-icon {
  font-size: 2rem;
  color: #D2691E;
}

.mystery-footer-text {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #8B4513;
  letter-spacing: 0.05em;
}

/* 保存按钮区域 */
.mystery-actions {
  text-align: center;
  margin-top: 30px;
  padding-bottom: 20px;
}

.btn-save-image {
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
  transition: all .3s ease;
}

.btn-save-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
  background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
}

.btn-save-image:active {
  transform: translateY(0);
}

/* 响应式 */
@media (max-width: 768px) {
  .setlist-announced {
    padding: 40px 15px 50px;
    margin: 30px 0 40px;
  }

  .setlist-announced {
    padding: 40px 10px 50px;
  }

  .vinyl-card {
    padding: 0;
    margin: 35px auto;
    min-height: auto;
    align-items: center !important;
    max-width: 100%;
  }

  /* 移动端文字居中显示 */
  .vinyl-card:nth-child(odd) .vinyl-tag,
  .vinyl-card:nth-child(even) .vinyl-tag {
    text-align: center;
    justify-content: center;
    align-self: center !important;
    padding: 0 20px 8px;
    width: 100%;
    max-width: 340px;
  }

  .vinyl-combo {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }

  .vinyl-card:nth-child(odd) .vinyl-combo,
  .vinyl-card:nth-child(even) .vinyl-combo {
    flex-direction: column !important;
    justify-content: center !important;
  }

  .vinyl-card:nth-child(odd) .vinyl-disc,
  .vinyl-card:nth-child(even) .vinyl-disc {
    margin: 0 auto -70px auto;
    order: 1;
    z-index: 3;
  }

  .vinyl-card:nth-child(odd) .vinyl-player,
  .vinyl-card:nth-child(even) .vinyl-player {
    order: 2;
    padding: 80px 18px 16px;
    text-align: center;
    width: 90%;
    max-width: 340px;
    min-height: 160px;
  }

  .vinyl-card:nth-child(odd) .vinyl-player .vinyl-title,
  .vinyl-card:nth-child(odd) .vinyl-player .vinyl-desc,
  .vinyl-card:nth-child(even) .vinyl-player .vinyl-title,
  .vinyl-card:nth-child(even) .vinyl-player .vinyl-desc {
    text-align: center;
  }

  .vinyl-disc {
    width: 240px;
    height: 240px;
    border: 5px solid #000;
  }

  .vinyl-cover {
    width: 155px;
    height: 155px;
  }

  .vinyl-center {
    width: 45px;
    height: 45px;
  }

  .vinyl-player .vinyl-title {
    font-size: 1.4rem;
  }

  .vinyl-player .vinyl-desc {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .player-controls {
    gap: 10px;
    padding-top: 6px;
  }

  .player-btn {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .player-btn.play-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .mystery-intro {
    font-size: 1rem;
    padding: 0 15px;
  }

  .mystery-hashtag {
    font-size: 0.9rem;
    padding: 0 15px;
  }

  .mystery-reward {
    padding: 10px 20px;
  }

  .reward-text {
    font-size: 0.9rem;
  }

  .mystery-nickname {
    padding: 0 15px;
    flex-wrap: wrap;
  }

  .mystery-nickname label {
    font-size: 1rem;
  }

  .mystery-nickname input {
    width: calc(100% - 50px);
    max-width: 250px;
    font-size: 1.1rem;
  }

  .mystery-cards {
    padding: 0 10px;
  }

  .mystery-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 15px 18px;
    gap: 10px;
  }

  .mystery-card-num {
    font-size: 1.1rem;
    min-width: 40px;
    grid-row: 1;
  }

  .mystery-card-text {
    font-size: 0.95rem;
    grid-column: 2;
    grid-row: 1;
  }

  .mystery-card-answer {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    font-size: 1.3rem;
  }

  .mystery-footer-icon {
    font-size: 1.5rem;
  }

  .mystery-footer-text {
    font-size: 1.1rem;
  }

  .setlist-mystery {
    padding: 40px 15px 50px;
    margin: 0;
  }
}

/* ============================================================
   购票 & 链接区
   ============================================================ */
#links-section {
  text-align: center;
  padding-bottom: 110px;
}

.links-card {
  background: var(--card);
  border: 1px solid rgba(255,34,0,.18);
  border-radius: 18px;
  padding: 60px 40px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.links-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,34,0,.12) 0%, transparent 60%);
  pointer-events: none;
}
.links-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), var(--rose), var(--red), transparent);
}

.links-desc {
  color: rgba(255,232,232,.52);
  font-size: .95rem;
  line-height: 1.9;
  letter-spacing: .05em;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-top: 40px;
}

/* 按钮基础 */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 6px;
  font-family: 'Orbitron', monospace;
  font-size: .82rem;
  letter-spacing: .14em;
  text-decoration: none;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  transition: transform .28s, box-shadow .28s;
  cursor: pointer;
  border: none;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 50%);
  opacity: 0;
  transition: opacity .28s;
}
.btn-cta:hover::before { opacity: 1; }
.btn-cta:hover { transform: translateY(-3px); }
.btn-cta:active { transform: translateY(0); }

.btn-cta .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events: none;
}

/* 主按钮  →  深红→酒红渐变 */
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--crimson));
  color: #fff;
  box-shadow: 0 4px 22px rgba(255,34,0,.45), 0 0 50px rgba(139,0,0,.2);
  font-size: .95rem;
  padding: 20px 56px;
}
.btn-primary:hover {
  box-shadow: 0 8px 44px rgba(255,34,0,.7), 0 0 80px rgba(224,16,0,.4);
}

/* Ghost 金色 */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,170,0,.5);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(255,170,0,.12);
}
.btn-ghost:hover {
  background: rgba(255,170,0,.08);
  box-shadow: 0 0 30px rgba(255,170,0,.35);
  color: #fff;
}

/* Ghost 玫红 */
.btn-ghost-purple {
  background: transparent;
  border: 1px solid rgba(255,102,136,.5);
  color: var(--rose);
  box-shadow: 0 0 14px rgba(255,102,136,.12);
}
.btn-ghost-purple:hover {
  background: rgba(255,102,136,.08);
  box-shadow: 0 0 30px rgba(255,102,136,.35);
  color: #fff;
}

/* ============================================================
   开场宼言 Section  (#intro-section)
   ============================================================ */
#intro-section {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 60px;
}

/* 引号块 */
.intro-quote {
  max-width: 720px;
  margin: 0 auto 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* 装饰横线 */
.intro-deco-line {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), var(--red), var(--gold), transparent);
}

/* 正文一：普通色 */
.intro-body {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(.95rem, 2.2vw, 1.25rem);
  color: rgba(255, 232, 232, .62);
  letter-spacing: .08em;
  line-height: 1.9;
}

/* 正文二：高亮渐变 */
.intro-highlight {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(1rem, 2.5vw, 1.38rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--rose) 0%, #fff 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .06em;
  line-height: 1.85;
}

/* 演出信息块 */
.intro-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid rgba(238, 0, 0, .18);
  border-radius: 14px;
  padding: 32px 48px;
  max-width: 560px;
  margin: 0 auto;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.intro-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,34,0,.08) 0%, transparent 65%);
  pointer-events: none;
}
.intro-info::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), var(--rose), transparent);
}

.intro-info-label {
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  letter-spacing: .36em;
  color: var(--gold);
  text-shadow: var(--glow-gold);
}

.intro-info-venue {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: rgba(255, 232, 232, .85);
  letter-spacing: .06em;
}

.intro-sessions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.intro-session-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intro-session-tag {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,34,0,.5);
  color: var(--red-bright);
  background: rgba(255,34,0,.1);
}
.intro-session-time {
  font-family: 'Orbitron', monospace;
  font-size: clamp(.95rem, 2vw, 1.3rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,34,0,.8);
}
.intro-session-sep {
  color: var(--rose);
  opacity: .5;
  font-size: 1.1rem;
}

/* ============================================================
   主承宼言 Section  (#message-section)
   ============================================================ */
#message-section {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.message-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 40px;
  background: var(--card);
  border: 1px solid rgba(255, 102, 136, .18);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.message-card::before {
  content: '❝';
  position: absolute;
  top: -10px; left: 20px;
  font-size: 6rem;
  color: rgba(255, 102, 136, .08);
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}
.message-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
}

/* 主文 */
.message-text {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: .06em;
  line-height: 1.9;
  text-shadow: 0 0 22px rgba(255, 102, 136, .3);
}

/* 副文 */
.message-text-light {
  font-weight: 400;
  font-size: clamp(.92rem, 2vw, 1.12rem);
  color: rgba(255, 232, 232, .65);
  text-shadow: none;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .intro-info { padding: 24px 20px; }
  .intro-quote { margin-bottom: 36px; }
  .message-card { padding: 32px 20px; }
}

/* ============================================================
   悬浮信封角标 FAB（Hero 右下角）
   ============================================================ */
.letter-fab {
  /* 定位：fixed 全局悬浮，避免与静音按钮重叠（静音在 right:28px，FAB 在 right:90px 左移错开）*/
  position: fixed;
  bottom: 28px;
  right: 90px;   /* 静音按钮宽48px + 28px边距 + 14px间隔 = 90px */
  z-index: 200;  /* 与静音按钮同层级 */

  /* 外观：圆形红色封蜡风格 */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,80,30,.55);
  background: radial-gradient(circle at 38% 32%, #FF4400 0%, #CC1100 55%, #7A0000 100%);
  box-shadow:
    0 0 0 4px rgba(255,34,0,.18),
    0 6px 28px rgba(180,10,0,.65),
    0 0 50px rgba(255,34,0,.35);
  cursor: pointer;

  /* 内部布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  /* 晃动动画：持续提示用户有新信 */
  animation: fabShake 3.5s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s;
}
.letter-fab:hover {
  animation: none;
  transform: scale(1.12);
  box-shadow:
    0 0 0 5px rgba(255,80,30,.35),
    0 8px 36px rgba(200,10,0,.85),
    0 0 70px rgba(255,34,0,.5);
}
/* 信封图标 */
.letter-fab-icon {
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(255,230,210,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
  display: block;
}
/* NEW 红点徽章 */
.letter-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF2200;
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: .44rem;
  font-weight: 900;
  letter-spacing: .05em;
  padding: 2px 5px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,100,50,.7);
  box-shadow: 0 2px 8px rgba(200,0,0,.55);
  pointer-events: none;
  animation: badgePulse 1.8s ease-in-out infinite;
}
/* "来自绫的信"文字 tooltip */
.letter-fab-hint {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(20,0,0,.82);
  color: rgba(255,180,120,.9);
  font-family: 'Noto Serif SC', serif;
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,60,0,.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s .1s;
  backdrop-filter: blur(4px);
}
.letter-fab:hover .letter-fab-hint {
  opacity: 1;
}
/* 已读后隐藏 badge */
.letter-fab.read .letter-fab-badge {
  display: none;
}
/* 已读后停止晃动改为轻微呼吸 */
.letter-fab.read {
  animation: fabBreath 3s ease-in-out infinite;
}

/* 晃动 keyframes */
@keyframes fabShake {
  0%,100% { transform: rotate(0deg) scale(1); }
  8%       { transform: rotate(-12deg) scale(1.04); }
  16%      { transform: rotate(10deg) scale(1.04); }
  24%      { transform: rotate(-8deg) scale(1.02); }
  32%      { transform: rotate(6deg) scale(1.02); }
  40%      { transform: rotate(0deg) scale(1); }
}
@keyframes badgePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: .8; }
}
@keyframes fabBreath {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,34,0,.18), 0 6px 28px rgba(180,10,0,.65), 0 0 50px rgba(255,34,0,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(255,60,0,.28), 0 6px 36px rgba(200,10,0,.75), 0 0 70px rgba(255,34,0,.5); }
}

/* 移动端 FAB 缩小并贴角（静音按钮 right:28px，FAB 在其左边） */
@media (max-width: 480px) {
  .letter-fab {
    width: 52px;
    height: 52px;
    bottom: 22px;
    right: 88px;  /* 与静音按钮错开 */
  }
  .letter-fab-icon { font-size: 1.3rem; }
  .letter-fab-hint { display: none; }
}

/* ============================================================
   全屏信件遮罩 Modal
   ============================================================ */
.letter-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* 初始：隐藏，pointer-events 关闭 */
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.letter-modal.open {
  pointer-events: auto;
  opacity: 1;
}

/* 半透明黑色背景遮罩 */
.letter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,0,0,.88);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  cursor: pointer; /* 点击遮罩关闭 */
}

/* 舞台：信封居中显示，信纸展开后通过 fixed 居中覆盖信封 */
.letter-modal-stage {
  position: absolute;
  left: 50%;
  top: 50%;   /* 信封居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;

  /* 初始（关闭）：轻微偏下+透明 */
  transform: translate(-50%, -50%) translateY(30px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s ease;
  pointer-events: none;
}
.letter-modal.open .letter-modal-stage {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0px);
  pointer-events: auto;
}

/* 信纸内关闭按钮 — 位于信纸内容最底部，作为 .letter-inner 的最后一个子元素 */
.letter-close-inline {
  width: 100%;
  margin-top: 16px;
  padding: 10px 0;
  background: rgba(8,0,0,.6);
  border: 1px solid rgba(255,80,30,.4);
  border-radius: 16px;
  color: rgba(255,150,80,.75);
  font-family: 'Orbitron', monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  cursor: pointer;
  text-align: center;
  transition: all .25s;
  /* 初始隐藏，信纸展开动画完成后由 JS 显示 */
  opacity: 0;
  pointer-events: none;
}
.letter-close-inline.visible {
  opacity: 1;
  pointer-events: auto;
}
.letter-close-inline:hover {
  border-color: rgba(255,120,60,.8);
  color: rgba(255,190,110,1);
  background: rgba(25,4,0,.75);
  transform: scale(1.02);
}

/* 移动端 modal：信封320x220，居中 */
@media (max-width: 480px) {
  .letter-modal-stage {
    top: 50%;
    transform: translate(-50%, -50%) translateY(30px) !important;
  }
  .letter-modal.open .letter-modal-stage {
    transform: translate(-50%, -50%) translateY(0px) !important;
  }
}

/* ============================================================
   信封来信组件
   ============================================================ */
.envelope-wrap {
  /* 已被 modal-stage 替代，保留兼容性 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 0 40px;
}

/* ── 信封容器 ── */
.envelope {
  position: relative;
  width: 460px;
  height: 300px;  /* 信封本体高度，信纸会从这里弹出 */
  cursor: pointer;
  filter: drop-shadow(0 8px 32px rgba(255,34,0,.25));
  transition: filter .4s;
  perspective: 1000px;
  overflow: hidden;  /* 关键：裁掉信纸超出信封的部分 */
}
/* 打开后取消裁剪，信纸可以弹出 */
.envelope.opened {
  overflow: visible;
}
.envelope:hover { filter: drop-shadow(0 12px 48px rgba(255,34,0,.4)); }
.envelope.opened { cursor: default; }

/* ── 信封背面 ── */
.envelope-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1a0200 0%, #2e0400 50%, #1a0200 100%);
  border-radius: 4px 4px 8px 8px;
  border: 1px solid rgba(255,34,0,.3);
  z-index: 1;
}

/* ── 信封前面（封口盖以下的部分）── */
.envelope-front {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, #220300 0%, #180200 100%);
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(255,34,0,.25);
  border-top: none;
  z-index: 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.envelope-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,34,0,.06) 0%, transparent 60%);
  pointer-events: none;
}
/* 信封折线纹 */
.envelope-lines { display: flex; flex-direction: column; gap: 5px; width: 60%; opacity: .18; }
.env-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,100,50,.8), transparent); }

.envelope-address { text-align: center; }
.env-to {
  font-family: 'Noto Serif SC', serif;
  font-size: .92rem;
  color: rgba(255,200,170,.55);
  letter-spacing: .25em;
}

/* ── 上翻盖 ── */
.envelope-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  transform-origin: top center;
  transform: rotateX(0deg);
  /* 翻盖慢速打开：延迟等封蜡消失，duration 1.4s */
  transition: transform 1.4s cubic-bezier(.35,.05,.15,1) .5s, z-index 0s .5s;
  z-index: 5;
  /* 三角形剪裁 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, #2a0400 0%, #3d0600 45%, #220300 100%);
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(255,34,0,.3);
  /* 3D 翻盖需要背面不可见 */
  backface-visibility: hidden;
}
.flap-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,34,0,.08) 0%, transparent 60%);
}
/* 打开状态：翻盖向上翻转，且降低 z-index 让信纸显示在翻盖之上 */
.envelope.opened .envelope-flap {
  transform: rotateX(-178deg);
  z-index: 1;  /* 打开后沉到信纸后面 */
  transition: transform 1.4s cubic-bezier(.35,.05,.15,1) .5s, z-index 0s 1.9s;
}

/* ── 封蜡 ── */
.wax-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #FF5500, #CC1100 55%, #7A0000);
  box-shadow:
    0 0 0 3px rgba(255,34,0,.4),
    0 0 0 6px rgba(255,34,0,.12),
    0 4px 20px rgba(200,10,0,.6),
    0 0 40px rgba(255,34,0,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform .25s, box-shadow .25s, opacity .5s;
  animation: waxPulse 2.8s ease-in-out infinite;
}
.wax-seal:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow:
    0 0 0 3px rgba(255,80,0,.6),
    0 0 0 8px rgba(255,34,0,.2),
    0 6px 30px rgba(200,10,0,.8),
    0 0 60px rgba(255,34,0,.5);
  animation: none;
}
.wax-seal.breaking {
  animation: waxBreak .5s ease forwards;
}
/* logo 图片替换原文字 */
.wax-seal-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  /* 白底logo贴在红色封蜡上：混合模式让白色透明，红色logo叠加蜡底 */
  mix-blend-mode: multiply;
  filter: brightness(1.15) contrast(1.1);
  /* 封蜡质感：轻微浮雕阴影 */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) brightness(1.1);
}
.wax-seal-hint {
  font-family: 'Orbitron', monospace;
  font-size: .36rem;
  letter-spacing: .1em;
  color: rgba(255,220,190,.6);
  pointer-events: none;
  margin-top: -2px;
  position: absolute;
  bottom: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

@keyframes waxPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,34,0,.4), 0 0 0 6px rgba(255,34,0,.12), 0 4px 20px rgba(200,10,0,.6), 0 0 40px rgba(255,34,0,.3); }
  50%      { box-shadow: 0 0 0 4px rgba(255,80,0,.55), 0 0 0 10px rgba(255,34,0,.18), 0 4px 28px rgba(200,10,0,.7), 0 0 60px rgba(255,34,0,.45); }
}
@keyframes waxBreak {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  15%  { transform: translate(-50%, -50%) scale(1.15) rotate(-5deg); }
  30%  { transform: translate(-50%, -50%) scale(1.22) rotate(6deg); }
  45%  { transform: translate(-50%, -50%) scale(1.05) rotate(-10deg); opacity: .9; }
  65%  { transform: translate(-50%, -50%) scale(.65) rotate(14deg); opacity: .5; }
  80%  { transform: translate(-50%, -50%) scale(.3) rotate(-5deg); opacity: .2; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(20deg); opacity: 0; }
}
/* 封蜡碎裂时的光效 */
@keyframes waxGlow {
  0%   { box-shadow: 0 0 0 3px rgba(255,34,0,.4), 0 0 0 6px rgba(255,34,0,.12), 0 4px 20px rgba(200,10,0,.6), 0 0 40px rgba(255,34,0,.3); }
  50%  { box-shadow: 0 0 0 8px rgba(255,120,0,.7), 0 0 0 20px rgba(255,80,0,.2), 0 4px 40px rgba(255,80,0,1), 0 0 80px rgba(255,80,0,.7); }
  100% { box-shadow: 0 0 0 3px rgba(255,34,0,.4), 0 0 0 6px rgba(255,34,0,.12), 0 4px 20px rgba(200,10,0,.6), 0 0 40px rgba(255,34,0,.3); }
}
.wax-seal.breaking {
  animation: waxBreak .7s cubic-bezier(.3,.7,.6,1) forwards !important;
}

/* ── 信纸 ──
   三阶段动画（信纸在 .envelope-wrap 内，独立于信封）：
   阶段0 初始：信纸折叠态（scaleY极小），定位在信封顶部，完全不可见
   阶段1 抽出：翻盖翻开后，信纸（折叠态）从信封口向上抽出一小段（translateY负）
   阶段2 展开：到位后 scaleY 从折叠值展开到1，内容随之显现
   —————————————————————————————— */

/* 信纸容器：绝对定位在 .envelope 内
   核心思路：
   1. 初始：信纸折叠为扁条，在信封底部，被 overflow:hidden 完全裁剪（不可见）
   2. pulling：.envelope 切换为 overflow:visible，信纸 translateY 向上抽出信封口（折叠态）
   3. unfolding：在抽出位置 scaleY 从顶部向下展开 */
.letter {
  /* 绝对定位，相对 .envelope（460px × 300px） */
  position: absolute;
  left: 4%;
  right: 4%;
  /* 信纸高度：比信封高，可容纳全部信件内容 */
  height: 380px;
  /* 初始：信纸顶部贴信封顶部，scaleY 从顶部向下折叠
     由于 height:380px 且 top:0，信纸底部会超出信封（被 overflow:hidden 裁掉）
     scaleY(0.04) 时：信纸只有 380*0.04≈15px 高，完全在信封内部顶部 */
  top: 0;
  /* 折叠变换原点在顶部，展开时从顶部向下 */
  transform-origin: top center;
  /* 初始折叠：扁条，完全被 overflow:hidden 裁剪，不可见 */
  transform: scaleY(0.04);
  background: linear-gradient(170deg, #fdf6ee 0%, #f5e8d8 100%);
  border-radius: 4px 4px 6px 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 2px 8px rgba(180,60,0,.15);
  overflow: hidden;
  /* z-index 在背面和翻盖之间（翻盖 z-index:5，前面 z-index:3） */
  z-index: 2;
  /* 动画控制类加上后才有过渡 */
  transition: none;
  pointer-events: none;
}
.letter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(200,150,100,.18) 27px,
    rgba(200,150,100,.18) 28px
  );
  pointer-events: none;
}

/* 阶段1：added class "pulling" — 信纸（折叠态）从信封口向上抽出
   translateY(-360px)：信纸顶部从 top:0 移到 -360px 处（信封顶部上方360px）
   此时折叠，只有15px高，视觉上像一张折叠的纸从信封口探出 */
.letter.pulling {
  z-index: 10;                              /* 高于信封所有层 */
  transform: translateY(-380px) scaleY(0.04);
  transition:
    transform 1.2s cubic-bezier(.25,.7,.3,1) 0s,
    z-index 0s 0s;
}

/* 阶段2：added class "unfolding" — 信纸展开并 fixed 居中
   信纸从 envelope 中离脱，变为 fixed 居中，压住信封 */
.letter.unfolding {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scaleY(1) !important;
  width: 460px;
  z-index: 9500;
  transition:
    transform 1.0s cubic-bezier(.2,.9,.3,1) 0s,
    left 0.8s cubic-bezier(.2,.9,.3,1) 0s,
    top 0.8s cubic-bezier(.2,.9,.3,1) 0s;
}

/* 移动端信纸宽度调整 */
@media (max-width: 480px) {
  .letter.unfolding {
    width: 320px;
  }
}

/* 关闭：added class "folding" — 信纸折叠收起（从 fixed 居中回到信封上方） */
.letter.folding {
  position: absolute !important;
  left: 4% !important;
  top: 0 !important;
  width: auto;
  z-index: 10;
  transform: translateY(-380px) scaleY(0.04) !important;
  transition:
    transform 0.5s cubic-bezier(.7,.0,.9,.3) 0s;
}

/* 完全关闭后复位：回到初始状态（在信封顶部，被 overflow 裁剪） */
.letter.reset {
  z-index: 2;
  transform: scaleY(0.04);
  transition: none;
}

/* 关闭时翻盖也要加速合上 */
.envelope.closing .envelope-flap {
  transition: transform 0.9s cubic-bezier(.4,0,.8,.6) 0.1s, z-index 0s 0s;
}

/* 信纸内容区 */
.letter-inner {
  position: relative;
  z-index: 1;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* 内容初始不可见 */
  opacity: 0;
  transform: translateY(6px);
}
/* 展开后内容淡入 */
.letter.unfolding .letter-inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}
/* 各行依次浮现 */
.letter-inner > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.letter.unfolding .letter-inner > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.7s; }
.letter.unfolding .letter-inner > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.85s; }
.letter.unfolding .letter-inner > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.0s; }
.letter.unfolding .letter-inner > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.15s; }
.letter.unfolding .letter-inner > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 1.3s; }
.letter.unfolding .letter-inner > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 1.5s; }
/* 注意：第7个子元素（关闭按钮）opacity 由 .visible 类独立控制，不在此处覆盖 */

.letter-deco-top {
  font-family: 'Orbitron', monospace;
  font-size: .52rem;
  letter-spacing: .2em;
  color: rgba(180,60,20,.5);
}
.letter-divider {
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,80,30,.3), transparent);
}
.letter-body {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #3a0800;
  line-height: 1.9;
  text-align: center;
  letter-spacing: .06em;
}
.letter-body-light {
  font-weight: 400;
  color: #5a1a00;
  font-size: .9rem;
}
/* 信纸底部：日期左下角 + 签名右下角 */
.letter-footer {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 4px;
}
.letter-date {
  font-family: 'Orbitron', monospace;
  font-size: .58rem;
  line-height: 1.7;
  letter-spacing: .12em;
  color: rgba(150,50,10,.55);
  text-align: left;
}
.letter-sign {
  width: 120px;
  opacity: .9;
  filter: drop-shadow(0 2px 6px rgba(180,0,0,.2));
  mix-blend-mode: multiply;
  flex-shrink: 0;
}

/* ── 收起信封按钮 ──
   z-index: 1100，低于信纸(9500)，信纸展开后被完全拦戡（不可见、不可点） */
.envelope-close-btn {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;   /* 低于信纸 z:9500，信纸展开后自动被拦戡 */
  padding: 10px 32px;
  background: rgba(8,0,0,.8);
  border: 1px solid rgba(255,100,50,.5);
  border-radius: 24px;
  color: rgba(255,150,80,.8);
  font-family: 'Orbitron', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.envelope-close-btn:hover {
  border-color: rgba(255,120,60,.9);
  color: rgba(255,190,110,1);
  background: rgba(25,4,0,.9);
  transform: translateX(-50%) scale(1.05);
}

/* ── 底部提示文字 ── */
.envelope-hint {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .28em;
  color: rgba(255,150,80,.45);
  text-align: center;
  animation: hintFade 2s ease-in-out infinite;
  transition: opacity .4s;
}
.envelope-hint.hidden { opacity: 0; pointer-events: none; }
@keyframes hintFade {
  0%,100% { opacity: .45; }
  50%      { opacity: .85; }
}

/* ── 移动端 ── */
@media (max-width: 480px) {
  .envelope { width: 320px; height: 220px; }
  /* 信纸用 left:4% right:4% 相对信封定位，无需固定宽度 */
  .wax-seal { width: 58px; height: 58px; }
  .wax-seal-logo { width: 44px; height: 44px; }
  .letter-body { font-size: .88rem; }
  .letter-sign { width: 110px; }
  .letter-inner { padding: 20px 18px 16px; gap: 10px; }
  .envelope-wrap { scroll-margin-top: 20px; }
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid rgba(255,34,0,.12);
  color: rgba(255,232,232,.22);
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
}
footer a {
  color: rgba(255,102,136,.38);
  text-decoration: none;
  transition: color .25s;
}
footer a:hover { color: var(--rose); }
.footer-sub {
  margin-top: 8px;
  opacity: .6;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glitchReveal {
  0%   { opacity: 0; transform: skewX(-8deg) translateX(-12px); }
  60%  { opacity: 1; transform: skewX(2deg) translateX(4px); }
  100% { opacity: 1; transform: skewX(0) translateX(0); }
}
@keyframes glitch1 {
  0%,88%,100% { transform: none; opacity: 0; }
  89% { transform: translateX(-5px); opacity: .7; }
  92% { transform: translateX(5px);  opacity: .5; }
  95% { transform: translateX(-2px); opacity: .25; }
}
@keyframes glitch2 {
  0%,85%,100% { transform: none; opacity: 0; }
  86% { transform: translateX(4px);  opacity: .6; }
  90% { transform: translateX(-4px); opacity: .4; }
  93% { transform: translateX(2px);  opacity: .15; }
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}
@keyframes colonBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: .18; }
}
@keyframes numFlip {
  0%   { transform: translateY(-100%); opacity: 0; }
  55%  { transform: translateY(8%);    opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes rippleAnim {
  to { transform: scale(4.5); opacity: 0; }
}

/* ============================================================
   火焰 Canvas（固定底部）
   ============================================================ */
#flame-canvas {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
  z-index: 9998; /* 在樱花层下面 */
}

/* ============================================================
   双倒计时布局  — 纵向，日场在上夜场在下，每行天时分秒一行
   ============================================================ */
.dual-countdown {
  display: flex;
  flex-direction: column;    /* 垂直堆叠 */
  align-items: center;
  gap: 36px;
}

.countdown-block {
  display: flex;
  flex-direction: row;       /* 徽章 + 数字横向排列 */
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 860px;
}

/* 场次徽章  — 固定宽度竖排标签，放在数字行左侧 */
.countdown-session-badge {
  font-family: 'Orbitron', monospace;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .18em;
  padding: 10px 18px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-align: center;
  min-width: 120px;
}
.countdown-session-badge.day {
  background: linear-gradient(135deg, rgba(255,34,0,.15), rgba(255,170,0,.1));
  border: 1px solid rgba(255,34,0,.5);
  color: #fff;
  text-shadow: 0 0 12px rgba(255,34,0,.8);
  box-shadow: 0 0 20px rgba(255,34,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
.countdown-session-badge.night {
  background: linear-gradient(135deg, rgba(139,0,0,.2), rgba(255,102,136,.08));
  border: 1px solid rgba(255,102,136,.5);
  color: #fff;
  text-shadow: 0 0 12px rgba(255,102,136,.8);
  box-shadow: 0 0 20px rgba(255,102,136,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
/* 徽章扫光效果 */
.countdown-session-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: badgeSweep 3s ease-in-out infinite;
}
@keyframes badgeSweep {
  0%   { left: -100%; }
  50%  { left: 140%; }
  100% { left: 140%; }
}

/* 夜场卡片特有样式 */
.night-card {
  border-color: rgba(255,102,136,.35) !important;
  box-shadow: 0 0 18px rgba(255,102,136,.55), 0 0 55px rgba(255,68,136,.25), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.night-card::before {
  background: linear-gradient(135deg, rgba(255,102,136,.08), transparent 60%) !important;
}
.night-card::after {
  background: linear-gradient(90deg, transparent, var(--rose), transparent) !important;
}
.night-card .countdown-number {
  text-shadow: 0 0 22px rgba(255,102,136,.9), 0 0 60px rgba(255,68,136,.45) !important;
}
.night-card .countdown-label {
  color: var(--rose) !important;
}

.night-colon {
  color: var(--gold) !important;
  text-shadow: var(--glow-gold) !important;
}

/* 两行之间的分隔线 */
.dual-countdown-sep {
  width: 100%;
  max-width: 860px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,34,0,.3), rgba(255,102,136,.2), transparent);
  align-self: center;
}

/* 倒计时下的地点 */
.countdown-location {
  margin-top: 10px;
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  letter-spacing: .22em;
  color: rgba(255,170,0,.5);
}

/* ============================================================
   音乐轮播卡片
   ============================================================ */
.music-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.music-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 20px 4px 28px;
  flex: 1;
}
.music-carousel::-webkit-scrollbar { display: none; }

/* 轮播箭头 */
.mc-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(28,0,0,.75);
  border: 1px solid rgba(255,34,0,.45);
  color: var(--red);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.mc-arrow:hover {
  background: rgba(255,34,0,.18);
  box-shadow: var(--glow-red);
  transform: scale(1.1);
}

/* 单张歌曲卡片 */
.mc-track {
  flex-shrink: 0;
  width: 160px;
  background: var(--card);
  border: 1px solid rgba(255,34,0,.22);
  border-radius: 16px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  scroll-snap-align: center;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.mc-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,34,0,.06), transparent 60%);
  pointer-events: none;
}
.mc-track:hover {
  border-color: rgba(255,34,0,.55);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(255,34,0,.25);
}
.mc-track.active {
  border-color: var(--red);
  box-shadow: var(--glow-red), 0 8px 32px rgba(255,34,0,.3);
  transform: translateY(-6px) scale(1.03);
}
.mc-track.active::after {
  content: '▶';
  position: absolute;
  top: 10px; right: 12px;
  font-size: .65rem;
  color: var(--red);
  text-shadow: var(--glow-red);
  animation: playPulse 1.4s ease infinite;
}
@keyframes playPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

/* 黑胶碟子 */
.mc-disc {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a0000, #0a0000);
  border: 2px solid rgba(255,34,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 2s linear;
}
.mc-track.active .mc-disc {
  animation: spinDisc 8s linear infinite;
  border-color: var(--red);
  box-shadow: 0 0 20px rgba(255,34,0,.5);
}
@keyframes spinDisc {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* 碟面纹路 */
.mc-disc::before {
  content: '';
  position: absolute;
  width: 70%; height: 70%;
  border-radius: 50%;
  border: 1px solid rgba(255,34,0,.15);
  box-shadow: 0 0 0 6px rgba(255,34,0,.06), 0 0 0 12px rgba(255,34,0,.04);
}

.mc-disc-inner {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a0000, #060000);
  border: 1.5px solid rgba(255,34,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.mc-disc-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-disc-num {
  font-family: 'Orbitron', monospace;
  font-size: .6rem;
  color: var(--rose);
  text-shadow: 0 0 8px rgba(255,102,136,.8);
}

.mc-title {
  font-family: 'Noto Serif SC', serif;
  font-size: .88rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mc-track.active .mc-title {
  color: var(--red-bright);
  text-shadow: 0 0 12px rgba(255,34,0,.7);
}
.mc-artist {
  font-size: .72rem;
  color: rgba(255,232,232,.5);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mc-duration {
  font-family: 'Orbitron', monospace;
  font-size: .65rem;
  color: var(--gold);
  letter-spacing: .1em;
}

/* 播放器控制条样式已移除（仅展示轮播卡片）*/

/* ============================================================
   响应式 — 移动端全面适配
   ============================================================ */

/* ----- 768px 平板以下 ----- */
@media (max-width: 768px) {
  /* Hero */
  #hero { min-height: 100svh; }
  .hero-content { padding: 0 20px; }
  .hero-title-main { font-size: clamp(2.2rem, 10vw, 4rem); }
  .hero-title-sub  { font-size: clamp(.8rem, 3.5vw, 1.4rem); }
  .hero-date       { font-size: clamp(.85rem, 3.5vw, 1.2rem); }
  .hero-venue      { font-size: clamp(.6rem, 2.5vw, .85rem); letter-spacing: .1em; }
  .hero-sessions   { gap: 8px; }
  .session-time    { font-size: clamp(.9rem, 4vw, 1.3rem); }

  /* 倒计时 */
  .countdown-block { flex-direction: column; gap: 14px; }
  .countdown-session-badge { align-self: center; }
  .dual-countdown  { gap: 28px; }
  .countdown-number { font-size: clamp(1.8rem, 10vw, 3.2rem); }

  /* 轮播卡片 */
  .mc-track { width: 140px; }
  .mc-disc  { width: 78px; height: 78px; }
  .mc-arrow { width: 36px; height: 36px; font-size: 1.5rem; }
}

/* ----- 480px 手机 ----- */
@media (max-width: 480px) {
  /* 通用 section 间距 */
  .content-section { padding: 60px 16px; }

  /* Hero */
  .hero-subtitle-top { font-size: .6rem; letter-spacing: .3em; }
  .hero-title-main { font-size: clamp(2rem, 12vw, 3.2rem); }
  .hero-glow-left, .hero-glow-right { display: none; } /* 小屏去掉光晕减少性能 */
  .hero-scroll-hint { display: none; }

  /* 性能优化：移动端关闭 backdrop-filter（触发合成层，耗 GPU） */
  .countdown-card,
  .setlist-item,
  .links-card,
  .mute-btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* 关闭不必要的 will-change */
  .hero-bg { will-change: auto; }

  /* 倒计时 */
  .countdown-card { min-width: 56px; padding: 12px 6px 8px; }
  .countdown-wrapper { gap: 5px; }
  .countdown-colon { font-size: clamp(1.4rem, 6vw, 2.2rem); padding-bottom: 16px; }
  .countdown-session-badge { font-size: .72rem; min-width: 100px; padding: 8px 12px; }
  .countdown-number { font-size: clamp(1.5rem, 8vw, 2.5rem); }

  /* 曲目卡片 */
  .mc-track { width: 128px; padding: 16px 12px 14px; }
  .mc-disc  { width: 70px; height: 70px; }
  .mc-arrow { width: 30px; height: 30px; font-size: 1.2rem; }
  .music-carousel { gap: 12px; }

  /* 曲目列表 */
  .setlist-grid { grid-template-columns: 1fr; }

  /* 按钮组 */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-cta { text-align: center; }
  .btn-primary { padding: 16px 28px; font-size: .82rem; }

  /* 链接区 */
  .links-card { padding: 32px 16px; border-radius: 14px; }

  /* footer */
  footer { padding: 28px 16px; }
  footer p { font-size: .6rem; }
}

/* ----- 640px 中间值 ----- */
@media (max-width: 640px) {
  .links-card { padding: 40px 20px; }
  .btn-primary { padding: 16px 32px; font-size: .8rem; }
  .content-section { padding: 72px 18px; }
}

/* ============================================================
   开票倒计时区域
   ============================================================ */
#ticket-countdown-section {
  text-align: center;
  position: relative;
}

/* Tag 金色变蓝白（区分演唱会倒计时） */
.ticket-tag {
  color: #00e5ff !important;
  border-color: rgba(0,229,255,.4) !important;
  text-shadow: 0 0 14px rgba(0,229,255,.6);
}

/* 开票日期提示行 */
.ticket-date-hint {
  margin-top: 10px;
  font-family: 'Orbitron', monospace;
  font-size: .82rem;
  letter-spacing: .28em;
  color: rgba(255,170,0,.75);
  text-shadow: var(--glow-gold);
}

/* 倒计时整体容器 */
.ticket-countdown-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.ticket-countdown-inner {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
}

/* 单格 — 青蓝色系，与演唱会倒计时区分 */
.ticket-cd-card {
  position: relative;
  background: rgba(0, 28, 36, 0.72);
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 10px;
  padding: 22px 20px 12px;
  min-width: 88px;
  text-align: center;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 18px rgba(0,229,255,.35),
    0 0 55px rgba(0,180,220,.15),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  flex: 1;
}
.ticket-cd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,229,255,.06), transparent 60%);
  pointer-events: none;
}
.ticket-cd-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
}

.ticket-cd-number {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 22px rgba(0,229,255,.9),
    0 0 60px rgba(0,200,220,.45);
  line-height: 1;
  display: block;
}
.ticket-cd-number.flip {
  animation: numFlip .28s ease;
}

.ticket-cd-label {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .32em;
  color: #00e5ff;
  margin-top: 10px;
  display: block;
}

/* 冒号 — 金色 */
.ticket-cd-colon {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  animation: colonBlink 1s ease infinite;
  padding-bottom: 22px;
  user-select: none;
}

/* 已开票后显示的横幅 */
.ticket-on-sale-banner {
  display: none;
  font-family: 'Orbitron', monospace;
  font-size: clamp(1rem, 3vw, 1.6rem);
  letter-spacing: .25em;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  padding: 18px 0 40px;
  animation: glow-pulse 1.8s ease infinite;
}
@keyframes glow-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* ── 渠道选择区 ── */
.ticket-channels {
  text-align: center;
}

.ticket-channels-label {
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  letter-spacing: .32em;
  color: rgba(255,232,232,.35);
  margin-bottom: 24px;
}

/* 哔哩哔哩按钮 — 粉蓝色 */
.btn-channel-bili {
  background: linear-gradient(135deg, #00aeec, #0088cc);
  color: #fff;
  box-shadow: 0 4px 22px rgba(0,174,236,.4), 0 0 50px rgba(0,136,204,.2);
  font-size: .88rem;
  padding: 18px 44px;
}
.btn-channel-bili:hover {
  box-shadow: 0 8px 40px rgba(0,174,236,.65), 0 0 70px rgba(0,136,204,.35);
}

/* 大麦网按钮 — 纯图片，无底色 */
.btn-channel-damai {
  background: transparent;
  border: 1px solid rgba(255,107,0,.35);
  box-shadow: 0 4px 22px rgba(255,107,0,.15);
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-channel-damai:hover {
  border-color: rgba(255,107,0,.7);
  box-shadow: 0 6px 32px rgba(255,107,0,.35);
  background: rgba(255,107,0,.06);
}

/* 按钮内图标 */
.channel-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.channel-icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  font-size: .9rem;
  font-weight: 900;
  font-family: 'Noto Serif SC', serif;
  flex-shrink: 0;
}

/* 大麦 Logo 图片 — 填满按钮，无底色 */
.damai-logo {
  height: 44px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .ticket-cd-card { min-width: 70px; padding: 16px 12px 10px; }
  .ticket-cd-number { font-size: clamp(2rem, 10vw, 3.5rem); }
  .ticket-cd-colon  { font-size: clamp(1.6rem, 6vw, 2.8rem); padding-bottom: 16px; }
}

@media (max-width: 480px) {
  .ticket-cd-card { min-width: 54px; padding: 12px 6px 8px; }
  .ticket-cd-number { font-size: clamp(1.5rem, 8vw, 2.4rem); }
  .ticket-cd-colon  { font-size: clamp(1.3rem, 5.5vw, 2rem); padding-bottom: 14px; }
  .ticket-cd-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .ticket-channels .btn-row { flex-direction: column; align-items: stretch; }
  .btn-channel-bili,
  .btn-channel-damai { padding: 16px 24px; font-size: .8rem; text-align: center; justify-content: center; }
}

/* ============================================================
   演出状态横幅（双倒计时区）
   ============================================================ */
.concert-status-banner {
  display: none;
  text-align: center;
  padding: 32px 24px 40px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 进行中 — 红色发光脉冲 */
.concert-status-live {
  display: flex !important;
}
.concert-status-live .cstatus-emoji {
  font-size: 2.8rem;
  animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.2); opacity: .7; }
}
.concert-status-live .cstatus-main {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: .18em;
  color: #fff;
  text-shadow:
    0 0 22px rgba(255,34,0,.9),
    0 0 60px rgba(255,34,0,.5);
}
.concert-status-live .cstatus-sub {
  font-family: 'Orbitron', monospace;
  font-size: .75rem;
  letter-spacing: .28em;
  color: rgba(255,102,136,.65);
}

/* 已结束 — 玫金感谢色 */
.concert-status-ended {
  display: flex !important;
}
.concert-status-ended .cstatus-emoji {
  font-size: 3rem;
  animation: roseFall 3s ease infinite;
}
@keyframes roseFall {
  0%,100% { transform: translateY(0) rotate(-5deg); opacity: 1; }
  50%     { transform: translateY(10px) rotate(5deg); opacity: .7; }
}
.concert-status-ended .cstatus-main {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--rose) 0%, var(--red) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .08em;
}
.concert-status-ended .cstatus-sub {
  font-family: 'Orbitron', monospace;
  font-size: .72rem;
  letter-spacing: .32em;
  color: rgba(255,170,0,.5);
}

/* ============================================================
   友情链接区
   ============================================================ */
#links-section { text-align: center; padding-bottom: 100px; }

.friend-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.friend-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 28px 40px;
  background: var(--card);
  border: 1px solid rgba(255,34,0,.15);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  transition: border-color .3s, box-shadow .3s, transform .3s;
  min-width: 180px;
}
.friend-link-item:hover {
  border-color: rgba(255,34,0,.45);
  box-shadow: 0 0 28px rgba(255,34,0,.15);
  transform: translateY(-4px);
}

/* vsinger logo — 白色图片，直接用 */
.vsinger-logo {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  /* 白色 logo 直接显示在深色背景上 */
  filter: drop-shadow(0 0 8px rgba(255,255,255,.15));
  transition: filter .3s;
}
.friend-link-item:hover .vsinger-logo {
  filter: drop-shadow(0 0 14px rgba(255,100,136,.5));
}

/* VOCALOIDproject 文字链接 */
.friend-link-text {
  font-family: 'Orbitron', monospace;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: rgba(255,232,232,.75);
  transition: color .3s;
}
.friend-link-item:hover .friend-link-text {
  color: var(--rose);
  text-shadow: var(--glow-rose);
}

.friend-link-label {
  font-family: 'Orbitron', monospace;
  font-size: .62rem;
  letter-spacing: .28em;
  color: rgba(255,170,0,.45);
}

@media (max-width: 480px) {
  .friend-links { gap: 16px; }
  .friend-link-item { padding: 20px 28px; min-width: 140px; }
  .vsinger-logo { height: 28px; }
}

/* 小标签链接行 */
.friend-links-small {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.fl-tag {
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  color: rgba(255, 232, 232, .45);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(238, 0, 0, .12);
  border-radius: 4px;
  background: rgba(28, 0, 0, .4);
  transition: color .25s, border-color .25s, box-shadow .25s;
  white-space: nowrap;
}
.fl-tag:hover {
  color: var(--rose);
  border-color: rgba(255, 102, 136, .4);
  box-shadow: 0 0 12px rgba(255, 102, 136, .15);
}