/*
 * OBS配信用オーバーレイ CSS
 * 基本解像度: 1920x1080
 * 各要素は position: absolute; で絶対配置されています。
 * 配信画面に合わせて top, left, width, height の値を変更して微調整してください。
 */

/* 画面全体の基本設定 */
body {
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden; /* 画面外のはみ出しを隠す */
    background-color: transparent; /* OBSで透過させるために必要 */
    position: relative;
}

/* 1. 背景画像 (最背面) */
#background {
    position: absolute;
    /* 位置とサイズ */
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    
    /* 画像の読み込みと表示設定 */
    background-image: url('images/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: 1; /* レイヤー順序: 1 (一番下) */
}

/* 2. 立ち絵（左の配信者） */
#character-left {
    position: absolute;
    
    /* --- 位置の微調整はここを変更 --- */
    top: 90px;
    left: 50px;
    
    /* --- サイズの微調整はここを変更 --- */
    width: 600px;
    height: 900px;
    
    /* 画像の読み込みと表示設定 */
    background-image: url('images/left.png');
    background-size: contain; /* 縦横比を維持して枠内に収める */
    background-position: bottom center; /* 下揃え・中央配置 */
    background-repeat: no-repeat;
    
    z-index: 2; /* レイヤー順序: 2 */
}

/* 3. 立ち絵（右の配信者） */
#character-right {
    position: absolute;
    
    /* --- 位置の微調整はここを変更 --- */
    top: 90px;
    left: 1270px; /* (1920 - 600 - 50) などで調整 */
    
    /* --- サイズの微調整はここを変更 --- */
    width: 600px;
    height: 900px;
    
    /* 画像の読み込みと表示設定 */
    background-image: url('images/right.png');
    background-size: contain; /* 縦横比を維持して枠内に収める */
    background-position: bottom center; /* 下揃え・中央配置 */
    background-repeat: no-repeat;
    
    z-index: 3; /* レイヤー順序: 3 */
}

/* 4. コメント欄 (YouTube Live Chat) (最前面) */
#youtube-chat {
    position: absolute;
    
    /* --- 位置の微調整はここを変更 --- */
    /* 画面中央に配置する例: (1920-400)/2 = 760, (1080-800)/2 = 140 */
    top: 140px; 
    left: 760px;
    
    /* --- サイズの微調整はここを変更 --- */
    width: 400px;
    height: 800px;
    
    /* 枠線等の設定 */
    border: none;
    z-index: 4; /* レイヤー順序: 4 (一番上) */
    
    /* コメントを見やすくするための背景設定 (不要なら削除) */
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 8px; 
}