/*
    Hestia's Definitive Blueprint for the "Sanctuaries of Misdirection" (The True Final Word)
    ----------------------------------------------------------------------------------------
    File: error.css
    Role: To create a beautiful, warm, and FLAWLESSLY BALANCED space for those who have lost their way.
*/
.error-page-body { display: flex; flex-direction: column; min-height: 100vh; background-color: #f8f9fa; }
.error-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 4rem 0; }
.error-container { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
@media (min-width: 992px) { .error-container { flex-direction: row; text-align: left; gap: 4rem; } }
.error-character-area { position: relative; flex-shrink: 0; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.error-character { max-width: 100%; max-height: 100%; height: auto; animation: float-gentle 4s ease-in-out infinite; object-fit: contain; }
.error-sub-character { position: absolute; height: 80px; bottom: 0; right: -20px; animation: peek-a-boo 3s ease-in-out infinite 1s; }
.error-text-area { max-width: 550px; }
.error-title { font-family: var(--font-family-title); font-size: clamp(4rem, 10vw, 6rem); color: #d0d0d0; margin: 0; line-height: 1; }
.error-subtitle { font-size: 1.2rem; font-weight: bold; color: #777; margin: 0.5rem 0 2rem 0; }
.error-dialogue { background-color: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; border-top: 4px solid var(--color-primary); box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.error-dialogue p { margin: 0 0 1rem 0; line-height: 1.8; }
.error-dialogue p:last-child { margin-bottom: 0; }
.error-actions { display: flex; gap: 1rem; justify-content: center; }
@media (min-width: 992px) { .error-actions { justify-content: flex-start; } }
.error-character-area.interactive { cursor: pointer; transition: transform 0.3s; }
.error-character-area.interactive:hover { transform: scale(1.05); }
.game-instruction { font-weight: bold; color: var(--color-primary); margin-top: 1rem; }
.error-character-area.colliding { animation: shake-and-vanish 1.5s forwards ease-in-out; }
@keyframes shake-and-vanish { 0% { transform: translateX(0); } 10%, 30%, 50% { transform: translateX(-10px) rotate(-5deg); } 20%, 40% { transform: translateX(10px) rotate(5deg); } 70% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.emergency-survey { margin-top: 2rem; background-color: white; padding: 1.5rem; border-radius: 8px; border: 1px dashed #b0bec5; }
.emergency-survey > p { font-weight: bold; margin: 0 0 1rem 0; }
.survey-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.survey-option { flex-grow: 1; background-color: #f0f0f0; border: 1px solid #ccc; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.survey-option:hover { background-color: #e0e0e0; }
.survey-thanks { display: none; margin-top: 1rem; font-weight: bold; color: #43a047; }
@keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes peek-a-boo { 0%, 20%, 100% { transform: translateY(10px) scale(0.9); opacity: 0; } 10%, 15% { transform: translateY(0) scale(1); opacity: 1; } }

/*
    Hestia's Definitive Blueprint for the "404" Sanctuary (Update)
    --------------------------------------------------------------
    File: /css/error.css (Addition)
*/

/* (前略：既存のスタイルは変更なし) */

/* Hestia's Creation: フォリオ先生の、落ち着いた、導き */
.folio-guide {
    border-top-color: #4caf50; /* 先生の、魂の色（緑） */
    margin-top: -1rem; /* コネクトの会話と、少し、近づける */
}

/* ボタンの、配置 */
.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
@media (min-width: 992px) {
    .error-actions {
        justify-content: flex-start;
    }
}

/* 二つ目のボタン（旧サイトへ）の、意匠 */
.cta-button.secondary {
    background-color: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.cta-button.secondary:hover {
    background-color: var(--color-primary);
    color: white;
}