/* ===== customStyle.css =====
 * このファイルはスタンプラリーアプリケーションの配色カスタマイズ用です。
 * 元のスタイルを上書きして、アプリケーションの見た目を変更します。
 */

/* ===== 基本スタイル ===== */
/* 背景色を変更 - 元の #f0f8ff (薄い青) から暖かみのある色へ */
body {
    background-color: #fff5e6;
}

/* ===== ヘッダー ===== */
/* ページタイトル(h1)の色を変更 */
h1 {
    color: #8b4513; /* サドルブラウン */
}

/* セクションタイトル(h2)の色を変更 */
h2 {
    color: #8b4513; /* サドルブラウン */
}

/* ===== ボタン ===== */
/* 位置取得ボタンの色を変更 - 元の #4CAF50 (緑) から */
#get-location {
    background-color: #ff7f50; /* コーラル */
    color: white;
}

/* チェックインボタン(有効時)の色を変更 - 元の #008CBA (青) から */
#check-in.enabled {
    background-color: #20b2aa; /* ライトシーグリーン */
    color: white;
}

/* チェックインボタン(無効時)の色はそのまま */

/* ===== メッセージカード ===== */
/* メッセージカードの背景色と枠線を変更 */
.message-card {
    background-color: #fff9f0;
    border: 1px solid #ffe4c4; /* ビスク */
    box-shadow: 0 2px 5px rgba(139, 69, 19, 0.1);
}

/* メッセージカード内のテキスト色を変更 */
.message-card p {
    color: #5a3d1c;
}

/* ===== スタンプ表示エリア ===== */
/* スタンプのラッパー要素のスタイルを変更 */
.stamp-wrapper {
    background-color: #fff9f0;
    border: 1px solid #ffe4c4;
}

/* スタンプラベルの色を変更 */
.stamp-label {
    color: #5a3d1c;
}

/* コード表示の強調スタイルを変更 */
.message-card strong {
    background-color: #ffe4c4; /* ビスク */
    color: #8b4513; /* サドルブラウン */
}

/* タイマー表示の色を変更 */
#timer-info p {
    color: #ff6347; /* トマト - 少し柔らかい赤 */
}

/* ===== スタンプポイント一覧 ===== */
/* スタンプポイントの各アイテムのスタイルを変更 */
.stamp-point-item, .checkpoint-item {
    background-color: #fff9f0;
}

/* スタンプポイントの名前の色を変更 */
.point-name {
    color: #8b4513; /* サドルブラウン */
}

/* 地図リンクボタンの色を変更 - 元の #4285F4 (Googleブルー) から */
.map-link-button {
    background-color: #20b2aa; /* ライトシーグリーン */
}

/* 地図リンクボタンのホバー状態の色を変更 */
.map-link-button:hover {
    background-color: #3cb371; /* ミディアムシーグリーン */
}

/* ===== エラーメッセージ ===== */
/* エラーメッセージの色を変更 - 元の #e74c3c (赤) から */
.error-message {
    color: #ff6347; /* トマト - 少し柔らかい赤 */
}

/* ===== チェックポイント情報 ===== */
/* チェックポイント名の色を変更 */
.checkpoint-name {
    color: #8b4513; /* サドルブラウン */
}

/* チェックポイント距離表示の色を変更 */
.checkpoint-distance {
    color: #20b2aa; /* ライトシーグリーン */
}

/* チェックポイント距離が近い場合の色を変更 */
.checkpoint-distance.near {
    color: #ff7f50; /* コーラル */
}