/* Base styles for desktop */
body {
  font-size: 16px;
}

/* Responsive rules for mobile */
@media only screen and (max-width: 768px) {
  html {
    font-size: 14px; /* 25% smaller relative sizing */
  }

  .menu, .radio-stream, .media-section {
    transform: scale(0.75); /* 25% smaller UI */
  }

  .cube-animation {
    width: 80vw;
    height: 80vw;
  }
}
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #000005; /* Full black to enhance neon */
    color: #fff;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Move nav to top, scene to center */
}

nav {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background: rgba(0,0,10,0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    border-bottom: 2px solid #0ff; /* Base neon teal */
}

nav button {
    background: transparent;
    color: #0ff;
    border: 2px solid #0ff;
    padding: 12px 24px;
    margin: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
}

nav button:hover {
    background: #0ff;
    color: #000;
    box-shadow: 0 0 20px rgba(0,255,255,0.8);
}

/* THE CUBE SCENE - VERY LARGE */
.scene {
    width: 80vw; /* Colossal width */
    height: 70vh; /* Colossal height */
    perspective: 2500px; /* Increased perspective for large objects */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Center vertically in the space */
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); /* Pronounced, snappy transition */
}

/* THE BASE NEON STYLE FOR FACES */
.cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* border: 3px solid #0ff; teal border */
    background: rgba(0, 10, 30, 0.95); /* Deep dark blue background */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 40px;
    overflow-y: auto;
    
    /* Default Neon Teal Glow around the face */
    border: 3px solid #0ff;
    box-shadow: 0 0 15px rgba(0,255,255,0.5), inset 0 0 10px rgba(0,255,255,0.3);
    transition: box-shadow 0.3s ease; /* Default transition smoothly */
}

/* NEON BLUE GLOW WHEN TRANSITIONING (Applied via JS class) */
.cube.cube-transitioning .cube__face {
    /* Intense Neon Blue Glow when moving */
    border-color: #00f; /* Change border to deep blue */
    box-shadow: 0 0 50px rgba(0,0,255,1), 
                0 0 100px rgba(0,0,255,0.8), 
                0 0 150px rgba(0,0,255,0.6),
                inset 0 0 20px rgba(0,0,255,0.5);
}

.content { 
    text-align: center; 
    width: 100%; 
    max-width: 1200px; /* Text doesn't get *too* wide */
}

h1 {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    margin-bottom: 20px;
}

p { font-size: 1.5rem; line-height: 1.8; }

ul { text-align: left; display: inline-block; font-size: 1.3rem; }

/* Positioning faces based on the massive scale */
/* We translate by HALF of the width/height of the scene, but need consistent value. We will use pixels for faces to maintain stability.
   Wait, if scene is 90vw, half is 45vw. translateZ(45vw). 
   Actually, it's safer to use a large pixel base or percentage. Percentage transform can be tricky.
   Let's keep the scene unit based, and define face positions using a stable metric.
   90vw * 1920 (typical fullHD) / 100 = ~1728px.  translateZ(864px).
   Let's use viewport units directly. translateZ(45vw) seems right for a perspective of 3000px.
*/

/* Positioning of faces in 3D space */
.cube__face--front  { transform: rotateY(  0deg) translateZ(45vw); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(45vw); }
.cube__face--back   { transform: rotateY(180deg) translateZ(45vw); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(45vw); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(45vw); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(45vw); }

/* Rotation Classes triggered by JS */
.cube.show-front  { transform: translateZ(-45vw) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-45vw) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-45vw) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-45vw) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-45vw) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-45vw) rotateX(  90deg); }

.video-container iframe {
    width: 100%;
    margin-top: 20px;
    border: 3px solid #0ff;
    box-shadow: 0 0 15px #0ff;
}

/* Make only the currently visible face interactive to avoid invisible faces
   intercepting pointer events when the cube is rotated. */
.cube__face { pointer-events: none; z-index: 0; }
.cube.show-front  .cube__face--front,
.cube.show-right  .cube__face--right,
.cube.show-back   .cube__face--back,
.cube.show-left   .cube__face--left,
.cube.show-top    .cube__face--top,
.cube.show-bottom .cube__face--bottom {
    pointer-events: auto;
    z-index: 20; /* bring active face above other faces for interaction */
}

/* Ensure the embedded player and its buttons sit above the face stacking context */
#music-player, #music-player * { position: relative; z-index: 30; }
#music-player button { cursor: pointer; }

/* Improve hit-testing for transformed faces */
.cube__face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Give the player its own compositing layer so it sits above transformed siblings */
#music-player {
    transform: translateZ(1px);
    will-change: transform, opacity;
}

/* Adaptability: Shrink slightly on smaller screens but keep colossal aspect */
@media (max-width: 1000px) {
    .scene { width: 95vw; height: 70vh; }
    h1 { font-size: 2.5rem; }
    p { font-size: 1.1rem; }
}