@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;
	/* 種族のテーマカラー（2026-10-23「魔王ダンジョン攻防記 本番仕様書」種族ごとのテーマカラー。12種族） */
	--dm-humanoid: #3f7fe0; /* 亜人＝青 */
	--dm-beast: #d9443b; /* 魔獣＝赤 */
	--dm-fairy: #f08bc4; /* 妖精＝ピンク */
	--dm-flying: #e8c53a; /* 飛行＝黄 */
	--dm-insect: #ef8a2e; /* 昆虫＝オレンジ */
	--dm-plant: #4caf50; /* 植物＝緑 */
	--dm-celestial: #f2f2f2; /* 天界＝白 */
	--dm-demon: #8c8c8c; /* 魔界＝灰 */
	--dm-cursed: #111111; /* 呪具＝黒 */
	--dm-aquatic: #4fc3e8; /* 水棲＝水色 */
	--dm-dragon: #8d5a32; /* 竜鱗＝茶 */
	--dm-giant: #8e5ad1; /* 巨魁＝紫 */
}

/* 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 {
	position: relative;
	/* ヘッダーの説明（.dm-headpop）が本文の上に出るよう、ヘッダーごと本文より上に重ねる（2026-10-26。大広間の「所持マモノ」の札より下に隠れていた）。
	   メニューの窓（.dm-menu）はこれより上 */
	z-index: 30;
	background: linear-gradient(180deg, #2e2352 0%, #221a3c 100%);
	border-bottom: 2px solid var(--dm-accent);
	padding: 8px 10px;
}

/* ハンバーガーメニューのボタン（2026-10-26）。ヘッダー画像の右上に重ねる */
.dm-hamburger {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 30px;
	padding: 6px 7px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: rgba(20, 12, 36, 0.75);
	border: 1px solid var(--dm-accent);
	border-radius: 6px;
	cursor: pointer;
	z-index: 5;
}

.dm-hamburger__bar {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: var(--dm-accent-strong);
}

/* お知らせ・プレゼントに未読・未受け取りがあるとき */
.dm-hamburger__dot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e2443f;
	border: 1px solid #fff;
}

/* ハンバーガーメニューの窓（本番仕様書「マイページ」の10項目） */
.dm-menu__panel {
	max-width: 320px;
}

.dm-menu__grid {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

.dm-menu__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	background: linear-gradient(180deg, #3a2f5e 0%, #2a2247 100%);
	color: var(--dm-text);
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.dm-menu__card.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

.dm-menu__card .dm-badge {
	position: absolute;
	top: -5px;
	right: -3px;
	padding: 0 5px;
	font-size: 10px;
}

/* ヘッダーを押すとマイページへ（2026-10-26）。ヘッダー全体を覆うリンク。メニューボタン（z 5）・残高の枠（z 4）はこの上 */
.dm-header__home {
	position: absolute;
	/* 古い iOS Safari は inset を使えないので4辺で書く */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* VIPパス加入中のヘッダー（2026-10-26）。nadv は専用画像に差し替えて残高の枠をオレンジにする。
   dmtr は VIP 用の画像がまだ無いので、縁と残高の枠をオレンジに光らせ、左上に「VIP 捕獲率+n」の札を出す */
.dm-header--vip {
	box-shadow: inset 0 -2px 0 #ffa500, 0 0 10px rgba(255, 165, 0, 0.45);
}

.dm-header--vip .dm-headstat {
	border-color: #ffa500;
	box-shadow: 0 0 6px rgba(255, 165, 0, 0.5);
}

.dm-header__vip {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border: 1px solid #ffa500;
	border-radius: 10px;
	background: linear-gradient(180deg, #ffcf5a 0%, #e08a00 100%);
	color: #2a1400;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	pointer-events: none;
}

.dm-header__vipnote {
	font-size: 9px;
}

/* ヘッダーのスター・デモーネ・スタミナ（2026-10-26。nadv の header-stats と同じく下の中央に3つ並べる） */
.dm-headstats {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.dm-headstat {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 3px;
	height: 18px;
	margin: 0;
	padding: 0 7px;
	border: 1px solid var(--dm-accent);
	border-radius: 10px;
	background: rgba(15, 10, 28, 0.85);
	box-shadow: 0 0 6px rgba(201, 162, 39, 0.35);
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.dm-headstat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	font-size: 8px;
	color: #241300;
	background: radial-gradient(circle at 35% 35%, #f8dc7a 0%, #c9a227 100%);
}

.dm-headstat__icon--star {
	background: none;
	color: var(--dm-accent-strong);
	font-size: 11px;
}

/* スタミナは最大5のメーター（本番仕様書「ヘッダー」） */
.dm-headstat__pips {
	display: inline-flex;
	gap: 2px;
}

.dm-headstat__pip {
	width: 6px;
	height: 8px;
	border-radius: 2px;
	background: #3a3150;
}

.dm-headstat__pip.is-on {
	background: linear-gradient(180deg, #8fe3b8 0%, var(--dm-win) 100%);
}

/* 押したときの説明（nadv の header-popup） */
.dm-headpop {
	pointer-events: auto;
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	padding: 6px 10px;
	border: 1px solid var(--dm-accent);
	border-radius: 6px;
	background: rgba(15, 10, 28, 0.95);
	color: var(--dm-text);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
}

/* 素材（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--fairy.is-noimage .dm-cat__label { color: var(--dm-fairy); }
.dm-cat--flying.is-noimage .dm-cat__label { color: var(--dm-flying); }
.dm-cat--celestial.is-noimage .dm-cat__label { color: var(--dm-celestial); }
.dm-cat--demon.is-noimage .dm-cat__label { color: var(--dm-demon); }
.dm-cat--cursed.is-noimage .dm-cat__label { color: var(--dm-cursed); }
.dm-cat--aquatic.is-noimage .dm-cat__label { color: var(--dm-aquatic); }
.dm-cat--dragon.is-noimage .dm-cat__label { color: var(--dm-dragon); }
.dm-cat--giant.is-noimage .dm-cat__label { color: var(--dm-giant); }
.dm-cat--plant.is-noimage    .dm-cat__label { color: var(--dm-plant); }
.dm-cat--beast.is-noimage    .dm-cat__label { color: var(--dm-beast); }

/* 誘因＝カテゴリアイコン＋ポイント数。
   親（.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--beast { border-color: var(--dm-beast); }
.dm-thumb--fairy { border-color: var(--dm-fairy); }
.dm-thumb--flying { border-color: var(--dm-flying); }
.dm-thumb--insect { border-color: var(--dm-insect); }
.dm-thumb--plant { border-color: var(--dm-plant); }
.dm-thumb--celestial { border-color: var(--dm-celestial); }
.dm-thumb--demon { border-color: var(--dm-demon); }
.dm-thumb--cursed { border-color: var(--dm-cursed); }
.dm-thumb--aquatic { border-color: var(--dm-aquatic); }
.dm-thumb--dragon { border-color: var(--dm-dragon); }
.dm-thumb--giant { border-color: var(--dm-giant); }
/* 黒（呪具）は暗い背景に沈むので、外側に細い明るい線を足す */
.dm-thumb--cursed { box-shadow: 0 0 0 1px #6a6a6a; }

/* ★（限界突破の数）。2026-10-14 にレアリティの文字バッジから置き換えた。
   サムネイルの幅に比例させたいので、枠をサイズのコンテナにして cqw で大きさを決める
   （cqw が効かない端末は px のまま） */
.dm-thumb {
	container-type: inline-size;
}

.dm-thumb__stars {
	position: absolute;
	left: 3%;
	top: 2%;
	font-size: 9px;
	font-size: 14cqw;
	line-height: 1;
	letter-spacing: -.08em;
	color: #ffd23a;
	text-shadow: 0 0 2px #000, 0 0 2px #000;
	white-space: nowrap;
	pointer-events: none;
}

.dm-thumb__stars i,
.dm-explore__stars i {
	font-style: normal;
}

/* 種族マーク（白地に載せる）。位置は .dm-thumb--framed で枠の右下の丸に合わせる */
.dm-thumb .dm-thumb__category {
	position: absolute;
	left: 84.2%;
	top: 3.8%;
	width: 10%;
	height: 10%;
	object-fit: contain;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	pointer-events: none;
}

/* 本体だけ（図鑑詳細。2026-11-05）：枠も地の色も付けず、全身をそのまま収める */
.dm-thumb--body {
	border: none;
	border-radius: 0;
	background: transparent;
}

.dm-thumb--body img {
	object-fit: contain;
}

/* アイコン（sm / md / lg）：2026-11-05 から種族の枠・背景が焼き込まれた支給画像。CSS の枠と地の色は消し、
   枠の左下の楕円に★、右下の丸に種族マークを入れる。
   支給画像は 2048px の真ん中に枠（約1220px 四方。x 464〜1684 / y 296〜1516）があり、まわりは透明な余白なので、
   画像は加工せず CSS で枠の部分だけを見せる（幅 2048/1220＝167.9%、左 -464/1220＝-38.0%、上 -296/1220＝-24.3%）。
   ★・種族マークの位置は枠の正方形に対する値：楕円の内側 x 7〜43% / y 78.5〜91%、丸の内側 x 75〜93% / y 75.5〜93% */
.dm-thumb--framed {
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.dm-thumb--framed > img:not(.dm-thumb__category) {
	position: absolute;
	left: -38%;
	top: -24.3%;
	width: 167.9%;
	height: 167.9%;
	max-width: none;
	object-fit: fill;
}

.dm-thumb--framed .dm-thumb__stars {
	left: 7%;
	top: 78.5%;
	width: 36%;
	height: 12.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7cqw;
	letter-spacing: 0;
}

.dm-thumb--framed .dm-thumb__category {
	left: 76.5%;
	top: 77%;
	width: 15%;
	height: 15%;
	padding: 1.5%;
	box-sizing: border-box;
}

/* アイコンが無くて本体画像に切り替わったとき（dmImgRetry が is-fallback を付ける）は、それまでの出し方に戻す */
.dm-thumb--framed.is-fallback {
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: #2b2148;
}

.dm-thumb--framed.is-fallback > img:not(.dm-thumb__category) {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-thumb--framed.is-fallback .dm-thumb__category {
	display: none;
}

.dm-thumb--framed.is-fallback .dm-thumb__stars {
	left: 3%;
	top: 2%;
	width: auto;
	height: auto;
	display: block;
	font-size: 14cqw;
	letter-spacing: -.08em;
}

.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: #ffffff; }
.dm-badge--beast { background: var(--dm-beast); color: #ffffff; }
.dm-badge--fairy { background: var(--dm-fairy); color: #2a0f1e; }
.dm-badge--flying { background: var(--dm-flying); color: #2a2100; }
.dm-badge--insect { background: var(--dm-insect); color: #2a1400; }
.dm-badge--plant { background: var(--dm-plant); color: #0b230c; }
.dm-badge--celestial { background: var(--dm-celestial); color: #222222; }
.dm-badge--demon { background: var(--dm-demon); color: #111111; }
.dm-badge--cursed { background: var(--dm-cursed); color: #ffffff; }
.dm-badge--aquatic { background: var(--dm-aquatic); color: #062430; }
.dm-badge--dragon { background: var(--dm-dragon); color: #ffffff; }
.dm-badge--giant { background: var(--dm-giant); color: #ffffff; }
.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__note {
	margin-top: 6px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.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;
}

/* 4_2_3 の「全部外す」（モック版だけの措置）。選択を空にするリンクなので a / span で出す */
.dm-filter__submit--danger {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(180deg, #b0485c 0%, #7a2c3b 100%);
	text-decoration: none;
}

.dm-filter__submit.is-disabled {
	opacity: 0.4;
	cursor: default;
}

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

.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;
}

/* 6_1_2：バトル再生 URL とコピー（画面仕様 20260925 p24）。URL 欄を伸ばし、コピーは文字幅だけ取る */
.dm-share {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 4px;
}

.dm-share .dm-share__url {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
	font-size: 11px;
}

.dm-share .dm-share__copy {
	flex: 0 0 auto;
	width: auto;
	min-width: 72px;
	min-height: 0;
	padding: 6px 12px;
	margin-bottom: 0;
}

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

.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;
}

/* マモノ付与の欄の見出し（2026-10-26） */
.dm-debug-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

.dm-debug-field .dm-filter__select,
.dm-debug-field .dm-input {
	width: 100%;
	box-sizing: border-box;
}

/* マモノ付与の「公開前も含む」（2026-11-05） */
.dm-debug-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--dm-text-sub);
}

/* アイテム付与のプルダウン（2026-10-26）。ワンタップのボタンはフォームの中に直接並べる */
.dm-debug-itemselect {
	display: block;
	width: 100%;
	margin-bottom: 8px;
}

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

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

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

/* 旧 HOME のお知らせ帯（2026-10-27 にマーキーへ置き換え）。
   後から書いたこちらが上の .dm-notice を上書きしていて、他の画面のメッセージもこの見た目なので残す */
.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);
}

/* マーキー（本番仕様書「マーキー」。2026-10-27）。レイラの顔と、右から左へ流れる1行 */
.dm-marquee {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.85);
	border-bottom: 1px solid var(--dm-border);
}

.dm-marquee__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--dm-bg-panel, #2a1f3d);
}

.dm-marquee__view {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

.dm-marquee__text {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.65em;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--dm-text);
	will-change: transform;
}

/* ---------- 大広間（画面仕様書 p.31「修正マイページ」。2026-10-26） ----------
   集めたマモノを15か所の置き場所に立たせる。手前から 1列目5体・2列目4体・3列目6体。
   奥ほど小さく、手前のマモノが奥のマモノに重なる（z-index は列ごと）。
   置き場所の番号は奥から 1〜6（3列目）・7〜10（2列目）・11〜15（1列目）。
   位置と大きさはここで持つので、並びの調整は CSS だけで済む。
   背景（城の大広間）は HomeController::HALL_BACKGROUND の画像を inline の background-image で重ねる。
   下のグラデーションは画像が空のとき・読み込み中の下地 */
.dm-hall {
	position: relative;
	/* iOS Safari は aspect-ratio を使えないので、高さは padding-top で幅に合わせる。
	   支給された背景（2528×1426、横16：縦9）に合わせる（2026-10-28。それまでは 80%） */
	padding-top: 56.41%;
	overflow: hidden;
	background-color: #1b1226;
	background-image:
		radial-gradient(ellipse at 50% 30%, rgba(201, 162, 39, 0.18) 0%, rgba(201, 162, 39, 0) 55%),
		linear-gradient(180deg, #2a1d3d 0%, #231733 45%, #3a2a2a 46%, #2a1e1e 100%);
	background-size: cover;
	background-position: center bottom;
}

.dm-hall__count {
	/* 画面仕様の絵どおり上の中央（2026-10-26 ユーザー指示。それまでは左上） */
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 10;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.6);
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-text);
}

.dm-hall__slot {
	position: absolute;
	transform: translateX(-50%);
	/* タップで全身のモーダルを出すボタン（2026-11-06）。ボタンの見た目は消す */
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* 大広間のマモノの全身モーダル（画面仕様書 p.30。2026-11-06） */
.dm-hallmodal {
	text-align: center;
}

.dm-hallmodal__figure {
	width: 72%;
	margin: 0 auto 8px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.dm-hallmodal__figure img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.dm-hallmodal__name {
	font-size: 15px;
	font-weight: bold;
}

.dm-hallmodal__stars {
	color: var(--dm-accent);
	font-size: 14px;
	line-height: 1.4;
}

.dm-hallmodal__spec {
	font-size: 13px;
	line-height: 1.6;
}

.dm-hallmodal__actions {
	margin-top: 12px;
}

.dm-hall__figure {
	display: block;
}

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

/* 全身の素材が届くまでは、顔アイコンを四角い枠で立たせる（画面仕様の絵と同じ。2026-10-26 までは丸く切り抜いていた）。
   画像が読めなくても枠の大きさが崩れず、名前（alt）がはみ出さないよう、枠の側で正方形を作る */
.dm-hall__figure.is-icon {
	position: relative;
	padding-top: 100%;
	border: 2px solid #6b5a9e;
	border-radius: 6px;
	overflow: hidden;
	background: #2a2247;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

/* 枠付きアイコン（2026-11-06 ユーザー指示。それまでは全身）。切り出し方は .dm-thumb--framed と同じ値。
   アイコンが無くて本体画像に切り替わったとき（is-fallback）は、正方形に全身を足元そろえで収める */
.dm-hall__figure.is-framed {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
	container-type: inline-size;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.dm-hall__figure.is-framed .dm-hall__icon {
	position: absolute;
	left: -38%;
	top: -24.3%;
	width: 167.9%;
	height: 167.9%;
	max-width: none;
	object-fit: fill;
	font-size: 0;
	color: transparent;
}

.dm-hall__figure.is-framed.is-fallback .dm-hall__icon {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* ★（枠の左下の楕円）と種族マーク（右下の丸）。位置は .dm-thumb--framed と同じ値（2026-11-06 ユーザー指示） */
.dm-hall__stars {
	position: absolute;
	left: 7%;
	top: 78.5%;
	width: 36%;
	height: 12.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7cqw;
	line-height: 1;
	color: #ffd23a;
	text-shadow: 0 0 2px #000;
	white-space: nowrap;
	pointer-events: none;
}

.dm-hall__stars i {
	font-style: normal;
}

/* .dm-hall__figure img（幅100%）より強くするため親から指定する */
.dm-hall__figure .dm-hall__category {
	position: absolute;
	display: block;
	left: 76.5%;
	top: 77%;
	width: 15%;
	height: 15%;
	padding: 1.5%;
	box-sizing: border-box;
	object-fit: contain;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	pointer-events: none;
}

/* 本体画像に切り替わったときは枠が無いので、種族マークは出さず★を左上に */
.dm-hall__figure.is-fallback .dm-hall__category {
	display: none;
}

.dm-hall__figure.is-fallback .dm-hall__stars {
	left: 3%;
	top: 2%;
	width: auto;
	height: auto;
	display: block;
	font-size: 14cqw;
	letter-spacing: -.08em;
}

.dm-hall__figure.is-icon img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 0;
	color: transparent;
}

/* 2026-10-28 ユーザー指示で3列・15か所に（それまでは4列・20か所、2〜4列目は扇状）。列はまっすぐ並べ、前後の列は互い違いにする。
   bottom・高さは広間の高さに対する %。枠は正方形なので、高さ＝幅 ÷ 0.5641（広間の縦横比）。
   2列目は下半分が1列目に隠れる：1列目の上端 32.9% − 2列目の高さ 30.1% の半分 ＝ bottom 17.9%（上端 48.0%）。
   3列目は下 2/3 が2列目に隠れる：2列目の上端 48.0% − 3列目の高さ 23.0% の 2/3 ＝ bottom 32.7% */
/* 3列目（いちばん奥）：6体 */
.dm-hall__slot--1, .dm-hall__slot--2, .dm-hall__slot--3,
.dm-hall__slot--4, .dm-hall__slot--5, .dm-hall__slot--6 { bottom: 32.7%; width: 13%; z-index: 1; }
.dm-hall__slot--1 { left: 10%; }
.dm-hall__slot--2 { left: 26%; }
.dm-hall__slot--3 { left: 42%; }
.dm-hall__slot--4 { left: 58%; }
.dm-hall__slot--5 { left: 74%; }
.dm-hall__slot--6 { left: 90%; }

/* 2列目：4体（1列目のすき間の上に来るよう、1列目と互い違い） */
.dm-hall__slot--7, .dm-hall__slot--8,
.dm-hall__slot--9, .dm-hall__slot--10 { bottom: 17.9%; width: 17%; z-index: 2; }
.dm-hall__slot--7  { left: 15%; }
.dm-hall__slot--8  { left: 38.3%; }
.dm-hall__slot--9  { left: 61.7%; }
.dm-hall__slot--10 { left: 85%; }

/* 1列目（いちばん手前）：5体 */
.dm-hall__slot--11, .dm-hall__slot--12, .dm-hall__slot--13,
.dm-hall__slot--14, .dm-hall__slot--15 { bottom: 1%; width: 18%; z-index: 3; }
.dm-hall__slot--11 { left: 11%; }
.dm-hall__slot--12 { left: 30.5%; }
.dm-hall__slot--13 { left: 50%; }
.dm-hall__slot--14 { left: 69.5%; }
.dm-hall__slot--15 { left: 89%; }

/* 画面仕様書 p.31 の小ボタン（お知らせ／BOX／ミッション／アイテム／交換所）と、
   ハンバーガーメニューができるまで仮に置く VIPパス・ショップ・ログボ・ヘルプ（--sub） */
.dm-homebtns {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* お知らせ・プレゼントBOX・ミッション・アイテム・スター交換所・ショップ（2026-10-26 ショップを足して6つ） */
	gap: 4px;
}

.dm-homebtns--sub {
	grid-template-columns: repeat(3, 1fr);
	margin-top: 4px;
}

.dm-homebtns__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-homebtns__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;
}

/* 探検デッキの空き枠（2026-10-26 デッキ複数化で5体そろっていないデッキが出た）。
   .dm-thumb--empty の 72px を、並んでいるサムネ（sm）の大きさにそろえる */
.dm-explore-target__rooms .dm-thumb--empty {
	width: 44px;
	height: 44px;
}

.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;
}

/* 敵・デッキのカードは枠付きアイコン（2026-11-05。プレーンフレームを重ねていたのを置き換え）。
   切り出し方・★と種族マークの位置は .dm-thumb--framed と同じ値 */
.dm-explore__card-visual,
.dm-explore__enemy-visual {
	container-type: inline-size;
}

.dm-explore__framed {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.dm-explore__framed > img:not(.dm-explore__category) {
	position: absolute;
	left: -38%;
	top: -24.3%;
	width: 167.9%;
	height: 167.9%;
	max-width: none;
	object-fit: fill;
}

.dm-explore__framed .dm-explore__category {
	position: absolute;
	left: 76.5%;
	top: 77%;
	width: 15%;
	height: 15%;
	padding: 1.5%;
	box-sizing: border-box;
	object-fit: contain;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	pointer-events: none;
}

.dm-explore__framed .dm-explore__category[hidden] {
	display: none;
}

.dm-explore__stars {
	position: absolute;
	left: 7%;
	top: 78.5%;
	width: 36%;
	height: 12.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7cqw;
	line-height: 1;
	color: #ffd23a;
	text-shadow: 0 0 2px #000;
	white-space: nowrap;
	pointer-events: none;
}

/* アイコンが無くて本体画像に切り替わったとき（dmImgRetry が is-fallback を付ける）は、
   本体を四角に収めて★を左上に出す */
.dm-explore__framed.is-fallback {
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: #2b2148;
}

.dm-explore__framed.is-fallback > img:not(.dm-explore__category) {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dm-explore__framed.is-fallback .dm-explore__category {
	display: none;
}

.dm-explore__framed.is-fallback .dm-explore__stars {
	left: 3%;
	top: 2%;
	width: auto;
	height: auto;
	font-size: 14cqw;
	letter-spacing: -.08em;
}

/* 敵（部屋のボス）は全身（2026-11-06 ユーザー指示。それまでは枠付きアイコン）。★・種族マークは付けない。
   正方形の中に全身を足元そろえで収める。全身が無くて本体画像に切り替わったとき（is-fallback）も同じ出し方 */
.dm-explore__figure {
	aspect-ratio: 1 / 1;
}

.dm-explore__figure > .dm-explore__enemy-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

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

.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;
}

/* 見出しのすぐ下の「次の探検へ」（画面仕様書 p.6。2026-11-10） */
.dm-explore-result__next {
	margin: 0 0 12px;
}

/* 仲間になったマモノ／イベントで解放したマモノ。報酬の上で金枠にして目立たせる（画面仕様書 p.6） */
.dm-explore-catch {
	margin: 0 0 12px;
	padding: 12px 8px;
	background: radial-gradient(ellipse at 50% 0%, rgba(240, 201, 74, .22) 0%, rgba(240, 201, 74, 0) 70%), var(--dm-bg-panel);
	border: 2px solid var(--dm-accent);
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(240, 201, 74, .35);
	text-align: center;
}

.dm-explore-catch__title {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--dm-accent-strong);
}

.dm-explore-catch__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.dm-explore-catch__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80px;
}

.dm-explore-catch__thumb {
	position: relative;
	display: block;
}

.dm-explore-catch__new {
	position: absolute;
	top: -6px;
	right: -8px;
	margin: 0;
	z-index: 1;
}

.dm-explore-catch__name {
	display: block;
	width: 100%;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--dm-text);
	overflow-wrap: anywhere;
}

.dm-btn.dm-explore-catch__book {
	min-height: 26px;
	margin-top: 4px;
	padding: 3px 14px;
	font-size: 11px;
}

/* 全クリアボーナスは「報酬」の内訳なので一段小さく */
.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;
}

/* 3_3_1：帯の【デッキ名編集】（2026-11-04） */
.dm-deckbar__rename {
	font-size: 12px;
	font-weight: normal;
	color: var(--dm-accent-strong);
}

/* 3_5_1：おまかせ編成設定（2026-11-04）。レイラのアイコン＋セリフ、種族・隊列のプルダウン */
.dm-autodeck__talk {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
}

.dm-autodeck__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
}

.dm-autodeck__text {
	flex: 1;
	margin: 0;
}

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

.dm-autodeck__label {
	flex: 0 0 3em;
	font-size: 13px;
	font-weight: bold;
}

.dm-autodeck__row .dm-filter__select {
	flex: 1;
}

/* 先鋒〜大将の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） */
/* ★4 からの限界突破は素材が3体になり5枚並ぶので、狭い端末では折り返す */
.dm-fusion {
	display: flex;
	flex-wrap: wrap;
	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;
}

/* ============================================================
   7_1_3〜7_1_6：進化ミッション（2026-10-14。旧 3_5_x の進化の魔石から置き換え）
   ============================================================ */

/* ---- 7_1_3：進化ミッション ---- */

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

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

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

.dm-evomission__arrow {
	flex: 0 0 auto;
	color: var(--dm-danger);
	font-size: 16px;
}

/* 進化先2体は枠で囲んで1組に見せる（資料 p27 の灰色の枠） */
.dm-evomission__to {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 6px 4px;
	border: 1px solid var(--dm-border);
	border-radius: 4px;
	background: rgba(255, 255, 255, .05);
}

.dm-evomission__btn {
	flex: 0 0 auto;
	/* .dm-btn は幅 100% なので、行からはみ出さないよう中身の幅にする（2026-10-26 画面崩れの修正） */
	width: auto;
	min-width: 0;
	margin-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;
}

.dm-evomission__badge {
	position: absolute;
	top: -6px;
	right: 4px;
}

/* ---- 7_1_4 / 7_1_6：所持数・進化した旨の見出し（資料では黄色の太字） ---- */

.dm-evomission__owned {
	margin: 0 0 12px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	color: #ffe14d;
}

.dm-evomission__targets {
	display: flex;
	justify-content: space-around;
	gap: 8px;
}

.dm-evomission__targets--wrap {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.dm-evomission__target {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--dm-text);
	text-decoration: none;
	font-size: 11px;
}

.dm-evomission__new {
	margin: 4px 0 0;
	color: var(--dm-danger);
	font-weight: bold;
}

/* 初期配布の★2 選択（2026-10-16）。進化先のカードと同じ並びで、カードごと押せるボタンにする */
.dm-choose__button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   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 auto;
	min-width: 0;
	/* 文字が2段にならないよう左右の余白を詰め、折り返さない（2026-10-26 ユーザー指示） */
	padding: 8px 1px;
	white-space: nowrap;
	letter-spacing: -0.02em;
	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;
	position: relative;
}

/* タブの件数バッジはタブの右上に重ねる（文字の横に並べると「ウィークリー」が折り返す。2026-10-26 ユーザー指示） */
.dm-tabs__item > .dm-badge {
	position: absolute;
	top: -7px;
	right: -3px;
	z-index: 1;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	margin: 0;
	padding: 0 4px;
	border-radius: 9px;
	line-height: 18px;
	text-align: center;
	font-weight: bold;
}

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

/* 2_1_1 探検先選択の5タブ（EASY / NORMAL / HARD / 履歴 / PICK UP。2026-10-26）。1行に収まるよう小さめにする */
.dm-tabs--explore .dm-tabs__item {
	padding: 8px 1px;
	font-size: 11px;
	white-space: nowrap;
}

/* PICK UP は Phase1 ではロック */
.dm-tabs__item.is-locked {
	opacity: 0.45;
	pointer-events: none;
}

/* 難易度のバッジ（探検先のカード・ダンジョン詳細） */
.dm-difficulty {
	display: inline-block;
	margin-right: 4px;
	padding: 0 5px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.6;
	vertical-align: middle;
	color: #fff;
	background: #5b5379;
}

.dm-difficulty--easy   { background: #3f8f5a; }
.dm-difficulty--normal { background: #3f6fa8; }
.dm-difficulty--hard   { background: #a83f4a; }

.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);
}

/* 相手のプレイヤーがセットしている称号（本番仕様書「称号」B55。2026-11-02） */
.dm-record__title {
	display: block;
	font-size: 11px;
	font-weight: bold;
	color: var(--dm-accent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.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;
}

/* 確認ダイアログ（confirmmodal.phtml。システムの confirm() の代わり。2026-11-10）
   見た目はガイドモーダルのまま、ボタンを「キャンセル」「OK」の2つ並びにする */
.dm-confirmmodal .dm-guidemodal__text {
	white-space: pre-line;
}

.dm-confirmmodal__actions {
	gap: 8px;
}

.dm-confirmmodal__actions .dm-btn {
	flex: 1 1 0;
	margin-bottom: 0;
}

/* ---------- 4_5：模擬戦（第四次モック版（６）、画面仕様 20260925 p20） ---------- */

/* 防衛デッキは各階のマモノの下に階名を出す */
.dm-mock__floors {
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-mock__floor {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dm-mock__floor-label {
	margin-top: 2px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

a.dm-deckbar__arrow {
	text-decoration: none;
}

/* ---------- 4_2_2〜4_2_5：部屋効果（第四次モック版（１_１）、画面仕様 20260925 p16・p17） ----------
   資料の白い説明枠は、ゲーム本体（暗い紫＋金）から浮くので 4_2_1 の階層リスト（.dm-floorrow）と
   同じ枠に置き換えている（.dm-grow__panel と同じ考え方） */

/* 部屋効果／マモノ／罠 の3段（4_2_2・4_2_4・4_5_2） */
.dm-roomparts {
	margin-bottom: 12px;
}

.dm-roomparts__label {
	margin: 0 0 3px 2px;
	font-size: 11px;
	color: var(--dm-text-sub);
}

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

/* 4_2_2 はラジオで選ぶので、ラジオぶんの余白と指カーソルを付ける */
.dm-roomparts__row.is-selectable {
	padding-right: 30px;
	cursor: pointer;
}

.dm-roomparts__row.is-disabled {
	opacity: 0.5;
	cursor: default;
}

/* 部屋（横長 96px）とマモノ・罠（72px）で説明の書き出しが揃うよう、画像の列幅を固定する */
.dm-roomparts__visual {
	flex: none;
	width: 96px;
	text-align: center;
}

.dm-roomparts__body {
	flex: 1;
	min-width: 0;
	line-height: 1.5;
}

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

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

/* 重ね掛けした部屋効果を縦に並べる（dm_effect_names） */
.dm-roomparts__effect {
	display: block;
}

.dm-roomparts__effect + .dm-roomparts__effect {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px dashed var(--dm-border);
}

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

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

/* 4_2_3：部屋効果の一覧。行は .dm-roomparts__row と同じ枠。選択中のものは金の枠 */
.dm-effect-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

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

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

/* 選択中の行。右端に発動順の数字を出す */
.dm-effect-list__item.is-selected .dm-effect-list__link {
	border-color: var(--dm-accent-strong);
	background: rgba(240, 201, 74, 0.12);
}

.dm-effect-list__order {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	border-radius: 12px;
	background: var(--dm-accent-strong);
	color: #1a1430;
	font-size: 12px;
	font-weight: bold;
}

/* 4_2_3：選択中の部屋効果（選んだ順＝発動順） */
.dm-effect-selected {
	margin: 8px 0;
	padding: 6px 10px;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	font-size: 11px;
}

.dm-effect-selected__label {
	display: block;
	margin-bottom: 2px;
	color: var(--dm-text-sub);
}

.dm-effect-selected__list {
	margin: 0;
	padding-left: 20px;
	color: var(--dm-accent-strong);
	font-weight: bold;
}

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

.dm-effect-list__badge {
	margin-left: 4px;
	font-size: 10px;
	font-weight: normal;
	color: var(--dm-text-sub);
}

/* 区分アイコン（UP / DOWN）。素材が無いので区分ごとの色の丸に文字を載せている */
.dm-effect-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--dm-accent);
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.dm-effect-icon--buff    { background: radial-gradient(circle at 35% 30%, #f5a04a 0%, #b8520f 100%); }
.dm-effect-icon--debuff  { background: radial-gradient(circle at 35% 30%, #9b6fe0 0%, #4a2785 100%); }
.dm-effect-icon--heal    { background: radial-gradient(circle at 35% 30%, #6fd49a 0%, #1f7a45 100%); }
.dm-effect-icon--special { background: radial-gradient(circle at 35% 30%, #6fa6e8 0%, #244f8c 100%); }
.dm-effect-icon--ailment { background: radial-gradient(circle at 35% 30%, #d9c24a 0%, #7a6414 100%); }

/* ---- スタミナ（2_1_1 / 2_1_2。本番仕様書「スタミナ・回復」2026-10-19） ---- */

.dm-stamina__gauge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 8px;
}

.dm-stamina__pips {
	display: inline-flex;
	gap: 4px;
}

.dm-stamina__pip {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2c2544;
	border: 1px solid var(--dm-border);
}

.dm-stamina__pip.is-on {
	background: linear-gradient(180deg, #f0c94a 0%, #c9a227 100%);
	border-color: var(--dm-accent);
}

/* カプセルで上限を超えた分 */
.dm-stamina__pip.is-over.is-on {
	background: linear-gradient(180deg, #8fe3b8 0%, var(--dm-win) 100%);
	border-color: var(--dm-win);
}

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

.dm-stamina.is-empty .dm-stamina__value {
	color: var(--dm-danger);
}

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

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

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

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

.dm-stamina__capsule .dm-stamina__capsule-btn {
	flex: 0 0 auto;
	width: 64px;
	min-height: 34px;
	padding: 6px 8px;
	margin-bottom: 0;
}

/* ---- ショップ（本番仕様書「アイテム・ゲーム内通貨」2026-10-19。画面仕様は未支給の暫定版） ---- */

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

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

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

.dm-shoprow.is-disabled {
	opacity: 0.6;
}

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

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

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

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

.dm-shoprow__price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

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

.dm-shopitem__desc {
	flex: 1 1 auto;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.dm-shop-total {
	margin-bottom: 10px;
}

/* ショップ：ゴールドとコインの値段を縦に並べる・押せないボタン（GREE コイン決済 2026-10-19） */
.dm-shoprow__price {
	text-align: right;
}

.dm-shoprow__price-gold,
.dm-shoprow__price-coin {
	display: block;
}

.dm-shoprow__price-coin {
	font-size: 12px;
	color: var(--dm-text);
}

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

/* ------------------------------------------------------------------
   お知らせ・ヘルプ・プレゼントボックス・ログインボーナス（2026-10-23 nadv から移植）
   行は記録室（.dm-records / .dm-record）、枠は .dm-panel を使い回す
   ------------------------------------------------------------------ */

/* タップで詳細へ進む行（ヘルプ・お知らせ） */
.dm-linkrow {
	min-height: 44px;
}

.dm-linkrow.is-unread {
	border-color: var(--dm-accent);
}

.dm-linkrow__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--dm-bg-panel-head);
	border: 1px solid var(--dm-accent);
	color: var(--dm-accent-strong);
	font-weight: bold;
	font-size: 12px;
}

.dm-linkrow__arrow {
	flex: none;
	color: var(--dm-text-sub);
	font-size: 18px;
	line-height: 1;
}

.dm-linkrow__pin,
.dm-linkrow__gift {
	margin-right: 2px;
}

/* 管理ツールで書いた HTML の本文（ヘルプ・お知らせ） */
.dm-article {
	font-size: 12px;
	line-height: 1.7;
	word-break: break-word;
}

.dm-article p {
	margin: 0 0 8px;
}

.dm-article h3,
.dm-article h4 {
	margin: 10px 0 6px;
	color: var(--dm-accent-strong);
	font-size: 13px;
}

.dm-article ul,
.dm-article ol {
	margin: 0 0 8px;
	padding-left: 18px;
}

.dm-article img {
	max-width: 100%;
	height: auto;
}

.dm-article a {
	color: var(--dm-accent-strong);
}

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

/* マモノ一覧の所持数（2026-10-23。上限を超えたら赤） */
.dm-monster-capacity {
	margin: 0 0 8px;
	font-size: 12px;
	text-align: right;
	color: var(--dm-text-sub);
}

.dm-monster-capacity b {
	color: var(--dm-text);
}

.dm-monster-capacity.is-over,
.dm-monster-capacity.is-over b {
	color: var(--dm-danger);
}

/* お知らせの配布アイテム（nadv と同じくパネルの中、本文の下に区切り線を入れて置く。2026-10-23） */
.dm-article__rewards {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--dm-border);
}

.dm-article__rewards-head {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

/* 報酬の並び（お知らせの配布アイテム） */
.dm-rewardlist {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dm-rewardlist__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

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

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

/* ゴールドは画像が無いので金の丸に「G」 */
.dm-item--gold {
	border-radius: 50%;
	border-color: var(--dm-accent);
	background: radial-gradient(circle at 35% 35%, #6b5420 0%, #3a2c08 100%);
}

/* プレゼントボックスの1行（アイコン・内容・受け取るボタン） */
.dm-present__reward {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-present__action {
	flex: none;
	margin: 0;
}

/* ミッション画面のタブとリセットまでの帯（2026-10-26）。カード（#2f2556）と同じ明るさにそろえる。
   ほかの画面のタブは中身が暗い紫なので元のまま */
.dm-tabs--mission .dm-tabs__item {
	background: #2a2150;
	border-color: #54468f;
	color: #c3b9e6;
}

.dm-tabs--mission .dm-tabs__item.is-active {
	background: #3d3170;
	border-color: var(--dm-accent);
	color: var(--dm-accent-strong);
}

.dm-tabs__summary--mission {
	background: #3d3170;
	border-color: #54468f;
	color: var(--dm-text);
}

/* ミッションの1行（2026-10-26。プレゼントボックスの行にゲージと状態を足したもの）。
   見た目の整理（同日）：金色は「受け取れる」ものと受け取るボタンだけ。ほかは白・紫で落ち着かせる */
.dm-mission {
	align-items: flex-start;
	padding: 8px 10px;
	/* ページの背景（#140f24）と差が出るよう、カードは一段明るい紫に（2026-10-26 背景と似すぎて見づらいと言われて） */
	background: #2f2556;
	border-color: #54468f;
}

.dm-mission .dm-record__name {
	white-space: normal;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--dm-text);
}

.dm-mission > .dm-item {
	margin-top: 2px;
}

.dm-mission > .dm-present__action,
.dm-mission > .dm-mission__state {
	align-self: center;
}

.dm-mission.is-receivable {
	border-color: var(--dm-accent);
	background: linear-gradient(180deg, #4a3c5a 0%, #2f2556 60%);
}

.dm-mission.is-done {
	opacity: 0.45;
}

.dm-mission__progress {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 4px;
}

.dm-mission__gauge {
	flex: 1 1 auto;
	height: 4px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 2px;
}

/* 挑戦中は紫、達成したら金 */
.dm-mission__gauge-fill {
	display: block;
	height: 100%;
	background: #8b7bd8;
}

.dm-mission.is-receivable .dm-mission__gauge-fill,
.dm-mission.is-done .dm-mission__gauge-fill {
	background: linear-gradient(90deg, #c9a227 0%, #f0c94a 100%);
}

.dm-mission__count {
	flex: none;
	min-width: 40px;
	text-align: right;
	font-size: 11px;
	color: var(--dm-text-sub);
}

/* 報酬は白文字。「報酬」は小さなラベル */
.dm-mission__reward {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--dm-text);
}

.dm-mission__rewardlabel {
	flex: none;
	padding: 0 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 10px;
	color: var(--dm-text-sub);
}

.dm-mission__state {
	flex: none;
	min-width: 48px;
	font-size: 10px;
	text-align: center;
	color: rgba(168, 159, 201, 0.7);
}

/* 段階のあるミッション：「ステップN：X達成」の行（nadv の step-item）。枠線なし、受け取れる段階だけ左に金の線 */
.dm-mission__steps {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 4px;
}

.dm-mission__stepitem {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	/* カードより一段暗くして、カードの中の行だと分かるように */
	background: rgba(0, 0, 0, 0.25);
	border-left: 2px solid transparent;
	border-radius: 3px;
}

.dm-mission__stepitem.is-receivable {
	border-left-color: var(--dm-accent-strong);
	background: rgba(240, 201, 74, 0.08);
}

.dm-mission__stepitem.is-done {
	opacity: 0.5;
}

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

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

.dm-mission__stepall {
	margin: 6px 0 0;
	text-align: right;
}

/* イベントミッション（2026-10-29。本番仕様書「イベント」（2）・「ミッション」4.）
   バナー・TOP画像は画像が届くまで CSS の仮（App_Master_Mission::EVENT_IMAGE_READY）。暗い紅から紫へのグラデーションに金の枠 */
.dm-eventbanner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;
	/* 縦横比は 190:30（2026-10-29 ユーザー指示。支給される画像も同じ比率の想定） */
	aspect-ratio: 190 / 30;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 2px 12px;
	overflow: hidden;
	border: 2px solid var(--dm-accent);
	border-radius: 6px;
	background:
		radial-gradient(circle at 15% 20%, rgba(240, 201, 74, 0.25) 0, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(139, 123, 216, 0.35) 0, transparent 50%),
		linear-gradient(135deg, #5a1730 0%, #3d1f5c 55%, #1f1640 100%);
	box-shadow: 0 0 10px rgba(240, 201, 74, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.45);
	color: var(--dm-text);
	text-align: center;
	text-decoration: none;
}

.dm-eventbanner:active {
	transform: scale(0.98);
}

.dm-eventbanner.is-closed {
	filter: saturate(0.5);
}

.dm-eventbanner__img,
.dm-eventtop__img {
	display: block;
	width: 100%;
	height: auto;
}

.dm-eventbanner__img {
	height: 100%;
	object-fit: cover;
}

/* 画像のときは枠と余白を消して、画像だけを出す */
.dm-eventbanner:has(.dm-eventbanner__img) {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
}

.dm-eventbanner__label {
	position: absolute;
	top: 4px;
	left: -24px;
	width: 80px;
	transform: rotate(-35deg);
	background: var(--dm-accent-strong);
	color: #2a1500;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 16px;
	text-align: center;
}

.dm-eventbanner__title {
	font-size: 15px;
	line-height: 1.25;
	font-weight: bold;
	letter-spacing: 1px;
	color: var(--dm-accent-strong);
	text-shadow: 0 0 6px rgba(240, 201, 74, 0.6), 0 2px 2px rgba(0, 0, 0, 0.8);
}

.dm-eventbanner__sub {
	font-size: 10px;
	line-height: 1.3;
	color: #e6dcff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.dm-eventbanner__badge {
	position: absolute;
	top: 4px;
	right: 4px;
	margin: 0;
}

/* イベントページの訴求用TOP画像（仮）。バナーより背を高く */
.dm-eventtop {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	min-height: 130px;
	margin: 0 0 8px;
	overflow: hidden;
	border: 2px solid var(--dm-accent);
	border-radius: 6px;
	background:
		radial-gradient(circle at 20% 25%, rgba(240, 201, 74, 0.3) 0, transparent 40%),
		radial-gradient(circle at 80% 75%, rgba(139, 123, 216, 0.4) 0, transparent 50%),
		linear-gradient(135deg, #5a1730 0%, #3d1f5c 55%, #1f1640 100%);
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.dm-eventtop:has(.dm-eventtop__img) {
	min-height: 0;
	border: none;
	background: none;
	box-shadow: none;
}

.dm-eventtop.is-closed {
	filter: saturate(0.5);
}

.dm-eventtop__title {
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2px;
	color: var(--dm-accent-strong);
	text-shadow: 0 0 8px rgba(240, 201, 74, 0.6), 0 2px 2px rgba(0, 0, 0, 0.8);
}

.dm-eventtop__period {
	font-size: 12px;
	color: #e6dcff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* フレーバーテキスト（行数に合わせて伸びる） */
.dm-eventflavor {
	margin: 0 0 8px;
	padding: 8px 10px;
	background: #2f2556;
	border: 1px solid #54468f;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--dm-text);
}

/* 終了までの残りと「まとめて受け取る」 */
.dm-eventinfo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	margin: 0 0 8px;
	padding: 4px 10px;
	background: #3d3170;
	border: 1px solid #54468f;
	border-radius: 4px;
	font-size: 12px;
	color: var(--dm-text);
}

.dm-eventinfo__left {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

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

.dm-eventinfo__time {
	font-size: 14px;
	font-weight: bold;
	white-space: nowrap;
	color: var(--dm-accent-strong);
}

.dm-eventinfo form {
	margin: 0;
	flex: none;
}

/* 段階の行：進捗バーと状態の札を外して縦を詰める（仕様書 4.2） */
.dm-mission--event {
	align-items: center;
	padding: 6px 10px;
}

.dm-mission--event .dm-record__name {
	font-size: 12px;
}

.dm-mission--event .dm-mission__reward {
	margin-top: 2px;
}

.dm-mission__eventcount {
	margin-left: auto;
	font-size: 10px;
	color: var(--dm-text-sub);
}

/* 受け取りの結果のモーダル（まとめて受け取ると件数が多いので、長ければモーダルの中でスクロール） */
.dm-mission__received {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 50vh;
	overflow-y: auto;
}

.dm-mission__receiveditem {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--dm-border);
	border-radius: 4px;
}

.dm-mission__receiveerror {
	color: var(--dm-danger);
	font-size: 12px;
}

.dm-btn--small {
	width: auto;
	min-height: 32px;
	padding: 6px 10px;
	margin-bottom: 0;
	font-size: 12px;
}

/* ログインボーナス：7日分を4列で並べ、今日を金枠、受け取った日に GET の印 */
.dm-loginbonus {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.dm-loginbonus__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px;
	background: var(--dm-bg-panel-head);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
}

.dm-loginbonus__day.is-today {
	border: 2px solid var(--dm-accent-strong);
	box-shadow: 0 0 8px rgba(240, 201, 74, 0.45);
}

.dm-loginbonus__day.is-done > :not(.dm-loginbonus__stamp) {
	opacity: 0.45;
}

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

.dm-loginbonus__day.is-today .dm-loginbonus__label {
	color: var(--dm-accent-strong);
}

.dm-loginbonus__amount {
	font-size: 11px;
	font-weight: bold;
}

.dm-loginbonus__stamp {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-15deg);
	padding: 1px 6px;
	border: 2px solid var(--dm-danger);
	border-radius: 4px;
	color: var(--dm-danger);
	font-size: 12px;
	font-weight: bold;
	background: rgba(20, 15, 36, 0.6);
}

/* ---------- ログインボーナスの演出（動きは nadv と同じ、色は dmtr） ---------- */

/* 今日の分を受け取った直後、GET のスタンプが上から押される（nadv の stamp-press / stamp-glow と同じ） */
.dm-loginbonus__stamp.is-stamping {
	animation: dm-lb-stamp-press 1.2s ease-out 0.5s both;
}

.dm-loginbonus__stamp.is-stamping::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 240, 180, 0.8) 0%, rgba(240, 201, 74, 0.4) 40%, transparent 70%);
	box-shadow: 0 0 15px rgba(240, 201, 74, 0.6), 0 0 30px rgba(201, 162, 39, 0.3);
	animation: dm-lb-stamp-glow 0.5s ease-out 1.2s both;
	pointer-events: none;
}

@keyframes dm-lb-stamp-press {
	0%   { transform: translate(-50%, -50%) scale(5) rotate(-15deg); opacity: 0; }
	25%  { transform: translate(-50%, -50%) scale(1.5) rotate(-5deg); opacity: 0.7; }
	50%  { transform: translate(-50%, -50%) scale(0.85) rotate(2deg); opacity: 1; }
	65%  { transform: translate(-50%, -50%) scale(1.1) rotate(-1deg); opacity: 1; }
	80%  { transform: translate(-50%, -50%) scale(0.95) rotate(-15deg); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1) rotate(-15deg); opacity: 1; }
}

@keyframes dm-lb-stamp-glow {
	0%   { transform: scale(0); opacity: 1; }
	40%  { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(1.4); opacity: 0; }
}

/* 報酬獲得のポップアップ（nadv の reward-overlay と同じ構成・タイミング）。
   html に zoom が掛かっているので fixed の 100% は表示中の画面に一致する。ガイドモーダル（1000）より前面 */
.dm-lbpopup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 5, 18, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 1001;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.dm-lbpopup.is-show {
	opacity: 1;
	pointer-events: auto;
	touch-action: none;
	overscroll-behavior: none;
}

.dm-lbpopup.is-hiding {
	opacity: 0;
	pointer-events: none;
}

.dm-lbpopup__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* 箱の裏の光 */
.dm-lbpopup__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
	height: 180px;
	margin: -110px 0 0 -90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 201, 74, 0.5) 0%, rgba(201, 162, 39, 0.2) 40%, transparent 70%);
	opacity: 0;
	pointer-events: none;
}

.dm-lbpopup.is-show .dm-lbpopup__glow {
	animation: dm-lb-glow-pulse 2s ease-in-out 0.2s both;
}

@keyframes dm-lb-glow-pulse {
	0%   { transform: scale(0); opacity: 0; }
	30%  { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.1); opacity: 0.7; }
}

/* 飛び散るキラキラ（4芒星） */
.dm-lbpopup__sparkles {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 280px;
	transform: translate(-50%, -55%);
	pointer-events: none;
	z-index: 2;
}

.dm-lbpopup__sparkles span {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23F0C94A'/%3E%3C/svg%3E") center/contain no-repeat;
	filter: drop-shadow(0 0 3px rgba(240, 201, 74, 0.9));
}

.dm-lbpopup.is-show .dm-lbpopup__sparkles span {
	animation: dm-lb-sparkle-burst 2s ease-out both;
}

.dm-lbpopup__sparkles span:nth-child(1)  { width: 20px; height: 20px; --sx: -75px;  --sy: -95px;  animation-delay: 0.3s; }
.dm-lbpopup__sparkles span:nth-child(2)  { width: 16px; height: 16px; --sx: 85px;   --sy: -75px;  animation-delay: 0.4s; }
.dm-lbpopup__sparkles span:nth-child(3)  { width: 14px; height: 14px; --sx: -95px;  --sy: 30px;   animation-delay: 0.35s; }
.dm-lbpopup__sparkles span:nth-child(4)  { width: 18px; height: 18px; --sx: 75px;   --sy: 85px;   animation-delay: 0.45s; }
.dm-lbpopup__sparkles span:nth-child(5)  { width: 20px; height: 20px; --sx: -40px;  --sy: -105px; animation-delay: 0.38s; }
.dm-lbpopup__sparkles span:nth-child(6)  { width: 14px; height: 14px; --sx: 105px;  --sy: 20px;   animation-delay: 0.42s; }
.dm-lbpopup__sparkles span:nth-child(7)  { width: 16px; height: 16px; --sx: -60px;  --sy: 95px;   animation-delay: 0.5s; }
.dm-lbpopup__sparkles span:nth-child(8)  { width: 18px; height: 18px; --sx: 50px;   --sy: -90px;  animation-delay: 0.36s; }
.dm-lbpopup__sparkles span:nth-child(9)  { width: 12px; height: 12px; --sx: -120px; --sy: -45px;  animation-delay: 0.55s; }
.dm-lbpopup__sparkles span:nth-child(10) { width: 12px; height: 12px; --sx: 55px;   --sy: 115px;  animation-delay: 0.6s; }
.dm-lbpopup__sparkles span:nth-child(11) { width: 12px; height: 12px; --sx: 120px;  --sy: -40px;  animation-delay: 0.58s; }
.dm-lbpopup__sparkles span:nth-child(12) { width: 12px; height: 12px; --sx: -45px;  --sy: 120px;  animation-delay: 0.62s; }

@keyframes dm-lb-sparkle-burst {
	0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
	30%  { opacity: 1; }
	100% { transform: translate(var(--sx), var(--sy)) scale(0.6) rotate(90deg); opacity: 0; }
}

/* 箱のまわりで点滅し続けるキラキラ */
.dm-lbpopup__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
	height: 180px;
	margin: -110px 0 0 -90px;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
}

.dm-lbpopup.is-show .dm-lbpopup__orbit {
	animation: dm-lb-fade-in 0.3s ease-out 0.4s both;
}

.dm-lbpopup__orbit span {
	position: absolute;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23FFF8DC'/%3E%3C/svg%3E") center/contain no-repeat;
	filter: drop-shadow(0 0 4px rgba(240, 201, 74, 0.8));
}

.dm-lbpopup__orbit span:nth-child(1) { top: -5px;    left: 45%;  animation: dm-lb-twinkle 0.8s ease-in-out 0.5s infinite alternate; }
.dm-lbpopup__orbit span:nth-child(2) { top: 45%;     right: -5px; animation: dm-lb-twinkle 0.8s ease-in-out 0.7s infinite alternate; }
.dm-lbpopup__orbit span:nth-child(3) { bottom: -5px; left: 55%;  animation: dm-lb-twinkle 0.8s ease-in-out 0.6s infinite alternate; }
.dm-lbpopup__orbit span:nth-child(4) { top: 55%;     left: -5px; animation: dm-lb-twinkle 0.8s ease-in-out 0.9s infinite alternate; }
.dm-lbpopup__orbit span:nth-child(5) { top: 10%;     right: 10%; width: 12px; height: 12px; animation: dm-lb-twinkle 0.8s ease-in-out 0.8s infinite alternate; }
.dm-lbpopup__orbit span:nth-child(6) { bottom: 10%;  left: 10%;  width: 12px; height: 12px; animation: dm-lb-twinkle 0.8s ease-in-out 1s infinite alternate; }

@keyframes dm-lb-twinkle {
	0%   { transform: scale(0.3) rotate(0deg); opacity: 0.2; }
	100% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* 報酬の箱（弾んで出る）。枠は .dm-panel と同じ紫に金の縁 */
.dm-lbpopup__box {
	position: relative;
	width: 120px;
	height: 120px;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--dm-bg-panel-head) 0%, var(--dm-bg-panel) 100%);
	border: 3px solid var(--dm-accent);
	border-radius: 10px;
	box-shadow: 0 0 12px rgba(201, 162, 39, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
	transform: scale(0.5);
	opacity: 0;
}

.dm-lbpopup.is-show .dm-lbpopup__box {
	animation: dm-lb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* 箱の中のアイコンは大きく出す（.dm-item / .dm-thumb の大きさを上書き） */
.dm-lbpopup__box .dm-item,
.dm-lbpopup__box .dm-thumb {
	width: 88px;
	height: 88px;
}

.dm-lbpopup__box .dm-item__fallback {
	font-size: 40px;
}

.dm-lbpopup__amount {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	padding: 2px 10px;
	border: 2px solid var(--dm-accent);
	border-radius: 12px;
	background: linear-gradient(180deg, #f0c94a 0%, #c9a227 100%);
	color: #251c00;
	font-size: 17px;
	font-weight: bold;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	opacity: 0;
}

.dm-lbpopup.is-show .dm-lbpopup__amount {
	animation: dm-lb-fade-in 0.4s ease-out 0.3s both;
}

@keyframes dm-lb-pop {
	0%   { transform: scale(0.5); opacity: 0; }
	70%  { transform: scale(1.05); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* 「〜を獲得しました」 */
.dm-lbpopup__text {
	padding: 12px 28px;
	border: 2px solid var(--dm-accent);
	border-radius: 6px;
	background: var(--dm-bg-panel);
	color: var(--dm-accent-strong);
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(20px);
}

.dm-lbpopup.is-show .dm-lbpopup__text {
	animation: dm-lb-fade-in-up 0.5s ease-out 0.8s both;
}

@keyframes dm-lb-fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes dm-lb-fade-in-up {
	0%   { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* マイページの小ボタンで遷移先があるもの */
a.dm-homebtns__btn {
	position: relative;
	color: var(--dm-text);
	text-decoration: none;
}

.dm-homebtns__btn .dm-badge {
	position: absolute;
	top: -4px;
	right: -2px;
	padding: 0 4px;
	font-size: 9px;
}

/* VIPパス（2026-10-23。加入状況を出す。加入中は金の縁） */
.dm-homebtns__btn--vip.is-active {
	border-color: var(--dm-accent);
	color: var(--dm-accent-strong);
	box-shadow: 0 0 6px rgba(201, 162, 39, 0.45);
}

.dm-homebtns__sub {
	display: block;
	font-size: 9px;
	font-weight: normal;
	color: var(--dm-text-sub);
}

.dm-homebtns__btn--vip.is-active .dm-homebtns__sub {
	color: var(--dm-text);
}

/* 攻防記を見る：未受取のバッジをボタンの右上に出す */
.dm-homebtn {
	position: relative;
}

.dm-homebtn .dm-badge {
	position: absolute;
	top: -6px;
	right: -4px;
}

/* ------------------------------------------------------------------
   アイテムボックス（2026-10-23 nadv の /item/index から移植。見た目は dmtr）
   ------------------------------------------------------------------ */

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

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

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

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

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

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

.dm-itembox__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dm-itembox__meta {
	display: flex;
	flex-direction: column;
	font-size: 11px;
}

.dm-itembox__quantity b {
	color: var(--dm-text);
}

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

/* 期限まで24時間を切ったもの（nadv と同じ） */
.dm-itembox__expire.is-soon {
	color: var(--dm-danger);
	font-weight: bold;
}

.dm-itembox__use {
	flex: none;
}

.dm-itembox__reason {
	margin-top: 2px;
	font-size: 10px;
	color: var(--dm-text-sub);
	text-align: right;
}

/* 確認・結果のモーダル（中身は .dm-panel）。ガイドモーダルと同じく画面全体を暗くして前面に出す */
.dm-modal {
	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;
}

.dm-modal[hidden] {
	display: none !important;
}

.dm-modal__panel {
	width: 100%;
	max-width: 300px;
	margin: 0;
}

/* 中身が画面より高くなるモーダル（VIPパスの購入確認。2026-11-10）。
   上下中央揃えのままだと、はみ出した上の部分がスクロールしても見えなくなるので、
   上から並べて auto マージンで中央に寄せる（収まるときは中央、はみ出すときは上から始まってモーダル全体がスクロールする） */
.dm-modal--tall {
	align-items: flex-start;
}

.dm-modal--tall .dm-modal__panel {
	margin: auto 0;
}

.dm-modal__text {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
	white-space: pre-line;
}

/* ------------------------------------------------------------------
   ショップ TOP・VIPパス（2026-10-23 nadv の作りを移植。見た目は dmtr）
   ------------------------------------------------------------------ */

/* VIPパスの加入状況（加入中は金の縁） */
.dm-vipstatus {
	margin: 0 0 10px;
	padding: 8px 10px;
	text-align: center;
	background: var(--dm-bg-panel);
	border: 1px solid var(--dm-border);
	border-radius: 6px;
}

.dm-vipstatus.is-active {
	border-color: var(--dm-accent);
	box-shadow: 0 0 8px rgba(201, 162, 39, 0.35);
}

.dm-vipstatus__title {
	font-size: 13px;
	font-weight: bold;
	color: var(--dm-text-sub);
}

.dm-vipstatus.is-active .dm-vipstatus__title {
	color: var(--dm-accent-strong);
}

.dm-vipstatus__remaining {
	margin-left: 6px;
	font-size: 11px;
	color: var(--dm-text);
}

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

/* 各ショップへの入口（nadv のバナーの代わり） */
.dm-shopmenu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dm-shopmenu__link {
	position: relative;
	display: block;
	padding: 14px 32px 14px 14px;
	color: inherit;
	text-decoration: none;
	background: linear-gradient(180deg, var(--dm-bg-panel-head) 0%, var(--dm-bg-panel) 100%);
	border: 1px solid var(--dm-border);
	border-radius: 8px;
}

.dm-shopmenu__link--vip {
	border-color: var(--dm-accent);
	background: linear-gradient(180deg, #4a3a1c 0%, var(--dm-bg-panel) 100%);
}

.dm-shopmenu__title {
	display: block;
	font-size: 15px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-shopmenu__text {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--dm-text-sub);
}

.dm-shopmenu__arrow {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--dm-accent-strong);
}

/* VIPパスの商品 */
.dm-vippass__desc {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.6;
}

.dm-vippass__label {
	margin: 8px 0 4px;
	font-size: 11px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

.dm-vippass__benefits {
	margin: 0 0 8px;
	padding-left: 18px;
	font-size: 12px;
	line-height: 1.7;
}

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

.dm-vippass__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.dm-vippass__price-value {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: var(--dm-accent-strong);
}

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

.dm-vippass__button {
	width: auto;
	min-width: 120px;
	margin-bottom: 0;
}

.dm-vippass__reason {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--dm-text-sub);
	text-align: right;
}

/* 注意事項（ショップ注意事項マスター。VIPパスのページの下と購入の確認モーダル。2026-11-10 nadv から移植） */
.dm-shopnotice .dm-panel__body {
	font-size: 11px;
	line-height: 1.7;
	color: var(--dm-text-sub);
}

.dm-shopnotice__item + .dm-shopnotice__item {
	margin-top: 8px;
}

/* モーダルの中は見出し＋全文（nadv と同じ。長いときはモーダル全体がスクロールする＝ .dm-modal--tall） */
.dm-shopnotice--modal {
	margin: 0 0 12px;
	border: 1px solid var(--dm-border);
	border-radius: 6px;
	text-align: left;
}

.dm-shopnotice__title {
	padding: 4px 8px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color: var(--dm-accent-strong);
	background: var(--dm-bg-panel-head);
	border-bottom: 1px solid var(--dm-border);
}

.dm-shopnotice__body {
	padding: 6px 8px;
	font-size: 10px;
	line-height: 1.6;
	color: var(--dm-text-sub);
}

/* ---------- イベント（１）ステップ制ダンジョン（2026-11-02。画面設計書が届くまでの仮） ---------- */

.dm-eventdungeon__side {
	display: inline-block;
	margin-left: 4px;
	padding: 0 6px;
	font-size: 10px;
	border: 1px solid var(--dm-border);
	border-radius: 8px;
	color: var(--dm-text-sub);
}

/* 裏ダンジョンの入口（表ダンジョンを突破すると現れる） */
.dm-eventdungeon.is-back {
	background: rgba(208, 69, 90, 0.12);
}

.dm-eventdungeon.is-back .dm-eventdungeon__side {
	border-color: var(--dm-danger);
	color: var(--dm-danger);
}

.dm-eventdungeon.is-closed {
	opacity: 0.6;
}

/* リワードステップは赤で目立たせる（仕様書「ステップの構造詳細」。2026-11-04 画面仕様書 p.42 に合わせて金→赤、
   未到達でも赤のまま） */
.dm-eventstep.is-reward {
	background: rgba(208, 69, 90, 0.30);
	box-shadow: inset 3px 0 0 var(--dm-danger);
}

/* 最下層（その時点の最終ステップ） */
.dm-eventstep.is-final {
	background: rgba(208, 69, 90, 0.30);
	box-shadow: inset 3px 0 0 var(--dm-danger);
}

.dm-eventstep__badge {
	display: inline-block;
	margin-left: 4px;
	padding: 0 6px;
	font-size: 10px;
	font-weight: bold;
	border-radius: 8px;
	background: var(--dm-accent);
	color: var(--dm-bg);
}

.dm-eventstep.is-reward .dm-eventstep__badge,
.dm-eventstep.is-final .dm-eventstep__badge {
	background: var(--dm-danger);
	color: var(--dm-text);
}

.dm-eventstep__reward {
	color: var(--dm-accent-strong);
}

/* 未開放のステップ（5つ先まで。グレー、押せない。2026-11-04 画面仕様書 event1_1_2・p.42）
   リワードステップは未開放でも赤のまま（文字だけ少し落とす） */
.dm-eventstep.is-locked {
	background: rgba(255, 255, 255, 0.10);
	color: var(--dm-text-sub);
}

.dm-eventstep.is-locked.is-reward {
	background: rgba(208, 69, 90, 0.30);
}

/* ステップの一覧は枠の中でスクロールする（画面仕様書 p.42「スクロールして上に戻った場合」）。
   開いたときは直前にクリアしたリワードステップを一番上に出す（位置合わせは steps.phtml の JS） */
.dm-eventsteps__scroll {
	position: relative;
	max-height: 420px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 現在地の印（「最新ステップへ移動」の飛び先） */
.dm-eventstep__current {
	margin-left: 6px;
	color: var(--dm-accent);
	font-size: 12px;
}

/* 裏ダンジョンの最終ステップの周回倍率 */
.dm-eventstep__lap {
	color: var(--dm-danger);
}

.dm-eventsteps__head {
	padding: 8px 12px;
	font-size: 13px;
	text-align: center;
	border-bottom: 1px solid var(--dm-border);
}

.dm-eventsteps__jump {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #7fb2ff;
	text-decoration: underline;
}

/* イベントTOP（event1_1_1） */
/* 一番上の画像（イベントマスターの top_image） */
.dm-eventtop__topimg {
	margin-bottom: 10px;
}

.dm-eventtop__topimg img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.dm-eventtop__name {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

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

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

.dm-eventtop__dungeon-name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 6px;
	font-weight: bold;
}

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

.dm-eventtop__entry > .dm-actions {
	margin: 0 0 2px;
}

.dm-eventtop__caption {
	margin: 0;
	font-size: 12px;
	color: var(--dm-text-sub);
	text-align: center;
}

/* イベント一覧（複数のイベントを同時運用する場合） */
.dm-eventlist__item {
	margin-bottom: 12px;
}

.dm-eventlist__item > .dm-eventbanner {
	margin-bottom: 4px;
}

/* 到達者一覧の見出しの称号名 */
.dm-eventarrivals__title {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: var(--dm-accent-strong);
}

/* ---------- イベント：遊び方（報酬紹介 event1_2_1。画面仕様書 p.43。2026-11-04） ---------- */

.dm-eventtop__howto {
	margin: 4px 0 8px;
	text-align: center;
	font-size: 13px;
}

.dm-eventtop__howto a {
	color: #7fb2ff;
	text-decoration: underline;
}

/* 本文の中の画像（並べて置けるよう inline のまま。幅は本文の style で指定する） */
.dm-eventhowto__text img {
	vertical-align: middle;
	border-radius: 6px;
}

.dm-eventhowto__text h3 {
	margin: 14px 0 6px;
	font-size: 14px;
}

/* 一番上の画像（イベントマスターの howto_image） */
.dm-eventhowto__top {
	margin-bottom: 10px;
}

.dm-eventhowto__top img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.dm-eventhowto__text {
	font-size: 13px;
}