/* ==========================================
 * IN-GAME UI & LOG (ゲーム内UI・ログ)
 * ========================================== */

/* 「メニューに戻る」ボタンの右上配置 */
#btn-leave-lobby {
    position: absolute; /* 親要素（画面）を基準にして自由に配置する設定 */
    
    /* 上と右に余白を開けて配置。スマホのノッチ（切り欠き）にも対応させています */
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    
    z-index: 20; /* 他の文字やリストの下に隠れないように手前に出す */
}

/* マップ切り替えボタン */
#btn-toggle-map {
    position: absolute;
    top: 70px; /* 右上の他のUIと被らないように少し下げる */
    right: 30px;
    z-index: 9999; 
    /* タップ操作を確実にボタンで受け取るおまじない */
    pointer-events: auto;

    padding: 8px 12px;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 5px;
}

/* ゲーム内ログ通知 (Game Log) */
#game-log-container {
    position: absolute;
    top: 10px;        /* 画面の上端から少し離す */
    right: 10px;      /* 画面の右端に寄せる */
    width: 250px;     /* 通知の幅 */
    pointer-events: none; /* クリックを無効化（下のゲーム操作を邪魔しない） */
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;       /* メニュー(10)よりは下、Canvasよりは上 */
}

.log-message {
    background: rgba(0, 0, 0, 0.7); /* 黒っぽい半透明 */
    color: #00ff00;                /* 黄緑色（目立つ！） */
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    border-left: 4px solid #00ff00; /* 左側にアクセントの棒 */
    animation: fade-in-out 3s forwards; /* 3秒かけて消えるアニメーション */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ふわっと出て、しばらくしたら消えるアニメーション */
@keyframes fade-in-out {
    0% { opacity: 0; transform: translateX(20px); }
    10% { opacity: 1; transform: translateX(0); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* --- PC用操作説明の基本デザイン --- */
#pc-instruction {
    /* 1. 回り込みを強制解除して、必ず次の行（下）へ送る */
    clear: both; 
    
    /* 2. 要素自体を中央に寄せる（左右マージンをautoにする） */
    display: block;
    margin: 15px auto 0; 
    
    /* 3. 横幅の設定（Canvasと同じか、少し狭いくらいが綺麗です） */
    width: 90%;
    max-width: 800px; 

    /* 4. 見た目の調整 */
    text-align: center;
    color: #aaaaaa;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1.5;
    pointer-events: none;
    user-select: none;
}