/* =========== THEME VARIABLES (Red + Gold Chinese Aesthetic) =========== */
:root{
  --red:#c41a1a;
  --red-2:#a31b17;
  --gold:#ffd700;
  --cream:#fff8e1;
  --muted:#f6e9df;
  --card-shadow: 0 18px 40px rgba(196,26,26,0.18);
  --glass: rgba(255,255,255,0.06);
  --radius-lg: 20px;
  --max-width:1200px;
  --transition: 280ms cubic-bezier(.2,.9,.25,1);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Noto Sans SC',system-ui,-apple-system,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  color:var(--red);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-top:84px; /* space for fixed nav */
}

/* ---------- Layout container ---------- */
.container{max-width:var(--max-width);margin:0 auto;padding:0 18px}

/* =========== HEADER / NAV =========== */
.topnav{
  position:fixed;top:0;left:0;right:0;height:84px;
  background: linear-gradient(90deg,var(--red),var(--red-2));
  color:white;display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;z-index:1200;box-shadow:0 8px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
}
.logo{font-size:1.6rem;font-weight:900;color:var(--gold);letter-spacing:0.6px}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:rgba(255,255,255,0.95);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:8px;transition:all 180ms}
.nav-links a:hover{background:rgba(255,255,255,0.06)}
.nav-links a.active{box-shadow: inset 0 -3px 0 var(--gold);color:var(--gold)}

/* language switcher (keeps your .lang-switch) */
.lang-switch{position:fixed;top:12px;right:12px;z-index:1300;display:flex;gap:8px}
.lang-switch button{background:none;border:1px solid rgba(255,255,255,0.12);color:white;padding:6px 10px;border-radius:999px;cursor:pointer}
.lang-switch button.active{background:var(--gold);color:var(--red);border-color:transparent;transform:scale(1.05)}

/* =========== HERO =========== */
.hero{
  min-height:62vh;display:flex;align-items:center;justify-content:center;padding:48px 0;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(255,215,0,0.06), transparent 8%),
              linear-gradient(135deg,#ff6b6b 0%,var(--red) 100%);
  color:white;text-align:center;border-bottom: 8px solid rgba(0,0,0,0.04);
  box-shadow: 0 10px 40px rgba(163,27,23,0.06) inset;
}
.hero .hero-title{font-size:clamp(1.8rem,4.8vw,3.6rem);font-weight:900;text-shadow:0 6px 30px rgba(0,0,0,0.22)}
.hero .hero-subtitle{margin-top:12px;opacity:0.95;font-weight:600;color:rgba(255,241,200,0.95)}
.hero-btn{
  margin-top:20px;display:inline-block;padding:12px 26px;border-radius:999px;
  background: linear-gradient(180deg,var(--gold),#ffdd33);color:var(--red);font-weight:900;
  text-decoration:none;box-shadow: 0 10px 30px rgba(255,215,0,0.12);transition:transform var(--transition);
}
.hero-btn:hover{transform:translateY(-6px)}

/* =========== SECTIONS & TITLES =========== */
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,var(--muted),#fff)}
.section-title{font-size:clamp(1.6rem,3.2vw,2.4rem);text-align:center;margin-bottom:28px;font-weight:800;color:var(--red)}
.section .container{display:block}

/* =========== FEATURED GRID (keep .song-card and .grid names) =========== */
.song-grid, .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;max-width:1200px;margin:0 auto}
.song-card, .card, .song-card{
  display:block;background:linear-gradient(180deg,rgba(255,255,255,0.94),white);
  border-radius:18px;padding:12px;text-align:center;color:var(--red);text-decoration:none;
  box-shadow: var(--card-shadow);
  transition: transform 320ms cubic-bezier(.2,.9,.25,1), box-shadow 320ms;
  position:relative;overflow:hidden;border:1px solid rgba(196,26,26,0.04);
}
.song-card img, .card img, .card .card-img, .song-card .card-img{width:100%;height:160px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block}
.song-card h3{font-size:1.05rem;margin:6px 0 4px;font-weight:900}
.song-card p{font-size:0.95rem;color:rgba(163,27,23,0.85);margin-bottom:6px}

/* glossy hover sheen */
.song-card::after{
  content:"";position:absolute;left:-60%;top:-40%;width:200%;height:140%;
  background:linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.0) 80%);
  transform:rotate(25deg) translateX(-110%);transition:transform 700ms ease;
}
.song-card:hover{transform:translateY(-8px);box-shadow:0 36px 70px rgba(163,27,23,0.2)}
.song-card:hover::after{transform:rotate(25deg) translateX(20%)}

/* small tag badges */
.badge{display:inline-block;background:var(--gold);color:var(--red);padding:6px 10px;border-radius:999px;font-weight:800;font-size:0.85rem;margin-top:8px}

/* =========== CATEGORIES GRID =========== */
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;max-width:900px;margin:0 auto}
.category-card{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,215,0,0.06),rgba(255,215,0,0.02));font-weight:800;color:var(--red);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,0.06)}

/* =========== SONG PAGE / SAFE CONTENT / TABLES (KEEP CLASSES) =========== */
.container.song{max-width:1000px;margin:0 auto;padding:0 18px}
.song-header{ text-align:center;padding:48px 18px 28px;background:linear-gradient(180deg,#ff6b6b,var(--red));border-radius:0 0 22px 22px;color:white}
.song-header h1{font-size:2.6rem;font-weight:900}
.song-header .artist{opacity:0.95;margin-top:8px;font-weight:700}

/* keep .safe-content look but cleaner */
.safe-content{background:white;padding:32px;border-radius:18px;box-shadow:0 18px 60px rgba(196,26,26,0.12);border:4px solid rgba(255,215,0,0.15);margin-top:-28px}
.safe-content h2{font-size:1.4rem;color:var(--red);text-align:center;margin-bottom:18px}
.section{background:transparent;padding:22px 0}

/* excerpts */
.pinyin-excerpt{font-size:1.15rem;font-weight:800;color:var(--red);text-align:center;margin:8px 0}
.chinese-excerpt{font-size:1.5rem;font-weight:900;color:#7a1212;text-align:center;margin:6px 0}

/* blockquote */
blockquote{background:var(--muted);padding:18px;border-left:8px solid var(--gold);border-radius:12px;margin:18px 0;color:#4a1b1b;line-height:1.55}

/* vocab table */
.vocab-table{width:100%;max-width:900px;margin:26px auto;border-collapse:separate;border-spacing:0}
.vocab-table th{background:var(--red);color:white;padding:12px;font-weight:800;text-align:left}
.vocab-table td{padding:10px;border-bottom:1px dashed rgba(255,215,0,0.5);background:linear-gradient(180deg,var(--cream),#fff8f0)}
.vocab-table tr:nth-child(even) td{background:linear-gradient(180deg,#fff6f2,#fff2ea)}

/* back button */
.back-btn{display:block;text-align:center;margin:28px 0}
.back-btn a{display:inline-block;background:linear-gradient(180deg,var(--gold),#ffdf55);color:var(--red);padding:12px 36px;border-radius:999px;font-weight:900;text-decoration:none;box-shadow:0 12px 36px rgba(163,27,23,0.15)}

/* yt wrapper */
.yt-wrapper{max-width:760px;margin:14px auto}
.yt-thumb{position:relative;display:block;border-radius:10px;overflow:hidden}
.yt-thumb img{display:block;width:100%;height:auto}
.yt-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:999px;background:rgba(0,0,0,0.5)}
.yt-play-button::before{content:"";position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent white}

/* ad-block helper to reduce CLS */
.ad-block{max-width:970px;margin:28px auto;text-align:center}

/* footer */
.site-footer{padding:28px 0;text-align:center;color:rgba(20,20,20,0.6);border-top:1px solid rgba(0,0,0,0.03);margin-top:22px;background:transparent}

/* =========== INTERACTIONS & ANIMATIONS (visibility) =========== */
section, .safe-content, .song-card{opacity:0;transform:translateY(10px);transition:opacity 420ms ease, transform 420ms ease}
.visible{opacity:1;transform:none}

/* =========== RESPONSIVE =========== */
@media (max-width:900px){
  .song-card img{height:140px}
  .hero{padding:40px 18px}
  .hero .hero-title{font-size:2rem}
}
@media (max-width:600px){
  body{padding-top:72px}
  .topnav{height:72px;padding:10px 12px}
  .nav-links{display:none}
  .song-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .song-card img{height:120px}
  .safe-content{padding:18px}
  .vocab-table td, .vocab-table th{font-size:0.95rem}
}