/* 基本スタイル */
html, body { /* bodyだけでなくhtmlにも高さを指定 */
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden; /* Prevent scrolling */
}

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    /* bodyの背景は基本的にappContainerが覆うため、デフォルトは透過させる */
    background: transparent;
}

/* フルスクリーンモード時のbodyのスタイル */
/* bodyの直接の背景は通常見えないが、念のため */
body:-webkit-full-screen {
    background: transparent;
}
body:-moz-full-screen {
    background: transparent;
}
body:-ms-fullscreen {
    background: transparent;
}
body:fullscreen {
    background: transparent;
}


#appContainer {
    display: flex;
    flex: 1;
    overflow: hidden;
    /* appContainerに初期グラデーションを設定 */
    background: linear-gradient(to bottom, #a7e1ff, #f0f4f8);
    position: relative; /* 子要素の絶対配置の基準とする */
    transition: background 0.3s ease-in-out; /* グラデーション変更時にスムーズに遷移 */
}

/* appContainerがフルスクリーンになった時のスタイル */
#appContainer:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    /* JavaScriptで背景が設定されるため、ここでの背景設定は不要 */
}
#appContainer:-moz-full-screen {
    width: 100vw;
    height: 100vh;
}
#appContainer:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
}
#appContainer:fullscreen {
    width: 100vw;
    height: 100vh;
}

.footer {
    background-color: #ffffff;
}

#leftPanel {
    width: 250px; /* サイドバーの幅をさらに狭く */
    background-color: #ffffff;
    padding: 10px; /* 上下のパディングを小さく */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto; /* Scroll for content if it overflows */
    display: flex;
    flex-direction: column;
    gap: 5px; /* 各セクション間の隙間を小さく */
}

#mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: transparent; /* mainContentは透明のまま */
    overflow: hidden; /* Ensure drawing/character areas don't overflow */
}

#drawingArea {
    flex: 1;
    border: 1px solid #cbd5e0;
    background-color: transparent; /* drawingAreaも透明のまま */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* drawingCanvasは最前面 */
#drawingCanvas {
    display: block; /* Remove extra space below canvas */
    position: absolute; /* 親要素drawingAreaに対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* drawingCanvasも透明のまま */
    z-index: 10; /* 最前面に配置 */
}

/* オニオンスキンキャンバスはdrawingCanvasの直下 */
#onionskinCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* クリックイベントを透過させる */
    z-index: 9; /* drawingCanvasより一つ下に配置 */
    opacity: 0.5; /* 半透明 */
    display: none; /* 初期は非表示 */
}

#characterDisplayArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* このエリア全体はイベントを透過させ、下のdrawingCanvasにイベントを渡す */
    z-index: 5; /* drawingCanvasより手前に表示 */
}

#characterDisplayArea canvas {
    pointer-events: none; /* キャラクター個々のcanvasもイベントを受け取らない */
}

/* ツールボタン、アクションボタンの共通スタイル */
.tool-button, .action-button, .trigger-button {
    transition: background-color 0.2s, transform 0.1s;
    display: flex; /* アイコンとテキストを横並びにする */
    align-items: center; /* 中央揃え */
    justify-content: center; /* 中央揃え */
    gap: 5px; /* アイコンとテキストの間隔を小さく */
    padding: 6px 10px; /* ボタンのパディングを小さく */
    font-size: 0.8rem; /* ボタン内のフォントサイズを調整 */
}
.tool-button:hover, .action-button:hover, .trigger-button:hover {
    transform: translateY(-1px);
}
.tool-button.active {
    border: 2px solid #3b82f6; /* Blue-500 */
    background-color: #bfdbfe; /* Blue-200 */
}

/* 「へんこう」と「オニオンスキン」ボタンの文字間を詰めるための調整 */
#saveChangesBtn, #toggleOnionSkinBtn {
    letter-spacing: -0.05em; /* 文字間を詰める */
    font-size: 0.75rem !important; /* さらに少し小さくして一行に収まりやすくする */
    padding: 6px 8px; /* パディングも調整 */
    margin-top: 5px; 
}


/* カラーパレットのスタイル */
#colorPalette div {
    width: 20px; /* サイズを小さく */
    height: 20px; /* サイズを小さく */
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
#colorPalette div.active {
    border-color: #3b82f6;
}
/* 消しゴムの色 */
#colorPalette div[data-color="white"] {
    border: 1px solid #ccc;
    background-color: white;
}


/* キャラクターリストアイテムのスタイル */
.character-item {
    display: flex;
    align-items: center;
    padding: 6px; /* パディングを小さく */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 5px; /* マージンを小さく */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    gap: 6px; /* 隙間を小さく */
    position: relative; /* 削除ボタンの基準位置のため */
    font-size: 0.85rem; /* キャラクターリストのテキストサイズを調整 */
}
.character-item:hover {
    background-color: #f0f4f8;
}
.character-item.selected {
    background-color: #dbeafe; /* Blue-100 */
    border-color: #3b82f6; /* Blue-500 */
    font-weight: bold;
}
.character-item.hidden-char {
    opacity: 0.5; /* 非表示のキャラクターは薄く表示 */
}

/* キャラクターリスト内のボタン */
.character-item .item-buttons {
    display: flex;
    gap: 3px; /* 隙間を小さく */
    margin-left: auto; /* 右寄せ */
}

.character-item .item-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem; /* アイコンサイズを調整 */
    color: #64748b; /* slate-500 */
    padding: 3px; /* パディングを小さく */
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.character-item .item-button:hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-900 */
}

.character-item .delete-button {
    color: #ef4444; /* red-500 */
}
.character-item .delete-button:hover {
    background-color: #fee2e2; /* red-100 */
    color: #b91c1c; /* red-700 */
}


/* キャラクターサムネイルのスタイル */
.character-thumbnail {
    width: 35px; /* サイズを小さく */
    height: 35px; /* サイズを小さく */
    overflow: hidden;
    border-radius: 4px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e0;
    flex-shrink: 0; /* 縮小させない */
}
.character-thumbnail canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* メッセージボックスのスタイル */
#messageBox {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px; /* パディングを小さく */
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* メッセージボックスはクリック不可 */
    font-size: 0.9rem; /* メッセージボックスのフォントサイズを調整 */
}
#messageBox.show {
    opacity: 1;
}

/* 全体的なフォントサイズを小さくする */
/* Tailwind CSSのデフォルトサイズを上書きするため、!importantを使用 */
*, ::after, ::before {
    font-size: 0.85rem !important; /* 基本のフォントサイズ */
}

.text-2xl {
    font-size: 1.3rem !important; /* h1 */
    line-height: 1.5rem !important; /* 行の高さを調整 */
}
.text-xl {
    font-size: 1.1rem !important; /* h2 */
    line-height: 1.3rem !important; /* 行の高さを調整 */
}
.text-lg {
    font-size: 0.95rem !important; /* h3, 大きなボタンなど */
    line-height: 1.1rem !important; /* 行の高さを調整 */
}
.text-sm {
    font-size: 0.75rem !important; /* ラベルや小さいテキスト */
}

/* 各セクションのパディングとマージンを調整 */
.p-4 {
    padding: 0.6rem !important; /* パディングを小さく */
}
.mb-3 {
    margin-bottom: 0.5rem !important; /* マージンを小さく */
}
.mb-2 {
    margin-bottom: 0.4rem !important; /* マージンを小さく */
}
.mb-1 {
    margin-bottom: 0.2rem !important; /* マージンを小さく */
}
.gap-3 {
    gap: 0.5rem !important; /* 隙間を小さく */
}
.gap-2 {
    gap: 0.4rem !important; /* 隙間を小さく */
}


/* 右側キャンバス下のコントロール部分の調整 */
#mainContent > .bg-gray-200 { /* キャンバス下のコントロールバー */
    padding: 0.5rem !important; /* パディングをさらに小さく */
    gap: 0.4rem !important; /* 隙間をさらに小さく */
}

/* プログラム実行/停止/フルスクリーンボタンの調整 */
#runProgramBtn, #stopProgramBtn, #fullscreenBtn {
    font-size: 0.8rem !important; /* 文字サイズを小さく */
    padding: 0.4rem 0.8rem !important; /* 上下のパディングをさらに小さく */
    line-height: 1rem !important; /* 行の高さを調整して高さを詰める */
    gap: 4px; /* アイコンとテキストの間隔も調整 */
    flex-shrink: 0; /* ボタンが縮まないように */
}

/* キャラクターコントロールボックス */
#characterControls { 
    padding: 0.5rem !important; /* パディングをさらに小さく */
    margin-top: 0.5rem; /* 上のマージンを調整 */
}

/* キャラクターコントロールタイトルとボタンの行 */
#characterControls .flex.justify-between.items-center.mb-2 {
    margin-bottom: 0.3rem !important; /* タイトルとボタンの間の余白を調整 */
}

#characterControls .mb-2 { /* 以前のmb-4だった部分 */
    margin-bottom: 0.3rem !important; /* マージンをさらに小さく */
}
#characterControls .mb-1 { /* 以前のmb-2だった部分 */
    margin-bottom: 0.1rem !important; /* マージンをさらに小さく */
}
#characterControls .h-6 { /* input type="range" の高さ */
    height: 1.25rem !important; /* 高さを調整 (デフォルトはh-6で1.5rem) */
}


/* --- スマートフォン（幅が768px以下の画面）に適用 --- */
@media (max-width: 768px) {

/* 左のバーを詰める */
#leftPanel {
    width: 220px !important; /* スマートフォンでの幅をさらに狭く */
    padding: 8px !important; /* スマートフォンでのパディングをさらに小さく */
    gap: 3px !important; /* スマートフォンでのセクション間の隙間をさらに小さく */
}

/* スマートフォンでの全体的なフォントサイズをさらに小さく */
*, ::after, ::before {
    font-size: 0.75rem !important; /* スマートフォンでの基本のフォントサイズ */
}

.text-2xl {
    font-size: 1.1rem !important; /* スマートフォンでのh1 */
    line-height: 1.3rem !important;
}
.text-xl {
    font-size: 0.95rem !important; /* スマートフォンでのh2 */
    line-height: 1.1rem !important;
}
.text-lg {
    font-size: 0.8rem !important; /* スマートフォンでのh3, 大きなボタンなど */
    line-height: 1rem !important;
}
.text-sm {
    font-size: 0.65rem !important; /* スマートフォンでのラベルや小さいテキスト */
}

/* 各セクションのパディングとマージンをスマートフォン用に調整 */
.p-4 {
    padding: 0.5rem !important; /* スマートフォンでのパディング */
}
.mb-3 {
    margin-bottom: 0.4rem !important;
}
.mb-2 {
    margin-bottom: 0.3rem !important;
}
.mb-1 {
    margin-bottom: 0.1rem !important;
}
.gap-3 {
    gap: 0.4rem !important;
}
.gap-2 {
    gap: 0.3rem !important;
}

/* 右側キャンバス下のコントロール部分をスマートフォン用に調整 */
#mainContent > .bg-gray-200 {
    padding: 0.4rem !important; /* スマートフォンでのパディングをさらに小さく */
    gap: 0.2rem !important; /* スマートフォンでの隙間をさらに小さく */
}

/* スマートフォンでのプログラム実行/停止/フルスクリーンボタンの調整 */
#runProgramBtn, #stopProgramBtn, #fullscreenBtn {
    font-size: 0.7rem !important; /* スマートフォンでの文字サイズをさらに小さく */
    padding: 0.3rem 0.6rem !important; /* スマートフォンでのパディングをさらに小さく */
    line-height: 0.9rem !important; /* スマートフォンでの行の高さを調整 */
    gap: 3px; /* スマートフォンでのアイコンとテキストの間隔も調整 */
}

#characterControls {
    padding: 0.4rem !important; /* スマートフォンでのキャラクターコントロールのパディングをさらに小さく */
    margin-top: 0.3rem;
}

/* キャラクターコントロールタイトルとボタンの行（スマートフォン） */
#characterControls .flex.justify-between.items-center.mb-2 {
    margin-bottom: 0.2rem !important; /* スマートフォンでの余白をさらに調整 */
}

#characterControls .mb-2 {
    margin-bottom: 0.2rem !important;
}
#characterControls .mb-1 {
    margin-bottom: 0rem !important;
}
#characterControls .h-6 {
    height: 1.1rem !important; /* スマートフォンでのスライダーの高さをさらに調整 */
}

.tool-button, .action-button, .trigger-button {
    padding: 4px 7px; /* スマートフォンでのボタンのパディングをさらに小さく */
    font-size: 0.7rem; /* スマートフォンでのボタン内フォントサイズ */
    gap: 3px;
}
/* スマートフォンでの「へんこう」と「オニオンスキン」ボタンの文字間を詰めるための調整 */
#saveChangesBtn, #toggleOnionSkinBtn {
    letter-spacing: -0.07em; /* さらに文字間を詰める */
    font-size: 0.65rem !important; /* さらに小さく */
    padding: 5px 6px; /* パディングも調整 */
}

.character-item {
    padding: 4px;
    margin-bottom: 3px;
    font-size: 0.65rem;
    gap: 4px;
}

.character-thumbnail {
    width: 25px;
    height: 25px;
}

.character-item .item-button {
    font-size: 0.75rem;
    padding: 2px;
}

#messageBox {
    padding: 5px 10px;
    font-size: 0.75rem;
}

}

/* 共通ボタンスタイル */
button {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 12px;       /* 角丸 */
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  color: white;
}

/* 保存ボタン */
#saveFileBtn {
  padding: 5px;
  margin: 5px;
  color: white;
  background-color: #4CAF50; /* 緑 */
}

#saveFileBtn:hover {
  background-color: #45a049; /* 少し濃い緑 */
  transform: translateY(-2px);
}

/* ZIP読み込みボタン */
#loadZipBtn {
  padding: 5px;
  margin: 5px;
  color: white;
  background-color: #2196F3; /* 青 */
}

#loadZipBtn:hover {
  background-color: #1e88e5; /* 少し濃い青 */
  transform: translateY(-2px);
}

/* 無効化状態 */
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  box-shadow: none;
}

/* style.css または <style> タグ内 */

/* 1. 全画面時の表示領域を確保 */
#drawingArea:fullscreen {
    width: 100vw;
    height: 100vh;
}

/* 2. Canvas自体は背景を透明に保ち、親要素いっぱいに広げる */
#drawingArea:fullscreen #onionskinCanvas,
#drawingArea:fullscreen #drawingCanvas,
#drawingArea:fullscreen #characterDisplayArea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent; /* 🚨 Canvasの背景は透明に！ */
}