/* --- GLOBAL RESET & SETTINGS --- */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; 
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Fredoka', sans-serif;
  color: #ffffff;
  background-color: #0f1a16;
  
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%;
  height: 100dvh; 
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px; padding-bottom: 20px; 
}

/* --- PANEL (Desktop / Tablet Base) --- */
.glass-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  
  width: min(92vw, 480px);
  padding: 4rem 2rem 2rem 2rem; 
  
  background: rgba(0, 0, 0, 0.3); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  border-radius: 40px;
  z-index: 20;
}

/* --- STATIC CONTROLS --- */
.static-controls-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px; 
    width: 100%;
    margin-bottom: 10px;
}

/* --- PLAY ASSEMBLY --- */
.play-assembly {
    position: relative;
    width: clamp(130px, 30vw, 160px);
    height: clamp(130px, 30vw, 160px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; 
}

.headphones-glass {
  position: absolute;
  width: 380%; 
  height: 380%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; 
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); 
  animation: hoverFloat 6s ease-in-out infinite;
  opacity: 0.25;
}
.headphones-glass svg { width: 100%; height: 100%; }
.headphones-glass path { fill: white !important; opacity: 1 !important; }

@keyframes hoverFloat {
  0%, 100% { transform: translate(-50%, -51%); } 
  50% { transform: translate(-50%, -49%); }       
}

/* --- BUTTONS --- */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  cursor: pointer; 
  touch-action: manipulation;
  border-radius: 50%; 
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.2); 
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
}

button#play {
  width: 80%;
  height: 80%;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 2.4s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.5s;
  z-index: 2; 
}
button#play:active { transform: scale(0.85); background-color: rgba(0, 0, 0, 0.5); transition: transform 0s, background-color 0s; }
button#play svg { 
  width: 40%; height: 40%; 
  fill: currentColor; stroke: none; opacity: 1; 
  transition: opacity 0.2s ease-in-out; 
}

button#change {
  width: clamp(50px, 12vw, 55px);
  height: clamp(50px, 12vw, 55px);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
  z-index: 5;
}
button#change.is-visible { opacity: 1; pointer-events: auto; }
button#change:active { transform: scale(0.90); background-color: rgba(0, 0, 0, 0.4); transition: transform 0s; }
button#change svg { width: 50%; height: 50%; }

/* --- TEXT ANIMATIONS --- */
.text-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  width: 100%;
  min-height: 80px; 
}

p.location {
  margin: 0;
  font-size: clamp(1.2rem, 5vw, 1.6rem); 
  font-weight: 300; 
  line-height: 1.4; 
  letter-spacing: 0.03em; 
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  white-space: normal; 
  word-wrap: break-word;
  max-width: 100%;
  transition: opacity 0.5s ease-in-out;
}

p.location.fade-out { opacity: 0; }

.startup-line { opacity: 0; animation: fadeIn 0.6s forwards; }
.line-1 { animation-delay: 0.6s; }
.line-2 { animation-delay: 1.9s; }
@keyframes fadeIn { to { opacity: 1; } }

/* --- HEADPHONE HINT --- */
.headphone-hint {
  margin: 0;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 2.5s;
}

/* --- PARTNER LOGO --- */
.partner-logo-container {
  position: relative;
  display: none; 
  width: 100%;
  text-align: center;
  margin-top: 10px;   
  margin-bottom: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.partner-logo-container.is-visible { display: block; opacity: 1; }
.partner-logo {
  max-height: 140px; 
  max-width: 85%;    
  width: auto;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* --- CORNER LOGO --- */
.corner-logo-container {
  position: absolute;
  bottom: 0; right: 0; z-index: 10; pointer-events: none; 
  width: clamp(150px, 20vw, 250px);
  height: clamp(150px, 20vw, 250px);
  padding: 20px;
  display: flex; align-items: flex-end; justify-content: flex-end; 
  background: radial-gradient(circle at bottom right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0) 70%);
}
.corner-logo { display: block; width: clamp(80px, 15vw, 120px); height: auto; opacity: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }

/* =========================================
   MOBILE PORTRAIT OVERRIDES (20% Smaller)
   ========================================= */
@media (max-width: 600px) and (orientation: portrait) {
  .glass-panel {
    width: min(88vw, 400px);
    padding: 2.5rem 1.5rem 1.5rem 1.5rem; 
  }
  .static-controls-zone {
    min-height: 220px; 
  }
  .play-assembly {
     width: 100px; 
     height: 100px;
     margin-bottom: 25px; 
  }
  p.location {
    font-size: 1.35rem; 
  }
  .partner-logo {
    max-height: 110px; 
  }
}

/* =========================================
   LANDSCAPE DASHBOARD LAYOUT (CSS GRID)
   ========================================= */
@media (max-height: 500px) and (orientation: landscape) {
  
  /* Use Grid instead of Flex for perfect structure */
  .glass-panel {
    display: grid;
    grid-template-columns: 45% 55%;
    /* Row 1: Text, Row 2: Logo, Row 3: Hint (Full Width) */
    grid-template-areas:
      "controls text"
      "controls logo"
      "hint hint";
      
    width: min(85vw, 700px);
    height: auto;
    min-height: min(80vh, 320px);
    padding: 1.5rem;
    
    /* Center the grid vertically in the panel */
    align-content: center; 
  }

  /* LEFT SIDE: CONTROLS (Spans both Text and Logo) */
  .static-controls-zone {
    grid-area: controls;
    width: 100%;
    height: 100%; /* Fill the full height of the stack */
    min-height: auto;
    margin: 0;
    
    /* Center Content Vertically & Horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    padding-right: 1rem;
  }
  
  .play-assembly {
    width: clamp(100px, 20vh, 130px);
    height: clamp(100px, 20vh, 130px);
    margin-bottom: 0; /* REMOVED MARGIN for perfect centering */
  }
  
  .headphones-glass { width: 250%; height: 250%; }

  /* RIGHT SIDE: TEXT (Top Cell) */
  .text-container {
    grid-area: text;
    width: 100%;
    min-height: auto;
    height: auto;
    align-self: end; /* Sits at the bottom of its cell */
    padding: 0 20px;        
    display: flex;
    justify-content: center; /* Centers text horizontally */
  }

  p.location {
    font-size: clamp(1.1rem, 4vh, 1.5rem);
  }

  /* RIGHT SIDE: LOGO (Middle Cell) */
  .partner-logo-container {
    grid-area: logo;
    width: 100%; 
    align-self: start; /* Sits at the top of its cell */
    margin: 0;
    margin-top: 10px; /* Gap between text and logo */
    display: flex; /* Helps re-center if it tries to be block */
    justify-content: center;
  }
  
  .partner-logo {
    max-height: 80px; 
  }

  /* BOTTOM: HINT (Spans Full Width) */
  .headphone-hint {
    grid-area: hint;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }
}

/* SMOOTH TRANSITIONS */
.glass-panel, .static-controls-zone, .text-container, p.location {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}