/* cells 洞穴エディタ。**盤面が主役**なので、道具は左に細く畳む。 */

:root {
	--bg: #14141a;
	--panel: #1c1c24;
	--panel-2: #24242e;
	--line: #33333f;
	--ink: #d8d8e2;
	--dim: #8a8a99;
	--accent: #74c0a8;
	--warn: #e0a35c;
	--bad: #d4635c;
}

* { box-sizing: border-box; }

/* `hidden` 属性は `display` を書いた要素に負ける。**起動の幕が消えなかった。** */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--ink);
	font: 13px/1.5 "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
	overflow: hidden;
}

button {
	font: inherit;
	color: var(--ink);
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 4px 10px;
	cursor: pointer;
}
button:hover { background: #2e2e3a; }
button.on { background: var(--accent); color: #10231c; border-color: var(--accent); }
button.danger:hover { background: var(--bad); color: #1a0c0b; border-color: var(--bad); }
button:disabled { opacity: .4; cursor: default; }

/* ---- 起動 ---- */

#boot {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--bg);
	z-index: 50;
}
#boot h1 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
#boot p { margin: 0; color: var(--dim); }
.boot-inner { text-align: center; }

/* ---- 全体 ---- */

#app {
	display: grid;
	grid-template-columns: 260px 1fr;
	height: 100%;
}

/** **左は 3 段。** 持っているもの → 何を置くか → どう置くか。
 *
 * 道具を替えても場所が変わらないことを、この縦並びで守る ── パレットが
 * 道具ごとに上のバーと左下へ散っていたときは、**目が上と左下を往復していた。**
 * 上の 2 段（持ち物・道具）は貼り付けたまま、**流れるのは下だけ。** */
#side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--panel);
	border-right: 1px solid var(--line);
	padding: 10px;
}
#side > .picked, #sec-tools { flex-shrink: 0; }
#side-scroll { flex: 1; min-height: 0; overflow-y: auto; }

#side section { margin-bottom: 14px; }
#side h2 {
	font-size: 11px;
	font-weight: 600;
	color: var(--dim);
	letter-spacing: .08em;
	margin: 0 0 6px;
}

.hint {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--dim);
}

#terrainbar { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
#terrain-groups { align-self: flex-start; }
#terrain-groups button { padding: 4px 14px; }
/* **絵は畳んでおく。** 全部並べると 10 段になって、下のつまみが遠くなる。 */
#terrain-items { display:flex; flex-wrap:wrap; gap:6px; max-height:250px; overflow:auto; }
#terrain-items button { display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:110px; height:92px; padding:5px; font-size:10px; }
#terrain-items img { width:92px; height:58px; object-fit:contain; image-rendering:pixelated; }
#terrain-info { margin-bottom:10px; }
#terrain-panel .lab-link { display:inline-block; margin-top:10px; }

.row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
}
.row span:first-child { width: 34px; color: var(--dim); font-size: 11px; }
.row input[type=range] { flex: 1; min-width: 0; }
.row output { width: 46px; text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.row.check { gap: 6px; }
.row.check span { width: auto; font-size: 11px; color: var(--ink); }

.segmented { display: flex; gap: 0; }
.segmented button {
	flex: 1;
	border-radius: 0;
	border-right-width: 0;
	padding: 4px 2px;
	font-size: 11px;
	white-space: nowrap;
}
.segmented button:first-child { border-radius: 5px 0 0 5px; }
.segmented button:last-child { border-radius: 0 5px 5px 0; border-right-width: 1px; }

/* ---- 選んでいる物質 ---- */

.picked {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	margin-bottom: 12px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 6px;
}
.chip {
	width: 26px;
	height: 26px;
	border-radius: 4px;
	border: 1px solid #0008;
	flex: none;
}
.picked-name { font-weight: 600; }
.picked-sub { font-size: 11px; color: var(--dim); }

/* ---- 道具と物質 ---- */

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tools button { padding: 5px 2px; font-size: 11px; }

/** 中は種別ごとの段（`.mats-row`）。**見出しを挟むので格子ではなく縦積み。** */
.mats { display: block; }
.mats button {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 5px;
	font-size: 11px;
	text-align: left;
	overflow: hidden;
}
.mats button i {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid #0008;
	flex: none;
}
.mats button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 地点 ---- */

.marks { display: grid; gap: 3px; }
.mark-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: 11px;
}
.mark-row b { font-weight: 600; }
.mark-row .pos { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; }
.mark-row.pick { outline: 1px solid var(--accent); }
.mark-row button { padding: 1px 6px; font-size: 10px; }
.spawn-add { display: flex; gap: 4px; margin-top: 5px; }
.spawn-add button { flex: 1; font-size: 11px; }

/* ---- 盤面 ---- */

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#main > #stage { flex: 1; min-height: 0; }
#bar, #tilebar { flex-shrink: 0; }
#bar { flex-wrap: wrap; }
#bar button, #bar a { white-space: nowrap; }
/* ---- パレット（道具ごとに中身が入れ替わる 1 つの枠）---- */

#propbar, #beastbar, #lootbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}
#propbar[hidden], #beastbar[hidden], #lootbar[hidden], #terrainbar[hidden] { display: none; }
/* 仕組みの見出し。**押すと編集の仕方が変わる**ので、列を割って名前を付ける。 */
.bar-label { width: 100%; font-size: 10px; letter-spacing: .08em; color: var(--dim); margin-top: 2px; }
.bar-label:first-child { margin-top: 0; }
#propbar .segmented, #beastbar .segmented { flex-wrap: wrap; gap: 3px; width: 100%; }
#propbar .segmented button, #beastbar .segmented button {
	flex: 0 0 auto; padding: 4px 8px; font-size: 11px;
	border: 1px solid var(--line); border-radius: 5px;
}
#lootbar .badge, #propbar .badge, #beastbar .badge { line-height: 1.5; }
#fx-length { width: 68px; }
#fx-length-row span { width: auto; }

#bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
#bar .sep { width: 1px; height: 20px; background: var(--line); }
/** タイルの帯・向き・番号。**部屋を編集しているあいだは畳んでおく。** */
#tilebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
#tilebar[hidden] { display: none; }
#tilebar .biome-tabs { flex-wrap: wrap; gap: 3px; }
#tilebar .biome-tabs button { border: 1px solid var(--line); border-radius: 5px; }
/** 物質の見出しと段。**種別ごとに分けて並べる。** */
.mat-group {
	margin: 8px 0 3px;
	color: var(--dim);
	font-size: 10px;
	letter-spacing: .08em;
}
.mat-group:first-child { margin-top: 0; }
/* **3 列。** 左をパレットの置き場にしたぶん、2 列だと 41 種で画面を 1 つ
   はみ出す（実測 196px）── 名前は 4 文字までなので 3 列でも切れない。 */
.mats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mat-more { margin-top: 10px; }
.mat-more summary {
	cursor: pointer;
	color: var(--dim);
	font-size: 10px;
	padding: 3px 0;
}
#bar .grow, #status .grow { flex: 1; }
.lab-link {
	padding: 5px 9px;
	color: #9ddce0;
	border: 1px solid #31555b;
	border-radius: 5px;
	background: #122228;
	text-decoration: none;
	font-size: 11px;
}
.lab-link:hover { color: #d9fbfd; border-color: #4d7b81; }

#stage { position: relative; overflow: hidden; background: #0b0b0f; }
#view { display: block; width: 100%; height: 100%; cursor: crosshair; }

#status {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 10px;
	background: var(--panel);
	border-top: 1px solid var(--line);
	font-size: 11px;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}

.badge {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	color: var(--dim);
}
.badge.saved { color: var(--accent); border-color: #2f5a4c; }
.badge.wait { color: var(--warn); border-color: #5a462f; }
.badge.off, .badge.none { color: var(--dim); }

#banner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	padding: 8px 12px;
	background: #2a1f16;
	border: 1px solid #5a462f;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.7;
	color: #e8d8c4;
}
#banner code { background: #0006; padding: 1px 5px; border-radius: 3px; }
#banner button { margin-left: 6px; padding: 1px 8px; font-size: 11px; }

#toast {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	padding: 6px 14px;
	background: #000c;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	pointer-events: none;
}

/* 注文表 ── 骨組みが欲しがる部品を多い順に。押すとその 1 枚が開く。 */
#order-hold { position: relative; }
#order-panel {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 20;
	max-height: 60vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	border-radius: 8px;
	background: #1b1d24;
	box-shadow: 0 8px 24px #0009;
}
#order-panel button {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	white-space: nowrap;
}
#order-panel b { min-width: 3em; }
.badge.warn { color: #e05c5c; }
/* 配置の設定は筆と分け、数値を触っている間も画面を隠さない。 */
#fixture-panel { border-left: 2px solid #bc995c; }
#fixture-panel .row { margin-top: 12px; }
#fx-amount { width: 64px; }
#fx-status { min-height: 3em; }
.fixture-test { margin-top: 10px; }

/* 星の所属を見比べながら編集できる幅。小さい画面では各項目を折り返す。 */
.planet-dialog { max-width: 960px; width: 90vw; max-height: 85vh; overflow: auto; background: #192126; color: #eef3ef; border: 1px solid #647971; border-radius: 12px; }
.planet-dialog::backdrop { background: #000a; }
.planet-dialog fieldset { margin: 14px 0; border: 1px solid #52645c; }
.planet-dialog label { display: inline-flex; flex-direction: column; gap: 4px; margin: 6px; }
.planet-dialog input, .planet-dialog select { padding: 7px; }
.planet-dialog .planet-biome { border-top: 1px solid #39483f; margin-top: 8px; }
.planet-dialog [role="alert"] { color: #ffb398; }
.planet-dialog button { margin: 5px; }

.planet-row { display: flex; flex: 0 0 100%; align-items: center; flex-wrap: wrap; gap: 8px; }
.planet-row > span { min-width: 72px; color: #9daaa5; font-size: 11px; }
.planet-row .segmented { flex-wrap: wrap; }