@charset "UTF-8";

body { margin: 0; overflow: hidden; background-color: #263238; font-family: 'Noto Sans JP', sans-serif; user-select: none; }

.app-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1;
    background: #000;
}

#input-video { display: none; }
#output-canvas { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; 
    z-index: 2; transform: scaleX(-1);
}

.ui-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }

/* ヘッダー */
.header-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    padding: 10px 20px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: flex-start; gap: 20px;
    z-index: 100; pointer-events: auto;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}
.btn-menu {
    background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255,255,255,0.5); border-radius: 30px;
    padding: 8px 16px; color: #fff; font-weight: bold; font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    backdrop-filter: blur(5px);
}
.header-title { color: #fff; font-weight: bold; font-size: 1.2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* オーバーレイ共通 */
.overlay-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 50; pointer-events: auto;
    padding-top: 60px;
    box-sizing: border-box;
}
.hidden { display: none !important; }

/* セットアップカード */
.setup-card {
    background: white; padding: 25px; border-radius: 20px; width: 90%; max-width: 600px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); text-align: left;
    max-height: 85vh; overflow-y: auto;
}
.card-title { font-size: 1.8rem; color: #006064; margin-bottom: 10px; font-weight: 900; text-align: center;}
.card-desc { 
    color: #555; margin-bottom: 15px; line-height: 1.5; font-size: 0.9rem; 
    background: #e0f7fa; padding: 10px; border-radius: 8px;
}

/* グリッドレイアウト */
.settings-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;
}
.s-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; /* これ重要：Flex内のはみ出し防止 */ }
.s-item label { font-weight: bold; color: #333; font-size: 0.9rem; white-space: nowrap; }

/* トグルスイッチ */
.toggle-switch { display: flex; background: #ddd; border-radius: 8px; overflow: hidden; height: 40px; width: 100%; }
.toggle-switch input { display: none; }
.toggle-switch label {
    flex: 1; display: flex; justify-content: center; align-items: center;
    cursor: pointer; font-weight: bold; color: #777; font-size: 0.9rem;
}
.toggle-switch input:checked + label { background: #00bcd4; color: white; }

/* セレクトボックスのはみ出し防止 */
select { 
    padding: 5px 8px; border-radius: 8px; border: 1px solid #ccc; 
    font-size: 0.95rem; height: 40px; background: #fff; width: 100%; box-sizing: border-box; 
}

.start-btn {
    background: #00bcd4; color: white; border: none; padding: 12px 0; border-radius: 50px;
    font-size: 1.3rem; font-weight: bold; cursor: pointer; width: 100%; display: block;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.4); text-align: center; margin-top: 5px;
}
.btn-sub { 
    background: transparent; border: 2px solid #999; color: #777; padding: 10px; 
    border-radius: 50px; cursor: pointer; width: 100%; margin-top: 10px; display: block; 
}

.result-stats { margin: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 15px 0; }
.res-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.res-label { font-size: 1rem; color: #555; font-weight: bold; }
.res-val { font-size: 2.5rem; font-weight: 900; color: #00bcd4; font-family: 'Orbitron'; line-height: 1; }
.res-unit { font-size: 1rem; font-weight: bold; color: #555; margin-left: 5px; }
.res-desc { text-align: center; font-weight: bold; color: #0097a7; margin-top: 10px; font-size: 1.1rem; }

#instruction-overlay {
    position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
    width: 100%; text-align: center; pointer-events: none;
}
#instruction-text {
    font-size: 5rem; font-weight: 900; color: #fff;
    text-shadow: 0 0 20px rgba(0,188,212, 0.8); font-family: 'Noto Sans JP';
    opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: scale(0.8);
}
#instruction-text.active { opacity: 1; transform: scale(1.0); }

#warning-msg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(211, 47, 47, 0.85); color: white; padding: 30px;
    border-radius: 15px; text-align: center; font-weight: bold; font-size: 1.5rem;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); pointer-events: none;
}

#loading-msg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000;
    display: flex; justify-content: center; align-items: center; color: white; z-index: 200;
}