/* =========================================
   1. 基本設定 & フォント
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

   body {
       background-color: #000;
       color: #0f0;
       font-family: 'VT323', 'Courier New', Courier, monospace;
       margin: 0;
       padding: 0;
       height: 100vh;
       width: 100vw;
       overflow: hidden;
       white-space: pre;
   }
   
   /* =========================================
      2. 全体エフェクト（走査線・画素・ノイズ）
      ========================================= */
   /* body::before を最前面に配置し、pointer-events: none にすることで、
      「画面の向こう側」ではなく「モニターのガラス面」の汚れや走査線を表現します。
      これによりロゴもターミナルも全て「古ぼけて」見えます。
   */
   body::before {
       content: " ";
       display: block;
       position: fixed;
       top: 0; left: 0; bottom: 0; right: 0;
       /* 1. 縦の走査線 (scanline) */
       /* 2. RGBノイズ (color-noise) */
       /* 3. 画素のメッシュ (pixel-mesh) ← これが重要 */
       background: 
           linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
           linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)),
           radial-gradient(rgba(0, 150, 0, 0.1) 1px, transparent 1px); 
       background-size: 100% 3px, 3px 100%, 3px 3px;
       z-index: 10001; /* 全ての要素（オーバーレイ含む）の上に被せる */
       pointer-events: none;
   }
   
   /* =========================================
      3. メインUI（ウィンドウバー & ターミナル）
      ========================================= */
   #window-bar {
       position: fixed;
       top: 0; left: 0;
       width: 100%; height: 40px;
       background: rgba(15, 15, 15, 0.95);
       display: flex;
       align-items: center;
       padding: 0 15px;
       gap: 8px;
       z-index: 500;
       border-bottom: 1px solid #222;
   }
   
   .dot { width: 12px; height: 12px; border-radius: 50%; }
   .red { background: #ff5f56; box-shadow: 0 0 5px #ff5f56; }
   .yellow { background: #ffbd2e; }
   .green { background: #27c93f; }
   
   .title {
       color: #444;
       font-size: 12px;
       margin-left: 10px;
       letter-spacing: 1px;
       text-transform: uppercase;
   }
   
   #terminal {
       height: calc(100vh - 50px);
       margin-top: 50px !important;
       padding: 20px;
       overflow-y: auto;
       line-height: 1.2;
       font-size: 22px;
       text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
       animation: flicker 0.15s infinite;
       z-index: 1;
       -ms-overflow-style: none;
       scrollbar-width: none;
       padding-bottom: 200px !important;
       scroll-behavior: auto !important;
   }
   
   #terminal::-webkit-scrollbar {
       display: none;
   }
   
   /* =========================================
      4. 起動画面（ロゴ・グリッチ完全版）
      ========================================= */
   #overlay {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       position: fixed;
       top: 0; left: 0;
       width: 100vw; height: 100vh;
       background-color: #000;
       z-index: 9999;
       transition: opacity 1s ease;
   }
   
   /* ロゴ画像の質感を「汚す」処理 */
   #overlay img {
       max-width: 40%;
       /* 1. ボカし＋色収差（RGBズレ）を影で表現 */
       filter: blur(0.6px) 
               drop-shadow(3px 0 0 rgba(255, 0, 0, 0.5)) 
               drop-shadow(-3px 0 0 rgba(0, 0, 255, 0.5))
               brightness(1.1);
       
       /* 2. 背景となじませる透過 */
       opacity: 0.8;
   
       /* 3. エッジをカクカクさせる */
       image-rendering: pixelated;
   
       position: relative;
       /* 4. 常に微振動(flicker)させつつ、時々激しく壊れる(logo-glitch) */
       animation: flicker 0.1s infinite, logo-glitch 5s infinite ease-in-out alternate-reverse;
   }
   
   /* オーバーレイ背景にも動くノイズを追加 */
   #overlay::after {
       content: "";
       position: absolute;
       top: 0; left: 0;
       width: 100%; height: 100%;
       /* 大きな走査線ノイズ */
       background: linear-gradient(rgba(0, 255, 0, 0) 50%, rgba(0, 255, 0, 0.05) 50%);
       background-size: 100% 4px;
       pointer-events: none;
       z-index: 10000;
       animation: scan-mv 10s linear infinite; /* ゆっくり流れる */
   }
   
   /* =========================================
      5. サブウィンドウ & ガジェット類
      ========================================= */
   .sub-window {
       position: fixed;
       width: 250px;
       height: 150px;
       background: rgba(0, 20, 0, 0.85); /* 視認性のため少し濃く */
       border: 1px solid #0f0;
       box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
       z-index: 100;
       font-family: 'VT323', monospace;
       overflow: hidden;
       pointer-events: none;
   }
   
   #sub-window-1 { top: 60px; right: 20px; }
   #sub-window-2 { bottom: 20px; right: 20px; }
   
   /* カメラ窓の親要素 */
   #sub-window-3 {
       top: 60px;
       left: 20px;
       width: 250px;
       height: 180px;
       position: fixed;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       /* ボーダーと背景を追加してサブウィンドウと統一感を持たせる */
       border: 1px solid #0f0;
       background: #000;
       z-index: 100;
       box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
   }
   
   .sub-title {
       background: #0f0;
       color: #000;
       font-size: 14px;
       padding: 2px 8px;
       font-weight: bold;
       flex-shrink: 0;
   }
   
   .sub-content {
       padding: 10px;
       font-size: 14px;
       color: #0f0;
       line-height: 1.2;
       opacity: 0.8;
   }
   
   /* ビデオ要素 */
   #webcam {
       width: 100%;
       height: 100%;
       object-fit: cover;
       /* ナイトビジョン風加工 */
       filter: sepia(100%) hue-rotate(90deg) brightness(80%) contrast(150%);
       opacity: 0.7;
       margin: 0;
       padding: 0;
   }
   
   /* ビデオ上の走査線 */
   .scan-line-v {
       position: absolute;
       top: 0; left: 0; width: 100%; height: 2px;
       background: rgba(0, 255, 0, 0.8);
       box-shadow: 0 0 10px #0f0;
       animation: scan-mv 2s linear infinite;
       z-index: 10;
   }
   
   /* 緊急停止ボタン */
   #kill-switch {
       position: fixed;
       bottom: 10px;
       left: 10px;
       color: #333;
       font-size: 10px;
       cursor: pointer;
       z-index: 1000;
       font-family: sans-serif; /* 視認性確保 */
       transition: color 0.3s;
   }
   #kill-switch:hover { color: #f00; text-shadow: 0 0 5px #f00; }
   
   /* =========================================
      6. アニメーション定義 (Keyframes)
      ========================================= */
   
   /* ロゴを物理的に切り刻むグリッチ */
   @keyframes logo-glitch {
       0%, 90%, 100% { 
           clip-path: inset(0 0 0 0); 
           transform: translate(0); 
       }
       91% { 
           clip-path: inset(20% 0 50% 0); 
           transform: translate(-5px, 2px); 
       }
       92% { 
           clip-path: inset(50% 0 20% 0); 
           transform: translate(5px, -2px); 
           filter: invert(1); /* 一瞬色が反転 */
       }
       93% { 
           clip-path: inset(0 0 0 0); 
           transform: translate(0); 
       }
       96% {
           clip-path: inset(10% 0 80% 0);
           transform: translate(-2px, 0);
       }
   }
   
   /* 画面全体の微振動 */
   @keyframes shake {
       0% { transform: translate(0, 0); }
       20% { transform: translate(-3px, 2px); }
       40% { transform: translate(3px, -2px); }
       60% { transform: translate(-3px, -2px); }
       80% { transform: translate(3px, 2px); }
       100% { transform: translate(0, 0); }
   }
   
   /* 明滅・接触不良感 */
   @keyframes flicker {
       0% { opacity: 0.95; }
       50% { opacity: 1.0; }
       100% { opacity: 0.95; }
   }
   
   /* 走査線の移動 */
   @keyframes scan-mv {
       0% { top: 0; background-position: 0 0; }
       100% { top: 100%; background-position: 0 100vh; }
   }
   
   /* ユーティリティ */
   .fade-out {
       opacity: 0;
       pointer-events: none;
   }
   
   .line[style*="color: #ff4444"] {
       font-weight: bold;
       animation: pulse-red 0.5s infinite;
   }
   
   @keyframes pulse-red {
       0% { text-shadow: 0 0 5px #f00; }
       50% { text-shadow: 0 0 15px #f00; }
       100% { text-shadow: 0 0 5px #f00; }
   }