@charset "utf-8";
/* CSS Document */
body {
            margin: 0;
            padding: 0;
            background: #02553E;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        
        #canvas {
            display: block;
            background: transparent;
        }
        
        #controls {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 200; 
            width: 100%;
        }
        
        #startButton, #resetButton {
            background: none; background-color: transparent; text-indent: -9999px;
            border: none;
            color: white;
            font-size: 18px;
            border-radius: 50%;
            cursor: pointer; width: 80px; height: 80px;
           
            transition: transform 0.2s;
            
            position: fixed; 
            bottom: 40px; 
            left: 50%; z-index: 101;
            transform: translateX(-50%); background-image: url("../img/play.svg"); background-repeat: no-repeat; background-position: center; background-size: 60px;
        }
        
        #resetButton {
           
            display: none; /* 初期状態では非表示 */
            background-image: url("../img/stop.svg");
        }
        
        #status {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 10px;
            z-index: 100;
            border-radius: 5px; display: none!important;
        }
        
        #debugCanvas {
            position: absolute;
            top: 0px;
            left: 0;
            border: 1px solid white;
            z-index: 100;
            display: none!important;
        }
        
        #video {
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100svh; 
            z-index: 0;
            display: none; 
            object-fit: cover; 
            object-position: center; opacity: .3;
        }
        
        /* iOS Safari対応: Canvas波エフェクト */
        #waveCanvas {
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100vh; 
            z-index: -1;
            display: none;
            opacity: 0.2;
        }
        
        #maxNodes {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            z-index: 100; 
            display: none;
        }
        
        #maxNodes input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            width: 80px;
        }
        
        #hiddenCanvas {
            display: none;
        }
        
        h2 { 
            font-size: 200%;
            font-family: "Noto Serif JP", serif; 
            font-weight: 600; 
            width: 100%; margin: 0;
            animation: gentleGlow 3s ease-in-out infinite;
        }

        /* 初期画面用のh2明滅アニメーション */
        @keyframes gentleGlow {
            0%, 100% {
                opacity: 0.2;
            }
            50% {
                opacity: .7;
            }
        }