/* =========================================================
 * Retrix — style.css
 * 配色は本アプリのプリセットである緑液晶4色パレット
 * (#0f380f / #306230 / #8bac0f / #9bbc0f) から派生させている．
 * ========================================================= */

:root {
  --lcd-darkest:  #0f380f;
  --lcd-dark:     #306230;
  --lcd-light:    #8bac0f;
  --lcd-lightest: #9bbc0f;

  --bg:      #081408;            /* 最暗色よりさらに沈めた背景 */
  --panel:   var(--lcd-darkest);
  --border:  var(--lcd-dark);
  --text:    #b8c98a;
  --accent:  var(--lcd-lightest);

  --font-mono: "Consolas", "SF Mono", "Menlo", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ---------- ヘッダ ---------- */

.app-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 2px solid var(--border);
}

.logo-mark {
  width: 28px;
  height: 39px;
  align-self: center;
  fill: var(--accent);
}

.app-header h1 {
  font-size: 24px;
  letter-spacing: 0.35em;
  color: var(--accent);
}

.tagline { color: var(--lcd-light); }

/* ---------- レイアウト ---------- */

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  padding: 16px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 16px;
}

.panel h2 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lcd-light);
  margin-bottom: 8px;
}

/* ---------- コントロール ---------- */

.controls section + section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* パラメータ群は伸びるので，この領域だけスクロールさせる */
#stage-controls {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px; /* スクロールバー分の余白 */
}

/* ステージ（グループ）ごとの折りたたみ */
details.stage {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

details.stage:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

details.stage > summary {
  cursor: pointer;
  list-style: none; /* 既定マーカーを消す */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lcd-light);
  margin-bottom: 8px;
}

details.stage > summary::-webkit-details-marker { display: none; }

details.stage > summary::before { content: '▾'; }
details.stage:not([open]) > summary::before { content: '▸'; }

/* ラベルを左、リセットを右端へ */
details.stage > summary > span:first-of-type { flex: 1; }

.stage-reset {
  width: auto;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: none;
  border-color: var(--lcd-dark);
}

.control {
  margin-bottom: 12px;
}

.control label {
  display: block;
  margin-bottom: 4px;
}

.control output {
  color: var(--accent);
  float: right;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--lcd-light);
}

select,
button,
.file-label {
  display: inline-block;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--lcd-light);
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

select { text-align: left; }

button:hover:not(:disabled),
.file-label:hover {
  background: var(--lcd-dark);
  color: var(--accent);
}

button:disabled {
  border-color: var(--lcd-dark);
  color: var(--lcd-dark);
  cursor: not-allowed;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#file-input,
#settings-import-input { display: none; } /* .file-label で代替 */

.hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--lcd-dark);
}

.btn-row {
  display: grid;
  gap: 8px;
}

/* 同一セクション内の副見出し（例: スナップショット） */
h2.sub { margin-top: 16px; }

/* ---------- スナップショット ---------- */

.snapshot-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.snapshot-item {
  display: flex;
  gap: 6px;
}

.snapshot-apply {
  flex: 1;
  min-width: 0; /* テキスト省略を効かせる */
  width: auto;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snapshot-del {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 10px;
}

/* ---------- プレビュー ---------- */

.preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
  position: relative;
  min-height: 400px;
}

.preview.dragover { border-color: var(--accent); }

.preview-pane canvas {
  width: 100%;
  border: 1px solid var(--border);
  image-rendering: pixelated; /* 拡大表示は最近傍で */
  display: none;              /* 画像読込後に表示 */
}

.preview.loaded .preview-pane canvas { display: block; }
.preview.loaded .placeholder { display: none; }

.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lcd-dark);
  pointer-events: none;
}

/* ---------- Feeling Lucky ---------- */

.lucky {
  grid-column: 1 / -1; /* レイアウト全幅を占有 */
}

.lucky-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lucky-head h2 { margin-bottom: 0; }

.lucky-actions {
  display: flex;
  gap: 8px;
}

.lucky-head button { width: auto; } /* 既定の width:100% を打ち消す */

.lucky-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

/* 折りたたみ時はギャラリーを隠す */
.lucky.collapsed .lucky-gallery { display: none; }

.lucky-item {
  width: 100%;
  padding: 6px;
  background: var(--bg);
  border: 2px solid var(--lcd-dark);
  cursor: pointer;
}

.lucky-item:hover { border-color: var(--accent); }

.lucky-item canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 180px; /* 縦長画像でもサムネが伸びすぎないよう上限 */
  width: auto;
  height: auto;
  border: 1px solid var(--border);
  image-rendering: pixelated; /* 拡大表示は最近傍で */
}