/* =================================================================
 * Vision Test Specific Styles (style.css)
 * =================================================================
 */

/* --- キャリブレーション --- */
#calibration-target {
    transform-origin: center center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* JSで即時反映させるため transition は無し */
}

/* カード */
.calib-card {
    background-color: #333;
    border-radius: 8px;
    color: white;
    position: relative;
    /* 中身を強制的に中央揃え */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 100円玉 */
.calib-coin {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f0f0f0, #bdbdbd);
    border: 2px solid #9e9e9e;
    color: #555;
    /* 数字を中央揃え */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 定規 */
.calib-ruler {
    background-color: #f8f9fa;
    border: 1px solid #aaa;
    color: black;
    display: flex;
    align-items: flex-end;
    background-image: linear-gradient(90deg, #333 1px, transparent 1px);
    background-size: 20% 30%;
    background-repeat: repeat-x;
    background-position: bottom;
    padding-bottom: 5px;
    padding-left: 5px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* --- 共通検査ステージ & 各テスト強制白背景 --- */
.visual-stage,
#amsler-stage,
#astigmatism-stage,
#depth-stage,
#redgreen-content .card-body .d-flex.border,
#blindspot-stage {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.visual-stage {
    min-height: 400px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

[data-bs-theme="dark"] .visual-stage,
[data-bs-theme="dark"] #amsler-stage,
[data-bs-theme="dark"] #astigmatism-stage,
[data-bs-theme="dark"] #depth-stage,
[data-bs-theme="dark"] #redgreen-content .card-body .d-flex.border,
[data-bs-theme="dark"] #blindspot-stage {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #333 !important;
}

[data-bs-theme="dark"] .visual-message h3 {
    color: #000000 !important;
}

/* --- ランドルト環, 乱視, 赤緑, アムスラー --- */
#landolt-c-container svg,
#astigmatism-stage svg,
#amsler-stage svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* --- コントローラー --- */
.d-pad-grid {
    display: grid;
    grid-template-columns: 64px 64px 64px;
    grid-template-rows: 64px 64px 64px;
    gap: 8px;
}

.dir-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

[data-bs-theme="dark"] .dir-btn.btn-outline-dark {
    color: #f8f9fa;
    border-color: #6c757d;
}

[data-bs-theme="dark"] .dir-btn.btn-outline-dark:hover,
[data-bs-theme="dark"] .dir-btn.btn-outline-dark:active {
    background-color: #495057;
    color: #fff;
    border-color: #f8f9fa;
}

/* --- 深視力 (三桿法) --- */
.rod {
    position: absolute;
    width: 8px;
    height: 60%;
    top: 20%;
    background-color: #000;
    border-radius: 4px;
    z-index: 2;
    /* width変更時のアニメーションは不要 */
    transition: transform 0.1s linear, box-shadow 0.5s ease;
}

/* 静止している左右の棒：中心基準 */
.rod-static {
    /* 位置はJSで制御するため、CSSでのleft指定は削除 */
    transform: translateX(-50%);
}

/* JS参照用のクラスとして残すが、CSSでの位置指定はしない */
.rod-static.rod-left {}

.rod-static.rod-right {}

/* 真ん中の動く棒：中心基準 */
.rod-moving {
    left: 50%;
    background-color: #000;
    transform: translateX(-50%);
    z-index: 1;
    transition: none !important;
    /* JS制御のためtransition無効化 */
    will-change: transform;
}

/* --- アムスラーチャート --- */
#amsler-stage {
    display: inline-block;
    border: 2px solid #000 !important;
}

/* --- 盲点チェック --- */
#blindspot-stage {
    margin: 0 auto;
    border: 2px solid #000 !important;
}

#blindspot-stage .display-1 {
    color: #000000 !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .visual-stage {
        min-height: 300px;
    }

    .d-pad-grid {
        grid-template-columns: 50px 50px 50px;
        grid-template-rows: 50px 50px 50px;
    }

    .dir-btn {
        font-size: 1.2rem;
    }

    #blindspot-stage .display-1 {
        font-size: 3rem !important;
    }
}

/* --- 関連ツールリンク (Footer) --- */
.vision-tool-card {
    transition: all 0.2s ease;
}

.vision-tool-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    z-index: 1;
}