/* 連鎖（仮）をブラウザで出す枠。**画面の中身は canvas 1 枚**
   （`delve.js` が `game/delve.gd` と同じ順で描く）。 */
:root { color-scheme: dark; }
body {
	margin: 0; background: #0b0b0f; color: #d8d8de;
	font: 13px/1.6 -apple-system, "Hiragino Sans", sans-serif;
	display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px;
}
#wrap { position: relative; line-height: 0; }
/* **セルが見える大きさで出す** ── 滑らかに拡大されると 1 セルの段差が読めない。
   幅は窓に合わせて縮み、縦は 16:9 を保つ。 */
#view {
	image-rendering: pixelated;
	width: min(1280px, calc(100vw - 24px));
	/* Size is fitted to whole device pixels by fitPixelView(), including Retina. */
	background: #05050a; border: 1px solid #2a2a36; border-radius: 4px;
	cursor: crosshair;
}
#veil {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(8, 8, 12, 0.92); color: #9aa; font-size: 15px; line-height: 1.6;
	text-align: center; padding: 20px; border-radius: 4px;
}
#veil.gone { display: none; }
#keys { color: #8a8a98; text-align: center; max-width: 1280px; }
#keys b { color: #b9b9c6; font-weight: 600; }
kbd {
	background: #24242e; border: 1px solid #3a3a48; border-bottom-width: 2px;
	border-radius: 3px; padding: 0 5px; font: inherit; color: #d8d8de;
}
#pad, #fps { margin-left: 10px; color: #6c6c7a; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   道場 ── `?dojo=N` のときだけ出る板（`dojo.js`）。
   --------------------------------------------------------------------------- */
#stage { display: flex; gap: 12px; align-items: flex-start; justify-content: center; }
/* **盤面を先に確保する。** 板が広がって画面が縮むと、詰めている当のものが
   小さくなる。 */
body.in-dojo #view, body.in-loop #view { width: min(1000px, calc(100vw - 400px)); }

#dojo {
	width: 340px; flex: none; max-height: calc(100vh - 90px); overflow-y: auto;
	background: #12121a; border: 1px solid #2a2a36; border-radius: 4px; padding: 10px;
	--sp-color: #d47b45; --sp-accent: #ffd078;
}
#dojo header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 8px; }
#dojo header b { color: var(--sp-accent); font-size: 15px; }
#dojo header small { color: #8a8a98; flex-basis: 100%; line-height: 1.4; }
.yard { font-size: 11px; color: #6c6c7a; border: 1px solid #3a3a48; border-radius: 3px; padding: 0 5px; }
.yard.drawn { color: #9ad2a0; border-color: #3d5c43; }

#dojo .species { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 10px; }
#dojo .species button {
	position: relative; text-align: left; background: #1a1a24; color: #c8c8d4;
	border: 1px solid #2e2e3a; border-left: 3px solid var(--c); border-radius: 3px;
	padding: 3px 6px; font: inherit; cursor: pointer; line-height: 1.25;
}
#dojo .species button:hover { background: #22222e; }
#dojo .species button.on { background: #262633; border-color: var(--c); color: #fff; }
#dojo .species b { display: block; font-size: 12px; font-weight: 600; }
#dojo .species small { color: #7a7a88; font-size: 10px; }
#dojo .species i { position: absolute; top: 2px; right: 4px; font-size: 9px; font-style: normal; color: #c9a24a; }

#dojo .tune { display: flex; flex-direction: column; gap: 2px; }
#dojo .row { display: grid; grid-template-columns: 96px 1fr 44px 20px; align-items: center; gap: 5px; }
#dojo .row label b { font-size: 11px; color: #b9b9c6; font-weight: 600; }
#dojo .row label small { display: block; font-size: 9px; color: #6c6c7a; line-height: 1.1; }
#dojo .row.set label b { color: var(--sp-accent); }
#dojo .row input { width: 100%; accent-color: var(--sp-color); }
#dojo .row output { font-size: 11px; color: #d8d8de; text-align: right; font-variant-numeric: tabular-nums; }
#dojo .row .undo { background: none; border: 0; color: #55556a; cursor: pointer; font-size: 12px; padding: 0; }
#dojo .row.set .undo { color: #9a9ab0; }

#dojo .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
#dojo button:not(.undo):not(.species button) {
	background: #22222e; color: #c8c8d4; border: 1px solid #3a3a48; border-radius: 3px;
	padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer;
}
#dojo .primary { background: #33334a; color: #fff; }
#dojo #dojo-copied { font-size: 11px; color: #9ad2a0; }
#dojo pre {
	background: #0b0b12; border: 1px solid #2a2a36; border-radius: 3px; padding: 6px;
	font-size: 11px; color: #c9d6c9; white-space: pre-wrap; user-select: all; margin: 8px 0 0;
}
#dojo .hint { color: #6c6c7a; font-size: 11px; line-height: 1.5; margin: 10px 0 0; }
#dojo .hint b { color: #9a9ab0; }
#dojo .hint code { color: #8a9aa8; }
#dojo .hint kbd { font-size: 10px; padding: 0 3px; }

/* 物質の差し替え ── **数字より先。** ここを変えると別の敵になる。 */
#dojo .mats { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #26262f; }
#dojo .row.mat { grid-template-columns: 96px 1fr 20px; }
#dojo .row.mat select {
	background: #1a1a24; color: #c8c8d4; border: 1px solid #3a3a48; border-radius: 3px;
	padding: 1px 4px; font: inherit; font-size: 11px; width: 100%;
}
#dojo .row.mat.set select { border-color: var(--sp-color); color: #fff; }

#dojo fieldset { border: 1px solid #30303c; border-radius: 4px; margin: 6px 0; padding: 8px; }
#dojo legend { color: var(--sp-accent); font-size: 12px; padding: 0 5px; }
#dojo fieldset .row { grid-template-columns: 1fr 56px 18px; gap: 5px; margin-bottom: 9px; }
#dojo fieldset label { grid-column: 1 / -1; line-height: 1.3; }
#dojo fieldset input.number { box-sizing: border-box; background: #191922; color: #eee; border: 1px solid #3a3a48; border-radius: 3px; padding: 2px; font: inherit; font-size: 11px; }
#dojo .choose { margin: 7px 0; }
#dojo .choose summary { cursor: pointer; color: #b9b9c6; padding: 4px 0; }

/* 巻き戻る部屋の板。**道場と同じ幅**（並べたときに画面が揺れない）。 */
#loop {
	width: 340px; flex: none; background: #12121a; border: 1px solid #2a2a36;
	border-radius: 4px; padding: 10px; --c: #ffd078;
}
#loop[hidden] { display: none; }
#loop.back { --c: #7ec8ff; }
#loop header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 8px; }
#loop header b { color: var(--c); font-size: 15px; }
#loop header small { color: #8a8a98; flex-basis: 100%; line-height: 1.4; }
#loop .live {
	margin: 0 0 6px; padding: 4px 6px; background: #16161f; border-radius: 3px;
	font-size: 12px; color: #8a8a98;
}
#loop .live b { color: var(--c); font-weight: 600; }
/* 残り時間の帯。**壊すあいだは黄、戻るあいだは青** ── 位相は色で読める。 */
#loop .bar { height: 4px; background: #1c1c28; border-radius: 2px; overflow: hidden; }
#loop .bar i { display: block; height: 100%; background: var(--c); transition: width 0.1s linear; }
#loop .nums {
	display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 10px 0 0;
	font-size: 11px; color: #7a7a88;
}
#loop .nums dt { color: #8a8a98; }
#loop .nums dd { margin: 0; text-align: right; }
#loop .nums b { color: #c8c8d4; font-weight: 600; }

/* 道場の入口／出口。**URL を打たせない。** */
#dojo-enter, #loop-enter {
	display: block; margin: 8px auto 0; background: #1c1c28; color: #c8c8d4;
	border: 1px solid #3a3a48; border-radius: 4px; padding: 5px 14px; font: inherit;
	font-size: 12px; cursor: pointer;
}
#dojo-enter:hover, #loop-enter:hover { background: #26263a; color: #fff; border-color: #4a4a60; }
/* **`display` を書いたら `[hidden]` も書く。** 道場に入っても入口が消えず、
   「押したのに何も起きていない」ように見えた。 */
#dojo-enter[hidden], #loop-enter[hidden] { display: none; }
#dojo .leave, #loop .leave {
	margin-left: auto; background: #1a1a24; color: #8a8a98; border: 1px solid #3a3a48;
	border-radius: 3px; padding: 1px 7px; font: inherit; font-size: 11px; cursor: pointer;
}
#dojo .leave:hover, #loop .leave:hover { color: #d8d8de; }
#loop .hint { margin: 10px 0 0; font-size: 10px; color: #6c6c7a; line-height: 1.5; }
#loop .hint b { color: #9a9aa8; font-weight: 600; }

/* 走っている 1 体の実測。**体力の帯は画面に出さないが、詰める側には数が要る。** */
#dojo .live {
	margin: 0 0 8px; padding: 4px 6px; background: #16161f; border-radius: 3px;
	font-size: 11px; color: #8a8a98; line-height: 1.5;
}
#dojo .live b { color: var(--sp-accent); font-weight: 600; }
#dojo .live i { color: #ff9a6a; font-style: normal; }
#dojo .live.gone { color: #6c6c7a; }

/* 暗い小窓では矢印と説明が競合した。工作盤を開く時だけ世界を止めて全面を使う。 */
#paper-panel { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:#07140acc; }
#paper-panel[hidden] { display:none; }
#paper { display:block; width:min(100vw, 177.7778vh); height:auto; max-height:100vh; aspect-ratio:16/9; touch-action:none; outline:none; }
#paper:focus-visible { outline:2px solid #f7c62c; outline-offset:-2px; }
#paper-open { background:#25382c; color:#efe7ce; border:1px solid #74816c; border-radius:8px; padding:5px 18px; font:inherit; cursor:pointer; }
.editing-spell { overflow:hidden; }

/* --------------------------------------------------------------------------
   爆弾を組む板（`bomb-deck.mjs`）── Tab で開く。**開いているあいだ坑は止まる**
   ので、盤面の上へ重ねる（横に並べると盤面が縮んで、組んだ結果が見えない）。
   -------------------------------------------------------------------------- */
#deck-panel {
	position: fixed; inset: 40px 40px auto; margin: 0 auto; max-width: 1000px;
	max-height: calc(100vh - 120px); overflow-y: auto; z-index: 30;
	background: #12121ae8; border: 1px solid #2a2a36; border-radius: 4px; padding: 12px;
	backdrop-filter: blur(2px);
	--sp-accent: #ffd078;
}
#deck-panel header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
#deck-panel header b { color: var(--sp-accent); font-size: 15px; }
#deck-panel header small { color: #8a8a98; flex-basis: 100%; line-height: 1.5; }
/* 差さっている列。**左から読む** ── 区切りの縦線が 1 発の切れ目。 */
.deck-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; min-height: 46px;
	border: 1px dashed #3a3a48; border-radius: 4px; padding: 6px; margin-bottom: 8px; }
.deck-row:empty::after { content: "札がない ── 下から選ぶ"; color: #55556a; font-size: 12px; align-self: center; }
.deck-row .split { width: 1px; background: #4a4a5c; margin: 0 4px; }
.deck-chip, .deck-cards button {
	background: #1c1c26; border: 1px solid var(--c, #3a3a48); border-radius: 3px; color: #d8d8de;
	font: 500 12px/1.3 "Hiragino Sans", "Noto Sans CJK JP", sans-serif; cursor: pointer;
	padding: 4px 7px; text-align: left;
}
.deck-chip b { display: block; color: var(--c, #d8d8de); font-size: 12px; }
.deck-chip small, .deck-cards button small { display: block; color: #6c6c7a; font-size: 9px; }
.deck-chip:hover, .deck-cards button:hover { background: #262633; }
.deck-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.deck-cards button.content { border-color: var(--c); }
#deck-note { font-size: 12px; color: #b9b9c6; margin: 0 0 8px; }
#deck-note .bad { color: #ff8f7a; }
#deck-note .cost { color: var(--sp-accent); font-variant-numeric: tabular-nums; }