@charset "utf-8";
/* CSS Document */
body {
      font-family: "Hina Mincho", serif;
      background-color: #0f0f1a;
      color: #e0e0e0;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100svh;
      overflow-x: hidden;
    }
    
    .container {
      width: 90%;
      max-width: 800px;
      text-align: center;
    }
    
    h1 {
      font-weight: 300;
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #f0f0f0; position: fixed; z-index: 1; top: 0; left: 0; font-size: 10vw; margin: 0; line-height: 1;
    }
    
    .subtitle {
      font-weight: 300;
      font-size: 1.2rem;
      margin-bottom: 2rem;
      color: #a0a0a0; display: none;
    }
    
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2rem; position: fixed; bottom: 0; left: 0; width: 100%;
    }
    
    .btn {
      background:none;
      border: none;
      color: #e0e0e0;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
      width: 80px; height: 80px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 50px; text-indent: -9999px;
    }
    
    .btn:hover {
      
    }
    
    .btn:active {
      
    }
      .btn:disabled { display: none;}
    
    .btn-primary {
      background-image: url("../img/play.svg");
    }
    
    .btn-primary:hover {
      
    }
    
    .btn-danger {
      background-image: url("../img/pause.svg");
    }
    
    .btn-danger:hover {
      
    }
    
    .stage-info {
      margin: 0rem 0!important;
      padding: 0 1rem; position: fixed; top:50%; width: 80%; box-sizing: border-box; left: 50%; text-align: left; transform: translate(-50%,-50%);
    }
     .stage-info.none { display: none;}
    
    .stage-title {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: #f0f0f0; display: none;
    }
    
    .stage-desc {
      font-size: 4vw;
      color: #b0b0b0;
      line-height: 1.5; font-style: normal!important;
      margin: 0 auto;
    }
      
      @media (orientation: landscape) {
          .stage-info {
      padding: 0 2rem; width: 50%;
    }
  .stage-desc {
      font-size: 1.5vw;
    }
}
    
    .visualizer {
      height: 98svh;
      background-color: #1a1a1a;
      position:fixed; top:0%; left: 50%; transform: translate(-50%,0%); width: 90%;
      overflow: hidden;
    }
    
    .wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 0.5s; background-color: #0f0f1a;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.02); opacity: 0.9; }
      100% { transform: scale(1); opacity: 0.6; }
    }
    
    .pulsing {
      animation: pulse 4s infinite ease-in-out;
    }

    .narration-controls {
      margin-top: 20px;
      background: rgba(30, 30, 40, 0.5);
      border: 1px solid rgba(100, 100, 100, 0.3);
      border-radius: 10px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center; display: none;
    }

    .narration-label {
      display: flex;
      align-items: center;
      font-size: 1rem;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .narration-label input {
      margin-right: 10px;
      cursor: pointer;
    }

    .volume-control {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
    }

    .volume-control span {
      margin-right: 10px;
      font-size: 0.9rem;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      background: rgba(100, 100, 100, 0.5);
      border-radius: 3px;
      width: 150px;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .stage-indicator {
      position: absolute;
      bottom: 30px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 1.3rem;
      opacity: 0;
      transition: opacity 1s ease; display: none;
    }