@charset "utf-8";
/* CSS Document */
body {
            margin: 0;
            padding: 0px;
            background: #E94709;
            font-family: "Noto Serif JP", serif;
            color: #ffffff;
            min-height: 100svh;
            overflow-x: hidden;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        h1 {
            text-align: center; opacity: 0;
            font-size: 11vw; font-weight: 500;
            margin: 0em auto 0 auto; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);
            color: #FFF;
            writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl; /* IE用 */
            transition: all 1s ease 0s;
        }
        /* 英語の場合は横書き */
        [lang="en"] h1 {
            writing-mode: horizontal-tb;
            -ms-writing-mode: lr-tb; /* IE用 */
        }
        
        /* 英語版デスクトップ時、h1を上下中央に配置 */
        @media (min-width: 768px) {
            [lang="en"] h1 {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height: auto !important;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .start h1 { opacity: 1;}

        .camera-container {
            position: relative;
            width: 100%; max-width: 800px;
            margin: 0 auto 20px;
            overflow: hidden; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);
        }
        .start .camera-container { display: none; }

        #video {
            width: 100%;
            height: auto;
            display: block;
        }

        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap; width: 100%; position: fixed; bottom: 20px; left: 0;
        }

        button {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            background: #000;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;font-family: "Noto Serif JP", serif;
        }

        button:hover {
            transform: translateY(-2px);
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .audio-controls {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            margin: 20px 0; display: none!important;
        }

        .slider-container {
            margin: 10px 0; display: none;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #ffffff;
        }

        input[type="range"] {
            width: 100%;
            margin: 10px 0;
        }

        .detection-info {
            text-align: center;
            margin: 20px 0;
            min-height: 50px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            backdrop-filter: blur(10px); display:none!important;
        }

        .mystical-particles {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ff6b9d;
            border-radius: 50%;
            pointer-events: none;
            animation: float 4s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: translateY(-50px) rotate(180deg);
                opacity: 1;
            }
        }

        .captured-image {
            margin: 0px 0;
            text-align: center; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 800px;
        }

        .captured-image canvas {
            width: 100%;
            height: auto;
        }

        .status {
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
            opacity: 0.8; display: none;
        }

        .state-container {
            text-align: center;
            margin: 0px 0;
        }
        
        #loadingState { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%,0%); width: 100%; }
        
        #initialState { width: 100%; position: fixed; bottom: 20px; left: 0;}

        .loading-message {
            font-size: .9em;
            color: #000;
            text-align: center;
            padding: 20px 20px 10px 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            animation: pulse 2s ease-in-out infinite;
        }
        
        .loading-progress {
            padding: 0 20px 20px 20px;
            text-align: center;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background: #ffffff;
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-size: 0.8em;
            color: #000;
            font-weight: 500;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 1;
            }
        }
        
        #initialize { position: fixed; top:10px; left: 10px; background: none; width: 60px; height: 60px; border-radius: 50%; background-image: url("../img/back.svg"); background-position: center; background-size: 30px; background-repeat: no-repeat; text-indent: -9999px; }
        
        @media (orientation: landscape) {
 h1 {
           
            font-size: 5vw; height: 100svh; 
        }
}
#waveCanvas {
    position: fixed;
    left: 0;
    width: 100vw;
    height: 30px; /* 比較的太い線幅 */
    z-index: 10;
    pointer-events: none;
    opacity: 1;
}

/* 画面上下中央の2本に配置 */
@media (orientation: portrait), (orientation: landscape) {
    #waveCanvas { top: calc(50% - 15px); }
}