:root{
  --wine: #3b0b0e;
  --gold: #d4aa5a;
  --cream:#f6e8d0;
  --frame-bg: rgba(6,2,2,0.75);
  --frame-width: 920px;
}

/* Fondo de rayas verticales (mueven horizontalmente) */
body{
  margin:0;
  font-family: "Playfair Display", serif;
  background-color: var(--wine);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0 30px,
      rgba(0,0,0,0.04) 30px 60px
    ),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.12));
  animation: stripesMove 16s linear infinite;
  background-size: 360px 100vh;
}
@keyframes stripesMove{ from{background-position:0 0} to{background-position:360px 0} }

/* Marco central (más pequeño, centrado) */
.theatre-frame{
  width:var(--frame-width);
  max-width:95%;
  background: linear-gradient(180deg, rgba(10,5,5,0.7), rgba(0,0,0,0.65));
  border: 10px solid var(--gold);
  border-radius:10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding:22px;
  position:relative;
  color:var(--cream);
  overflow:hidden;
}

/* Textura dentro del marco: si subes textura_vino.png la usará; si no, queda sólido */
.theatre-frame .inner-bg{
  background: url('/textura_vino.png'), linear-gradient(180deg,var(--wine), #5b0f12);
  background-blend-mode:overlay;
  background-size: cover;
  padding:18px;
  border-radius:6px;
}

/* esquina imagen */
.corner-img{
  position:absolute; right:22px; top:22px;
  width:130px; height:130px;
  border:6px solid var(--gold); border-radius:8px;
  background-size:cover; background-position:center;
}

/* Cabecera */
.header{display:flex; gap:18px; align-items:flex-start;}
.title-block{flex:1}
.title{
  font-family: "Great Vibes", cursive;
  font-size:64px;
  color:var(--gold);
  margin:0;
  line-height:0.9;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.subtitle{
  margin-top:6px;
  display:inline-block;
  padding:10px 14px;
  font-size:16px;
  color:#220607;
  background:rgba(255,255,255,0.85);
  border-radius:8px;
  border:2px solid rgba(212,170,90,0.12);
}

/* Intro text dentro de marco */
.intro-frame{
  margin-top:14px;
  border:6px double rgba(212,170,90,0.95);
  padding:14px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.18));
  color:var(--cream);
}

/* layout interior */
.inner{ display:flex; gap:18px; margin-top:18px; }

/* columna derecha con vinilo y gifs */
.right-col{ width:240px; min-width:200px; }
.nav-box{ background:var(--frame-bg); padding:10px; border-radius:8px; border:2px solid rgba(212,170,90,0.08); color:var(--cream); }
.nav-title{ color:var(--gold); font-weight:700; margin-bottom:8px; }
.nav-list{ display:flex; flex-direction:column; gap:10px; }
.nav-list button{ background:transparent; border:2px solid rgba(212,170,90,0.12); padding:8px; border-radius:8px; color:var(--cream); cursor:pointer; font-weight:700; }
.nav-list button:hover{ background:rgba(212,170,90,0.06); }

/* vinilo */
.vinyl-box{ text-align:center; margin-top:12px; }
.vinyl{ width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#111 30%, #000 70%); border:6px solid var(--wine); margin:auto; display:inline-block; cursor:pointer; }
.vinyl.playing{ animation: spin 2.6s linear infinite; }
@keyframes spin{ from{ transform:rotate(0)} to{ transform:rotate(360deg)} }
.play-btn{ margin-top:10px; padding:8px 12px; background:var(--gold); border:none; border-radius:8px; cursor:pointer; font-weight:700; }

/* gifs */
.gifs{ display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-top:8px; }
.gif-box{ height:80px; background:#120405; border-radius:6px; border:2px solid rgba(212,170,90,0.12); display:flex; align-items:center; justify-content:center; color:#ffd; }

/* contenido principal grande (para páginas individuales) */
.content{ flex:1; padding:6px; }
.content-section{ display:none; }
.content-section.active{ display:block; }

/* shelf libros y cds */
.shelf{ display:flex; gap:12px; padding:12px; overflow-x:auto; }
.book{ width:110px; height:220px; background: linear-gradient(180deg,var(--wine), #5a0d11); border:6px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; cursor:pointer; transition: transform .25s; border-radius:6px; font-weight:700; }
.book:hover{ transform:translateY(-12px); }
.cd-row{ display:flex; gap:12px; overflow-x:auto; padding:12px; }
.cd{ width:140px; height:140px; background:#111; border:6px solid var(--gold); background-size:cover; border-radius:8px; cursor:pointer; transition:transform .2s; }
.cd:hover{ transform:scale(1.06); }

/* detail page */
.detail{ padding:18px; background:rgba(0,0,0,0.25); border-radius:8px; border:4px solid rgba(212,170,90,0.18); color:var(--cream); }

.frame-footer{ margin-top:18px; text-align:center; color:#ffdcb8; font-size:13px; }

/* responsive */
@media(max-width:980px){
  .inner{ flex-direction:column; }
  .right-col{ width:100%; display:flex; gap:12px; }
  .title{ font-size:46px; }
}