/* 基本スタイル */
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #1e1e24;
    color: #fff;
    overflow: hidden;
}

.hidden { display: none !important; }
.gray-text { color: #888; font-weight: bold; }

/* ヘッダーナビゲーション */
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #111;
    padding: 10px;
    gap: 10px;
}
.menu-btn {
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 4px;
}
.chat-trigger {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* メインコンテナと2カラムレイアウト */
#game-container {
    height: calc(100vh - 60px);
    display: flex;
}
.screen { width: 100%; height: 100%; display: flex; }

#phase-login {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 300px;
}
.input-group input {
    padding: 10px;
    border-radius: 5px;
    border: none;
}
.primary-btn {
    background-color: #3498db;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 待機・ゲーム画面レイアウト */
#phase-lobby { display: flex; width: 100%; }
#side-panel {
    width: 250px;
    background-color: #151518;
    padding: 20px;
    border-right: 2px solid #2a2a30;
}
#main-panel {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 水色のゲーム開始ボタン */
.start-btn {
    background-color: #00bfff;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.4);
}

/* タイマーの見た目 */
#timer-display {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    background: #111;
    padding: 5px 20px;
    border-radius: 20px;
}

/* 会議用白いプレート */
#player-plates-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 800px;
    margin-top: 20px;
}
.player-plate {
    background-color: #ffffff;
    color: #333;
    padding: 15px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    min-height: 90px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.plate-role {
    font-size: 12px;
    margin-top: 4px;
}

/* ✔/✘ 投票確認UI用のオーバーレイボタン */
.vote-confirm-box {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}
.v-btn {
    border: none; font-size: 22px; width: 45%; height: 80%; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.v-btn.yes { background-color: #2ecc71; color: white; } /* 緑の✔ */
.v-btn.no { background-color: #e74c3c; color: white; }  /* 赤の✘ */

/* 投票マーク(●)のコンテナとスライド演出 */
.vote-dots {
    position: absolute;
    bottom: 5px;
    left: 10px;
    display: flex;
    gap: 3px;
}
.dot {
    display: inline-block;
    color: #e74c3c;
    font-size: 18px;
    transform: translateX(300px);
    animation: slideLeft forwards ease-out;
}

/* アニメーション速度 */
.speed-1 { animation-duration: 2.0s; }
.speed-2 { animation-duration: 1.5s; }
.speed-3 { animation-duration: 1.0s; }
.speed-4 { animation-duration: 0.5s; }

@keyframes slideLeft { to { transform: translateX(0); } }

/* アモアス風全画面暗転オーバーレイ */
.overlay-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.camp-text { font-size: 48px; margin-bottom: 10px; }
.role-text { font-size: 36px; margin-bottom: 20px; }
.flavor-text { font-size: 20px; font-style: italic; }

/* 陣営・役職カラー指定 */
.color-werewolf { color: #e74c3c !important; } /* 赤 */
.color-citizen { color: #00bfff !important; }  /* 水色 */

/* モーダル共通ウインドウ */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}
.modal-content, .chat-content {
    background: #2c2c35; padding: 20px; border-radius: 8px; width: 300px;
}
.modal-item {
    width: 100%; padding: 10px; margin: 5px 0; background: #444; border: none; color: white; cursor: pointer; text-align: left;
}
.host-only-flex { display: flex; gap: 5px; width: 100%; }
.half { flex: 1; }
.danger { background: #c0392b; }

/* チャット用レイアウト */
.chat-content { width: 400px; height: 500px; display: flex; flex-direction: column; }
.chat-header { display: flex; justify-content: space-between; align-items: center; }
#chat-log { flex: 1; background: #1e1e24; margin: 10px 0; padding: 10px; overflow-y: auto; border-radius: 4px; }
.chat-input-area { display: flex; gap: 5px; }
.chat-input-area input { flex: 1; padding: 5px; }