/* ページ全体 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f2f2f2; /* 薄い灰色 */
  color: #000;
}

a { color: inherit; text-decoration: none; }

/* ヘッダー全体 */
.container {
    max-width: 1350px; /* 適切なコンテンツの最大幅 (元のデザインに近い幅) */
    width: 90%; /* 画面が狭いときのための保険 */
    margin: 0 auto; /* 上下0、左右autoで中央寄せ */
    padding: 20px 0; /* コンテナの上下の余白（左右はmarginが担当） */
}
.site-header {
    /* ここには全体的なデザイン（背景色など）のみを設定 */
    width: 100%; /* 親要素の幅いっぱいに広がる */
    box-sizing: border-box; 
}
.nav-bottom {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素を両端に寄せる（ナビリンクは左、ソーシャルリンクは右） */
    align-items: center; /* 垂直方向の中央揃え */
    margin-top: 0px; /* タイトルとの間に余白を作る */
}

/* タイトルとリンク */
.navbar {
    display: block; /* タイトルとリンク一覧を横並びにする */
    margin-top: 0px; /* タイトルとナビリンク間のスペース */
}
.header-title {
    display: flex;
    align-items: center;
    gap: px; /* アイコンとタイトルの間のスペースを微調整 */
}
.logo-icon {
    width: 100px; /* 固定ピクセルでサイズ指定する */
    height: 100px;
    pointer-events: none; /* 要素自体へのマウス操作を無効にする */
}
.header-title h2 {
    margin: 0;
    font-size: 1.5rem;
}


/* ナビゲーションリンク */
.nav-links {
    list-style: none; /* 黒丸を削除 */
    display: flex; /* リストアイテムを横並びにする！ */
    padding-left: 20px;
    padding-top: 10px;
    gap: 20px; /* リンク同士の間隔 */
}
.nav-links li a {
    display: flex; /* アイコンとテキストを横並びにする */
    align-items: center; 
    gap: 5px; 
    text-decoration: none;
    color: #333; /* リンクの色 */
}
.nav-links li a img {
    /* リンク内のアイコンのサイズを固定ピクセルで指定 */
    width: 18px; 
    height: 18px;
    margin: 0;
}

/* ソーシャルアイコン */
.social-links { 
    display: flex; 
    align-items: end; 
    gap: 10px;
}
/* social-links の中にある aタグの中の imgタグにサイズを指定する */
.social-links img {
    width: 18px; /* アイコンのサイズを少し大きくして見やすく */
    height: 18px;
    transition: transform 0.2s; 
}
.social-links a:hover img {
    transform: scale(1.1);
}
/* is-large-icon クラスを持つ要素内の img にスタイルを適用する */
.social-links .is-large-icon img {
    /* ここで指定したサイズが、既存の .social-links img の指定を上書きします */
    width: 30px; 
    height: 30px;
}


#editorArea {
    display: flex; 
    /* 常に縦並びにする */
    flex-direction: column; 
    /* 中央揃えにする */
    align-items: center; 
    gap: 20px;
    padding: 10px;
}

/* --- ゲーム画面の設定 --- */
#gameScreenContainer {
    /* 画面の基準となるサイズ設定 */
    width: 100%; /* 親要素に合わせて広がる */
    max-width: 800px; /* ただしPCで見ても800px以上にはならないように制限 */
    
    /* アスペクト比を固定 (800:600) */
    /* これを設定すると、幅が変わっても自動で高さが計算されます */
    aspect-ratio: 800 / 600;
    height: auto; 
    
    position: relative;
    border: 1px solid #ccc;
    background-color: #000;
    margin: 0 auto; /* 中央配置 */
}

.screen-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}

/* 背景画像 */
#background {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* メッセージウィンドウ */
#messageWindow { 
    z-index: 4; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill; /* 枠いっぱいに広げる */
}

/* メッセージテキスト */
#messageText {
    z-index: 5;
    
    /* ウィンドウ画像の上に乗るように位置調整 (%) */
    top: 66.5%; 
    left: 5.5%;
    width: 90%;
    height: 25%;
    
    /* 文字サイズも画面幅に合わせて可変にする */
    /* 最小14px、画面が大きければ2.5vw(画面幅の2.5%) */
    font-size: max(14px, 1.4vw);
    line-height: 1.5;
    color: #fff;
    padding: 5px;
    overflow: hidden;
    white-space: pre-line;
    
    /* 縁取り */
    text-shadow: 
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px 1px 0 #000, 1px 1px 0 #000;
}

/* キャラクター (高さ基準で合わせる) */
.character-slot {
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: all 0.5s ease;
    z-index: 2;
    display: none;
}

/* 配置クラス */
.pos-center { left: 50%; transform: translateX(-50%); }
.pos-right { left: 70%; transform: translateX(-50%); }
.pos-left { left: 30%; transform: translateX(-50%); }
.darkened { filter: brightness(0.5); opacity: 0.8; }


/* --- 操作パネルの設定 --- */
#controlPanel {
    /* ゲーム画面と同じくらいの幅にする */
    width: 100%;
    max-width: 800px; /* 画面に合わせて広くする */
    
    padding: 20px;
    box-sizing: border-box; /* paddingを含めた幅計算 */
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.choices-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* 折り返しを有効にする */
}

.choice-item {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.choice-item:hover {
    border-color: #ff69b4;
}

/* --- テキスト入力エリア --- */
#dialogueInput {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 8px;
    border: 1px solid #aaa;
    font-size: 14px;
    font-family: inherit;
}

#textControl p {
    font-size: 12px;
    text-align: right;
    margin-top: 5px;
    color: #666;
}

/* フッター */
footer {
  background-color: #f2f2f2;
  border-top: none;
  text-align: center;
  padding: 15px 10px;
  font-size: 14px;
}
footer a { margin: 0 10px; }