/* =================================================================
 * コントラスト感度チェック (style.css)
 * スコープは #app-visiontest-contrast に限定
 * ================================================================= */

/* --- 検査ステージ ---
 * 検査面はサイトのテーマ（ライト/ダーク）に依存させず、
 * Canvas が自前で背景輝度を描画する。ここではレイアウトのみ。 */
#app-visiontest-contrast .cs-stage {
    min-height: 360px;
    background-color: #808080; /* Canvas 未描画時のフォールバック */
    overflow: hidden;
}

#app-visiontest-contrast #cs-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    /* 画面のピクセルグリッドに素直に乗せ、薄い階調をなまさない */
    image-rendering: auto;
}

/* 開始前・中断時のメッセージ（Canvasの上に重ねる）
 * 既定＝暗い背景（暗所モード）用の明るい文字。
 * 明るい背景（明所モード）では JS が .cs-on-light を付けて反転させる。 */
#app-visiontest-contrast .cs-message-text {
    color: #f8f9fa;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
#app-visiontest-contrast .cs-message-sub {
    color: #dee2e6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
}
#app-visiontest-contrast .cs-on-light .cs-message-text {
    color: #16191d;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}
#app-visiontest-contrast .cs-on-light .cs-message-sub {
    color: #41474d;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}

/* --- 進捗バー --- */
#app-visiontest-contrast .cs-progress {
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.15);
}

/* --- 十字キー（D-Pad） --- */
/* 回答の主役は十字キー。大きく中央に置く */
#app-visiontest-contrast .cs-dpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(3, 64px);
    gap: 6px;
}
#app-visiontest-contrast .cs-dir-btn {
    font-size: 1.5rem;
}

/* 「見えない/わからない」は例外操作。十字キーより主張させない */
#app-visiontest-contrast .cs-unknown-btn {
    font-size: 0.9rem;
    padding: 0.4rem 1.1rem;
}

/* 回答が登録された瞬間のフィードバック（正誤は明かさない中立フラッシュ） */
#app-visiontest-contrast .cs-dir-btn.cs-flash,
#app-visiontest-contrast .cs-unknown-btn.cs-flash {
    animation: cs-flash-anim 0.28s ease;
}
@keyframes cs-flash-anim {
    0% { transform: scale(1); }
    45% { transform: scale(0.9); box-shadow: 0 0 0 4px rgba(124, 90, 195, 0.35); }
    100% { transform: scale(1); }
}

/* --- 結果バンドの色分け --- */
#app-visiontest-contrast .cs-band-excellent { color: #198754; }
#app-visiontest-contrast .cs-band-good { color: #0d6efd; }
#app-visiontest-contrast .cs-band-normal { color: #0dcaf0; }
#app-visiontest-contrast .cs-band-mild { color: #fd7e14; }
#app-visiontest-contrast .cs-band-low { color: #dc3545; }

/* =================================================================
 * モバイル対応
 * ================================================================= */
@media (max-width: 768px) {
    #app-visiontest-contrast .cs-stage {
        min-height: 260px;
    }
    /* タッチターゲットを大きく */
    #app-visiontest-contrast .cs-dpad-grid {
        grid-template-columns: repeat(3, 68px);
        grid-template-rows: repeat(3, 68px);
    }
}

/* =================================================================
 * ダークモード時の視認性（十字キー・SEOコンテンツ）
 * ================================================================= */
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dir-btn {
    color: #f8f9fa;
    border-color: #f8f9fa;
}
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dir-btn:hover:not(:disabled),
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dir-btn:focus:not(:disabled),
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dir-btn:active:not(:disabled) {
    background-color: #f8f9fa;
    color: #212529;
}
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dir-btn:disabled {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}
[data-bs-theme="dark"] #app-visiontest-contrast .cs-dpad-grid .text-muted {
    color: #adb5bd !important;
}

/* SEOコンテンツ（比較表）のダークモード視認性 */
[data-bs-theme="dark"] #app-visiontest-contrast .seo-table .table-light,
[data-bs-theme="dark"] #app-visiontest-contrast .seo-table .table-light th {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
    border-color: #495057 !important;
}
[data-bs-theme="dark"] #app-visiontest-contrast .seo-table th.bg-body-tertiary {
    background-color: #2b3035 !important;
    color: #e9ecef !important;
}