/* 基本設定 */
:root {
    --border-color: #444;
    --bg-color: #f0f0f0;
    --container-bg: #2a2a2a;
    --control-bg: #333;
    --active-color: #007bff;
    --confirm-color: #28a745;
    --text-color: #f0f0f0;
    --transparent-check1: #ccc;
    --transparent-check2: #eee;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
    height: calc(100vh - 10px);
    max-width: 420px;
    margin: auto;
    background-color: var(--container-bg);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* スマホ表示ではPC用パネルのレイアウトを無効化 */
.left-panel, .main-content, .right-panel {
    display: contents;
}

/* =================================== */
/* 共通スタイル                      */
/* =================================== */

button, select {
    background-color: #4f4f4f; color: var(--text-color); border: 1px solid #666;
    border-radius: 8px; cursor: pointer; font-size: 13px; margin: 0;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
button:hover { background-color: #5a5a5a; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.tool-btn { width: 48px; height: 48px; padding: 0px; }
.tool-btn.small-btn { width: 32px; height: 32px; padding: 4px; }
.tool-btn img { width: 100%; height: 100%; padding: 4px; box-sizing: border-box; }
.tool-btn.active, .tool-btn.pressed { background-color: var(--active-color); border-color: #fff; }

.main-controls, .secondary-controls, .palette-area, .frames-area, .frame-tools, .settings-export-container {
    background: var(--control-bg); border-radius: 10px;
    padding: 4px; display: flex; align-items: center; gap: 4px;
}

.main-controls { flex-wrap: nowrap; overflow-x: auto; }
.tool-group { display: flex; gap: 4px; }

.palette-area { padding: 4px 8px; flex-wrap: wrap; }
.current-color-wrapper { display: flex; align-items: center; gap: 8px; }
#currentColorDisplay { width: 36px; height: 36px; border: 2px solid var(--border-color); border-radius: 50%; flex-shrink: 0; }
.palette-controls-wrapper { display: flex; align-items: center; gap: 6px; overflow-x: auto; flex-grow: 1; }
.palette { display: flex; gap: 4px; }
.color-box { min-width: 30px; height: 30px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; }
.color-box.selected { border-color: #fff; }
.palette-separator { border-left: 1px solid var(--border-color); height: 30px; flex-shrink: 0; }

.grid-wrapper {
    width: 100%; aspect-ratio: 1 / 1; overflow: hidden; position: relative;
    border-radius: 8px; border: 1px solid var(--border-color);
    flex-grow: 1; flex-shrink: 1; min-height: 150px;
}
.grid-container {
    width: 100%; height: 100%; position: relative;
    background-color: white;
    background-image:
        linear-gradient(45deg, var(--transparent-check1) 25%, transparent 25%),
        linear-gradient(-45deg, var(--transparent-check1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--transparent-check1) 75%),
        linear-gradient(-45deg, transparent 75%, var(--transparent-check1) 75%);
    background-size: 20px 20px;
}
#grid { width: 100%; height: 100%; display: grid; touch-action: none; image-rendering: pixelated; }
#grid .grid-cell { border: 1px solid #ddd; box-sizing: border-box; }
#grid.grid-hidden .grid-cell { border-color: transparent; }
#selectionOverlay { position: absolute; top: 0; left: 0; pointer-events: none; border: 2px dashed var(--active-color); box-sizing: border-box; display: none; }

/* 選択範囲ツール */
#selection-tools {
    position: absolute;
    display: none; /* JSで表示を制御 */
    gap: 4px;
    background-color: rgba(0,0,0,0.6);
    padding: 4px;
    border-radius: 8px;
    z-index: 10;
}
.selection-tool-btn {
    width: 32px; height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #555;
    border: 1px solid #888;
    padding: 0;
}
#confirmBtn {
    background-color: var(--confirm-color);
}


.secondary-controls { overflow-x: auto; flex-shrink: 0; }
.color-control-wrapper { position: relative; }
#bgColorPalette { display: none; position: absolute; bottom: 110%; left: 0; background: var(--control-bg); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px; z-index: 100; flex-wrap: wrap; width: 200px; }

.frames-area { align-items: stretch; }
.playback-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.frames-container { display: flex; gap: 6px; overflow-x: auto; padding: 2px; flex-grow: 1; }
.frame { position: relative; border: 2px solid var(--border-color); border-radius: 5px; padding: 2px; background-color: #555; cursor: pointer; flex-shrink: 0; width: 54px; height: 54px; }
.frame.selected { border-color: var(--active-color); }
.frame canvas { width: 50px; height: 50px; background-color: white; display: block; image-rendering: pixelated; }

.frame-tools { flex-wrap: wrap; justify-content: space-around; }

.settings-export-container { justify-content: space-around; flex-wrap: wrap; }
.settings-group, .export-group { display: flex; align-items: center; gap: 4px; }
label { font-size: 13px; }
select { padding: 0 4px; height: 38px; }

#notification { position: fixed; top: -50px; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; transition: top 0.5s ease-in-out; }
#notification.show { top: 20px; }
.frame .frame-number, .frame.selected::after, ::-webkit-scrollbar { display: none; }

/* =================================== */
/* PC向けスタイル (メディアクエリ)    */
/* =================================== */
@media (min-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr;
        max-width: 95vw;
        height: calc(100vh - 20px);
        padding: 10px;
        gap: 10px;
    }

    .left-panel, .main-content, .right-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .main-controls { flex-wrap: wrap; justify-content: flex-start; }

    .left-panel { width: 280px; }
    .right-panel { width: 240px; }
    .left-panel, .right-panel { overflow-y: auto; }

    .main-controls, .secondary-controls, .palette-controls-wrapper, .frames-container, .frame-tools {
        overflow: visible; flex-wrap: wrap;
    }
    .main-controls { justify-content: flex-start; }
    .palette-area { flex-direction: column; align-items: stretch; }
    .palette-controls-wrapper { padding: 0; }
    
    .main-content { align-items: center; justify-content: center; }
    .grid-wrapper { width: auto; height: 100%; max-width: 100%; max-height: 100%; flex-grow: 0; }
    .secondary-controls { justify-content: center; }

    .frames-area { flex-direction: column; align-items: stretch; }
    .frames-container { min-height: 150px; flex-wrap: wrap; }
    .frame-tools { justify-content: flex-start; }
    .settings-export-container { flex-direction: column; align-items: stretch; }
    .settings-group, .export-group { justify-content: space-between; }
    
    .frame .frame-number, .frame.selected::after { display: block; }
    .frame .frame-number { position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.7); color: white; font-size: 9px; padding: 1px 3px; border-radius: 5px 0 5px 0; }
    .frame.selected::after { content: '✔'; position: absolute; top: 1px; right: 2px; background-color: var(--active-color); color: white; font-size: 10px; font-weight: bold; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid white; }
    ::-webkit-scrollbar { display: block; width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
}