/* Prof. Hu 60th Birthday — Dark Elegant Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;600&family=Noto+Serif+JP:wght@400;600&display=swap');

:root {
  --bg: #0a0a0a; --bg-card: #151515; --gold: #c9a84c; --gold-light: #e8d28a;
  --cream: #f5f0e8; --cream-dim: #a89e8c; --border: #2a2520;
  --font-display: 'Playfair Display', 'Noto Serif SC', 'Noto Serif JP', serif;
  --font-body: 'Cormorant Garamond', 'Noto Serif SC', 'Noto Serif JP', serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--cream); font-family:var(--font-body); font-size:18px; line-height:1.7; }
a { color:var(--gold); text-decoration:none; }

/* Landing */
#landing { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; cursor:pointer; }
#landing .watermark { position:absolute; font-size:clamp(200px,40vw,500px); font-family:var(--font-display); color:rgba(201,168,76,0.06); font-weight:700; user-select:none; }
#landing h1 { font-family:var(--font-display); font-size:clamp(2rem,5vw,4rem); letter-spacing:0.12em; color:var(--gold); margin-bottom:0.5rem; position:relative; }
#landing h2 { font-family:'Noto Serif SC',serif; font-size:clamp(1.5rem,3vw,2.5rem); letter-spacing:0.4em; color:var(--cream-dim); position:relative; }
#landing .subtitle { margin-top:2rem; font-size:1rem; color:var(--cream-dim); opacity:0.6; position:relative; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }

/* Password */
#password-gate { display:none; min-height:100vh; justify-content:center; align-items:center; flex-direction:column; }
#password-gate input { background:transparent; border:1px solid var(--gold); color:var(--cream); padding:12px 24px; font-size:1.2rem; font-family:var(--font-body); text-align:center; width:280px; outline:none; margin-bottom:1rem; }
#password-gate input::placeholder { color:var(--cream-dim); }
#password-gate button { background:transparent; border:1px solid var(--gold); color:var(--gold); padding:10px 40px; font-size:1rem; cursor:pointer; font-family:var(--font-display); letter-spacing:0.1em; transition:all 0.3s; }
#password-gate button:hover { background:var(--gold); color:var(--bg); }
#password-gate .error { color:#c44; margin-top:0.5rem; font-size:0.9rem; min-height:1.5em; }

/* Main content */
#main-content { display:none; max-width:1200px; margin:0 auto; padding:2rem; }
.page-header { text-align:center; padding:3rem 0 2rem; border-bottom:1px solid var(--border); margin-bottom:2rem; }
.page-header h1 { font-family:var(--font-display); font-size:2rem; color:var(--gold); letter-spacing:0.15em; }
.page-header p { color:var(--cream-dim); margin-top:0.5rem; }

/* Category tabs */
.tabs { display:flex; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; padding:1rem 0; }
.tab { padding:8px 20px; border:1px solid var(--border); color:var(--cream-dim); cursor:pointer; font-family:var(--font-display); font-size:0.9rem; transition:all 0.3s; }
.tab:hover,.tab.active { border-color:var(--gold); color:var(--gold); }

/* Cards grid */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2rem; }
.card { background:var(--bg-card); border:1px solid var(--border); padding:2rem; transition:all 0.3s; }
.card:hover { border-color:var(--gold); transform:translateY(-2px); }
.card h3 { font-family:var(--font-display); color:var(--gold); font-size:1.3rem; margin-bottom:0.3rem; }
.card .relationship { color:var(--cream-dim); font-size:0.85rem; margin-bottom:1rem; font-style:italic; }
.card .message { font-size:0.95rem; line-height:1.8; margin-bottom:1rem; white-space:pre-line; }
.card .extra { font-size:0.85rem; color:var(--cream-dim); border-top:1px solid var(--border); padding-top:0.8rem; margin-top:0.8rem; }
.card .media { margin-top:1rem; }
.card .photos { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:0.8rem; }
.card .photos img { width:80px; height:80px; object-fit:cover; border:1px solid var(--border); cursor:pointer; transition:all 0.3s; }
.card .photos img:hover { border-color:var(--gold); transform:scale(1.05); }
.card video { width:100%; max-height:300px; border:1px solid var(--border); }
.card .badge { display:inline-block; font-size:0.75rem; padding:2px 8px; border:1px solid var(--border); color:var(--cream-dim); margin-bottom:0.8rem; }

/* Lightbox */
#lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:1000; justify-content:center; align-items:center; cursor:pointer; }
#lightbox img { max-width:90%; max-height:90%; object-fit:contain; }

/* Footer */
.footer { text-align:center; padding:3rem 0; color:var(--cream-dim); font-size:0.85rem; border-top:1px solid var(--border); margin-top:3rem; }

/* Counter */
.stats { display:flex; justify-content:center; gap:3rem; margin:1.5rem 0; }
.stat-item { text-align:center; }
.stat-num { font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.stat-label { font-size:0.8rem; color:var(--cream-dim); }

/* Slideshow Play Button */
.slideshow-btn { 
  display:inline-block; padding:10px 28px; border:1px solid var(--gold); color:var(--gold); 
  background:transparent; font-family:var(--font-display); font-size:1rem; letter-spacing:0.1em;
  cursor:pointer; transition:all 0.3s; margin-top:1rem;
}
.slideshow-btn:hover { background:var(--gold); color:var(--bg); }

/* Slideshow Overlay */
#slideshow-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:var(--bg); z-index:2000; flex-direction:column; overflow:hidden;
}
#slideshow-overlay.active { display:flex; }

/* Slideshow top bar */
.slideshow-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.slideshow-topbar .progress-text { color:var(--cream-dim); font-size:0.85rem; font-family:var(--font-display); }
.slideshow-topbar .controls { display:flex; gap:8px; }
.slideshow-topbar .ctrl-btn {
  background:transparent; border:1px solid var(--border); color:var(--cream-dim);
  width:36px; height:36px; display:flex; justify-content:center; align-items:center;
  cursor:pointer; font-size:1rem; transition:all 0.2s;
}
.slideshow-topbar .ctrl-btn:hover { border-color:var(--gold); color:var(--gold); }
.slideshow-topbar .ctrl-btn.active { border-color:var(--gold); color:var(--gold); }

/* Progress bar */
.slideshow-progress { width:100%; height:3px; background:var(--border); flex-shrink:0; }
.slideshow-progress-fill { height:100%; background:var(--gold); transition:width 0.3s ease; width:0%; }

/* Slideshow body — split layout */
.slideshow-body {
  flex:1; display:flex; overflow:hidden; position:relative; background:var(--bg);
}

/* Left panel: text + photos */
.slideshow-left {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:3rem 3rem 3rem 4rem; overflow-y:auto; min-width:0;
}
.slideshow-left .slide-name {
  font-family:var(--font-display); font-size:2.2rem; color:var(--gold); margin-bottom:0.3rem;
}
.slideshow-left .slide-relationship {
  font-size:1rem; color:var(--cream-dim); font-style:italic; margin-bottom:1.5rem;
}
.slideshow-left .slide-message {
  font-size:1.1rem; line-height:2; white-space:pre-line; margin-bottom:1.5rem; max-height:40vh; overflow-y:auto;
}
.slideshow-left .slide-extra {
  font-size:0.9rem; color:var(--cream-dim); border-top:1px solid var(--border);
  padding-top:1rem; margin-top:0.5rem;
}
/* Photo carousel in slideshow */
.slide-photo-carousel {
  position:relative; margin-top:1.5rem; width:100%; max-height:35vh;
  overflow:hidden; border:1px solid var(--border);
}
.slide-photo-carousel img {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; background:var(--bg);
  opacity:0; transition:opacity 1s ease;
  cursor:pointer;
}
.slide-photo-carousel img.photo-active { opacity:1; }

/* Right panel: video */
.slideshow-right {
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:2rem; min-width:0; background:rgba(0,0,0,0.3);
}
.slideshow-right video {
  max-width:100%; max-height:100%; border:1px solid var(--border);
}
.slideshow-right .no-video {
  color:var(--cream-dim); font-size:1rem; font-style:italic; text-align:center; opacity:0.5;
}

/* Slide transitions */
.slideshow-body { position:relative; }
.slide-content {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; opacity:0; transition:opacity 0.6s ease;
  pointer-events:none; background:var(--bg);
}
.slide-content.active { opacity:1; pointer-events:auto; }

@media(max-width:900px) {
  .slideshow-body { flex-direction:column; }
  .slideshow-left { padding:2rem; }
  .slideshow-right { min-height:40vh; }
  .slideshow-left .slide-name { font-size:1.6rem; }
  .slide-photo-carousel { max-height:30vh; }
}

@media(max-width:600px) {
  .cards { grid-template-columns:1fr; }
  .card .photos img { width:60px; height:60px; }
  #landing h2 { letter-spacing:0.5em; }
  .slideshow-left { padding:1.5rem; }
  .slideshow-left .slide-name { font-size:1.3rem; }
  .slide-photo-carousel { max-height:25vh; }
}