/* .sokoban-app の中だけにスタイルを適用する */
.sokoban-app { 
    font-family: "Segoe UI", sans-serif; 
    background: #f4f4f9; 
    color: #333; 
    padding: 10px; 
    border-radius: 8px; 
    touch-action: manipulation;
}

.sokoban-app h1 { 
    margin-bottom: 20px; 
    font-size: 1.5rem; 
    border: none; 
    text-align: center; 
}

/* 縦並びレイアウト */
.sokoban-app .container { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    align-items: center; 
}

/* 入力・表示エリア共通 */
.sokoban-app .input-area,
.sokoban-app .display-area { 
    width: 100%; 
    max-width: 800px; 
    background: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    box-sizing: border-box;
}

/* ★修正：実行画面エリア（中身を縮こまらせない） */
.sokoban-app .display-area {
    display: flex;
    flex-direction: column;
    /* align-items: center; ←これを削除して横幅いっぱいにさせる */
}

.sokoban-app textarea { 
    width: 100%; 
    height: 180px; 
    font-family: "BIZ UDゴシック", "Yu Gothic Mono", monospace; 
    font-size: 14px; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    padding: 5px; 
    letter-spacing: 0; 
    line-height: 1.2; 
}

/* ★修正：キャンバスは中央配置（margin: auto）＋レスポンシブ縦横比維持 */
.sokoban-app canvas { 
    border: 2px solid #555; 
    background: #fff; 
    margin: 10px auto; 
    max-width: 100%; 
    height: auto; /* アスペクト比を維持して縮小するために必須 */
    vertical-align: bottom; 
    display: block; 
}

/* ★修正：操作ボタンのバー */
.sokoban-app .controls { 
    width: 100%; 
    margin-top: 15px; 
    padding: 10px; 
    background: #f9f9f9; 
    border-radius: 4px;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; /* グループ間の間隔 */
    box-sizing: border-box;
}

/* コントロール内のグループ（再生系、速度系など） */
.sokoban-app .control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sokoban-app .difficulty-label {
    font-size: 13px;
    color: #555;
}

.sokoban-app .difficulty-select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
}

/* ボタンのデザイン */
.sokoban-app button { 
    padding: 10px 20px; 
    cursor: pointer; 
    font-weight: bold; 
    border: 1px solid #ccc; 
    background: #fff; /* 背景白で見やすく */
    border-radius: 4px; 
    transition: 0.2s; 
    color: #333; 
    margin: 0; 
    line-height: normal; 
    font-size: 14px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sokoban-app button:hover { background: #eee; }
.sokoban-app button.primary { background-color: #e0f7fa; border-color: #00bcd4; color: #006064; }

/* ステータスなどの文字も全幅の中で中央寄せ */
.sokoban-app #status, 
.sokoban-app #stepDisplay,
.sokoban-app .deadlock-info { 
    width: 100%; /* 横幅いっぱい確保 */
    margin-top: 10px; 
    font-weight: bold; 
    color: #444; 
    min-height: 1.2em; 
    text-align: center; 
}
.sokoban-app .legend { font-size: 0.85em; color: #666; margin-bottom: 10px; line-height: 1.4; }

/* デバッグ出力 */
.sokoban-app .debug-panel { margin-top: 10px; padding: 8px; border: 1px dashed #cfcfcf; border-radius: 6px; background: #fafafa; }
.sokoban-app .debug-title { font-size: 12px; font-weight: bold; color: #555; margin-bottom: 6px; }
.sokoban-app .debug-output { max-height: 400px; overflow-y: auto; overflow-x: auto; font-size: 11px; font-family: 'Consolas', monospace; background: #fff; border: 1px solid #e0e0e0; padding: 8px; border-radius: 4px; white-space: pre; }

/* エディタ周り */
.sokoban-app .editor-panel { margin: 10px 0 15px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fafafa; }
.sokoban-app .editor-title { font-weight: bold; margin-bottom: 6px; }

/* パレットをGridレイアウトにしてきれいに並べる */
.sokoban-app .editor-tools { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); 
    gap: 6px; 
    margin-bottom: 8px; 
}
/* 幅広ボタン（+ 人(ゴール) など）は2列分使うなどの調整もできるが、シンプルに幅任せにする */

.sokoban-app .tile-btn { 
    padding: 8px 4px; /* 横パディングを減らす */
    font-size: 11px; /* 少し小さく */
    border-radius: 4px; 
    background: #f2f2f2; 
    border: 1px solid #cfcfcf; 
    text-align: center; 
    display: flex;           /* Flexboxで中央揃え */
    justify-content: center;
    align-items: center;
    min-height: 32px;        /* 押しやすい高さ */
    line-height: 1.2;
}
.sokoban-app .tile-btn.active { background: #d7ecff; border-color: #64b5f6; color: #0d47a1; }

.sokoban-app #editorCanvas { border: 1px solid #888; background: #fff; margin-top: 4px; cursor: crosshair; max-width: 100%; display: block; margin-left: auto; margin-right: auto; height: auto; }
.sokoban-app .editor-controls { margin: 6px 0 8px; text-align: center; }

.sokoban-app .control-row { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 8px; 
}

/* 入力欄とラベルの微調整 */
.sokoban-app .size-input { width: 50px; padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; text-align: center; }
.sokoban-app .size-label { font-size: 11px; color: #666; white-space: nowrap; }

/* スマホ向けのボタン微調整 */
@media (max-width: 480px) {
    .sokoban-app .control-row button {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* 以前のlayout定義を削除 or 上書きするためにCSS下部に追加済み */

/* パレットボタン内の画像 */
.sokoban-app .tile-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 4px; 
    display: inline-block;
}

/* =========================================================
   サイズ設定UIの完全リニューアル（シンプルで堅牢なレイアウト）
   ========================================================= */

/* コンテナ：アイテムを中央寄せで自然に並べる（スマホは縦積み、PCは横並びも可） */
.sokoban-app .size-settings-panel {
    display: flex;
    flex-wrap: wrap; /* 必要なら折り返す（＝スマホ対策） */
    justify-content: center;
    align-items: center;
    gap: 15px 20px; /* 縦隙間15px, 横隙間20px */
    margin-bottom: 12px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #eee;
    width: 100%;
    box-sizing: border-box;
}

/* 各行（横幅設定、縦幅設定） */
.sokoban-app .size-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ラベル ("横幅") */
.sokoban-app .size-label-text {
    font-size: 13px;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

/* [-] [input] [+] のひとかたまり */
.sokoban-app .size-control-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fdfdfd;
    padding: 2px;
}

/* 入力欄 */
.sokoban-app input.size-input-field {
    width: 44px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important; /* グループで囲っているのでボーダーなし */
    background: transparent !important;
    text-align: center !important;
    font-family: monospace;
    font-size: 16px !important;
    font-weight: bold;
    color: #333;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none !important; /* ブラウザ標準の装飾を消す */
    -moz-appearance:textfield !important; /* Firefoxのスピンボタン消し */
}
/* スピンボタンを消す（Webkit） */
.sokoban-app input.size-input-field::-webkit-outer-spin-button,
.sokoban-app input.size-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* +/- ボタン */
.sokoban-app .mini-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: none !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: bold;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: background 0.2s;
}

.sokoban-app .mini-btn:hover {
    background: #e0e0e0 !important;
}

.sokoban-app .mini-btn:active {
    background: #d0d0d0 !important;
}

/* パレットをGridレイアウトにしてきれいに並べる */

.generation-stats {
    margin-top: 5px;
    font-size: 0.8em;
    color: #666;
}

.playback-controls {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
}