/* ==========================================================================
   menu_rich.css v2 — 滿版圖按鈕 + 浮雕文字 (高對比)
   ========================================================================== */

body { background: linear-gradient(135deg, #1a1530 0%, #3D2D4D 40%, #FFE4D6 100%) !important; }
#homeView, #hallView { background: transparent; }

/* ===== 首頁 header ===== */
.home-header { color: white; }
.home-header h1 {
  background: linear-gradient(135deg, #FFD166, #FF6B9D, #C77DFF) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-header .tagline { color: rgba(255,255,255,.9) !important; }

/* ===========================================================================
   12 館 hall-card：滿版圖背景 + 浮雕文字
   =========================================================================== */
.hall-card.hall-rich {
  /* 滿版圖背景 (背景圖在 .hall-thumb 上，外殼純 hall color 漸層 fallback) */
  background: linear-gradient(135deg, var(--card-color), var(--card-color2)) !important;
  color: white;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.hall-card.hall-rich:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 24px 56px rgba(0,0,0,.5);
}
.hall-card.hall-rich::before { display: none; }

/* 滿版圖層（取代 thumb） */
.hall-card.hall-rich .hall-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  filter: saturate(1.1) contrast(1.05);
  z-index: 0;
}
/* 下方暗化漸層讓文字浮雕清楚 */
.hall-card.hall-rich .hall-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.85) 100%);
}

/* 內容浮在圖上方 */
.hall-card.hall-rich > * { position: relative; z-index: 2; }
.hall-card.hall-rich > .hall-thumb { z-index: 0; }

.hall-card.hall-rich .hall-no {
  position: absolute; top: 14px; right: 14px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  color: white; padding: 5px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 900; letter-spacing: .15em;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 3;
}
.hall-card.hall-rich .hall-emoji {
  position: absolute; top: 14px; left: 16px;
  font-size: 56px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6))
          drop-shadow(0 0 16px rgba(255,255,255,.2));
  z-index: 3;
  animation: hallEmojiBob 3s ease-in-out infinite;
}
@keyframes hallEmojiBob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.hall-card.hall-rich .hall-name {
  position: absolute; left: 18px; right: 18px; bottom: 60px;
  font-size: 26px; font-weight: 900;
  letter-spacing: 0.02em;
  color: white;
  /* 浮雕效果：白色 + 黑色雙層陰影 */
  text-shadow:
    0 1px 0 rgba(255,255,255,.4),
    0 2px 0 rgba(255,255,255,.2),
    0 3px 6px rgba(0,0,0,.7),
    0 0 20px rgba(0,0,0,.5);
  z-index: 3;
}
.hall-card.hall-rich .hall-tagline {
  position: absolute; left: 18px; right: 18px; bottom: 36px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  line-height: 1.5;
  z-index: 3;
  /* 限制 2 行 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hall-card.hall-rich .hall-host {
  position: absolute; left: 18px; bottom: 12px;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  color: white; border-radius: 10px;
  padding: 4px 10px; font-size: 11px; font-weight: 800;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 3;
}

/* ===========================================================================
   ep-card 滿版圖按鈕 + 浮雕文字
   =========================================================================== */
.hall-header { color: white; }
.hall-header #hallTitle { color: white; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hall-header .tagline { color: rgba(255,255,255,.9) !important; }
.hall-header .back-btn { background: rgba(255,255,255,.2); color: white; border: 1px solid rgba(255,255,255,.3); }

.ep-card.ep-rich {
  background: linear-gradient(135deg, var(--ep-color), var(--ep-color2)) !important;
  color: white;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  min-height: 300px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.ep-card.ep-rich:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.ep-card.ep-rich.coming { opacity: 0.45; filter: grayscale(0.5); cursor: not-allowed; }

/* 滿版圖背景 (用 .ep-thumb 鋪滿) */
.ep-card.ep-rich .ep-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  filter: saturate(1.1) contrast(1.05);
  z-index: 0;
}
.ep-card.ep-rich .ep-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 50%, rgba(0,0,0,.65) 80%, rgba(0,0,0,.9) 100%);
}

.ep-card.ep-rich > * { position: relative; z-index: 2; }
.ep-card.ep-rich > .ep-thumb { z-index: 0; }

.ep-card.ep-rich .ep-no {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  color: white; padding: 4px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 900;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 3;
}
.ep-card.ep-rich .ep-icon {
  position: absolute; top: 14px; left: 14px;
  font-size: 38px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.7))
          drop-shadow(0 0 14px rgba(255,255,255,.2));
  z-index: 3;
  animation: epIconBob 2.5s ease-in-out infinite;
}
@keyframes epIconBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ep-card.ep-rich .ep-title {
  position: absolute; left: 14px; right: 14px; bottom: 70px;
  font-size: 17px; font-weight: 900;
  color: white;
  line-height: 1.35;
  /* 浮雕效果 */
  text-shadow:
    0 1px 0 rgba(255,255,255,.3),
    0 2px 0 rgba(255,255,255,.15),
    0 3px 6px rgba(0,0,0,.8),
    0 0 18px rgba(0,0,0,.5);
  z-index: 3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-card.ep-rich .ep-subject {
  position: absolute; left: 14px; right: 14px; bottom: 42px;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  line-height: 1.45;
  z-index: 3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-card.ep-rich .ep-meta {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; gap: 8px; align-items: center;
  font-size: 10px;
  color: rgba(255,255,255,.85);
  z-index: 3;
}
.ep-card.ep-rich .ep-pill {
  background: rgba(255,255,255,.95);
  color: #1a1530;
  padding: 3px 10px; border-radius: 10px;
  font-weight: 900; font-size: 10px;
  letter-spacing: .05em;
}
.ep-card.ep-rich .ep-pill.coming { background: rgba(0,0,0,.5); color: white; }