/* RUZUNA — Culture Page */

/* ── CULTURE NAV ── */
.culture-nav{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:90;
  display:flex;
  background:rgba(6,6,8,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 1.1rem;overflow-x:auto;scrollbar-width:none;
}
.culture-nav::-webkit-scrollbar{display:none}

.ctab{
  padding:.78rem 1.1rem;font-size:.855rem;font-weight:500;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;cursor:pointer;
}
.ctab:hover{color:var(--text)}
.ctab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── CULTURE NAV HEIGHT = 48px ── */
:root{--culture-nav-h:48px}

/* ── MAIN CONTENT AREA ── */
.culture-main{
  /* top-nav (58px) + culture-nav (48px) = 106px */
  padding-top:calc(var(--nav-h) + var(--culture-nav-h));
  min-height:100vh;
}

/* ── TAB SECTIONS ── */
.ctab-sec{display:none}
.ctab-sec.on{display:block;animation:tab-in .22s ease}
@keyframes tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── SEARCH ROW ── */
.culture-search-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
.culture-search-input{max-width:280px;font-size:.855rem}
.culture-filters-row{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:.9rem}

/* ── HERO ── */
.culture-hero{
  width:100%;height:420px;
  background-size:cover;background-position:center;background-color:var(--bg-3);
  position:relative;
}
.culture-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,8,8,.97) 30%,rgba(8,8,8,.1) 100%),
             linear-gradient(to top,rgba(8,8,8,.92) 0%,transparent 55%);
  display:flex;align-items:flex-end;padding:2.25rem;
}
.culture-hero-content{max-width:520px}
.culture-hero-label{
  font-size:.68rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;
}
.culture-hero-title{
  font-family:var(--font-display);font-size:2.8rem;
  line-height:1.05;letter-spacing:.04em;margin-bottom:.5rem;
}
.culture-hero-overview{
  font-size:.875rem;color:var(--text-2);line-height:1.65;
  margin-bottom:1.1rem;max-width:420px;
}

/* ── GENRE FILTER ── */
.genre-filter{overflow-x:auto;scrollbar-width:none;margin-bottom:.7rem}
.genre-filter::-webkit-scrollbar{display:none}
.genre-pills{display:flex;gap:.35rem;padding:.4rem 0;flex-wrap:nowrap}
.genre-pill{
  padding:.32rem .85rem;border-radius:var(--r-full);font-size:.76rem;font-weight:500;
  background:var(--bg-3);border:1px solid var(--border);color:var(--text-2);
  white-space:nowrap;transition:var(--t);flex-shrink:0;cursor:pointer;
}
.genre-pill:hover{border-color:var(--border-accent);color:var(--text)}
.genre-pill.active{background:var(--accent-dim);border-color:var(--border-accent);color:var(--accent)}

/* ── MUSIC LIST ── */
.music-list{display:flex;flex-direction:column;gap:1px}
.music-loading{color:var(--text-3);font-size:.855rem;padding:1.25rem}

.music-row{
  display:flex;align-items:center;gap:.85rem;
  padding:.55rem .7rem;border-radius:var(--r);cursor:default;
  transition:background .12s;
}
.music-row:hover{background:var(--bg-glass)}
.music-rank{
  width:26px;text-align:center;font-size:.78rem;font-weight:600;
  color:var(--text-3);font-family:var(--font-mono);flex-shrink:0;
}
.music-art{
  width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;
  flex-shrink:0;background:var(--bg-4);
}
.music-info{flex:1;min-width:0}
.music-title{font-size:.855rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-artist{font-size:.73rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}

/* ── MUSIC BUTTONS ── */
.music-preview-btn{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.28rem .65rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:600;cursor:pointer;
  background:var(--accent-dim);color:var(--accent);
  border:1px solid var(--border-accent);transition:var(--t);
  white-space:nowrap;font-family:inherit;
}
.music-preview-btn:hover{background:var(--accent);color:#000}

.music-yt-btn{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.28rem .65rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:600;cursor:pointer;
  background:var(--bg-3);color:var(--text-2);
  border:1px solid var(--border);transition:var(--t);
  text-decoration:none;white-space:nowrap;
}
.music-yt-btn:hover{border-color:var(--border-2);color:var(--text)}

/* ── MUSIC PLAYER BAR ── */
.player-bar{
  position:fixed;bottom:0;left:0;right:0;height:66px;
  background:rgba(8,8,8,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.9rem;padding:0 1.15rem;z-index:500;
}

/* ── MODAL SECTIONS ── */
.modal-section{margin-bottom:1.25rem}
.modal-section-label{
  font-size:.7rem;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;
  display:flex;align-items:center;justify-content:space-between;
}
.modal-meta{display:flex;flex-direction:column;gap:.5rem;flex:1;min-width:0}
.modal-genres{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.25rem}
.modal-details-row{display:flex;gap:.75rem;flex-wrap:wrap;font-size:.78rem;color:var(--text-2)}
.modal-overview{font-size:.855rem;color:var(--text-2);line-height:1.65;flex:1}

/* ── VIDEO WRAP (trailer only, NOT for stream) ── */
.video-wrap{
  position:relative;padding-bottom:56.25%;
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);
}

/* ── CAST ── */
.cast-row{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
.cast-row::-webkit-scrollbar{display:none}
.cast-member{flex-shrink:0;text-align:center;width:62px}
.cast-member img{width:52px;height:52px;border-radius:50%;object-fit:cover;margin:0 auto;background:var(--bg-4)}
.cast-avatar-fallback{width:52px;height:52px;border-radius:50%;background:var(--bg-4);margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.cast-name{font-size:.61rem;margin-top:4px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── PROVIDERS ── */
.providers-wrap{display:flex;flex-direction:column;gap:.45rem}
.provider-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.provider-type{font-size:.68rem;color:var(--text-3);width:44px;flex-shrink:0}
.provider-logo{width:32px;height:32px;border-radius:8px;border:1px solid var(--border)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .culture-hero{height:280px}
  .culture-hero-title{font-size:1.8rem}
  .culture-hero-overlay{padding:1.1rem}
  .culture-search-input{max-width:100%;width:100%}
  .player-bar{gap:.6rem;padding:0 .8rem}
  .music-actions .rz-btn-sm{display:none} /* hide vault btn on mobile to save space */
}

/* ── CULTURE TAB SVG ICON FIX ── */
.ctab{display:inline-flex;align-items:center;gap:.4rem}
.ctab svg{flex-shrink:0;opacity:.7;transition:opacity .15s}
.ctab.active svg,.ctab:hover svg{opacity:1}

/* ── RUZUNA SCORE ON MEDIA CARDS ── */
.mc-rz-score-community{
  position:absolute;bottom:2.6rem;right:.4rem;
  background:rgba(0,0,0,.9);border:1px solid rgba(255,107,0,.3);border-radius:4px;
  padding:2px 6px;font-size:.65rem;font-weight:700;color:var(--accent);
  font-family:var(--font-mono);display:flex;align-items:center;gap:3px;
}

/* ── REVIEW SECTION IN MODAL ── */
.review-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.review-section-title{font-size:.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.65rem}
.community-score-block{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;
  background:var(--bg-3);border-radius:var(--r);margin-bottom:.75rem;
}
.community-score-num{
  font-family:var(--font-display);font-size:2.2rem;font-weight:800;
  color:var(--accent);letter-spacing:-.02em;line-height:1;
}
.community-score-meta{display:flex;flex-direction:column;gap:2px}
.community-score-label{font-size:.7rem;font-weight:700;color:var(--text-2)}
.community-score-count{font-size:.67rem;color:var(--text-3);font-family:var(--font-mono)}

/* ── MUSIC LIST ── */
.music-list { display:flex; flex-direction:column; gap:2px; }
.music-loading { padding:2rem; text-align:center; color:var(--text-3); font-size:.875rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.music-row {
  display:flex; align-items:center; gap:.8rem;
  padding:.65rem .85rem; border-radius:var(--r-lg);
  cursor:pointer; transition:background .12s, border-color .12s;
  border:1px solid transparent;
}
.music-row:hover { background:var(--bg-3); border-color:var(--border); }
.music-row.music-row-active { background:var(--accent-dim); border-color:var(--border-accent); }
.music-rank { width:24px; text-align:center; font-size:.78rem; color:var(--text-3); font-family:var(--font-mono); flex-shrink:0; }
.music-art { width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--bg-4); }
.music-info { flex:1; min-width:0; }
.music-title { font-size:.875rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-artist { font-size:.75rem; color:var(--text-2); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-actions { display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.music-vault-btn { opacity:0; transition:opacity .14s; }
.music-row:hover .music-vault-btn { opacity:1; }

/* ── CONNECT CARDS ── */
.music-connect-cards { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.music-connect-card {
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.2rem; border-radius:var(--r-lg);
  background:var(--bg-3); border:1px solid var(--border);
  font-size:.875rem; font-weight:500; cursor:pointer;
  transition:var(--t);
}
.music-connect-card:hover { border-color:var(--border-accent); background:var(--bg-4); color:var(--accent); }

/* ── STREAM PLAYER ── */
#stream-player-overlay { position:fixed; inset:0; z-index:9000; }

/* ── PLAYER BAR body adjust ── */
.culture-main { padding-bottom: var(--player-bar-h, 0px); }
.main-content  { padding-bottom: var(--player-bar-h, 0px); }

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  .music-actions .music-vault-btn { opacity:1; }
  #rz-player-bar > div:nth-child(4) { display:none; } /* hide volume on mobile */
  #rz-player-bar > div:last-child span { display:none; } /* hide preview badge text */
}