/* =========================================
   File: layout.css
   Purpose: レイアウト関連のスタイル
   Author: やぎさん
   Created: 2026-04-30：style.css から分割
   Updated: （なし）

   Notes:
   - 共通スタイルは common.css / layout.css を使用
   - ゲームUIは game.css に分離
========================================= */

/* =========================
   ヘッダー共通
========================= */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;   /* 要素間の最小余白 */
    padding: 4px 8px;
    margin-bottom: 2px;
}

.top-header {
    padding: 4px 8px;
    margin: 0;
}

/* =========================
   ロゴ
========================= */
.app-logo {
    width: 70px;
    height: auto;
    transition: transform .15s;
}

.app-logo:active {
    transform: scale(.95);
}

/* =========================
    ボタン横並びレイアウト（中央配置・等幅）
========================= */
.button-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px;
}

.button-area button {
    flex: 1;
    max-width: 300px;
    padding: 8px;
    font-size: 4vw;
}

/* =========================
   ボタン（基本）
========================= */
#back-btn {
    background-color: #ccc;
    color: #333;
    border: none;
    border-radius: 10px;
}

#back-btn:active {
    transform: scale(0.95);
}

#start-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
}

#start-btn:active {
    transform: scale(0.95);
}

/* 上部戻るボタン */
#back-btn-top {
    background: #ccc;
    color: #333;
    border: none;
    border-radius: 24px;
    padding: 8px 16px;
    margin-left: 8px;
    font-size: 4vw;
}

#back-btn-top:active {
    transform: scale(.95);
}

/* =========================
   メニュー画面
========================= */
.menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.menu h1 {
    font-size: min(8vw, 40px);
    margin-bottom: 5px;
}

.menu button {
    width: 80vw;
    max-width: 400px;
    margin: 5px;
    padding: 8px;
    font-size: min(5vw, 20px);
    border-radius: 12px;

    background-color: white;
    border: 2px solid #ddd;
}

/* サブテキスト */
.menu small {
    font-size: min(3.5vw, 14px);
    color: #555;
}

.hidden{
    display:none !important;
}

/* =========================
   PC表示時のレイアウト調整
========================= */
@media (min-width: 768px) {

    .app-logo {
        width: 95px;
    }

    .button-area button {
        font-size: 18px;
    }

    #back-btn-top {
        font-size: 18px;
    }

    .menu button {
        font-size: 18px;
    }

    .menu {
        gap: 10px;
    }
}