@charset "utf-8";

/* ============================================================
   ダンジョンマスター（モック版） 共通スタイル
   ・幅350pxのスマートフォン表示を基準とする
   ・画像素材は未支給のため、読み込み失敗時のフォールバック表示を持つ
   ============================================================ */

:root {
	--dm-bg: #140f24;
	--dm-bg-panel: #221a3c;
	--dm-bg-panel-head: #2e2352;
	--dm-border: #3d3167;
	--dm-text: #eae6f7;
	--dm-text-sub: #a89fc9;
	--dm-accent: #c9a227;
	--dm-accent-strong: #f0c94a;
	--dm-danger: #d0455a;
	--dm-win: #4fc38a;
	--dm-humanoid: #e0803c;
	--dm-insect: #8bc34a;
	--dm-plant: #3fb59a;
}

/* html に zoom を掛けて画面幅にフィットさせるため、高さは vh ではなく % で追従させる
   （vh は zoom の影響を受けず、縦方向にはみ出すブラウザがある） */
html {
	height: 100%;
}

.dmtr-body {
	/* GREE 固有フッターがページ末尾に追記されるため、高さは固定せず下へ伸ばす */
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: var(--dm-bg);
	color: var(--dm-text);
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.dmtr-body * {
	box-sizing: border-box;
	touch-action: manipulation;
}

/* ゲームフッターを常に最下部へ置くため縦フレックスにする。
   #main-contents の外側には GREE 固有フッターが描画されるので、ここは画面高までで止める */
#main-contents {
	max-width: 350px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #191231 0%, #140f24 100%);
}

.dm-contents {
	flex: 1 0 auto;
	padding: 10px 10px 12px;
}

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

.dm-header {
	background: linear-gradient(180deg, #2e2352 0%, #221a3c 100%);
	border-bottom: 2px solid var(--dm-accent);
	padding: 8px 10px;
}

/* 素材（header.png）が読めた場合は画像だけを見せる。
   読み込みに失敗したときは img の onerror でこの修飾クラスが外れ、
   従来のテキストヘッダーに戻る */
.dm-header--image {
	padding: 0;
	background: none;
	border-bottom: none;
}

.dm-header__image {
	display: block;
	width: 100%;
}

/* ページ名の帯。ヘッダー画像の下に画面幅いっぱいで出す
   （バトル仕様 p20〜27。色は資料の帯に合わせている） */
.dm-pagetitle {
	background: #741b47;
	padding: 6px 10px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.04em;
}

/* 4_3_3（公開できたとき）だけは濃紺の帯に黄色い文字で強調する（画面仕様 20260903） */
.dm-pagetitle--emphasis {
	background: #20124d;
	color: var(--dm-accent-strong);
}

/* 文言・ステータスは素材の銘板に載せる前提のため、いったん非表示。
   表示に戻すときはこのルールを消す */
.dm-header--image .dm-header__body {
	display: none;
}

.dm-header__title {
	font-size: 15px;
	font-weight: bold;
	color: var(--dm-accent-strong);
	text-align: center;
	letter-spacing: 0.04em;
}

.dm-header__stats {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.dm-header__stat {
	flex: 1;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	padding: 3px 6px;
	min-width: 0;
}

.dm-header__label {
	display: block;
	font-size: 10px;
	color: var(--dm-text-sub);
}

.dm-header__value {
	display: block;
	font-size: 12px;
	font-weight: bold;
	word-break: break-all;
}

/* ---------- カテゴリアイコン ---------- */

/* 亜人／昆虫／植物はアイコン素材で表す。
   素材が無い、または読み込みに失敗したときだけカテゴリ名のテキストへ戻す
   （PHP 側が is-noimage を付けるか、img の onerror で付く） */
.dm-cat {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	line-height: 1;
}

/* 素材は透過PNGの黒いシルエット。暗い画面のままでは沈むので白い丸を敷く。
   白抜きのディテール（目・牙など）はこの白地に重なって初めて意図どおりに見える。
   padding はシルエットが円の縁に当たらないようにするためのもの */
.dm-cat__icon {
	width: 18px;
	height: 18px;
	display: block;
	box-sizing: border-box;
	padding: 1px;
	background: #fff;
	border-radius: 50%;
}

.dm-cat--md .dm-cat__icon {
	width: 24px;
	height: 24px;
	padding: 2px;
}

.dm-cat__label {
	display: none;
	font-size: 11px;
	font-weight: bold;
}

.dm-cat.is-noimage .dm-cat__label {
	display: inline;
}

.dm-cat--humanoid.is-noimage .dm-cat__label { color: var(--dm-humanoid); }
.dm-cat--insect.is-noimage   .dm-cat__label { color: var(--dm-insect); }
.dm-cat--plant.is-noimage    .dm-cat__label { color: var(--dm-plant); }

/* 誘因＝カテゴリアイコン＋ポイント数。
   親（.dm-spec dd など）が word-break: break-all だと要素の間で折り返され、
   さらに margin で間隔を取ると2行目だけ字下げされて見えるため、
   ラッパーの flex + gap で間隔を取り、折り返しても左端を揃える */
/* 「誘因：」などのラベルと同じ行に並べるため inline-flex にする */
.dm-lure-list,
.dm-affinity-list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	max-width: 100%;
	vertical-align: middle;
	word-break: keep-all;
}

.dm-lure-badge {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
}

.dm-lure-badge__point {
	color: var(--dm-text);
}

/* ---------- フッター ---------- */

/* ゲームフッターは通常フローの最後に置く（sticky）。
   position:fixed にすると GREE 固有フッター（footer.js が #gree-app-container の外に描画する）が
   常に隠れてしまうため、ゲームフッターの下に GREE フッターが続く形にする。 */
.dm-footer {
	position: sticky;
	bottom: 0;
	width: 100%;
	display: flex;
	background: #1b1533;
	border-top: 2px solid var(--dm-accent);
	z-index: 10;
}

/* タブは5つ（HOME／マモノ一覧／探検する／ショップ／マイページ）。
   幅350pxで1タブ70pxしかないため、資料と同じく2行に折り返す前提で詰めている */
.dm-footer__item {
	flex: 1;
	padding: 13px 2px;
	text-align: center;
	color: var(--dm-text-sub);
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.25;
}

.dm-footer__item.is-active {
	color: var(--dm-accent-strong);
	background: rgba(201, 162, 39, 0.12);
}

/* モック版では非アクティブのタブ */
.dm-footer__item.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ---------- テキストバナー ---------- */

.dm-banner {
	background: linear-gradient(180deg, #5a2b52 0%, #3f2044 100%);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	padding: 6px 8px;
	margin-bottom: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	color: var(--dm-text);
	letter-spacing: 0.04em;
}

/* ---------- ブリンクテキスト ---------- */

.dm-blink {
	text-align: center;
	font-weight: bold;
	animation: dm-blink 1s step-end infinite;
}

.dm-blink--headline {
	margin-bottom: 10px;
	padding: 6px 8px;
	font-size: 16px;
	color: var(--dm-accent-strong);
}

.dm-blink--notice {
	margin-top: 10px;
	font-size: 13px;
	color: var(--dm-accent-strong);
}

.dm-blink--badge {
	display: inline-block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--dm-danger);
}

@keyframes dm-blink {
	0%, 50%  { opacity: 1; }
	51%, 99% { opacity: 0.15; }
	100%     { opacity: 1; }
}

/* ---------- カルーセル（複数ダンジョン切替。モック版はグレイアウト） ---------- */

.dm-carousel {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}

.dm-carousel__body {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

.dm-carousel__arrow {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--dm-text-sub);
}

.dm-carousel__arrow.is-disabled {
	opacity: 0.35;
}

/* ---------- パネル ---------- */

.dm-panel {
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	margin-bottom: 12px;
	overflow: hidden;
}

.dm-panel__head {
	background: var(--dm-bg-panel-head);
	padding: 7px 10px;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-accent-strong);
	border-bottom: 1px solid var(--dm-border);
}

.dm-panel__body {
	padding: 10px;
}

.dm-panel__body--flush {
	padding: 0;
}

.dm-panel--debug {
	border-style: dashed;
	opacity: 0.9;
}

.dm-panel--summary .dm-panel__body {
	padding: 8px 10px;
}

/* ---------- リスト ---------- */

.dm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-list__item {
	border-bottom: 1px solid var(--dm-border);
}

.dm-list__item:last-child {
	border-bottom: none;
}

.dm-list__title {
	display: block;
	padding: 6px 10px 0;
	font-size: 12px;
	font-weight: bold;
}

.dm-list__meta {
	display: block;
	padding: 0 10px 6px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* ---------- 攻略履歴 ---------- */

.dm-history {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	text-decoration: none;
	color: var(--dm-text);
}

.dm-history__body {
	flex: 1;
	min-width: 0;
}

.dm-history__date {
	display: block;
	font-size: 10px;
	color: var(--dm-text-sub);
}

.dm-history__text {
	display: block;
	font-size: 12px;
}

.dm-result {
	font-weight: bold;
}

.dm-result--win  { color: var(--dm-win); }
.dm-result--lose { color: var(--dm-danger); }

/* ---------- 部屋 ---------- */

.dm-rooms {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.dm-rooms__item {
	margin-bottom: 8px;
}

.dm-room {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--dm-text);
}

.dm-room__body {
	flex: 1;
	min-width: 0;
}

.dm-room__title {
	display: block;
	font-weight: bold;
	color: var(--dm-accent-strong);
	margin-bottom: 2px;
}

.dm-room__line {
	display: block;
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* 正式版で追加できる部屋の枠。モック版では非アクティブ */
.dm-room--blank {
	align-items: center;
	justify-content: center;
	min-height: 56px;
	background: rgba(255, 255, 255, 0.06);
	border-style: dashed;
	color: var(--dm-text-sub);
	font-size: 20px;
	opacity: 0.6;
}

.dm-room-detail {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-room-detail__visual {
	text-align: center;
}

/* ---------- サムネイル ---------- */

.dm-thumb {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--dm-border);
	background: #2b2148;
	vertical-align: middle;
}

.dm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-thumb--sm { width: 44px;  height: 44px;  }
.dm-thumb--md { width: 72px;  height: 72px;  }
.dm-thumb--lg { width: 120px; height: 120px; }

.dm-thumb--empty {
	font-size: 10px;
	color: var(--dm-text-sub);
	width: 72px;
	height: 72px;
}

/* ダンジョン開発の未配置枠。マモノ・罠のシルエット素材（common/*_silhouette.png）を
   枠いっぱいに敷く。サイズ指定は持たせず dm-thumb--sm / --md / --lg に任せる。
   素材が読めないと is-noimage が付いて「未配置」の文字に落ちる */
.dm-thumb--silhouette {
	font-size: 10px;
	color: var(--dm-text-sub);
}

.dm-thumb--silhouette img {
	opacity: .9;
}

.dm-thumb__fallback {
	display: none;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-text-sub);
	text-align: center;
	padding: 2px;
}

.dm-thumb.is-noimage .dm-thumb__fallback {
	display: block;
}

.dm-thumb--humanoid { border-color: var(--dm-humanoid); }
.dm-thumb--insect   { border-color: var(--dm-insect); }
.dm-thumb--plant    { border-color: var(--dm-plant); }

.dm-thumb__rarity {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 9px;
	font-weight: bold;
	padding: 0 3px;
	border-radius: 0 3px 0 3px;
	background: #555;
	color: #fff;
}

.dm-thumb__rarity--n   { background: #6b6b7d; }
.dm-thumb__rarity--r   { background: #3f6fd0; }
.dm-thumb__rarity--sr  { background: var(--dm-accent); color: #241c00; }
/* SSR は第三次モック版で追加。金の中でも一段明るくして SR と見分ける */
.dm-thumb__rarity--ssr {
	background: linear-gradient(135deg, #f7d774 0%, #e0a020 100%);
	color: #241c00;
}

.dm-room-thumb {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--dm-border);
	background: linear-gradient(135deg, #2f2750 0%, #1d1736 100%);
}

.dm-room-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-room-thumb--sm { width: 60px;  height: 45px;  }
.dm-room-thumb--md { width: 96px;  height: 72px;  }
.dm-room-thumb--lg { width: 100%;  height: 150px; }

.dm-room-thumb__fallback {
	display: none;
	font-size: 11px;
	color: var(--dm-text-sub);
	text-align: center;
	padding: 4px;
}

.dm-room-thumb.is-noimage .dm-room-thumb__fallback {
	display: block;
}

/* ---------- バッジ ---------- */

.dm-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	padding: 1px 6px;
	border-radius: 10px;
	margin-right: 3px;
	background: #3b3160;
	color: var(--dm-text);
}

.dm-badge--humanoid { background: var(--dm-humanoid); color: #241300; }
.dm-badge--insect   { background: var(--dm-insect);   color: #16240a; }
.dm-badge--plant    { background: var(--dm-plant);    color: #04241d; }
.dm-badge--rarity   { background: #4a4270; }
.dm-badge--none     { background: transparent; color: var(--dm-text-sub); padding-left: 0; }
.dm-badge--new      { background: var(--dm-danger); color: #fff; }
.dm-badge--max      { background: var(--dm-accent-strong); color: #241300; }

/* ---------- スペック表 ---------- */

.dm-spec {
	margin: 0;
	padding: 0;
}

.dm-spec__row {
	display: flex;
	gap: 8px;
	padding: 2px 0;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
}

.dm-spec__row:last-child {
	border-bottom: none;
}

.dm-spec dt {
	width: 72px;
	flex-shrink: 0;
	color: var(--dm-text-sub);
	font-size: 11px;
	margin: 0;
}

.dm-spec dd {
	flex: 1;
	margin: 0;
	font-size: 12px;
	min-width: 0;
	word-break: break-all;
}

/* 相性もカテゴリアイコンで示し、○×だけ色を付ける。
   間隔は .dm-affinity-list の gap で取るので margin は持たせない */
.dm-affinity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: bold;
	white-space: nowrap;
}

.dm-affinity--good { color: var(--dm-win); }
.dm-affinity--bad  { color: var(--dm-danger); }

/* ---------- ボタン ---------- */

.dm-actions {
	margin: 12px 0;
}

.dm-actions--grid {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.dm-actions--grid > * {
	flex: 1 1 0;
	min-width: 0;
}

.dm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 10px 8px;
	margin-bottom: 8px;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.dm-btn:last-child {
	margin-bottom: 0;
}

.dm-btn--large {
	min-height: 48px;
	padding: 13px 8px;
	font-size: 14px;
}

/*
 * 横並び時は下マージンで高さがずれるため打ち消す。
 * .dm-btn / .dm-btn:last-child と同じ詳細度では負けるため、
 * それらより後ろかつ詳細度を上げて定義する。
 */
.dm-actions--grid > .dm-btn,
.dm-actions--grid > * > .dm-btn {
	margin-bottom: 0;
}

.dm-btn--primary {
	background: linear-gradient(180deg, #f0c94a 0%, #c9a227 100%);
	color: #251c00;
}

.dm-btn--secondary {
	background: linear-gradient(180deg, #5a4d94 0%, #3d3167 100%);
	color: var(--dm-text);
}

/* 取り消せない操作（デバッグ機能のユーザーリセットなど） */
.dm-btn--danger {
	background: var(--dm-danger);
	color: #fff;
	border-color: var(--dm-danger);
}

.dm-btn--ghost {
	background: transparent;
	border: 1px solid var(--dm-border);
	color: var(--dm-text-sub);
}

.dm-btn--disabled {
	background: #2c2544;
	color: #6c6390;
	cursor: default;
}

/* ---------- タイトル画面 ---------- */

.dm-title {
	padding-top: 20px;
}

.dm-title__visual {
	position: relative;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dm-border);
	border-radius: 8px;
	background: radial-gradient(circle at 50% 40%, #3a2f66 0%, #17112c 100%);
	overflow: hidden;
	margin-bottom: 14px;
}

.dm-title__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-title__fallback {
	display: none;
	font-size: 26px;
	font-weight: bold;
	color: var(--dm-accent-strong);
	text-align: center;
	line-height: 1.3;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.dm-title__visual.is-noimage .dm-title__fallback {
	display: block;
}

.dm-title__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
}

/* ---------- 魔境錬成 ---------- */

.dm-generate-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.dm-generate-list__item {
	margin-bottom: 8px;
}

.dm-generate {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	color: var(--dm-text);
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}

/* その部屋に設定済みの背景。
   同じ背景を重ねて錬成すると誘因ポイントが累積するため、選択自体は可能にしておき、
   枠とバッジで「いま設定されている背景」だと分かるようにする */
.dm-generate.is-current {
	border-color: var(--dm-accent);
	background: var(--dm-bg-panel-head);
}

/* 錬成先はラジオボタンで選び、「魔境錬成する」で確定する */
.dm-generate__radio {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 4px;
}

.dm-generate__radio input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.dm-generate:has(input:checked) {
	border-color: var(--dm-accent-strong);
	box-shadow: 0 0 0 1px var(--dm-accent-strong) inset;
}

.dm-generate__body {
	flex: 1;
	min-width: 0;
}

.dm-generate__title {
	display: block;
	font-weight: bold;
	font-size: 13px;
}

.dm-generate__line {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 3px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-generate__desc {
	display: block;
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* 錬成後の効果を文章で出す行 */
.dm-generate__value {
	font-weight: bold;
	white-space: nowrap;
}

/* 「効果」「錬成後」のラベル。幅を揃えてバッジの位置を合わせる */
.dm-generate__key {
	flex-shrink: 0;
	min-width: 42px;
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 10px;
	text-align: center;
}

/* 錬成後の効果＝選ぶ決め手になるので目立たせる */
.dm-generate__line--after {
	margin-top: 4px;
	padding-top: 5px;
	border-top: 1px dotted var(--dm-border);
	color: var(--dm-accent-strong);
}

.dm-generate__line--after .dm-generate__key {
	background: rgba(201, 162, 39, 0.22);
	color: var(--dm-accent-strong);
}

.dm-generate__action {
	flex-shrink: 0;
	padding: 6px 10px;
	border-radius: 4px;
	background: var(--dm-accent);
	color: #251c00;
	font-size: 11px;
	font-weight: bold;
}

.dm-generate-effect {
	text-align: center;
	padding: 10px 0 14px;
}

.dm-generate-effect__visual {
	margin-bottom: 10px;
	animation: dm-flash 0.8s ease-out;
}

.dm-generate-effect__message {
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

@keyframes dm-flash {
	0%   { filter: brightness(3); opacity: 0.2; }
	60%  { filter: brightness(1.4); opacity: 1; }
	100% { filter: brightness(1); opacity: 1; }
}

/* ---------- 公開 ---------- */

.dm-publish-result {
	text-align: center;
	padding: 10px 0;
}

.dm-publish-result__message {
	margin: 10px 0;
	font-size: 14px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

/* マモノ進軍イメージ（モック版は固定画像） */
.dm-march {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 画面仕様 20260903 の 4_3_3 に合わせて横長の比率で見せる */
	aspect-ratio: 16 / 9;
	margin-bottom: 10px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	background: #120d24;
	overflow: hidden;
}

.dm-march img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-march__fallback {
	display: none;
	font-size: 12px;
	color: var(--dm-text-sub);
}

.dm-march.is-noimage .dm-march__fallback {
	display: block;
}

.dm-guide {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	font-size: 12px;
}

/* ---------- 6_1_1：マモノ一覧 ---------- */

/* 5列×3行＝15体。仕様（３_１）の1ページ表示数に合わせている */
.dm-mgrid {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.dm-mcell {
	display: block;
	padding: 3px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.dm-mcell__thumb {
	position: relative;
	display: block;
}

/* セル幅に合わせて伸縮させる（dm-thumb--sm の固定幅を上書き） */
.dm-mcell__thumb .dm-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.dm-mcell__lv {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	color: var(--dm-text-sub);
	white-space: nowrap;
}

.dm-mcell__badge {
	position: absolute;
	top: -3px;
	left: -3px;
	font-size: 8px;
	padding: 0 3px;
	z-index: 1;
}

/* ---------- 6_1_2：マモノ詳細 ---------- */

.dm-detail {
	margin-bottom: 12px;
}

.dm-detail__visual {
	text-align: center;
	margin-bottom: 10px;
}

/* 詳細は完成カード（640px素材）を大きく見せる */
.dm-detail__visual .dm-thumb--lg {
	width: 180px;
	height: 180px;
}

/* 3_1_4（成長完了）だけは 90%。下の「防衛に組み込む」「探検に組み込む」が
   端末によってはファーストビューから外れるため */
.dm-detail__visual--sm .dm-thumb--lg {
	width: 162px;
	height: 162px;
}

/* ---------- 6_1_3 / 6_1_4：成長 ---------- */

.dm-potions {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.dm-potion + .dm-potion {
	margin-top: 6px;
}

.dm-potion.is-empty {
	opacity: 0.45;
}

.dm-potion__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
}

.dm-potion__body {
	flex: 1;
	min-width: 0;
}

.dm-potion__name {
	display: block;
	font-size: 12px;
	font-weight: bold;
}

/* 経験値の増分。資料はオレンジだが本体の金に寄せている */
.dm-potion__exp {
	display: block;
	font-size: 11px;
	color: var(--dm-accent-strong);
}

.dm-potion__radio {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--dm-accent);
}

/* 選択中の秘薬（JS で is-selected を付け替える） */
.dm-potion.is-selected .dm-potion__label {
	border-color: var(--dm-accent-strong);
	background: var(--dm-bg-panel-head);
}

/* アイテムアイコン。素材が無い間は文字で代替する */
.dm-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: #2c2450;
	border: 1px solid var(--dm-border);
	overflow: hidden;
	flex: none;
}

.dm-item--sm { width: 28px; height: 28px; }
.dm-item--md { width: 40px; height: 40px; }

.dm-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dm-item__fallback {
	display: none;
	font-size: 13px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-item.is-noimage .dm-item__fallback {
	display: block;
}

.dm-grow__target {
	text-align: center;
	margin-bottom: 8px;
}

/* 資料では淡いベージュだが、ゲーム本体（暗い紫＋金）から浮くのでトーンを合わせている */
.dm-grow__panel {
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	padding: 10px;
	color: var(--dm-text);
	margin-bottom: 10px;
}

.dm-grow__status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.dm-grow__name {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
}

.dm-grow__result p {
	margin: 0 0 4px;
	font-size: 13px;
}

.dm-grow__result .dm-note {
	color: var(--dm-text-sub);
}

/* 経験値バー */
.dm-expbar {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 22px;
	border-radius: 4px;
	background: #17122b;
	border: 1px solid var(--dm-border);
	overflow: hidden;
}

.dm-expbar__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, #e05a68 0%, var(--dm-danger) 100%);
}

.dm-expbar__text {
	position: relative;
	display: block;
	text-align: center;
	line-height: 22px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}

/* 個数の増減 */
.dm-counter {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.dm-counter__btn {
	min-width: 44px;
	padding: 6px 8px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.1;
	color: var(--dm-text);
	background: linear-gradient(180deg, #5a4d94 0%, #3d3167 100%);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
}

/* Lv.MAX は「一気に入れる」操作なので金で強調する */
.dm-counter__btn--max {
	font-size: 11px;
	color: #251c00;
	background: linear-gradient(180deg, #f0c94a 0%, #c9a227 100%);
	border-color: var(--dm-accent);
}

.dm-counter__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	padding: 0 8px;
	font-size: 13px;
	font-weight: bold;
	color: var(--dm-accent-strong);
	background: #17122b;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
}

/* 報酬画面に出す秘薬 */
.dm-reward-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 8px;
}

/* 報酬画面の成長結果
   名前・Lv.・MP が同じ色と大きさで並ぶと読み取れないため、
   「誰が」（サムネイル＋名前）「何がいくつ上がったか」（上がった値だけ金）
   「どれだけ」（右端の Lv.+n）の3つに分けて見せる */
.dm-growlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-growlist__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--dm-border);
}

.dm-growlist__item:last-child {
	border-bottom: none;
}

.dm-growlist__body {
	flex: 1 1 auto;
	min-width: 0;
}

.dm-growlist__name {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dm-growlist__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin-top: 3px;
}

.dm-growlist__stat {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-size: 11px;
	line-height: 1.4;
}

.dm-growlist__label {
	color: var(--dm-text-sub);
	font-size: 10px;
}

.dm-growlist__from {
	color: var(--dm-text-sub);
}

.dm-growlist__arrow {
	color: var(--dm-text-sub);
	font-size: 9px;
}

.dm-growlist__to {
	color: var(--dm-accent-strong);
	font-weight: bold;
}

/* 右端の「Lv.+6」。上がり幅がひと目で分かるように緑で置く */
.dm-growlist__up {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border: 1px solid rgba(79, 195, 138, 0.5);
	border-radius: 10px;
	background: rgba(79, 195, 138, 0.12);
	font-size: 11px;
	font-weight: bold;
	color: var(--dm-win);
	white-space: nowrap;
}

/* 上限に達した個体は「MAX」を添える */
.dm-growlist__max {
	padding: 0 4px;
	border-radius: 6px;
	background: var(--dm-accent-strong);
	color: #241c00;
	font-size: 9px;
}

.dm-monster-detail {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.dm-monster-detail__body {
	flex: 1;
	min-width: 0;
}

/* ---------- 一覧の絞り込み・並び替え ---------- */

/* パネル本文が --flush（左右パディングなし）なので、フォーム側で内側の余白を持つ */
.dm-filter {
	padding: 8px 10px;
	border-bottom: 1px solid var(--dm-border);
}

.dm-filter__row {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

.dm-filter__row:last-child {
	margin-bottom: 0;
}

.dm-filter__select {
	flex: 1 1 0;
	/* flex アイテムは中身の最小幅で潰れなくなるため、明示的に縮小を許可する */
	min-width: 0;
	padding: 7px 8px;
	background: #1a1430;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	color: var(--dm-text);
	font-size: 12px;
	font-family: inherit;
}

.dm-filter__select--wide {
	flex: 2 1 0;
}

.dm-filter__submit {
	flex-shrink: 0;
	padding: 7px 14px;
	border: none;
	border-radius: 4px;
	background: linear-gradient(180deg, #5a4d94 0%, #3d3167 100%);
	color: var(--dm-text);
	font-size: 12px;
	font-weight: bold;
	font-family: inherit;
	cursor: pointer;
}

/* ---------- ページャー ---------- */

.dm-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 8px 10px;
	border-top: 1px solid var(--dm-border);
}

.dm-pager__btn {
	flex-shrink: 0;
	padding: 7px 10px;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	color: var(--dm-text);
	font-size: 11px;
	text-decoration: none;
	white-space: nowrap;
}

.dm-pager__btn--disabled {
	color: #6c6390;
	border-color: #2c2544;
}

.dm-pager__status {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	line-height: 1.4;
}

.dm-pager__page {
	display: block;
	font-size: 12px;
	font-weight: bold;
}

.dm-pager__count {
	display: block;
	font-size: 10px;
	color: var(--dm-text-sub);
}

/* ---------- 絵日記ログ ---------- */

/* 6_1_2 絵日記ログ（画面仕様 p21）。
   第一次からあった「最終決戦」の絵日記の板（log_background.png）は p21 に無いので外した */
.dm-diary__headline {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 4px 0 6px;
}

.dm-diary__headline--win  { color: var(--dm-accent-strong); }
.dm-diary__headline--lose { color: var(--dm-accent-strong); }

/* 相手の探検デッキ／あなたの防衛デッキ。サムネイルを隙間なく並べ、下に MP を右寄せで出す */
.dm-diary__deck {
	margin: 8px 0;
}

.dm-diary__deck-row {
	display: flex;
	justify-content: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-diary__deck-cell .dm-thumb--sm {
	width: 58px;
	height: 58px;
}

.dm-diary__deck-label {
	margin: 2px 4px 0;
	text-align: right;
	font-size: 11px;
}

/* 「バトル経過を表示」。details / summary で開閉し、通常は閉じている */
.dm-accordion {
	margin: 6px 0 10px;
}

.dm-accordion__head {
	padding: 4px 0;
	text-align: center;
	font-size: 12px;
	color: #7fb2ff;
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.dm-accordion__head::-webkit-details-marker {
	display: none;
}

.dm-accordion__head::after {
	content: ' ▼';
}

.dm-accordion[open] > .dm-accordion__head::after {
	content: ' ▲';
}

.dm-diary__comment {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

/* 板の外（暗い下地）に置くので上下に間を取る */
.dm-diary__comment--standalone {
	margin: 8px 0;
}

.dm-diary__avatar {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	border: 1px solid #b79a5b;
	background: #f3ead0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.dm-diary__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-diary__avatar-fallback {
	display: none;
	font-size: 16px;
	color: #7a6a45;
}

.dm-diary__avatar.is-noimage .dm-diary__avatar-fallback {
	display: block;
}

.dm-diary__balloon {
	flex: 1;
	background: #fffdf0;
	border: 1px solid #d9c48a;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 11px;
	min-width: 0;
	/* 以前は絵日記の板（明るい紙面）から文字色を受け継いでいた。暗い下地に出すようになったので自前で持つ */
	color: #3b2f14;
}

.dm-diary__balloon-name {
	display: block;
	color: #8b3a3a;
	font-weight: bold;
}

.dm-battle-log {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 11px;
}

.dm-battle-log__room {
	flex-shrink: 0;
	color: var(--dm-text-sub);
}

.dm-battle-log__text {
	flex: 1;
	min-width: 0;
}

/* ---------- 報酬 ---------- */

.dm-reward__record {
	margin: 0 0 8px;
	font-size: 13px;
}

.dm-reward__lead {
	text-align: center;
	font-weight: bold;
	color: var(--dm-accent-strong);
	margin: 0 0 8px;
}

/* 捕獲マモノは1回のバトルで最大5体並ぶ */
.dm-reward__monsters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
}

.dm-reward__monster {
	text-align: center;
	margin-bottom: 10px;
}

.dm-reward__monsters .dm-reward__monster {
	margin-bottom: 0;
}

.dm-reward__name {
	margin-top: 4px;
	font-size: 12px;
	font-weight: bold;
}

.dm-reward__text {
	text-align: center;
	font-size: 12px;
	margin: 0;
}

/* ---------- 進軍予定 ---------- */

.dm-march {
	display: flex;
	gap: 8px;
	padding: 6px 10px;
	font-size: 11px;
}

.dm-march__no {
	width: 52px;
	flex-shrink: 0;
	color: var(--dm-text-sub);
}

.dm-march__bot {
	flex: 1;
	min-width: 0;
}

/* ---------- 汎用 ---------- */

.dm-summary {
	display: flex;
	gap: 8px;
}

.dm-summary__item {
	flex: 1;
	min-width: 0;
}

.dm-summary__label {
	display: block;
	font-size: 10px;
	color: var(--dm-text-sub);
}

.dm-summary__value {
	display: block;
	font-size: 13px;
	font-weight: bold;
}

.dm-note {
	font-size: 11px;
	color: var(--dm-text-sub);
	margin: 0 0 8px;
}

.dm-note--center {
	text-align: center;
}

.dm-empty {
	padding: 16px 10px;
	text-align: center;
	font-size: 11px;
	color: var(--dm-text-sub);
	margin: 0;
}

.dm-alert {
	background: rgba(208, 69, 90, 0.15);
	border: 1px solid var(--dm-danger);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 12px;
	color: #ffb3bf;
	margin: 0 0 10px;
}

/* エラーではなく注意喚起（入れ替えても強くならない等） */
.dm-alert--info {
	background: rgba(201, 162, 39, 0.14);
	border-color: var(--dm-accent);
	color: var(--dm-accent-strong);
	text-align: center;
	font-weight: bold;
}

.dm-notice {
	background: rgba(79, 195, 138, 0.12);
	border: 1px solid var(--dm-win);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 12px;
	color: #b6f2d5;
	margin: 0 0 10px;
}

/* ---------- 入力 ---------- */

.dm-input {
	display: block;
	width: 100%;
	padding: 9px 10px;
	margin-bottom: 8px;
	background: #1a1430;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	color: var(--dm-text);
	font-size: 13px;
	font-family: inherit;
}

.dm-debug-forms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dm-debug-form {
	flex: 1 1 calc(50% - 4px);
	min-width: 0;
}

.dm-debug-form .dm-btn {
	margin-bottom: 0;
}

/* ============================================================
   1_1_1：HOME（バトル仕様 p21）
   ============================================================ */

/* お知らせ帯からデッキまではヘッダー画像と地続きに見せるため、
   .dm-contents の余白を打ち消して画面幅いっぱいに広げる */
.dm-homehead {
	margin: -10px -10px 8px;
}

/* お知らせ帯。資料ではヘッダー画像に少し重なる黒帯になっている */
.dm-notice {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.85);
	border-bottom: 1px solid var(--dm-border);
}

/* 帯の中では枠を持たせず、顔だけを見せる */
.dm-notice .dm-boticon {
	align-self: center;
	border: none;
	border-radius: 4px;
}

.dm-notice__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--dm-text);
}

/* 探検デッキの5枠。資料では隙間なく並べて1枚の絵のように見せている */
.dm-homedeck .dm-deck {
	margin-bottom: 0;
	gap: 0;
}

.dm-homedeck .dm-deck__cell {
	padding: 0;
	border: none;
	border-radius: 0;
}

/* 顔のアップ（300px素材）を資料と同じ縦長に切り出す */
.dm-homedeck .dm-deck__cell .dm-thumb {
	border: none;
	border-radius: 0;
	aspect-ratio: 1 / 1.6;
}

/* 5枚を小さく並べるとレアリティの文字が潰れるので、HOME では出さない */
.dm-homedeck .dm-thumb__rarity {
	display: none;
}

.dm-homedeck .dm-deck__label {
	padding: 3px 0;
	font-size: 11px;
}

/* お知らせ／BOX／ミッション／アイテム／交換所。
   遷移先が仕様に無いため、モック版では非アクティブで並べるだけにする */
.dm-homemenu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}

.dm-homemenu__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 2px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	background: linear-gradient(180deg, #3a2f5e 0%, #2a2247 100%);
	color: var(--dm-text-sub);
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}

.dm-homemenu__btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* バトル記録室は資料でも半幅で中央に置かれている */
.dm-actions--center {
	display: flex;
	justify-content: center;
}

.dm-btn--half {
	width: 60%;
}

/* ============================================================
   探検（第二次モック版）
   ・演出は Canvas を使わず DOM + CSS のみで組む
     （html に zoom が掛かっているため Canvas は解像度計算が必要になる）
   ・レイアウトはバトル演出仕様書 p5 に合わせている
   ============================================================ */

/* ---------- 探検先選択 ---------- */

.dm-explore-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-explore-target {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	background: var(--dm-bg-panel);
}

/* bot 魔王のアイコン（bot001_icon.png ほか）。
   素材が読めないときは bot 名の先頭2文字で代替する */
.dm-boticon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	align-self: flex-start;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--dm-border);
	background: #2b2148;
}

.dm-boticon--sm { width: 36px; height: 36px; }
.dm-boticon--md { width: 56px; height: 56px; }

.dm-boticon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-boticon__fallback {
	display: none;
	font-size: 11px;
	font-weight: bold;
	color: var(--dm-text-sub);
}

.dm-boticon.is-noimage .dm-boticon__fallback {
	display: block;
}

.dm-explore-target__body {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

/* カードごと 2_1_2 へのリンクにしているので、文字色と下線は素のままに戻す */
a.dm-explore-target {
	color: inherit;
	text-decoration: none;
}

.dm-explore-list__item {
	list-style: none;
}

.dm-explore-target__title {
	display: block;
	font-weight: bold;
	font-size: 13px;
}

.dm-explore-target__line {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-explore-target__rooms {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.dm-explore-target__action {
	flex-shrink: 0;
	align-self: center;
}

.dm-explore-target__action .dm-btn {
	margin-bottom: 0;
}

/* ---------- 演出画面 ---------- */

/* display を指定した要素では hidden 属性（UA の display:none）が効かなくなる。
   演出中は hidden で出し分けているので、この画面の中では必ず効くようにしておく。 */
.dm-explore [hidden] {
	display: none !important;
}

.dm-explore {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
	background: #05040c;
	-webkit-user-select: none;
	user-select: none;
}

/* 通路。奥から手前へスクロールしているように見せる。
   移動中は pathway.png、部屋に着いたらその部屋の背景を JS が入れ替える。
   1枚絵をズームのループで進んでいるように見せている。 */
.dm-explore__corridor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #0b0a18;
	background-position: center 40%;
	background-size: cover;
	background-repeat: no-repeat;
}

.dm-explore__corridor::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75) 100%);
}

.dm-explore__corridor.is-walking {
	animation: dm-corridor-scroll 2.4s linear infinite;
}

.is-fast .dm-explore__corridor.is-walking {
	animation-duration: 1.2s;
}

@keyframes dm-corridor-scroll {
	/* 通路素材は横長、画面は縦長なので高さ基準で拡大する。
	   幅基準（100% auto）だと上下に地の色が見えてしまう。 */
	0%   { background-size: auto 100%; }
	100% { background-size: auto 150%; }
}

/* ---------- テキストエリア ---------- */

/* 探検ビュワー修正（画面仕様 p24）で横幅いっぱい・3行・文字を大きめにした。
   文の長さで枠の高さが揺れないよう3行ぶんを最低の高さにする。
   捕獲の後半（「ジャイアントスパイダーが仲間に…」）など名前の長いマモノで
   4行になることがあるので、固定にはせず伸ばす（4行でも敵カードの上端 140px には届かない） */
.dm-explore__text {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	min-height: calc(14px * 1.45 * 3 + 16px);
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--dm-accent);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(42, 32, 73, 0.94) 0%, rgba(20, 15, 36, 0.94) 100%);
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.5),
		inset 0 0 0 1px rgba(240, 201, 74, 0.18);
	font-size: 14px;
	line-height: 1.45;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 4;
}

.dm-explore__text.is-shown {
	opacity: 1;
}

/* ---------- 2倍速・EXIT ---------- */

/* 画面仕様 p24 で右上から右下へ移した。左の総MPと同じ段に揃える */
.dm-explore__controls {
	position: absolute;
	right: 8px;
	bottom: 96px;
	display: flex;
	gap: 4px;
	z-index: 4;
}

.dm-explore__speed,
.dm-explore__pause,
.dm-explore__exit {
	padding: 3px 5px;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: linear-gradient(180deg, #3d3167 0%, #241c44 100%);
	color: var(--dm-text);
	font-size: 11px;
	font-weight: bold;
	font-family: inherit;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.dm-explore__speed.is-active,
.dm-explore__pause.is-active {
	border-color: #e2607a;
	background: linear-gradient(180deg, #d0455a 0%, #8e2337 100%);
	color: #fff0f3;
}

/* 一時停止中は CSS アニメーション（通路のスクロール・プレート・紙吹雪）も止める。
   タイマーだけ止めても絵が動き続けるとテキストを落ち着いて読めないため */
.dm-explore.is-paused,
.dm-explore.is-paused * {
	animation-play-state: paused !important;
}

/* ---------- 総MP ---------- */

/* 増減時は「540 →594」と変化前後を並べる（演出仕様書 p8） */
.dm-explore__total-delta.is-up   { color: #ff6b7f; }
.dm-explore__total-delta.is-down { color: #7fb2ff; }

.dm-explore__total {
	position: absolute;
	left: 8px;
	bottom: 96px;
	padding: 3px 10px;
	border: 1px solid var(--dm-accent);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(42, 32, 73, 0.94) 0%, rgba(20, 15, 36, 0.94) 100%);
	color: var(--dm-accent-strong);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	z-index: 4;
}

/* ---------- 部屋のマモノ ---------- */

/* 部屋のマモノはカードとして中央に大きく出す（演出仕様書 p7）。
   支給素材の mamono_*.png が枠・レアリティ・名前・星・種族アイコンまで入った
   完成カードなので、CSS では枠を作らず画像をそのまま出す。 */
.dm-explore__enemy {
	position: absolute;
	top: 140px;
	left: 50%;
	width: 136px;
	margin-left: -68px;
	z-index: 2;
	filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.7));
}

.dm-explore__enemy-visual {
	position: relative;
	display: block;
}

/* MPゲージはテキストエリアと同じ位置に排他で出す（演出仕様書 p11） */
.dm-explore__enemy-status {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 4;
}

.dm-explore__gauge {
	position: relative;
	flex: 1 1 auto;
	height: 20px;
	border: 1px solid var(--dm-accent);
	border-radius: 3px;
	background: #2a2440;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	display: flex;
}

/* 区切りのあるバーに見せる */
.dm-explore__gauge::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: repeating-linear-gradient(
		to right,
		rgba(0, 0, 0, 0.55) 0 2px,
		rgba(0, 0, 0, 0) 2px 11px
	);
	pointer-events: none;
}

/* 元のMPは赤、超過分は黄、減少分は灰（バトル演出仕様書 p11）。
   削られたのが分かるよう幅の変化はアニメーションさせる */
.dm-explore__gauge-base,
.dm-explore__gauge-over {
	display: block;
	height: 100%;
	transition: width 0.45s ease-out;
}

.dm-explore__gauge-base { background: #d23b4e; }
.dm-explore__gauge-over { background: #f2c53d; }

/* MPが削れた瞬間にゲージを光らせる */
.dm-explore__gauge.is-damaged {
	animation: dm-explore-gauge-hit 0.4s ease-out;
}

@keyframes dm-explore-gauge-hit {
	0%, 100% { box-shadow: none; }
	40%      { box-shadow: 0 0 10px 2px rgba(255, 90, 110, 0.9); }
}

.dm-explore__enemy-mp {
	flex-shrink: 0;
	padding: 2px 6px;
	border: 1px solid var(--dm-accent);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(42, 32, 73, 0.96) 0%, rgba(20, 15, 36, 0.96) 100%);
	color: var(--dm-text);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: -0.3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
}

.dm-explore__enemy-mp.is-up   { color: #ff6b7f; }
.dm-explore__enemy-mp.is-down { color: #7fb2ff; }

.dm-explore__enemy-img {
	display: block;
	width: 100%;
	height: auto;
}

.dm-explore__enemy.is-fainted .dm-explore__enemy-visual {
	filter: grayscale(1) brightness(0.5);
}

.dm-explore__enemy.is-leaving {
	animation: dm-explore-leave 0.6s ease-in forwards;
}

@keyframes dm-explore-leave {
	to { transform: translateX(-260px); opacity: 0; }
}

/* ---------- 攻撃側デッキ（下） ---------- */

.dm-explore__deck {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 3px;
	z-index: 3;
}

/* 攻撃側カードも支給素材のカード画像をそのまま使う。
   枠・レアリティ・名前・星は画像に含まれているので CSS では足さない。 */
.dm-explore__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.is-walking .dm-explore__card {
	animation: dm-explore-walk 0.6s ease-in-out infinite;
}

.is-fast.is-walking .dm-explore__card {
	animation-duration: 0.3s;
}

@keyframes dm-explore-walk {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* 攻撃時は敵の位置まで飛んでいく */
.dm-explore__card.is-attacking {
	animation: dm-explore-attack 0.5s ease-out;
	z-index: 5;
}

@keyframes dm-explore-attack {
	0%   { transform: translate(0, 0) scale(1); }
	60%  { transform: translate(0, -150px) scale(1.25); }
	100% { transform: translate(0, 0) scale(1); }
}

/* 勝利時は移動時の2倍幅で3回跳ねる */
.dm-explore__card.is-cheering {
	animation: dm-explore-cheer 0.4s ease-in-out 3;
}

@keyframes dm-explore-cheer {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.dm-explore__card.is-fainted {
	animation: none;
}

/* カードをグレイアウトする（演出仕様書 p13）。
   filter は絵にだけ掛ける。絵の中に重ねている「気絶」まで沈まないようにするため
   （枠やレアリティも絵に含まれているので、見た目はカード全体がグレーになる） */
.dm-explore__card.is-fainted .dm-explore__card-visual > img,
.dm-explore__card.is-fainted .dm-explore__card-fallback {
	filter: grayscale(1) brightness(0.5);
}

.dm-explore__card.is-fainted .dm-explore__card-mp {
	background: rgba(150, 150, 158, 0.92);
	color: #3d3d48;
}

.dm-explore__card-visual {
	position: relative;
	display: block;
	min-height: 40px;
}

/* 切り取らずカード画像をそのまま出す */
.dm-explore__card-visual > img {
	display: block;
	width: 100%;
	height: auto;
}

.dm-explore__card-visual > img + .dm-explore__card-fallback {
	display: none;
}

.dm-explore__card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 10px;
	color: var(--dm-text-sub);
}

/* MPはカード画像の下に置く（演出仕様書 p5 / p7 も絵の下に別プレートで出している）。
   絵に重ねるとマモノが見えなくなるため。 */
.dm-explore__card-mp {
	display: block;
	margin-top: 2px;
	padding: 1px 0;
	border: 1px solid var(--dm-border);
	border-radius: 3px;
	background: linear-gradient(180deg, #f7f7fb 0%, #dcdce6 100%);
	color: #1a1430;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: -0.3px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

/* 上昇は赤、減少は青。矢印が消えるのと同時に黒へ戻す */
.dm-explore__card-mp-value.is-up   { color: #d23b4e; }
.dm-explore__card-mp-value.is-down { color: #2f6fd0; }

/* MP増減の矢印。演出仕様書 p8 のとおりカード幅に対して太く大きく出す */
.dm-explore__arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -15px;
	width: 26px;
	height: 30px;
	margin-left: -13px;
	z-index: 4;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

.dm-explore__arrow::before,
.dm-explore__arrow::after {
	content: '';
	position: absolute;
	left: 50%;
}

/* 上向き（上昇）は赤 */
.dm-explore__arrow.is-up::before {
	top: 0;
	margin-left: -13px;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-bottom: 15px solid #e8213a;
}

.dm-explore__arrow.is-up::after {
	top: 15px;
	margin-left: -5px;
	width: 10px;
	height: 15px;
	background: #e8213a;
}

/* 下向き（減少）は青 */
.dm-explore__arrow.is-down::before {
	bottom: 0;
	margin-left: -13px;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 15px solid #2f6fd0;
}

.dm-explore__arrow.is-down::after {
	top: 0;
	margin-left: -5px;
	width: 10px;
	height: 15px;
	background: #2f6fd0;
}

.dm-explore__faint {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -11px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5px #000, 0 1px 2px #000;
	z-index: 3;
}

/* 敵カードの「気絶」は絵の中央に大きく出す */
.dm-explore__enemy .dm-explore__faint {
	top: 50%;
	margin-top: -14px;
	font-size: 26px;
}

/* ---------- プレート・HIT ---------- */

/* 「バトル開始！」「勝利！」のプレート（演出仕様書 p11 / p13）。
   仕様書は白地に赤文字だが、ゲーム本体が暗い紫＋金のトーンなので
   そこへ寄せている（白地だと画面から浮いてしまう）。 */
.dm-explore__plate {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
	padding: 14px 0 16px;
	background: linear-gradient(180deg,
		rgba(24, 18, 42, 0.97) 0%,
		rgba(58, 44, 100, 0.97) 46%,
		rgba(34, 25, 62, 0.97) 54%,
		rgba(24, 18, 42, 0.97) 100%);
	border-top: 2px solid var(--dm-accent);
	border-bottom: 2px solid var(--dm-accent);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.75),
		inset 0 2px 0 rgba(240, 201, 74, 0.28),
		inset 0 -2px 0 rgba(240, 201, 74, 0.28),
		inset 0 0 30px rgba(240, 201, 74, 0.12);
	text-align: center;
	overflow: hidden;
	z-index: 6;
}

/* 金の帯を左から右へ滑らせて、金属の照り返しに見せる */
.dm-explore__plate::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 40%;
	background: linear-gradient(100deg,
		rgba(255, 240, 190, 0) 0%,
		rgba(255, 240, 190, 0.22) 50%,
		rgba(255, 240, 190, 0) 100%);
	animation: dm-explore-plate-sheen 1.8s ease-in-out infinite;
}

@keyframes dm-explore-plate-sheen {
	0%   { left: -40%; }
	60%  { left: 110%; }
	100% { left: 110%; }
}

.dm-explore__plate-text {
	position: relative;
	display: inline-block;
	transform: skewX(-7deg);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-indent: 0.14em;
	line-height: 1.1;
	color: #ffe9a8;
	text-shadow:
		0 0 14px rgba(240, 201, 74, 0.75),
		0 2px 0 #6b4c05,
		0 3px 6px rgba(0, 0, 0, 0.8);
}

.dm-explore__hit {
	position: absolute;
	left: 50%;
	top: 42%;
	margin-left: -30px;
	padding: 12px 10px;
	background: none;
	color: #c8102e;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
	box-shadow: 0 0 18px rgba(245, 194, 17, 0.75);
	transform: rotate(-10deg);
	animation: dm-explore-hit-pop 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both;
	z-index: 7;
}

/* 箱を2つ（そのままと45度ずらしたもの）文字の後ろに重ねて八角の弾け方にする。
   親の背景を透明にしておかないと z-index:-1 の擬似要素が背景に隠れる。 */
.dm-explore__hit::before,
.dm-explore__hit::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #fff08a 0%, #f5c211 100%);
	z-index: -1;
}

.dm-explore__hit::after {
	transform: rotate(45deg);
}

@keyframes dm-explore-hit-pop {
	0%   { transform: rotate(-10deg) scale(0.4); opacity: 0; }
	100% { transform: rotate(-10deg) scale(1); opacity: 1; }
}

/* ---------- ダイアログ ---------- */

/* 結果ダイアログ（演出仕様書 p16 / p17）。
   仕様書は白地の箱だが、ゲーム本体のトーン（暗い紫＋金）に合わせている。 */
.dm-explore__dialog {
	position: absolute;
	left: 50%;
	/* 上端を基準に置くと、行数の多いダイアログが下にはみ出して切れるので上下中央に置く */
	top: 50%;
	transform: translateY(-50%);
	width: 262px;
	max-height: 92%;
	margin-left: -131px;
	padding: 0 0 18px;
	overflow-y: auto;
	border: 2px solid var(--dm-accent);
	border-radius: 8px;
	background: linear-gradient(180deg, #2e2450 0%, #1a1430 100%);
	color: var(--dm-text);
	text-align: center;
	box-shadow:
		0 14px 36px rgba(0, 0, 0, 0.78),
		inset 0 0 0 1px rgba(240, 201, 74, 0.28),
		inset 0 0 40px rgba(240, 201, 74, 0.06);
	z-index: 9;
	animation: dm-explore-dialog-in 0.32s cubic-bezier(0.18, 0.9, 0.3, 1.3) both;
}

/* 上下中央に置いているので translateY(-50%) を保ったまま弾ませる */
@keyframes dm-explore-dialog-in {
	0%   { opacity: 0; transform: translateY(-50%) scale(0.84); }
	60%  { opacity: 1; transform: translateY(-50%) scale(1.03); }
	100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* 見出し帯 */
.dm-explore__dialog-title {
	display: block;
	margin-bottom: 16px;
	padding: 8px 0 7px;
	border-bottom: 1px solid var(--dm-accent);
	border-radius: 5px 5px 0 0;
	background: linear-gradient(180deg, #4a3f7a 0%, #2e2352 100%);
	color: var(--dm-accent-strong);
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.dm-explore__dialog--lose .dm-explore__dialog-title {
	border-bottom-color: #d0455a;
	background: linear-gradient(180deg, #7a2438 0%, #46101d 100%);
	color: #ffc9d2;
}

.dm-explore__dialog--clear .dm-explore__dialog-title {
	background: linear-gradient(180deg, #b98f1c 0%, #6b4f08 100%);
	color: #fff3c4;
	text-shadow: 0 0 10px rgba(255, 224, 130, 0.5), 0 1px 2px rgba(0, 0, 0, 0.65);
}

.dm-explore__dialog--lose { border-color: #d0455a; }

.dm-explore__dialog-title[hidden] + .dm-explore__dialog-message,
.dm-explore__dialog-title[hidden] + .dm-explore__dialog-message[hidden] + .dm-explore__dialog-actions {
	margin-top: 18px;
}

.dm-explore__dialog-message {
	margin: 0 16px 18px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: var(--dm-text);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	white-space: pre-line;
}

.dm-explore__dialog-message[hidden] + .dm-explore__dialog-actions {
	margin-top: 0;
}

/* 全滅は赤、クリアは金の下線でメッセージを締める */
.dm-explore__dialog--lose .dm-explore__dialog-message,
.dm-explore__dialog--clear .dm-explore__dialog-message {
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(240, 201, 74, 0.22);
}

.dm-explore__dialog-btn {
	min-width: 150px;
	margin: 0 auto;
	min-height: 38px;
	padding: 9px 14px;
	border: none;
	border-radius: 6px;
	background: linear-gradient(180deg, #f0c94a 0%, #c9a227 100%);
	color: #251c00;
	font-size: 14px;
	font-weight: bold;
	text-shadow: none;
	box-shadow: 0 2px 0 #8a6c12, 0 4px 10px rgba(0, 0, 0, 0.45);
}

/* 副ボタン（もう一度見る／いいえ）は本体の secondary に合わせる */
.dm-explore__dialog-btn--sub {
	background: linear-gradient(180deg, #5a4d94 0%, #3d3167 100%);
	color: var(--dm-text);
	box-shadow: 0 2px 0 #2a2148, 0 4px 10px rgba(0, 0, 0, 0.45);
}

.dm-explore__dialog-actions {
	display: flex;
	gap: 8px;
	margin: 0 16px;
}

.dm-explore__dialog-actions .dm-btn {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

/* ボタンが2つ以上あるときは縦に積む（日本語のラベルは横並びだと詰まる） */
.dm-explore__dialog-actions--stack {
	flex-direction: column;
}

.dm-explore__dialog .dm-btn {
	display: inline-block;
	margin-bottom: 0;
}

/* 紙吹雪。素材が無いので JS で紙片の要素を流し込み、CSS で舞わせている */
.dm-explore__confetti-layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 8;
	overflow: hidden;
	pointer-events: none;
}

.dm-explore__confetti {
	position: absolute;
	top: -24px;
	width: 7px;
	height: 12px;
	border-radius: 1px;
	will-change: transform;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* リボン状の紙片。細長くひらひらさせる */
.dm-explore__confetti--ribbon {
	width: 4px;
	height: 20px;
	border-radius: 3px;
}

/* 落ちながら回るパターンを3種持たせて、同じ動きが揃わないようにする */
.dm-explore__confetti--a { animation-name: dm-confetti-a; }
.dm-explore__confetti--b { animation-name: dm-confetti-b; }
.dm-explore__confetti--c { animation-name: dm-confetti-c; }

@keyframes dm-confetti-a {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1); opacity: 1; }
	100% { transform: translate3d(-26px, 500px, 0) rotate(680deg) scaleX(0.4); opacity: 0.85; }
}

@keyframes dm-confetti-b {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1); opacity: 1; }
	50%  { transform: translate3d(18px, 250px, 0) rotate(-260deg) scaleY(0.5); }
	100% { transform: translate3d(-10px, 500px, 0) rotate(-520deg) scaleY(1); opacity: 0.85; }
}

@keyframes dm-confetti-c {
	0%   { transform: translate3d(0, 0, 0) rotate(20deg); opacity: 1; }
	35%  { transform: translate3d(-16px, 175px, 0) rotate(160deg); }
	70%  { transform: translate3d(20px, 350px, 0) rotate(320deg); }
	100% { transform: translate3d(4px, 500px, 0) rotate(460deg); opacity: 0.85; }
}

/* ---------- 探検結果 ---------- */

/* 2_1_3 の見出し。資料 p7 は帯を敷かず、大きな金文字だけ */
.dm-explore-result__headline {
	padding: 12px 8px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-explore-result__headline--lose {
	font-size: 18px;
}

/* 全クリアボーナスは「報酬」の内訳なので一段小さく */
.dm-explore-result__bonus dt {
	width: auto;
	min-width: 72px;
}

.dm-explore-result__bonus dd {
	font-size: 12px;
}

/* ---------- 6_2 / 6_3：探検デッキ ---------- */

/* デッキ名とMPの帯（バトル仕様 p24） */
.dm-deckbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	margin-bottom: 8px;
	background: linear-gradient(180deg, #5a2b52 0%, #3f2044 100%);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}

.dm-deckbar__body {
	flex: 1;
	line-height: 1.4;
}

.dm-deckbar__arrow {
	font-size: 14px;
	color: var(--dm-accent-strong);
}

.dm-deckbar__arrow.is-disabled {
	color: #5b5379;
}

/* 先鋒〜大将の5枠 */
.dm-deck {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2px;
}

.dm-deck__cell {
	display: block;
	padding: 2px;
	border: 2px solid transparent;
	border-radius: 4px;
	text-decoration: none;
}

.dm-deck__cell.is-selected {
	border-color: var(--dm-accent-strong);
}

.dm-deck__cell .dm-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* ラベルは資料に合わせて黒帯 */
.dm-deck__label {
	display: block;
	padding: 2px 0;
	background: #000;
	color: #fff;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
}

/* 入替候補で選択中の枠 */
.dm-mcell.is-selected {
	border-color: var(--dm-accent-strong);
}

/* 使用中でグレーアウトする枠 */
.dm-mcell.is-inuse {
	opacity: 0.5;
}

.dm-mcell__inuse {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 1px 0;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	text-align: center;
	font-size: 9px;
	z-index: 1;
}

/* 並び順設定 */
.dm-order {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.dm-order__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
}

.dm-order__item + .dm-order__item {
	margin-top: 6px;
}

.dm-order__body {
	flex: 1;
	min-width: 0;
}

.dm-order__name {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: bold;
}

/* 総MPの増減 */
.dm-diff--up   { color: var(--dm-win); }
.dm-diff--down { color: var(--dm-danger); }

/* ---------- 6_4：合成 ---------- */

/* 合成元 ＋ 素材 ＝ 結果（バトル仕様 p26） */
.dm-fusion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.dm-fusion__sign {
	font-size: 16px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-fusion__cell--result .dm-thumb {
	border-color: var(--dm-accent-strong);
}

/* 合成で上がる値。資料では赤字 */
.dm-diff--new {
	color: #ff8a97;
	font-weight: bold;
}

/* ---------- 7_1：マモノ図鑑 ---------- */

/* 未発見のマモノ（仕様（５_１）でアイコンは「？」）
   一覧は unknown_icon.png、詳細は unknown_mamono.png を出す。
   素材が読めないときだけ、破線の枠と「？」の文字で代替する */
.dm-thumb--unknown.is-noimage {
	background: #2c2450;
	border-style: dashed;
	color: var(--dm-text-sub);
}

.dm-thumb--unknown .dm-thumb__fallback {
	font-size: 18px;
	font-weight: bold;
}

.dm-thumb--unknown.dm-thumb--lg .dm-thumb__fallback {
	font-size: 48px;
}

/* ---------- 5_1：マモノガチャ ---------- */

/* レアリティごとの発光色。演出はこの1変数を切り替えるだけで
   魔法陣・リボン・フラッシュ・カード縁がまとめて変わる */
.dm-gacha--n,
.dm-gacha--r   { --dm-glow: #b043d8; }
.dm-gacha--sr  { --dm-glow: #5fa8ff; }
.dm-gacha--ssr { --dm-glow: #ffc93c; }

/* 表・レアリティラベル（提供割合で使う） */
.dm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 12px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
}

.dm-table th,
.dm-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--dm-border);
	text-align: left;
}

.dm-table th {
	background: var(--dm-bg-panel-head);
	color: var(--dm-text-sub);
	font-size: 11px;
	font-weight: normal;
}

.dm-table tr:last-child td {
	border-bottom: 0;
}

.dm-table__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.dm-rarity {
	display: inline-block;
	min-width: 34px;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

.dm-rarity--n   { background: #6b6b7d; }
.dm-rarity--r   { background: #3f6fd0; }
.dm-rarity--sr  { background: var(--dm-accent); color: #241c00; }
.dm-rarity--ssr {
	background: linear-gradient(135deg, #f7d774 0%, #e0a020 100%);
	color: #241c00;
}

.dm-panel__sub {
	float: right;
	color: var(--dm-text-sub);
	font-size: 11px;
	font-weight: normal;
}

.dm-mcell__name {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
	color: var(--dm-text-sub);
}

.dm-note--alert {
	color: var(--dm-danger);
}

.dm-btn--wide {
	width: 100%;
}

/* ---- ガチャトップ ---- */

/* ガチャ台の絵（common/gachainfo.png）を敷く。
   読み込みに失敗すると .is-noimage が付き、下のグラデーション＋魔法陣の楕円に落ちる */
.dm-gachatop__stage {
	position: relative;
	height: 150px;
	margin: 6px 0 10px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	background: radial-gradient(ellipse at 50% 80%, #3a2a63 0%, #1b1433 70%);
	overflow: hidden;
}

.dm-gachatop__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 未解放のあいだは絵を沈ませて、鍵アイコンを目立たせる */
.dm-gachatop__stage.is-locked .dm-gachatop__image {
	filter: grayscale(.6) brightness(.45);
}

/* 絵が出ているときは代替の魔法陣を隠す */
.dm-gachatop__stage:not(.is-noimage) .dm-gachatop__circle {
	display: none;
}

.dm-gachatop__circle {
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 130px;
	height: 46px;
	margin-left: -65px;
	border: 2px solid rgba(176, 67, 216, .8);
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(176, 67, 216, .55);
	animation: dm-gacha-idle 2.4s ease-in-out infinite;
}

.dm-gachatop__stage.is-locked .dm-gachatop__circle {
	border-color: rgba(120, 110, 150, .5);
	box-shadow: none;
	animation: none;
}

.dm-gachatop__lock {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	opacity: .85;
}

.dm-gachatop__name {
	margin-top: 4px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

@keyframes dm-gacha-idle {
	0%, 100% { opacity: .55; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.04); }
}

/* ---- 所持メダル ---- */

.dm-medal {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	margin-bottom: 8px;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: var(--dm-bg-panel);
}

.dm-medal__label {
	color: var(--dm-text-sub);
	font-size: 11px;
}

.dm-medal__count {
	margin-left: auto;
	font-size: 17px;
	font-weight: bold;
	color: var(--dm-accent-strong);
	font-variant-numeric: tabular-nums;
}

.dm-medal__max {
	color: var(--dm-text-sub);
	font-size: 11px;
}

.dm-medal--compact {
	justify-content: center;
	margin: 10px 0;
}

.dm-medal--compact .dm-medal__count {
	margin-left: 6px;
}

/* 5_1_2：メダルの増減（サタンメダル：3枚 → 2枚）。減ったあとを赤で出す */
.dm-medal__arrow {
	margin-left: 6px;
	color: var(--dm-text-sub);
}

.dm-medal__count--after {
	color: var(--dm-danger);
}

/* 5_1_2：NEW はスペック枠の上に置く */
.dm-gacha__new {
	margin-bottom: 6px;
	text-align: center;
}

/* 5_1_2：メダルの入手経路の一言。結果をファーストビューに収めたいので
   .dm-note より一段小さくする（ここだけ。他の画面の注記は 11px のまま） */
.dm-gacha__medalnote {
	font-size: 10px;
}

.dm-panel--lock .dm-panel__head {
	color: var(--dm-text-sub);
}

/* ---- ガチャ演出 ----

   Canvas / Three.js は使わず、DOM のレイヤーと CSS3 のアニメーションだけで組む。
   header.phtml が documentElement.style.zoom で画面幅に合わせているため、
   Canvas を混ぜるとバッキングストアの解像度計算が必要になり事故りやすい
   （探検演出と同じ方針）。zoom は transform を歪めないので 3D は問題なく使える。

   重ね順は 背景 → 松明 → 3D空間（魔法陣・光のリング・カード）→ フラッシュ → 粒子。
   段取りは play.js が .is-* クラスを順に付けて進める。尺の調整は play.js の STEP で行う。

   素材が届くまではベタ塗りの図形で代替している。差し替えるのは
   __bg / __circle / __ring / __face の background だけでよい。 */

.dm-gacha {
	position: relative;
	min-height: 100%;
	background: #0d0a18;

	/* 演出の中身は高さ 460px を前提に組んである。そのままだと結果が
	   ファーストビューから外れるため、--dm-gacha-scale で縮めて出す。
	   倍率を変えれば、ステージの高さも中身もまとめて追従する */
	--dm-gacha-stage-h: 460px;
	--dm-gacha-scale: .8;
}

.dm-gacha__stage {
	position: relative;
	width: 100%;
	height: calc(var(--dm-gacha-stage-h) * var(--dm-gacha-scale));
	overflow: hidden;
	cursor: pointer;
}

/* 中身はいったん原寸（460px）で組んでから縮める。
   scale はレイアウトの大きさを変えないので、幅は倍率ぶん広げておく */
.dm-gacha__scale {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% / var(--dm-gacha-scale));
	height: var(--dm-gacha-stage-h);
	transform: scale(var(--dm-gacha-scale));
	transform-origin: top left;
}

/* 「マモノを召喚した！」はステージに重ねる。下に置くと、出た瞬間に
   結果がその高さぶん押し下げられてしまう */
.dm-gacha__headline {
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	z-index: 2;
	margin-bottom: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}

/* 背景。素材（gacha/gacha_bg.png）を敷き、読めないときはグラデーションだけになる。
   素材は横長なので、縦長のステージには中央を切り出して入れる */
.dm-gacha__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 78%, #2b2050 0%, #0d0a18 72%);
}

.dm-gacha__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 主役はカードなので、背景は少し落として演出の発光を通す */
	opacity: .8;
}

/* 松明。左向き1枚の素材を右は scaleX(-1) で使う想定。
   ゆらぎは不等間隔のキーフレームで作り、左右で animation-delay をずらす */
.dm-gacha__torch {
	position: absolute;
	top: 92px;
	width: 26px;
	height: 44px;
	border-radius: 50% 50% 40% 40%;
	background: radial-gradient(ellipse at 50% 70%, #ffd98a 0%, #ff9a3c 45%, rgba(255, 90, 20, 0) 72%);
	opacity: 0;
}

.dm-gacha__torch--l { left: 24px; }
.dm-gacha__torch--r { right: 24px; transform: scaleX(-1); }

.is-torch .dm-gacha__torch {
	animation: dm-gacha-torch 1.7s ease-in-out infinite;
}

.is-torch .dm-gacha__torch--r {
	animation-delay: -.55s;
}

@keyframes dm-gacha-torch {
	0%   { opacity: .70; filter: brightness(.9);  box-shadow: 0 0 14px 2px rgba(255, 150, 60, .5); }
	18%  { opacity: 1;   filter: brightness(1.2); box-shadow: 0 0 26px 8px rgba(255, 170, 70, .7); }
	32%  { opacity: .82; filter: brightness(.95); box-shadow: 0 0 18px 4px rgba(255, 150, 60, .5); }
	54%  { opacity: 1;   filter: brightness(1.25); box-shadow: 0 0 30px 10px rgba(255, 180, 80, .75); }
	71%  { opacity: .88; filter: brightness(1);   box-shadow: 0 0 20px 5px rgba(255, 150, 60, .55); }
	100% { opacity: .70; filter: brightness(.9);  box-shadow: 0 0 14px 2px rgba(255, 150, 60, .5); }
}

/* 3D空間。ここに perspective を持たせ、中の要素を立体的に置く */
.dm-gacha__space {
	position: absolute;
	inset: 0;
	perspective: 1000px;
	perspective-origin: 50% 40%;
}

/* 魔法陣。rotateX で床に寝かせ、rotateZ でゆっくり回す。
   外周と内周を逆向きに回すと、平面の円でも回転しているように見える */
.dm-gacha__circle {
	position: absolute;
	left: 50%;
	bottom: 60px;
	border-radius: 50%;
	opacity: 0;
	transform: rotateX(70deg) rotateZ(0deg);
	transform-style: preserve-3d;
}

.dm-gacha__circle--outer {
	width: 260px;
	height: 260px;
	margin-left: -130px;
	border: 2px solid var(--dm-glow);
	box-shadow: 0 0 30px var(--dm-glow), inset 0 0 40px var(--dm-glow);
}

.dm-gacha__circle--inner {
	width: 170px;
	height: 170px;
	margin-left: -85px;
	bottom: 105px;
	border: 1px dashed var(--dm-glow);
	box-shadow: 0 0 18px var(--dm-glow);
}

.is-circle .dm-gacha__circle--outer {
	animation: dm-gacha-circle-in .8s ease-out forwards,
	           dm-gacha-spin-cw 9s linear .8s infinite;
}

.is-circle .dm-gacha__circle--inner {
	animation: dm-gacha-circle-in .8s ease-out .2s forwards,
	           dm-gacha-spin-ccw 6s linear 1s infinite;
}

@keyframes dm-gacha-circle-in {
	from { opacity: 0; transform: rotateX(70deg) rotateZ(0deg) scale(.9); }
	to   { opacity: 1; transform: rotateX(70deg) rotateZ(0deg) scale(1); }
}

/* パースを維持したまま回す（rotateX を毎フレーム書かないと寝かせた角度が戻る） */
@keyframes dm-gacha-spin-cw {
	from { opacity: 1; transform: rotateX(70deg) rotateZ(0deg); }
	to   { opacity: 1; transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes dm-gacha-spin-ccw {
	from { opacity: 1; transform: rotateX(70deg) rotateZ(360deg); }
	to   { opacity: 1; transform: rotateX(70deg) rotateZ(0deg); }
}

/* 立ち上る光のリング。魔法陣と同じ角度で寝かせた輪を、下から上へ動かしつつ
   回転・拡大させると、螺旋状に光が昇っていくように見える。
   5本を animation-delay でずらして途切れないようにする */
.dm-gacha__ring {
	position: absolute;
	left: 50%;
	bottom: 60px;
	width: 200px;
	height: 200px;
	margin-left: -100px;
	border: 2px solid var(--dm-glow);
	border-top-color: transparent;
	border-radius: 50%;
	box-shadow: 0 0 16px var(--dm-glow);
	opacity: 0;
	transform: rotateX(70deg) translateZ(0) scale(1);
}

.is-spiral .dm-gacha__ring {
	animation: dm-gacha-ring 1.9s ease-out infinite;
}

/* delay は animation ショートハンドより詳細度を高くしないと 0 に戻される。
   .dm-gacha__ring--2 だけだと .is-spiral .dm-gacha__ring に負ける */
.is-spiral .dm-gacha__ring--1 { animation-delay: 0s; }
.is-spiral .dm-gacha__ring--2 { animation-delay: .28s; }
.is-spiral .dm-gacha__ring--3 { animation-delay: .56s; }
.is-spiral .dm-gacha__ring--4 { animation-delay: .84s; }
.is-spiral .dm-gacha__ring--5 { animation-delay: 1.12s; }

/* SR / SSR はリングの回転量を増やして勢いを出す */
.dm-gacha--sr.is-spiral .dm-gacha__ring,
.dm-gacha--ssr.is-spiral .dm-gacha__ring {
	animation-name: dm-gacha-ring-fast;
}

@keyframes dm-gacha-ring {
	0%   { opacity: 0;  transform: rotateX(70deg) rotateZ(0deg)   translateY(0)      scale(1); }
	15%  { opacity: .9; }
	70%  { opacity: .7; }
	100% { opacity: 0;  transform: rotateX(70deg) rotateZ(220deg) translateY(-260px) scale(.45); }
}

@keyframes dm-gacha-ring-fast {
	0%   { opacity: 0;  transform: rotateX(70deg) rotateZ(0deg)   translateY(0)      scale(1); }
	15%  { opacity: 1; }
	70%  { opacity: .8; }
	100% { opacity: 0;  transform: rotateX(70deg) rotateZ(540deg) translateY(-280px) scale(.4); }
}

/* カードのラッパー。せり上がりと浮遊はここで、回転はカード本体で持つ。
   分けておくと、回転が止まったあとも浮遊だけ続けられる。
   ここは opacity を扱うので 3D は持たせない（下の cardfloat を参照） */
.dm-gacha__cardwrap {
	position: absolute;
	left: 50%;
	bottom: 118px;
	width: 168px;
	height: 240px;
	margin-left: -84px;
	opacity: 0;
	transform: translateY(70px);
}

/* ★ perspective はカードの直近の親に置くこと。
   opacity が 1 未満の要素は「グルーピング」扱いになり、その内側の
   transform-style: preserve-3d が flat に潰される（CSS の仕様）。
   cardwrap は 0→1 のフェードインを持つため、そこに 3D を任せると
   カードは回らず横に潰れるだけになる。
   この要素は opacity も transform も持たせない。 */
.dm-gacha__cardfloat {
	position: absolute;
	inset: 0;
	perspective: 900px;
}

.is-card .dm-gacha__cardwrap {
	animation: dm-gacha-card-in .9s ease-out forwards,
	           dm-gacha-card-float 3s ease-in-out .9s infinite;
}

@keyframes dm-gacha-card-in {
	from { opacity: 0; transform: translateY(70px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes dm-gacha-card-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

/* 後光。カードの外側に置いてあるので、カードが回っても崩れない */
.dm-gacha__halo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 300px;
	margin: -150px 0 0 -150px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--dm-glow) 0%, rgba(255, 255, 255, 0) 62%);
	opacity: 0;
	filter: blur(6px);
}

.is-card .dm-gacha__halo {
	animation: dm-gacha-halo 1.2s ease-out .4s forwards,
	           dm-gacha-halo-idle 2.8s ease-in-out 1.6s infinite;
}

@keyframes dm-gacha-halo {
	from { opacity: 0;   transform: scale(.7); }
	to   { opacity: .55; transform: scale(1); }
}

@keyframes dm-gacha-halo-idle {
	0%, 100% { opacity: .45; }
	50%      { opacity: .65; }
}

/* カード本体。裏表の2面を持たせ、Y軸で数回まわしてから正面で止める。
   止まる角度は 1260deg（3周半）で、表面が正面を向く */
.dm-gacha__card {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
}

.is-spin .dm-gacha__card {
	animation: dm-gacha-card-spin 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
}

/* SSR は1周多く回す */
.dm-gacha--ssr.is-spin .dm-gacha__card {
	animation-name: dm-gacha-card-spin-ssr;
	animation-duration: 1.9s;
}

/* スキップしたときは回さず表を向けて止める。
   SSR 用の指定（.dm-gacha--ssr.is-spin）と詳細度を揃えて後ろに置くこと。
   .is-reveal だけだと詳細度で負けて、SSR のときスキップしても回り続ける */
.dm-gacha.is-reveal .dm-gacha__card {
	animation: none;
	transform: rotateY(180deg);
}

@keyframes dm-gacha-card-spin {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(1260deg); }
}

@keyframes dm-gacha-card-spin-ssr {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(1980deg); }
}

/* 裏面は正面、表面は裏返しに置く。backface-visibility で
   回転の途中に「裏 → 表」が自然に入れ替わる */
/* overflow / opacity / filter を付けないこと。付けると grouping 扱いになり、
   backface-visibility が効かず裏表の入れ替わりが壊れる */
.dm-gacha__face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* 裏面の素材（320x460）が来たら background-image に差し替える */
.dm-gacha__face--back {
	background: linear-gradient(160deg, #3a2a63 0%, #221a3c 100%);
	border: 2px solid var(--dm-glow);
	box-shadow: 0 0 20px var(--dm-glow);
	font-size: 56px;
	color: var(--dm-glow);
	transform: rotateY(0deg);
}

.dm-gacha__face--front {
	background: linear-gradient(160deg, #2a2050 0%, #171029 100%);
	border: 2px solid var(--dm-glow);
	box-shadow: 0 0 24px var(--dm-glow);
	transform: rotateY(180deg);
}

.dm-gacha__face--front .dm-thumb {
	width: 100%;
	height: 100%;
	border: 0;
}

/* フラッシュ。中央の白い円が急に膨らんで消える。素材不要 */
.dm-gacha__flash {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 220px;
	height: 220px;
	margin: -110px 0 0 -110px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, var(--dm-glow) 45%, rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	pointer-events: none;
}

.is-flash .dm-gacha__flash {
	animation: dm-gacha-flash .7s ease-out forwards;
}

/* SSR は光を長めに残す */
.dm-gacha--ssr.is-flash .dm-gacha__flash {
	animation-duration: 1.1s;
}

@keyframes dm-gacha-flash {
	0%   { opacity: 0; transform: scale(.2); }
	22%  { opacity: 1; transform: scale(1.6); }
	100% { opacity: 0; transform: scale(4); }
}

/* 粒子。素材不要 */
.dm-gacha__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dm-gacha__particle {
	position: absolute;
	bottom: 80px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dm-glow);
	box-shadow: 0 0 8px var(--dm-glow);
	opacity: 0;
}

.dm-gacha__particle--1 { left: 32%; }
.dm-gacha__particle--2 { left: 40%; }
.dm-gacha__particle--3 { left: 46%; }
.dm-gacha__particle--4 { left: 52%; }
.dm-gacha__particle--5 { left: 58%; }
.dm-gacha__particle--6 { left: 64%; }
.dm-gacha__particle--7 { left: 36%; }
.dm-gacha__particle--8 { left: 68%; }

.is-spiral .dm-gacha__particle {
	animation: dm-gacha-particle 2s ease-out infinite;
}

/* リングと同じ理由で、delay はショートハンドより後・高い詳細度で当てる */
.is-spiral .dm-gacha__particle--2 { animation-delay: -.3s; }
.is-spiral .dm-gacha__particle--3 { animation-delay: -.6s; }
.is-spiral .dm-gacha__particle--4 { animation-delay: -.9s; }
.is-spiral .dm-gacha__particle--5 { animation-delay: -1.2s; }
.is-spiral .dm-gacha__particle--6 { animation-delay: -1.5s; }
.is-spiral .dm-gacha__particle--7 { animation-delay: -.45s; }
.is-spiral .dm-gacha__particle--8 { animation-delay: -1.05s; }

/* SSR だけ粒子を大きくして数が多く見えるようにする */
.dm-gacha--ssr .dm-gacha__particle {
	width: 6px;
	height: 6px;
}

@keyframes dm-gacha-particle {
	0%   { opacity: 0; transform: translateY(0); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-200px); }
}

.dm-gacha__skip {
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: var(--dm-text-sub);
	font-size: 10px;
	opacity: .7;
}

.is-done .dm-gacha__skip,
.is-skippable-off .dm-gacha__skip {
	display: none;
}

/* ---- 結果 ---- */

.dm-gacha__result {
	padding: 10px 12px 20px;
}

/* hidden 属性は display:flex などを指定した要素では効かないので、
   演出画面では明示的に打ち消す（探検演出と同じ対処） */
.dm-gacha [hidden] {
	display: none !important;
}

.dm-gacha__rarity {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}

.dm-gacha__rarity--n   { background: #6b6b7d; }
.dm-gacha__rarity--r   { background: #3f6fd0; }
.dm-gacha__rarity--sr  { background: var(--dm-accent); color: #241c00; }
.dm-gacha__rarity--ssr {
	background: linear-gradient(135deg, #f7d774 0%, #e0a020 100%);
	color: #241c00;
}

.dm-gacha__mname {
	margin: 6px 0 4px;
	font-size: 17px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-gacha__flavor {
	margin: 0 0 4px;
	color: var(--dm-text-sub);
	font-size: 11px;
	line-height: 1.5;
}

/* ============================================================
   4_1_x：ダンジョン開発 / 4_2_1：部屋改修
   ============================================================ */

/* ---- 4_1_1：所持ダンジョン一覧 ---- */

.dm-dungeons {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.dm-dungeons__item {
	margin-bottom: 8px;
}

.dm-dungeon {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 34px 8px 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	color: var(--dm-text);
	text-decoration: none;
}

.dm-dungeon__body {
	flex: 1;
	min-width: 0;
}

.dm-dungeon__name {
	display: block;
	font-weight: bold;
	color: var(--dm-accent-strong);
	margin-bottom: 2px;
}

.dm-dungeon__line {
	display: block;
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* 「改装中」＝公開状態でないとき */
.dm-dungeon__badge {
	position: absolute;
	top: 4px;
	right: 34px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--dm-danger);
	color: #fff;
	font-size: 10px;
}

/* 複数所持になったときの選択マーク。モック版は1個なので常に選択状態 */
.dm-dungeon__radio {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid var(--dm-text-sub);
	border-radius: 50%;
}

.dm-dungeon.is-selected .dm-dungeon__radio {
	border-color: var(--dm-accent-strong);
	background: var(--dm-accent-strong);
	box-shadow: inset 0 0 0 3px var(--dm-bg-panel);
}

/* ---- 4_1_2：入口・通路とダンジョン名 ---- */

.dm-gates {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.dm-gates__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.dm-gates__label {
	flex: 0 0 auto;
	width: 36px;
	font-size: 12px;
	color: var(--dm-text-sub);
}

.dm-gates__visual {
	flex: 0 0 auto;
}

/*
 * モック版では選べないのでグレイアウトのまま右端に置く。
 * .dm-btn は width:100% を持っており、flex アイテムでも基準幅として効いて
 * 親からはみ出すため、ここで width を戻す。下マージンも行内では邪魔になる。
 */
.dm-gates__btn {
	flex: 0 0 auto;
	width: auto;
	min-width: 84px;
	margin-left: auto;
	margin-bottom: 0;
	padding: 10px 14px;
}

.dm-gate {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
}

.dm-gate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-gate--sm { width: 60px;  height: 60px;  }
.dm-gate--md { width: 84px;  height: 84px;  }
.dm-gate--lg { width: 100%;  height: 150px; }

/* 入口の素材は未支給。届くまではこの文字で代替する */
.dm-gate__fallback {
	display: none;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-gate.is-noimage .dm-gate__fallback {
	display: block;
}

.dm-namefield {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 4px;
}

.dm-namefield__input {
	flex: 0 1 180px;
}

.dm-namefield__suffix {
	flex: 0 0 auto;
	font-size: 13px;
}

/* ---- 4_1_3：ダンジョン誕生 ---- */

.dm-hero {
	margin-bottom: 10px;
}

/* まだ作っていない部屋の枠。「部屋を作る」で3部屋まとめてできる */
.dm-floors {
	list-style: none;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 0 12px;
	padding: 0;
}

.dm-floors__item {
	flex: 1 1 0;
	text-align: center;
}

.dm-floors__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-floor--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed var(--dm-border);
	border-radius: 6px;
	color: var(--dm-text-sub);
	font-size: 22px;
}

/* ---- 4_1_4 / 4_2_1：階層リスト ---- */

.dm-floorlist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.dm-floorlist__item {
	margin-bottom: 8px;
}

.dm-floorrow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 30px 6px 6px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	cursor: pointer;
}

.dm-floorrow__label {
	flex: 0 0 auto;
	width: 46px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-floorrow__cell {
	flex: 0 0 auto;
}

/* 4_3_2 は結果を見せるだけなのでラジオぶんの余白と指カーソルを外す */
.dm-floorrow--static {
	padding-right: 6px;
	cursor: default;
}

.dm-floorrow__radio {
	position: absolute;
	top: 50%;
	right: 8px;
	margin: 0;
	transform: translateY(-50%);
}

/* 4_2_1 のヘッダーに出すダンジョン情報 */
.dm-spec--compact .dm-spec__row {
	padding: 1px 0;
	font-size: 12px;
}

/* 行の右端に置く小さなボタン（4_2_1 のダンジョン名「変更」。資料外） */
.dm-spec__row--action {
	align-items: center;
}

.dm-spec__action {
	flex-shrink: 0;
	padding: 2px 10px;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: linear-gradient(180deg, #5a4d94 0%, #3d3167 100%);
	color: var(--dm-text);
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

/* ============================================================
   3_5_x：進化
   ============================================================ */

/* ---- 3_5_1：進化可能一覧 ---- */

.dm-evolves {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.dm-evolves__item {
	margin-bottom: 8px;
}

.dm-evolve {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	color: var(--dm-text);
	text-decoration: none;
}

/* 探検デッキ・ダンジョンで使用中の個体は選べない */
.dm-evolve.is-disabled {
	opacity: 0.5;
}

.dm-evolve__visual {
	flex: 0 0 auto;
}

.dm-evolve__arrow {
	flex: 0 0 auto;
	color: var(--dm-accent-strong);
	font-size: 12px;
}

.dm-evolve__body {
	flex: 1;
	min-width: 0;
	margin-left: 2px;
}

.dm-evolve__name {
	display: block;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-evolve__line {
	display: block;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-evolve__badge {
	position: absolute;
	top: 4px;
	right: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--dm-border);
	color: var(--dm-text-sub);
	font-size: 10px;
}

/* ---- 3_5_2 / 3_5_3：進化前後 ---- */

.dm-evolve-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

.dm-evolve-preview__side {
	flex: 0 1 auto;
	text-align: center;
}

.dm-evolve-preview__arrow {
	flex: 0 0 auto;
	color: var(--dm-accent-strong);
	font-size: 18px;
}

.dm-evolve-preview__name {
	margin-top: 4px;
	font-weight: bold;
	font-size: 12px;
}

.dm-evolve-preview__name--after {
	color: var(--dm-accent-strong);
}

.dm-evolve-preview__line {
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* ------------------------------------------------------------------
   2_1_2：ダンジョン詳細
   ------------------------------------------------------------------ */

/* 上に出していた魔王の情報は 2026-09-17 の指示で落としたので .dm-owner も消した */

.dm-defenders {
	display: flex;
	gap: 6px;
	justify-content: center;
}

.dm-defenders__slot {
	flex: none;
}

/* ------------------------------------------------------------------
   6_1_1：バトル記録室
   ------------------------------------------------------------------ */

.dm-tabs {
	display: flex;
	gap: 2px;
	margin: 8px 0 0;
}

.dm-tabs__item {
	flex: 1 1 0;
	padding: 8px 4px;
	text-align: center;
	font-size: 13px;
	color: var(--dm-text-sub);
	text-decoration: none;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
}

.dm-tabs__item.is-active {
	color: var(--dm-accent-strong);
	font-weight: bold;
	background: var(--dm-bg-panel-head);
	border-color: var(--dm-accent);
}

.dm-tabs__summary {
	margin: 0 0 8px;
	padding: 6px 8px;
	text-align: center;
	font-size: 12px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-top: none;
}

.dm-records {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dm-record {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	color: inherit;
	text-decoration: none;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
}

.dm-record__body {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.dm-record__name {
	display: block;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dm-record__date {
	display: block;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-record__result {
	display: block;
	font-size: 12px;
	font-weight: bold;
}

.dm-record__result--win {
	color: var(--dm-win);
}

.dm-record__result--lose {
	color: var(--dm-danger);
}

/* ---------- ガイドモーダル（６_７） ---------- */

/* ナビ役悪魔レイラのモーダル。×は無く「OK」を押すまで閉じない。
   html に zoom が掛かっているため、fixed の 100% は表示中の画面幅・高さに一致する。
   ゲームフッター（sticky）より前面に出す必要があるので z-index は 10 より大きく取る。 */
.dm-guidemodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(8, 5, 18, 0.78);
	overflow-y: auto;
	z-index: 1000;
}

/* display:flex に負けないよう、非表示は !important で押し切る。
   連続モーダルの2枚目用ボタン（.dm-btn も display:flex）にも効かせる必要がある */
.dm-guidemodal[hidden],
.dm-guidemodal [hidden] {
	display: none !important;
}

.dm-guidemodal__panel {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin-top: 92px;
	padding: 32px 16px 16px;
	background: var(--dm-bg-panel);
	border: 2px solid var(--dm-accent);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* レイラの立ち絵はパネルの上辺にまたがせる。
   素材が透過PNGなので、切り抜かずそのまま重ねる（丸く抜くと角と髪が切れる） */
.dm-guidemodal__avatar {
	position: absolute;
	top: -88px;
	left: 50%;
	transform: translateX(-50%);
	width: 112px;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dm-guidemodal__avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 素材が読めないときだけ、文字を入れる丸い枠に切り替える */
.dm-guidemodal__avatar.is-noimage {
	top: -36px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dm-bg-panel-head);
	border: 2px solid var(--dm-accent);
}

.dm-guidemodal__fallback {
	display: none;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-guidemodal__avatar.is-noimage .dm-guidemodal__fallback {
	display: block;
}

.dm-guidemodal__text {
	display: none;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.7;
}

.dm-guidemodal__text.is-active {
	display: block;
}

.dm-guidemodal__actions {
	display: flex;
	justify-content: center;
}

.dm-guidemodal__actions .dm-btn {
	max-width: 140px;
}