@charset "utf-8";
/* CSS Document */
 body {
            margin: 0;
            padding: 0;
            background: #fff;
            font-family: "Noto Sans JP", sans-serif;
            overflow: hidden;
        }
        
        #canvas {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: none;
            background: #fefefe;
            border: 0px solid #333;
            border-radius: 0px;
            z-index: 1; 
            width: 100%;
        }
        
        #controls {
            position: fixed;
            bottom: 0;
            left: 0px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0);
            padding: 15px 15px 40px 15px;
            border-radius: 0px; 
            box-sizing: border-box;
            width: 100%;
            text-align: center;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            font-size: 14px;
            display: inline-block;
        }
        
        button:hover {
            background: #45a049;
        }
        
        button:disabled {
            background: #ccc;
            cursor: not-allowed; display: none!important;
        }
        
        /* アイコンボタンのスタイル */
        .icon-btn {
            background: transparent !important;
            color: #000 !important;
            padding: 8px !important;
            border: 1px solid #ddd !important;
            border-radius: 50% !important;
            width: 40px;
            height: 40px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        
        .icon-btn:hover {
            background: rgba(0, 0, 0, 0.1) !important;
        }
        
        .icon-btn:disabled {
            background: rgba(0, 0, 0, 0.1) !important;
            color: #999 !important;
            cursor: not-allowed;
            display: flex !important;
        }
        
        .icon-btn .material-symbols-outlined {
            font-size: 40px;
        }
        
        /* 黒い背景のボタン */
        .black-btn {
            background: #000 !important;
            color: white !important;
        }
        
        .black-btn:hover {
            background: #333 !important;
        }
        
        .black-btn:disabled {
            background: #666 !important;
            cursor: not-allowed;
            display: inline-block !important;
        }
        
        .demo-btn {
            background: #2196F3;
        }
        
        .demo-btn:hover {
            background: #1976D2;
        }
        
        .music-btn {
            background: #9C27B0;
        }
        
        .music-btn:hover {
            background: #7B1FA2;
        }
        
        #header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: white;
            border-bottom: 0px solid #ddd;
            z-index: 1002;
            display: flex;
            align-items: center;
            justify-content: center;
            /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
        }
        
        #headerTitle {
            margin: 0;
            font-size: 20px;
            font-weight: 500;
            color: #000;font-family: "Inter", sans-serif; font-weight: 700;
  font-optical-sizing: auto;
        }
        
        #status {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            z-index: 1001;
            margin: 0;
            padding: 12px;
            background: #e7f3ff;
            border-radius: 0;
            font-size: 14px;
            line-height: 1.4;
            text-align: center;
            border-bottom: 0px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #statusText {
            flex: 1;
        }
        
        .back-btn {
            position: absolute;
            left: 0px;
            width: 50px;
            height: 50px;
            background: white !important;
            color: #000 !important;
            border: 0px solid #ddd !important;
            border-radius: 8px !important;
            margin: 0 !important;
            display: none !important;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease; text-indent: -9999px;
        }
        
        .back-btn.show {
            display: flex !important;
        }
        
        .back-btn:hover {
            background: #f5f5f5 !important;
            border-color: #ccc !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .back-btn .material-symbols-outlined {
            font-size: 24px; text-indent: 0;
        }
        
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        #musicStatus {
            margin-top: 5px;
            padding: 6px;
            background: #f3e5f5;
            border-radius: 4px;
            font-size: 11px;
            color: #6a1b9a;
        }
        
        #webcam {
            position: absolute;
            top: 120px;
            right: 20px;
            border: 3px solid #333;
            border-radius: 12px;
            z-index: 1001;
            display: none !important;
            object-fit: contain;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            background: #000;
        }
        
        #webcam.show {
            display: block !important;
        }
        
        .loading {
            color: #666;
            font-style: italic;
        }
        
        .error {
            color: #d32f2f;
            background: #ffebee;
        }
        
        .success {
            color: #2e7d32;
            background: #e8f5e8;
        }
        
        #gazeCursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid #ff4444;
            border-radius: 50%;
            background: rgba(255, 68, 68, 0.3);
            pointer-events: none;
            z-index: 9999;
            display: none;
            transform: translate(-50%, -50%);
        }
        
        #webgazerFaceOverlay,#webgazerVideoContainer,#check, #musicControls,#musicStatus,#adjustmentControls,#stopMusicBtn { 
            display: none!important;
        }
        
        /* 画面状態によるボタン表示制御 */
        
        /* 初期画面：WebGazer初期化ボタンのみ表示 */
        .initial-mode #startBtn, 
        .initial-mode #calibrateBtn, 
        .initial-mode #testBtn, 
        .initial-mode #demoBtn, 
        .initial-mode #pauseBtn, 
        .initial-mode #clearBtn, 
        .initial-mode #saveBtn,
        .initial-mode #check, 
        .initial-mode #adjustmentControls { 
            display: none !important;
        }
        
        .initial-mode #initWebGazerBtn {
            display: inline-block !important;
        }
        
        /* キャリブレーション画面：キャリブレーションボタンのみ表示 */
        .calibration-mode #initWebGazerBtn,
        .calibration-mode #startBtn,
        .calibration-mode #testBtn,
        .calibration-mode #demoBtn,
        .calibration-mode #pauseBtn,
        .calibration-mode #clearBtn,
        .calibration-mode #saveBtn,
        .calibration-mode #check,
        .calibration-mode #adjustmentControls {
            display: none !important;
        }
        
        .calibration-mode #calibrateBtn {
            display: inline-block !important;
        }
        
        /* アイトラッキング画面：再生、一時停止、保存のみ表示 */
        .tracking-mode #initWebGazerBtn,
        .tracking-mode #calibrateBtn,
        .tracking-mode #testBtn,
        .tracking-mode #demoBtn,
        .tracking-mode #clearBtn,
        .tracking-mode #check,
        .tracking-mode #adjustmentControls {
            display: none !important;
        }
        
        .tracking-mode #startBtn,
        .tracking-mode #pauseBtn,
        .tracking-mode #saveBtn {
            display: inline-block !important; width: 80px; height: 80px; border-radius: 50%;
        }
.tracking-mode #startBtn:disabled, .tracking-mode #pauseBtn:disabled, .tracking-mode #saveBtn:disabled { display: none!important;}        

        /* 保存ボタンを背景黒に */
        .tracking-mode #saveBtn {
            background: #000 !important;
            color: white !important; display: none!important;
        }
        
        #saveBtn:hover {
            background: #333 !important;
        }
        
        /* disabledのボタンを非表示 */
        button:disabled {
            display: none !important;
        }
        
        #musicControls {
            margin-top: 10px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 5px 0;
        }
        
        .slider-container label {
            width: 100px;
            font-size: 12px;
        }
        
        .slider-container input[type="range"] {
            width: 120px;
        }
        
        .slider-container span {
            width: 40px;
            text-align: right;
            font-size: 12px;
        }
#calibrationInstructions h3 { font-size: 100%; }
#calibrationInstructions h4 { font-size: 80%; }
#calibrationInstructions p { font-size: 60%;}
#calibrationInstructions { padding: 0 20px;}

#webgazerVideoContainer,#webgazerVideoContainer ,#webgazerVideoCanvas ,#webgazerFaceOverlay ,#webgazerFaceFeedbackBox,#webgazerVideoFeed  { width:100%!important; height:100svh!important; /*display: block!important;*/ z-index: -1; opacity: 0;}