/**
 * common.css
 * カテゴリを問わず、複数のモジュールで共通して利用されるスタイルを定義する。
 * 主に、脳トレや教育系で使われる汎用レイアウトなど。
 */

/* 脳トレゲーム共通レイアウト */
.game-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-grow: 1; /* 親のflexコンテナ内で可能な限り高さを取る */
}

.game-score-area {
    font-size: 1.1rem;
    opacity: 0.8;
}

.game-question-area {
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1; /* スコアと回答エリア以外の残りの高さを全て取る */
}

.game-answer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}