/* style.css */
:root {
  --bg:       #0a0e14;
  --panel:    #111722;
  --panel2:   #161e2e;
  --border:   #1e2d45;
  --accent:   #00c8e0;
  --accent2:  #e0a000;
  --text:     #c8d8e8;
  --dim:      #4a6080;
  --cell-explored: #1e3450;
  --cell-explored-b: #3a6090;
  --cell-unknown:  #0e1820;
  --cell-unknown-b:#1a2a3a;
  --cell-empty:    transparent;
  --cell-entrance: #001840;
  --cell-entrance-b:#4080d0;
  --cell-exit:     #001830;
  --cell-exit-b:   #40c080;
  --path-open:   #2a7aa0;
  --path-closed: #1a2535;
  --path-unknown:#2a3a50;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ヘッダー */
header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
header h1 { font-size: 14px; color: var(--accent); letter-spacing: 0.05em; }

/* レイアウト */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* 左：動画・設定パネル (比率 1) */
.video-panel {
  flex: 1;
  min-width: 250px;
  max-width: 380px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.panel-section {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
.section-title {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}

/* ドロップゾーン */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  color: var(--dim);
  transition: all 0.2s;
  font-size: 12px;
  line-height: 1.8;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  color: var(--accent);
  background: #00141e;
}
.drop-zone input { display: none; }

/* プレビューキャンバス */
#preview-wrap {
  display: none;
  background: #000;
}
#preview-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.preview-legend {
  display: flex;
  gap: 10px;
  padding: 4px 0 2px;
  font-size: 9px;
  letter-spacing: 0.05em;
}

/* 再生ボタン */
.controls {
  display: flex;
  gap: 6px;
}
.btn {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }
.btn.primary:hover { opacity: 0.85; }

/* 座標調整UI */
.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.config-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.config-item label {
  font-size: 9px;
  color: var(--dim);
}
.config-item input {
  background: #060c14;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  width: 100%;
  font-family: monospace;
}
.config-item input:focus {
  outline: none;
  border-color: var(--accent);
}
.config-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ログ */
#log-box {
  width: 100%;
  height: 140px;
  background: #040810;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: #60a080;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10px;
  padding: 6px;
  resize: vertical;
  line-height: 1.6;
}
.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

/* 中央：推定マップ（上70%）+ 未探索リスト（下30%）(比率 1) */
.center-panel {
  flex: 0 0 424px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.map-area {
  flex: 7;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area-title {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.remain-area {
  flex: 3;
  border-top: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  padding: 8px 12px;
}

#map-grid {
  position: relative;
}

.map-cell {
  position: absolute;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.map-cell.explored  { background: var(--cell-explored); border: 1.5px solid var(--cell-explored-b); }
.map-cell.unknown   { background: var(--cell-unknown);  border: 1.5px solid var(--cell-unknown-b);  }
.map-cell.empty     { background: transparent;          border: 1px dashed #0f1e2e; }
.map-cell.entrance  { background: var(--cell-entrance); border: 2px solid var(--cell-entrance-b); box-shadow: 0 0 8px rgba(64,128,208,0.4); }
.map-cell.exit      { background: var(--cell-exit);     border: 2px solid var(--cell-exit-b);     box-shadow: 0 0 8px rgba(64,192,128,0.4); }

.cell-num        { position: absolute; top: 1px; left: 3px; font-size: 7px; color: var(--dim); }
.cell-label      { font-size: 8px; text-align: center; line-height: 1.3; color: var(--text); padding: 0 2px; word-break: keep-all; }
.cell-room-score { position: absolute; bottom: 1px; right: 3px; font-size: 7px; color: #60c0a0; font-family: monospace; }

.map-path { position: absolute; border-radius: 2px; }
.map-path.open    { background: var(--path-open); }
.map-path.closed  { background: var(--path-closed); }
.map-path.unknown { background: var(--path-unknown); border: 1px dashed #2a3a50; }

/* 共通：未探索リスト */
.remain-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.remain-item {
  background: #0a1828;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent2);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text);
}
.empty-label { font-size: 10px; color: var(--dim); }

/* 右：マップ候補パネル (比率 2) */
.search-panel {
  flex: 2;
  min-width: 0;
  background: var(--panel);
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#results-status {
  font-size: 11px;
  color: var(--text);
}
#results-kata {
  font-size: 9px;
  color: var(--dim);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}
/* 通路凡例 */
.path-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--dim);
}
.pl-open, .pl-unk {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 1px;
  vertical-align: middle;
}
.pl-open { background: #2878a0; }
.pl-unk  { background: #1a2535; border: 1px dashed #2a3a50; }
#results-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 候補カード */
.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.result-card.perfect {
  border-color: #b08820;
  box-shadow: 0 0 6px rgba(176,136,32,0.3);
}
.result-badge {
  font-size: 8px;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 2px;
  background: #1a2840;
  color: var(--dim);
}
.result-card.perfect .result-badge {
  background: #b08820;
  color: #000;
  font-weight: 700;
}
.result-card.partial .result-badge {
  background: #1a3a5a;
  color: var(--text);
}

/* ミニマップグリッド（3列×4行＋通路）*/
.result-map-grid {
  display: grid;
  grid-template-columns: 60px 16px 60px 16px 60px;
  grid-template-rows: 60px 16px 60px 16px 60px 16px 60px;
  gap: 0;
  background: #080e18;
  border: 1px solid #1a2535;
}
.rmc {
  width: 60px;
  height: 60px;
  background: #080e18;
  overflow: hidden;
}
/* 部屋ありセルは a02.png（空室背景）を下敷きにしてアイコンを合成 */
.rmc.room {
  background-image: url('templates/a/a02.png');
  background-size: 100% 100%;
}
.rmc img {
  width: 60px;
  height: 60px;
  display: block;
  image-rendering: pixelated;
}
/* 横通路: 16px幅、中央に10pxの色帯 */
.rmhp {
  width: 16px;
  height: 60px;
  background: #080e18;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* open: 横16px（ギャップ全長）× 縦8px（通路幅） */
.rmhp.open::after {
  content: '';
  width: 100%;
  height: 8px;
  background: #2878a0;
}
.rmhp.unk::after {
  content: '';
  width: 100%;
  height: 6px;
  background: #1a2e48;
}
/* 縦通路: 16px高さ、横8px（通路幅）× 縦16px（ギャップ全長） */
.rmvp {
  width: 60px;
  height: 16px;
  background: #080e18;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rmvp.open::after {
  content: '';
  width: 8px;
  height: 100%;
  background: #2878a0;
}
.rmvp.unk::after {
  content: '';
  width: 6px;
  height: 100%;
  background: #1a2e48;
}
.rmspc {
  width: 16px;
  height: 16px;
  background: #080e18;
}

/* 未探索枠（予約シンボル）*/
.result-reserves {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 190px;
}
.result-reserve-img {
  width: 22px;
  height: 22px;
  display: block;
  image-rendering: pixelated;
}

/* 通路使用トグル */
.results-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.results-toggle input[type=checkbox] {
  accent-color: var(--accent);
  cursor: pointer;
}