/* --- Tapping Game Specific Styles --- */

/* 検査画面のオーバーレイ設定 */
#game-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #faf7f2; z-index: 1000;
}

/* ステータスバー */
.status-bar {
    position: absolute; top: 0; width: 100%; height: 70px;
    background: rgba(255, 255, 255, 0.95);
    display: flex; justify-content: space-around; align-items: center;
    font-weight: 900; font-size: 1.4rem; border-bottom: 3px solid #d4a373;
    color: #6d4c41; z-index: 10;
}

/* キャンバスエリア */
#canvas-wrapper {
    width: 100%; height: 100%; padding-top: 70px;
    box-sizing: border-box;
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* --------------------------------------------------
   ★ここが修正の核心：空白・改行を強制的に無視させる
-------------------------------------------------- */
.intro-box, 
.intro-desc, 
.intro-desc p, 
.intro-desc div,
.intro-desc li,
.intro-title,
h1, h2, h3, h4 {
    /* 親CSSの pre-wrap（書いた通り表示）を打ち消し、通常のWEB表示に戻す */
    white-space: normal !important; 
    overflow: visible !important;
}

/* 開始画面のレイアウト調整 */
.intro-box {
    margin-top: 0 !important;
    padding: 0 5px !important;
    text-align: center;
}

.intro-title {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #3e2723;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.intro-desc {
    text-align: left !important;
    width: 100%; max-width: 600px; margin: 0 auto;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

/* 各要素の隙間（マージン）を個別に制御 */
.intro-desc p {
    margin: 0 0 10px 0 !important; /* 段落ごとの隙間は適度に */
    padding: 0 !important;
}

.intro-desc h4 {
    margin: 15px 0 5px 0 !important; /* 見出しの上下 */
    font-size: 1.1rem !important;
    color: #6d4c41;
}

.intro-desc ul {
    margin: 0 0 15px 0 !important;
    padding-left: 25px !important;
}

.intro-desc li {
    margin-bottom: 5px !important;
}

/* 時間設定エリア */
.time-setting-area {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    text-align: center;
}
.time-setting-area label {
    font-size: 1.1rem !important; margin-right: 10px !important;
}
.time-setting-area select {
    padding: 8px !important; font-size: 1.1rem !important;
}

/* ボタン・リンク */
.action-btn {
    margin-top: 5px !important;
    padding: 15px 0 !important;
    width: 80%;
    font-size: 1.3rem !important;
    border-radius: 50px;
}
.link-info-area {
    margin-top: 15px !important;
    text-align: center;
}
.link-info-area a {
    font-size: 1rem !important;
}

/* --------------------------------------------------
   結果画面（Result）
-------------------------------------------------- */
.result-title {
    font-size: 1.6rem !important;
    margin: 0 0 10px 0 !important;
    white-space: nowrap !important; /* タイトルは1行で */
}

.result-box-compact {
    background: #fffcf9; padding: 10px;
    border: 1px solid #e0e0e0; border-radius: 12px;
    margin-bottom: 10px;
}

.result-list {
    list-style: none; padding: 0; margin: 0 0 10px 0;
}
.result-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; /* 見やすく */
    border-bottom: 1px dashed #eee;
    font-size: 1.1rem;
}
.result-list li:last-child { border-bottom: none; }
.result-list .label { color: #888; font-weight: bold; font-size: 1rem; }
.result-list .value { color: #4a3f35; font-weight: 900; font-size: 1.2rem; }
.result-list .value.highlight { color: #d32f2f; font-size: 1.4rem; }

/* グラフエリア */
.graphs-area {
    display: flex; gap: 5px; margin-top: 5px;
}
.graph-box {
    flex: 1; background: #fff; border: 1px solid #eee;
    border-radius: 8px; overflow: hidden; position: relative;
    padding-top: 20px;
}
.graph-box h4 {
    position: absolute; top: 2px; left: 5px; margin: 0;
    font-size: 0.8rem; color: #888; z-index: 5;
    white-space: nowrap !important;
}
.canvas-holder {
    width: 100%; height: 110px; position: relative; 
}

/* アクションボタン */
.result-actions {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.result-actions .action-btn {
    width: 90%; padding: 12px; font-size: 1.2rem; margin: 0;
}
.result-actions .btn-back-pill {
    width: 90%; padding: 10px; font-size: 1rem; margin: 0;
}

/* ゲーム画面の戻るボタン */
.game-back-btn {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9); border: 2px solid #999; color: #555;
    padding: 10px 30px; border-radius: 30px; font-size: 1rem; font-weight:bold; cursor: pointer; z-index: 100;
}