:root{
  --pad: clamp(12px, 3vw, 24px);
  --text-bg: rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100dvh;
  color:#fff;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI",sans-serif;
  line-height:1.45;

  background-image:url('./images/background-1920.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.overlay{
  position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35) 55%, rgba(0,0,0,.55));
  pointer-events:none;
}

.logo{
  position:fixed;
  left:var(--pad);
  top:var(--pad);
  width:clamp(72px, 9vw, 124px);
  aspect-ratio:1 / 1;
  
  background:rgba(255, 170, 60, 0.9);
  
  border:2px solid rgba(255, 255, 255, 0.85);
  
  border-radius:16px;
  padding:clamp(6px, 1.2vw, 10px);
  display:grid;
  place-items:center;
  
  backdrop-filter:saturate(1.2) blur(2px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.logo-img{
  width:85%;
  height:auto;                 
  display:block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.info-panel img.poster{
  width: 100%;                
  height: auto;               
  margin-top: 1em;            
  border-radius: 12px;       
  border: 2px solid rgba(255, 255, 255, 0.8); 
  box-shadow: 0 4px 16px rgba(0,0,0,.3);   
}

.info-panel{
  position:fixed;             
  top:var(--pad);
  bottom:var(--pad);
  right:var(--pad);
  width:clamp(340px, 50vw, 780px); 
  background:var(--text-bg);
  border-radius:20px;
  padding:clamp(16px, 3vw, 28px);
  overflow:auto;               
  backdrop-filter:saturate(1.2) blur(2px);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.info-panel h1{
  margin:0 0 .5em;
  font-size:clamp(22px, 4vw, 40px);
  letter-spacing:.02em;
}
.info-panel p{
  margin:.25em 0 0;
  font-size:clamp(14px, 1.6vw, 18px);
}

@media (max-width: 640px){
  .info-panel{
    left:var(--pad);
    right:var(--pad);
    width:auto;                
  }
  .logo{
    width:64px;
  }
}

#page-footer a:hover {
  color: #ffd96a;
}

header {
  position: relative;  
}

#logo {
  position: absolute;
  top: 4px;
  left: 14px;
  display: block;
  width: 80px;        
  height: auto;
  z-index: 1;  
}

#logo svg circle {
  fill: #4b2e05;      
  stroke: #ffffff;    
  stroke-width: 4px;  
}

#logo svg:hover circle {
  fill: #6b3b0a;      
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#logo svg {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

#logo svg:hover {
  transform: scale(1.05);
  cursor: pointer;
}