/* ============================================================
   DG9 スタイル（UI品質最優先・横16:9/縦9:16 両対応）
   body.横 / body.縦 クラスでレイアウト切替。
   #ゲーム画面 はJSが基準幅×可変高を設定し zoom でフィットさせる。
   ============================================================ */

:root{
	--金: #c9a24b;
	--金明: #f0d48a;
	--金暗: #8a6c2a;
	--紙: #e8e0cf;
	--闇1: #0b0a12;
	--闇2: #171426;
	--闇3: #241f3a;
	--血: #b3273a;
	--魔紫: #7b4fd0;
	--HP緑: #4fd06a;
	--枠影: 0 0 0 1px rgba(201,162,75,.55), 0 0 14px rgba(0,0,0,.6) inset;
	--serif: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--gothic: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; height:100%; overflow:hidden; background:#000; }
body{
	font-family: var(--gothic);
	color: var(--紙);
	-webkit-user-select:none; user-select:none;
	touch-action: manipulation;
}
.非表示{ display:none !important; }
button{ font-family: inherit; cursor:pointer; }

/* ============ ゲーム画面（zoomフィット対象） ============ */
#ゲーム画面{
	position:absolute; left:50%; top:50%;
	transform: translate(-50%,-50%);
	width:1408px; height:792px;      /* JSが上書き（16:9基準・v0.7.13で1.1倍に緩和） */
	background: radial-gradient(ellipse at 50% 30%, var(--闇3) 0%, var(--闇2) 45%, var(--闇1) 100%);
	overflow:hidden;
	box-shadow: 0 0 40px #000;
}
.画面{ position:absolute; inset:0; }

/* ============================================================
   タイトル画面
   ============================================================ */
#タイトル画面{
	display:flex; align-items:center; justify-content:center;
	background:
		radial-gradient(ellipse at 50% 120%, rgba(123,79,208,.35) 0%, transparent 55%),
		radial-gradient(ellipse at 50% 25%, #2a2344 0%, #14101f 55%, #070510 100%);
}
/* 奥のヘブライ文字魔法陣（SVG多層・各環が別速度で回転） */
#タイトル背景装飾{
	position:absolute; left:50%; top:52%; width:900px; height:900px;
	transform: translate(-50%,-50%);
	pointer-events:none;
	filter: drop-shadow(0 0 14px rgba(123,79,208,.35));
}
#タイトル背景装飾 svg{ width:100%; height:100%; overflow:visible; }
#タイトル背景装飾 .魔陣環{ transform-box: fill-box; transform-origin: center; }
.魔陣外環{ animation: 魔法陣回転 150s linear infinite; }
.魔陣中環{ animation: 魔法陣逆回転 95s linear infinite; }
.魔陣内環{ animation: 魔法陣回転 55s linear infinite; }
@keyframes 魔法陣回転{ to{ transform: rotate(360deg); } }
@keyframes 魔法陣逆回転{ to{ transform: rotate(-360deg); } }
.魔陣文字{ fill: rgba(224,196,128,.30); letter-spacing: .35em; }
.魔陣文字.大{ font-size: 40px; }
.魔陣文字.中{ font-size: 32px; fill: rgba(200,170,220,.26); }
.魔陣文字.小{ font-size: 26px; letter-spacing: .2em; }

#タイトル中身{
	position:relative; text-align:center; z-index:1;
	display:flex; flex-direction:column; align-items:center; gap:14px;
	padding:20px;
}
/* デモンズゲート＝サブタイトル扱い: ロゴは後ろに薄く・9は右下に小さく（v0.7.4 仕様書97-99行） */
#タイトルロゴ組{
	position:relative;
	width: 300px; max-width:62%;
	opacity:.5;
	margin-bottom:-18px;	/* メインタイトルが手前に軽く重なる＝ロゴが「後ろ」 */
	pointer-events:none;
}
#タイトルロゴ{
	width: 100%;
	/* 黒ロゴ→白抜き反転し、白背景は screen 合成で消す */
	filter: invert(1) drop-shadow(0 0 18px rgba(123,79,208,.8));
	mix-blend-mode: screen;
}
#タイトルナンバー{
	position:absolute; right:12%; bottom:27%;	/* GATE文字の右下（ロゴ画像は下部に飾り余白あり） */
	font-family: var(--serif);
	font-size: 24px; line-height:1; font-weight:bold;
	color: transparent;
	background: linear-gradient(180deg, var(--金明) 15%, var(--金) 55%, var(--金暗) 100%);
	-webkit-background-clip: text; background-clip: text;
}
/* メインタイトル「女魔王様、勇者を演じる」（英題 Demon Queen's Hero Act） */
#タイトルメイン{
	position:relative; z-index:1;
	white-space:nowrap;
	font-family: var(--serif);
	font-size: 46px; line-height:1.25; font-weight:bold;
	letter-spacing:.12em; text-indent:.12em;
	color: transparent;
	background: linear-gradient(180deg, #ffffff 0%, var(--金明) 38%, var(--金) 72%, var(--金暗) 100%);
	-webkit-background-clip: text; background-clip: text;
	filter: drop-shadow(0 0 16px rgba(123,79,208,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.85));
}
body.縦 #タイトルメイン{ font-size: 29px; letter-spacing:.08em; text-indent:.08em; }	/* 縦480px基準幅で英題も収まるサイズ */

#タイトルメニュー{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.タイトルボタン主{
	font-family: var(--serif);
	font-size: 26px; letter-spacing:.5em; text-indent:.5em;
	padding: 14px 64px;
	color: var(--金明);
	background: linear-gradient(180deg, #3a2f55 0%, #241d3a 60%, #171226 100%);
	border: 1px solid var(--金);
	border-radius: 4px;
	box-shadow: 0 0 18px rgba(201,162,75,.25), 0 4px 12px rgba(0,0,0,.6);
	transition: .2s;
}
.タイトルボタン主:hover{
	color:#fff; border-color: var(--金明);
	box-shadow: 0 0 26px rgba(240,212,138,.55), 0 4px 12px rgba(0,0,0,.6);
	transform: translateY(-1px);
}

#比率選択{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.比率見出し{ font-size:12px; color:#9c93b8; letter-spacing:.2em; }
#比率ボタン列{ display:flex; gap:14px; }
.比率ボタン{
	display:flex; align-items:center; gap:10px;
	font-size:14px; color:var(--紙);
	padding:10px 18px;
	background: rgba(23,20,38,.8);
	border:1px solid #4a4168; border-radius:4px;
	transition:.15s;
}
.比率ボタン:hover{ border-color:var(--金); }
.比率ボタン.選択中{
	border-color: var(--金明); color:var(--金明);
	box-shadow: 0 0 12px rgba(201,162,75,.4);
	background: rgba(58,47,85,.9);
}
.比率絵{ display:inline-block; border:2px solid currentColor; border-radius:2px; }
.横絵{ width:28px; height:16px; }
.縦絵{ width:16px; height:28px; }
#タイトル版数{ margin-top:16px; font-size:12px; color:#6a628a; letter-spacing:.15em; }
#タイトル法務{ margin-top:6px; font-size:11px; }	/* v1.1.23 カード会社がトップから特商法表記に辿れるように（Omise 審査 10/06） */
#タイトル法務 a{ color:#6a628a; }

/* ============================================================
   バトル画面（共通）
   ============================================================ */
#バトル画面{ display:flex; flex-direction:column; }

/* ---- ヘッダ ---- */
#バトルヘッダ{
	flex:0 0 58px;
	display:flex; align-items:center; justify-content:space-between;
	padding: 0 12px;
	background: linear-gradient(180deg, rgba(36,31,58,.95), rgba(18,15,30,.95));
	border-bottom:1px solid rgba(201,162,75,.4);
	box-shadow: 0 2px 10px rgba(0,0,0,.5);
	z-index:5;
}
/* lv10メニュー（#ログインバー、fixed）との重なり回避。実余白はjs/750_lv10連携.jsがJSで算出 */
:root{ --lv10メニュー余白: 0px; }
#ヘッダ左{ display:flex; align-items:center; gap:14px; min-width:0; margin-left:var(--lv10メニュー余白); transition:margin-left .15s; }
/* exe版(Steam)はlv10メニューをログインアイコン(#top_user_icon)のみに制限（v0.8.12・js/750_lv10連携.jsがhtmlへ付与）
   ハンバーガー/フォロー/歯車アイコンとサイドバー（他ゲーム一覧を含む）を非表示。#展開コンテンツはログインパネル表示に使うため対象外 */
html.lv10メニュー制限 #ログインバー .機能アイコン:not(#top_user_icon){ display:none !important; }
html.lv10メニュー制限 #左サイドバー{ display:none !important; }
#ステージ名銘板{
	padding: 4px 14px;
	background: linear-gradient(180deg,#2c2547,#1a1530);
	border:1px solid var(--金暗); border-radius:3px;
	white-space:nowrap;
}
#ステージ番号表示{ font-family:var(--serif); font-size:15px; color:var(--金明); font-weight:bold; }
#ステージ地名表示{ font-size:12px; color:#b0a8c8; }
#討伐ゲージ外枠{
	position:relative; width:170px; height:20px;
	background:#100d1d; border:1px solid #4a4168; border-radius:10px; overflow:hidden;
}
#討伐ゲージ{
	position:absolute; inset:0; width:0%;
	background: linear-gradient(90deg, #6a3fb0, var(--魔紫));
	transition: width .25s;
}
#討伐ゲージ文字{
	position:absolute; inset:0; text-align:center;
	font-size:12px; line-height:19px; color:#fff; text-shadow:0 1px 2px #000;
}
#ヘッダ右{ display:flex; align-items:center; gap:12px; }
.資源表示{
	display:flex; align-items:center; gap:5px;
	font-size:15px; font-weight:bold; color:var(--紙);
	text-shadow: 0 1px 2px #000;
	white-space:nowrap;
}
.資源アイコン{ font-size:15px; }
#経験値バー外{ width:70px; height:5px; background:#100d1d; border-radius:3px; overflow:hidden; }
#経験値バー{ width:0%; height:100%; background:linear-gradient(90deg,#3fb06a,#7ee6a0); transition:width .25s; }
#省エネボタン{
	font-size:12px; padding:6px 10px;
	color:#b0a8c8; background:#1a1530;
	border:1px solid #4a4168; border-radius:3px;
}
#省エネボタン:hover{ color:var(--金明); border-color:var(--金); }

/* ---- 中央 ---- */
#バトル中央{ flex:1; display:flex; min-height:0; }
#フィールド枠{ position:relative; flex:1; min-width:0; }
#バトルCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#ボスHPバー外{
	position:absolute; top:10px; left:50%; transform:translateX(-50%);
	width: 62%; z-index:3; text-align:center;
}
#ボス名前{
	font-family:var(--serif); font-size:15px; color:#ffb0b0; font-weight:bold;
	text-shadow:0 0 6px #000, 0 0 12px rgba(179,39,58,.8);
	margin-bottom:3px; letter-spacing:.2em;
}
#ボスHPバー枠{
	height:12px; width:100%;
	background: rgba(16,13,29,.8);
	border:1px solid #ffb0b0; border-radius:6px;
	box-shadow: 0 0 10px rgba(179,39,58,.6);
	overflow:hidden;
}
#ボスHPバー{
	height:100%; width:100%;
	background: linear-gradient(90deg, #d03a3a, #7e1622);
	transition: width .2s;
}
#オート表示ランプ{
	position:absolute; right:12px; top:10px; z-index:3;
	font-size:12px; font-weight:bold; letter-spacing:.2em;
	color:#7ee6a0; border:1px solid #3fb06a; border-radius:3px;
	padding:2px 10px;
	background: rgba(10,20,12,.55);
	text-shadow:0 0 6px rgba(126,230,160,.8);
}
#オート表示ランプ.手動中{
	color:#ffd27e; border-color:#c9a24b; text-shadow:0 0 6px rgba(240,212,138,.8);
}

/* ---- サイドパネル（横モードのみ） ---- */
#サイドパネル{
	flex: 0 0 264px;	/* v0.7.13 基準1.1倍化に合わせ288→264（文字の収まり改善と可読性の両立） */
	display:flex; flex-direction:column;
	background: linear-gradient(180deg, rgba(24,20,40,.96), rgba(14,11,24,.96));
	border-left:1px solid rgba(201,162,75,.35);
	padding: 8px;
	gap:6px;
	min-height:0;
}
.サイド見出し{
	font-family:var(--serif); font-size:13px; color:var(--金);
	letter-spacing:.25em; padding:4px 2px 2px;
	border-bottom:1px solid rgba(201,162,75,.3);
}

/* ---- サイドタブ（強化/ステージ） ---- */
#サイドタブ列{ display:flex; gap:4px; }
.サイドタブ{
	flex:1; font-size:12px; padding:7px 1px;
	white-space:nowrap; overflow:hidden;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:4px 4px 0 0; border-bottom:none;
}
.サイドタブ.選択中{
	color:var(--金明); background:linear-gradient(180deg,#3a2f55,#241f3a);
	border-color:var(--金暗);
	text-shadow:0 0 8px rgba(240,212,138,.5);
}
.タブ面{ flex:1.4; display:flex; flex-direction:column; gap:6px; min-height:0; overflow:hidden; }

/* ---- 強化パネル ---- */
/* 能力/才能サブ切替（強化タブ内 v0.5.3） */
#成長切替{ display:flex; gap:6px; }
.成長ボタン{
	flex:1; font-size:12px; font-weight:bold; padding:5px 0;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.成長ボタン.選択中{
	color:var(--金明); border-color:var(--金);
	box-shadow:0 0 8px rgba(201,162,75,.35);
	background:#2c2547;
}
#才能面{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; }
#才能面.非表示{ display:none; }
#強化リスト.非表示{ display:none; }
#才能情報行{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#才能コイン表示{ font-size:13px; font-weight:bold; color:var(--金明); }
#才能リセットボタン{
	font-size:11.5px; padding:4px 10px;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
#才能リスト{ flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:4px; }

#倍率切替{ display:flex; gap:6px; }
.倍率ボタン{
	flex:1; font-size:12px; font-weight:bold; padding:5px 0;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.倍率ボタン.選択中{
	color:var(--金明); border-color:var(--金);
	box-shadow:0 0 8px rgba(201,162,75,.35);
	background:#2c2547;
}
#強化リスト{ flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:4px; }
.強化行{
	display:flex; align-items:center; gap:8px;
	padding:6px 8px;
	background:linear-gradient(180deg, rgba(44,37,71,.6), rgba(27,23,48,.6));
	border:1px solid #3a3358; border-radius:4px;
}
.強化アイコン{
	width:30px; height:30px; flex:0 0 30px;
	display:flex; align-items:center; justify-content:center;
	font-size:16px;
	background:radial-gradient(circle at 35% 30%, #352c56, #14101f);
	border:1px solid var(--金暗); border-radius:5px;
}
.強化情報{ flex:1; min-width:0; }
.強化名{ font-size:12px; color:var(--紙); white-space:nowrap; }
.強化名 b{ color:var(--金明); margin-left:4px; }
.強化Lv{ font-size:11.5px; color:#9c93b8; }
.強化ボタン{
	flex:0 0 74px;
	font-size:12px; line-height:1.35; padding:5px 4px;
	color:#666; background:#14101f;
	border:1px solid #3a3358; border-radius:4px;
	text-align:center;
	transition:.12s;
}
.強化ボタン .強化コスト{ display:block; font-weight:bold; }
.強化ボタン.買える{
	color:#ffe9b0; border-color:var(--金);
	background:linear-gradient(180deg,#4a3c20,#2c2410);
	box-shadow:0 0 10px rgba(201,162,75,.3);
	cursor:pointer;
}
.強化ボタン.買える:hover{ filter:brightness(1.25); }
.強化ボタン.買える:active{ transform:scale(.95); }
.強化ボタン.上限{ color:#7ee6a0; border-color:#3fb06a; }

/* ---- 装備タブ ---- */
#部位切替{ display:flex; gap:6px; }
.部位ボタン{
	flex:1; font-size:12px; font-weight:bold; padding:5px 0;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.部位ボタン.選択中{
	color:var(--金明); border-color:var(--金);
	background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
#ガチャ行{
	display:flex; align-items:center; gap:8px;
	padding:6px 8px;
	background:linear-gradient(180deg, rgba(58,47,85,.55), rgba(27,23,48,.55));
	border:1px solid var(--金暗); border-radius:4px;
}
#ガチャ情報{ flex:1; min-width:0; }
#ガチャLv表示{ font-size:12px; color:var(--金明); font-weight:bold; }
#ガチャゲージ外{ height:5px; background:#100d1d; border-radius:3px; overflow:hidden; margin-top:3px; }
#ガチャゲージ{ height:100%; width:0%; background:linear-gradient(90deg,#6a3fb0,var(--魔紫)); }
#ガチャ10ボタン{
	flex:0 0 64px;
	font-size:12px; font-weight:bold; line-height:1.3; padding:6px 4px;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
	box-shadow:0 0 10px rgba(201,162,75,.3);
}
#ガチャ10ボタン:disabled{ color:#666; border-color:#3a3358; background:#14101f; box-shadow:none; cursor:default; }
#ガチャ10ボタン:not(:disabled):hover{ filter:brightness(1.25); }
/* v1.0.7 一括ガチャ（1000/1万/10万連）: 溜め込んだ在庫を1クリックで消費する。10連ボタンと区別できるよう紫系にする */
.ガチャ一括ボタン{
	flex:0 0 72px;
	font-size:11.5px; font-weight:bold; line-height:1.3; padding:6px 4px;
	color:#f0d9ff; background:linear-gradient(180deg,#4a2a6a,#2a1840);
	border:1px solid #b07fe0; border-radius:4px;
	box-shadow:0 0 10px rgba(176,127,224,.35);
}
.ガチャ一括ボタン:hover{ filter:brightness(1.25); }
.ガチャ一括ボタン.非表示{ display:none; }
/* 長押し1秒でフルオート連打（押している間、徐々に発光→発動でパルス点滅。ガチャ/装備強化/能力/才能/拠点施設 共通 v0.2.9・発火1秒化はv0.7.2） */
.長押しオート:not(:disabled):active{ transition:box-shadow 1s linear; box-shadow:0 0 0 3px rgba(255,255,255,.7) inset; }
.長押しオート.オート中{
	border-color:#ff8fd6 !important;
	animation:長押しオートパルス .6s ease-in-out infinite alternate;
}
@keyframes 長押しオートパルス{ from{ filter:brightness(1); } to{ filter:brightness(1.4); } }
#ガチャコイン表示{ font-size:11.5px; font-weight:normal; }
#装備グリッド{
	display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;
	grid-auto-rows:52px;	/* 固定行高（aspect-ratioはパネル幅次第で枠と中身がズレるため廃止） */
	overflow-y:auto; min-height:0; flex:1;
	align-content:start;
}
.装備マス{
	position:relative;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	overflow:hidden;
	background:radial-gradient(circle at 35% 30%, #241f3a, #100d1d);
	border:1px solid #3a3358; border-radius:4px;
	cursor:pointer;
	font-size:11.5px; color:#9c93b8;
}
.装備マス.未所持{ opacity:.35; }
.装備マス.選択中{ outline:2px solid var(--金明); }
.装備マス.装着中::after{
	content:'E'; position:absolute; left:2px; top:1px;
	font-size:11px; font-weight:bold; color:#7ee6a0;
}
.装備グレード{ font-family:var(--serif); font-size:15px; font-weight:bold; color:inherit; }
.装備数{ font-size:11px; }
.装備数.合成可{ color:#7ee6a0; font-weight:bold; }
.装備Lv{ position:absolute; right:2px; top:1px; font-size:8px; color:#6a628a; }
#素材行{
	display:flex; gap:4px; flex-wrap:wrap;
	padding:4px 6px;
	background:rgba(20,16,31,.8); border:1px solid #3a3358; border-radius:4px;
}
.素材項目{ font-size:11.5px; color:#c8c0dc; white-space:nowrap; }
#装備詳細{
	padding:6px 8px; font-size:12px; line-height:1.6;
	background:rgba(36,31,58,.7); border:1px solid var(--金暗); border-radius:4px;
	color:#c8c0dc;
}
#装備詳細 .装備詳細名{ font-weight:bold; font-size:12px; }
#装備詳細ボタン行{ display:flex; gap:6px; margin-top:4px; }
#装備詳細ボタン行 button{
	flex:1; font-size:12px; padding:5px 2px;
	color:var(--紙); background:#241f3a;
	border:1px solid #4a4168; border-radius:3px;
}
#装備詳細ボタン行 button:not(:disabled):hover{ border-color:var(--金); color:var(--金明); }
#装備詳細ボタン行 button:disabled{ color:#555; cursor:default; }
#装備操作行{ display:flex; gap:6px; align-items:center; }
#装備操作行 button{
	flex:1; font-size:12px; padding:7px 0;
	color:var(--紙); background:#241f3a;
	border:1px solid #4a4168; border-radius:4px;
}
#装備操作行 button:hover{ border-color:var(--金); color:var(--金明); }
#強化石表示{ font-size:12px; color:#e8b98a; white-space:nowrap; padding:0 4px; }

#ステージリスト{ flex:1; overflow-y:auto; min-height:0; }
.ステージ周回章{ font-size:11px; color:#7ee6a0; margin-left:4px; }
/* そのステージで採れる素材（v1.0.1・Steam掲示板の要望） */
.ステージ素材{ font-size:11px; margin-left:4px; opacity:.85; }
.ステージ項目.ノベル項目{
	color:#d9b8e8;
	border-color:rgba(157,120,232,.35);
	background:rgba(58,40,85,.45);
}
.ステージ項目.ノベル項目:hover{ border-color:var(--魔紫); color:#f0e0fa; }
.ステージ項目{
	display:flex; justify-content:space-between; align-items:center;
	font-size:12px; padding:5px 8px; margin:2px 0;
	background:rgba(36,31,58,.5); border:1px solid transparent; border-radius:3px;
	cursor:pointer; color:#c8c0dc;
}
.ステージ項目:hover{ border-color:#4a4168; }
.ステージ項目.現在地{ border-color:var(--金); color:var(--金明); background:rgba(58,47,85,.7); }
.ステージ項目.未到達{ opacity:.35; cursor:default; }
.ステージ状態章{ font-size:11.5px; white-space:nowrap; margin-left:6px; }
/* 挑戦ステージ（ネームド撃破/ダンジョン攻略 v0.2.11） */
.ステージ節見出し{
	font-size:12px; color:var(--金明); margin:8px 0 2px;
	padding:3px 8px; border-bottom:1px solid rgba(201,162,75,.35);
}
.ステージ項目.挑戦項目{
	color:#e8c9a8;
	border-color:rgba(201,162,75,.25);
	background:rgba(72,54,36,.4);
}
.ステージ項目.挑戦項目:hover{ border-color:var(--金); color:#ffe9c9; }
.ステージ項目.挑戦項目.未到達:hover{ border-color:transparent; color:#e8c9a8; }
.ステージ項目.仲魔済み{ opacity:.55; cursor:default; }
.ステージ項目.仲魔済み .ステージ状態章{ color:#7ee6a0; }
.挑戦報酬{ display:block; font-size:11px; opacity:.75; }
/* OP: 魔王の波動クリック誘導（スキル枠0だけ金色に明滅 v0.2.12） */
.スキル枠.OP誘導{
	border-color: var(--金明);
	animation: OP誘導光 0.9s ease-in-out infinite;
	z-index: 5;
}
@keyframes OP誘導光{
	0%,100%{ box-shadow: 0 0 8px 2px rgba(240,212,138,.35); }
	50%{ box-shadow: 0 0 22px 8px rgba(240,212,138,.95); }
}
#戦闘ログ{
	flex:1; overflow-y:auto; min-height:0;
	font-size:12px; line-height:1.6; color:#9c93b8;
	padding:4px 2px;
}
#戦闘ログ .ログ強調{ color:var(--金明); }
#戦闘ログ .ログ悪報{ color:#ff8f9e; }

/* ---- 下部UI ---- */
#バトル下部{
	flex:0 0 64px;
	display:flex; align-items:center; justify-content:space-between;
	gap:10px;
	padding: 0 12px;
	background: linear-gradient(0deg, rgba(36,31,58,.95), rgba(18,15,30,.95));
	border-top:1px solid rgba(201,162,75,.4);
	z-index:5;
}
#下部左{ display:flex; align-items:center; gap:12px; }
#オートボタン{
	font-size:15px; font-weight:bold; letter-spacing:.15em;
	padding: 9px 20px;
	color:#666; background:#14101f;
	border:1px solid #4a4168; border-radius:4px;
	transition:.15s;
}
#オートボタン.点灯{
	color:#7ee6a0; border-color:#3fb06a;
	box-shadow: 0 0 12px rgba(63,176,106,.4);
	text-shadow: 0 0 8px rgba(126,230,160,.7);
}
#周回チェック行{
	display:flex; align-items:center; gap:6px;
	font-size:12px; color:#b0a8c8; cursor:pointer;
	white-space:nowrap;
}
#周回チェック行 input{ accent-color: var(--金); width:16px; height:16px; cursor:pointer; }

#スキル枠列{ display:flex; gap:8px; }
.スキル枠{
	position:relative;
	width:46px; height:46px;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--serif); font-size:16px; color:#4a4168;
	background: radial-gradient(circle at 35% 30%, #241f3a, #100d1d);
	border:1px solid #3a3358; border-radius:6px;
	overflow:hidden;
}
.スキル枠.空{ opacity:.55; }
.スキル枠[data-スキル]{
	cursor:pointer;
	border-color:var(--魔紫);
	box-shadow:0 0 10px rgba(123,79,208,.35);
}
.スキル枠[data-スキル]:hover{ border-color:var(--金明); }
.スキルアイコン{ font-size:24px; text-shadow:0 0 10px rgba(123,79,208,.9); }
.スキルCD{
	position:absolute; left:0; bottom:0; width:100%; height:0%;
	background:rgba(10,7,20,.78);
	pointer-events:none;
}
.スキル枠.発動可{ animation:スキル明滅 1.2s ease-in-out infinite; }
@keyframes スキル明滅{
	0%,100%{ box-shadow:0 0 8px rgba(123,79,208,.35); }
	50%{ box-shadow:0 0 18px rgba(157,120,232,.85); }
}
.スキル枠番{
	position:absolute; left:2px; bottom:1px;
	font-size:8px; color:#6a628a;
}
/* 倍速ボタン（黄=2倍/赤=3倍・1日上限制） */
.倍速ボタン{
	display:flex; align-items:center; gap:3px;
	font-size:14px; padding:6px 8px;
	background:#14101f; border-radius:4px;
	white-space:nowrap;
}
.倍速ボタン .倍速残{ font-size:11.5px; }
.倍速ボタン.黄{ color:#ffd24b; border:1px solid #8a6c2a; }
.倍速ボタン.赤{ color:#ff6b7e; border:1px solid #7e1622; }
.倍速ボタン.作動中.黄{ background:#3a2f10; box-shadow:0 0 12px rgba(255,210,75,.55); animation:倍速明滅 1s ease-in-out infinite; }
.倍速ボタン.作動中.赤{ background:#3a1016; box-shadow:0 0 12px rgba(255,107,126,.55); animation:倍速明滅 .7s ease-in-out infinite; }
.倍速ボタン:disabled{ opacity:.35; cursor:default; }
@keyframes 倍速明滅{ 50%{ filter:brightness(1.4); } }
/* タブ「技」 */
/* 仲間の出撃交換ボタン列（技タブ上部・スキル帳はキャラ別） */
#仲間列{ display:flex; flex-wrap:wrap; gap:4px; }	/* 仲魔が増えたら折り返す */
.仲間ボタン{
	flex:1 0 21%; min-width:0; max-width:25%;
	display:flex; flex-direction:column; align-items:center; gap:1px;
	padding:4px 0 3px;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.仲間ボタン .仲間絵{ font-size:16px; line-height:1; }
.仲間ボタン .仲間名{ font-size:11px; white-space:nowrap; overflow:hidden; max-width:100%; }
.仲間ボタン.出撃中{
	color:var(--金明); border-color:var(--金);
	background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
.仲間ボタン.ロック{ opacity:.45; }
.仲間ボタン .編成章{
	font-style:normal; font-size:11px; color:#7ee6a0;
	position:relative; top:-6px; margin-left:1px;
}
/* 選択中キャラ情報（個別Lv・固有技・編成トグル） */
#キャラ情報行{
	display:flex; flex-direction:column; gap:3px;
	padding:6px 8px; font-size:12px;
	background:rgba(44,37,71,.5); border:1px solid #3a3358; border-radius:4px;
}
.キャラ情報名{ font-weight:bold; color:var(--金明); }
.キャラ情報補{ font-size:11px; color:#9c93b8; line-height:1.4; }
#編成トグルボタン{
	margin-top:2px; padding:5px; font-size:12px; font-weight:bold;
	color:#c9f2d4; background:#14321c;
	border:1px solid #2f7e46; border-radius:3px;
}
#編成トグルボタン.編成解除{ color:#f2c9c9; background:#321414; border-color:#7e2f2f; }
#スキルガチャ行{
	display:flex; align-items:center; gap:8px;
	padding:6px 8px;
	background:linear-gradient(180deg, rgba(58,47,85,.55), rgba(27,23,48,.55));
	border:1px solid var(--金暗); border-radius:4px;
}
#スキルガチャ情報{ flex:1; min-width:0; }
#スキルコイン表示{ font-size:13px; font-weight:bold; color:var(--金明); }
.スキルガチャ注記{ display:block; font-size:11px; color:#9c93b8; line-height:1.4; }
#スキルガチャボタン{
	flex:0 0 64px;
	font-size:12px; font-weight:bold; line-height:1.3; padding:6px 4px;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}
#スキルガチャボタン:disabled{ color:#666; border-color:#3a3358; background:#14101f; cursor:default; }
#スキル一覧{ flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:4px; }
.スキル行{ cursor:pointer; }
.スキル行.未所持{ opacity:.4; cursor:default; }
.スキル行.装着中{ border-color:var(--金); box-shadow:0 0 8px rgba(201,162,75,.3); }
.スキル行 .強化名 b{ font-size:11.5px; color:#7ee6a0; margin-left:6px; }

#下部右{ min-width:0; display:flex; align-items:center; gap:10px; }
#パネル開閉ボタン{
	display:none;
	font-size:13px; padding:8px 14px;
	color:var(--金明); background:#241f3a;
	border:1px solid var(--金暗); border-radius:4px;
}
#操作ヒント{ font-size:11.5px; color:#6a628a; text-align:right; line-height:1.5; }
#スキル自動行{
	display:flex; align-items:center; gap:6px;
	font-size:12px; color:#b0a8c8; cursor:pointer;
	white-space:nowrap;
}
#スキル自動行 input{ accent-color: var(--魔紫); width:16px; height:16px; cursor:pointer; }

/* ============================================================
   縦モード（9:16）での差分（サイドパネルは右ドロワー化）
   ============================================================ */
body.縦 #サイドパネル{
	position:absolute; right:0; top:0; bottom:0;
	width:min(300px, 82%);
	z-index:20;
	transform:translateX(105%);
	transition:transform .25s;
	box-shadow:-6px 0 24px rgba(0,0,0,.7);
}
body.縦 #サイドパネル.開いた{ transform:translateX(0); }
body.縦 #パネル開閉ボタン{ display:block; position:relative; z-index:30; }

/* 縦ドロワーの閉じ導線: 上部の閉じるバー＋パネル外クリック幕 */
#ドロワー閉じるバー, #ドロワー幕{ display:none; }
body.縦 #ドロワー閉じるバー{
	display:block; flex:0 0 auto;
	order:99; margin-top:4px;	/* 最下部=開く「強化」ボタンと同じ側でUX統一 */
	text-align:center; padding:10px;
	font-size:14px; font-weight:bold; letter-spacing:.2em;
	color:var(--金明); background:linear-gradient(180deg,#3a2f55,#241f3a);
	border:1px solid var(--金暗); border-radius:4px;
	cursor:pointer;
}
body.縦 #ドロワー幕.表示{
	display:block;
	position:absolute; inset:0; z-index:19;	/* ドロワー(20)の下・他UIの上 */
	background:rgba(0,0,0,.45);
}
body.縦 #バトルヘッダ{ flex-wrap:wrap; height:auto; flex-basis:auto; padding:6px 8px; gap:4px; }
/* スマホ縦は資源表示(Lv/ゴールド/強化石)とボタン列(📊📔🏰⚙🔅)が右へはみ出すため折り返す */
/* v0.8.62(C4): 折り返しは効いていたが、そのせいで**ヘッダ高さが119px＝画面の13%**を食っていた（414x896実測）。
   しかも 🏰拠点ボタン は魔王城解放まで非表示で、解放されると更に折り返して悪化する。
   HTMLは触らず、余白・文字サイズ・経験値バー幅を詰めて **🏰込みでも1行に収まる** ようにする。 */
body.縦 #ヘッダ右{ flex-wrap:wrap; justify-content:flex-end; gap:6px; row-gap:4px; }
body.縦 .資源表示{ font-size:13px; gap:3px; }
body.縦 .資源アイコン{ font-size:13px; }
body.縦 #経験値バー外{ width:46px; }
body.縦 #ヘッダ右 button{ padding-left:6px; padding-right:6px; }
body.縦 #省エネボタン{ font-size:11px; padding:5px 6px; }
/* lv10メニュー・ミニプレーヤーはスマホ縦(9:16)では常に非表示（ユーザー指示 v0.8.9・js/750_lv10連携.jsのJS制御に加えCSS側でも二重に保険） */
body.縦 #lv10-minibar{ display:none !important; }
body.縦 #ログインバー, body.縦 #左サイドバー, body.縦 #展開コンテンツ{ display:none !important; }
body.縦 #討伐ゲージ外枠{ width:120px; }
body.縦 #バトル下部{ flex-wrap:wrap; height:auto; flex-basis:auto; padding:6px 8px; gap:6px; justify-content:center; }
body.縦 #操作ヒント{ display:none; }
body.縦 .スキル枠{ width:42px; height:42px; }

/* ============================================================
   省エネモード画面
   ============================================================ */
/* 設定モーダル（言語・SE/BGM音量・BGMタイプ） */
#設定幕{
	position:absolute; inset:0; z-index:32;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#設定幕.非表示{ display:none; }
#設定窓{
	/* v1.0.3: DLC購入ボタン＋コミュニティタブの追加で400pxでは窮屈になったため拡幅（ユーザー依頼2026-08-18） */
	width:min(560px, 94%);
	max-height:85vh; overflow-y:auto;
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:12px;
}
#設定見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
/* 設定タブ（v0.8.6・DLC等の項目増加で縦に伸び閉じるボタンへ届かなくなる問題への対策） */
#設定タブ列{ display:flex; gap:4px; }
.設定タブ{
	flex:1; font-size:12px; font-weight:bold; padding:6px 2px;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.設定タブ.選択中{
	color:var(--金明); border-color:var(--金); background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
.設定タブ面{ display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto; }
.設定タブ面.非表示{ display:none; }
.設定行{ display:flex; align-items:center; gap:8px; font-size:12px; }
.設定名{ flex:0 0 110px; color:#cfc8e8; }
.設定行 input[type=range]{ flex:1; accent-color:#c9a24b; }
.設定行 b{ flex:0 0 38px; text-align:right; color:var(--金明); }
.設定選択列{ display:flex; gap:4px; flex:1; }
.設定選択ボタン{
	flex:1; font-size:12px; padding:5px 2px;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.設定選択ボタン.選択中{
	color:var(--金明); border-color:var(--金); background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
.設定行縦{ flex-direction:column; align-items:stretch; gap:5px; }
.設定行縦 .設定名{ flex:0 0 auto; }
#倍速常時1_5ラベル{ display:flex; align-items:center; gap:6px; font-size:12px; color:#b0a8c8; cursor:pointer; }
#倍速常時1_5ラベル input{ accent-color:var(--金); width:16px; height:16px; cursor:pointer; }
#DLC一覧表{ display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; }
.DLC行{ font-size:12px; line-height:1.4; align-items:center; gap:8px; }
.DLC行 small{ color:#9c93b8; }
.DLC行.DLC所有済み{ opacity:.6; }
.DLC行.DLC所有済み b{ color:#7ee6a0; }
.DLC支援案内{ font-size:12px; text-align:right; padding:2px 4px 6px; }
.DLC支援案内 a{ color:#f0d48a; }
/* v1.0.3: 未所有DLCの購入ボタン（押すとSteamオーバーレイでストアが開く） */
.DLC購入ボタン{
	flex:0 0 auto; min-width:74px; padding:5px 8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px; cursor:pointer;
}
.DLC購入ボタン:hover{ background:linear-gradient(180deg,#6a5630,#3c3018); }
.DLC購入ボタン:disabled{ opacity:.4; cursor:default; }
.設定注記小{ font-size:11px; color:#9c93b8; line-height:1.5; }
/* v1.0.3: コミュニティ導線（ハブ／ディスカッション／レビュー） */
#コミュニティ列{ display:flex; flex-direction:column; gap:6px; }
.コミュニティボタン{
	display:flex; align-items:center; gap:10px; width:100%; text-align:left;
	padding:8px 10px; color:#cfc8e8; background:#14101f;
	border:1px solid #3a3358; border-radius:4px; cursor:pointer;
}
.コミュニティボタン:hover{ color:var(--金明); border-color:var(--金); background:#2c2547; }
.コミュニティボタン .コミュ絵{ font-size:18px; flex:0 0 auto; }
.コミュニティボタン .コミュ文{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
/* 上位の「.設定行 b{flex:0 0 38px; text-align:right}」を打ち消す（38px幅に潰れて折り返される） */
.コミュニティボタン .コミュ文 b{ flex:0 1 auto; font-size:12.5px; text-align:left; color:inherit; }
.コミュニティボタン .コミュ文 small{ font-size:11px; color:#8a7fb0; }
.コミュニティボタン:hover .コミュ文 small{ color:#cfc8e8; }
.BGMタイプ列{ display:flex; flex-direction:column; gap:5px; }
.BGMタイプボタン{
	display:flex; flex-direction:column; align-items:flex-start; gap:1px;
	padding:5px 8px; text-align:left;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:4px;
}
.BGMタイプボタン .BGMタイプ名{ font-size:12px; font-weight:bold; }
.BGMタイプボタン .BGMタイプ説明{ font-size:11.5px; color:#7a7295; }
.BGMタイプボタン .BGMタイプ容量{ font-size:11px; color:#8a7fb0; }
.BGMタイプボタン.選択中{
	color:var(--金明); border-color:var(--金); background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
.BGMタイプボタン.選択中 .BGMタイプ説明{ color:#cfc8e8; }
.BGMタイプボタン.選択中 .BGMタイプ容量{ color:var(--金明); }
#設定注記{ font-size:11px; color:#9c93b8; text-align:center; }
#設定閉じるボタン{
	padding:8px; font-size:13px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}
#設定ボタン{
	font-size:14px; padding:4px 8px;
	color:#cfc8e8; background:#1b1730;
	border:1px solid #3a3358; border-radius:4px;
}

/* 記録計（入手記録の常設集計 v0.5.2） */
#記録計ボタン{
	font-size:14px; padding:4px 8px;
	color:#cfc8e8; background:#1b1730;
	border:1px solid #3a3358; border-radius:4px;
}
#記録計幕{
	position:absolute; inset:0; z-index:31;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#記録計幕.非表示{ display:none; }
#記録計窓{
	width:min(380px, 88%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:10px;
}
#記録計見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#記録計説明{ font-size:11.5px; color:#9c93b8; text-align:center; }
#記録計表{ display:flex; flex-direction:column; gap:4px; max-height:300px; overflow-y:auto; }
.記録行{
	display:flex; justify-content:space-between; font-size:12px;
	padding:4px 8px; background:rgba(44,37,71,.5); border-radius:3px;
}
.記録行 b{ color:var(--金明); }
.記録行.記録空{ justify-content:center; color:#9c93b8; }
#記録計操作行{ display:flex; gap:8px; }
#記録計操作行 button{
	flex:1; padding:8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}
#記録計リセットボタン{ filter:saturate(.4); }

/* 討伐アルバム（敵図鑑 v0.6.2） */
#図鑑ボタン{
	font-size:14px; padding:4px 8px;
	color:#cfc8e8; background:#1b1730;
	border:1px solid #3a3358; border-radius:4px;
}
#図鑑幕{
	position:absolute; inset:0; z-index:31;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#図鑑幕.非表示{ display:none; }
#図鑑窓{
	width:min(420px, 90%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:10px;
}
#図鑑見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#図鑑説明{ font-size:11.5px; color:#9c93b8; text-align:center; }
#図鑑表{ display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto; }
.記録行.図鑑未{ opacity:.45; }

/* 後日談図鑑（DGキャラプロフィール v0.8.23） */
#後日談幕{
	position:absolute; inset:0; z-index:31;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#後日談幕.非表示{ display:none; }
#後日談窓{
	width:min(380px, 88%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:10px;
}
#後日談見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#後日談内容{ display:flex; flex-direction:column; align-items:center; gap:8px; }
#後日談キャラ絵{ width:96px; height:96px; image-rendering:pixelated; }
#後日談キャラ名{ font-family:var(--serif); font-size:15px; color:var(--金明); letter-spacing:.12em; }
#後日談プロフィール{ font-size:12px; color:#cfc8e8; line-height:1.7; white-space:pre-wrap; text-align:center; }
#後日談操作行{ display:flex; gap:8px; }
#後日談操作行 button{
	flex:1; padding:8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}

/* オンラインランキング（3種目 v0.8.18） */
#ランキングボタン{
	font-size:14px; padding:4px 8px;
	color:#cfc8e8; background:#1b1730;
	border:1px solid #3a3358; border-radius:4px;
}
#ランキング幕{
	position:absolute; inset:0; z-index:31;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#ランキング幕.非表示{ display:none; }
#ランキング窓{
	width:min(420px, 90%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:10px;
}
#ランキング見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#ランキング説明{ font-size:11.5px; color:#9c93b8; text-align:center; }
#ランキングタブ列{ display:flex; gap:4px; }
.ランキングタブ{
	flex:1; font-size:12px; font-weight:bold; padding:6px 2px;
	color:#9c93b8; background:#14101f;
	border:1px solid #3a3358; border-radius:3px;
}
.ランキングタブ.選択中{
	color:var(--金明); border-color:var(--金); background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
#ランキング表{ display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; }
.記録行.ランキング自分{ background:rgba(201,162,75,.22); border:1px solid rgba(201,162,75,.5); }
#ランキング自分行 .記録行{ justify-content:center; gap:6px; background:rgba(44,37,71,.8); border:1px solid #3a3358; }
.記録行.ランキング自分行内{ color:var(--金明); font-weight:bold; }
/* v1.0.7 不正検知時の「あなたの順位」: 静かに弾くのではなく赤字＋※で本人に明示する */
.記録行.ランキング不正{
	display:block; text-align:center; color:#ff6b6b; font-weight:bold;
	background:rgba(90,20,20,.5); border:1px solid #a33;
}
.記録行.ランキング不正 small{ display:block; color:#ffb3b3; font-weight:normal; font-size:11px; margin-top:3px; }
#ランキング閉じるボタン{
	padding:8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}

/* トレーダー依頼（反復自動クエスト v0.6.3）: クリック不要の表示専用行 */
.ステージ項目.トレーダー項目{ cursor:default; }
.ステージ項目.トレーダー項目:hover{ background:rgba(44,37,71,.5); }

/* ノベル操作列（オート/スキップ）＋選択肢層（v0.6.4・セリフ.cssの共有エンジンには足さずDG9側で持つ） */
#ノベル操作列{
	position:absolute; top:1.5cqh; right:1.5cqw; z-index:2030;
	display:flex; gap:8px; pointer-events:auto;
}
#ノベル操作列 button{
	font-size:1.1cqw; padding:.35cqh .8cqw;
	color:#cfc8e8; background:rgba(27,23,48,.85);
	border:1px solid #3a3358; border-radius:4px; cursor:pointer;
}
#ノベル操作列 button.作動中{
	color:#ffe9b0; border-color:var(--金);
	box-shadow:0 0 8px rgba(201,162,75,.5);
}
#ノベル選択肢層{
	position:absolute; inset:0; z-index:2025;
	display:none; flex-direction:column; align-items:center; justify-content:center; gap:2.2cqh;
	background:rgba(5,4,9,.35); pointer-events:auto;
}
.ノベル選択ボタン{
	min-width:46cqw; padding:1.6cqh 2.4cqw;
	font-family:var(--serif); font-size:2.4cqw; color:#f0eefc;
	background:linear-gradient(180deg,rgba(35,28,66,.95),rgba(16,12,32,.95));
	border:1px solid var(--金); border-radius:6px; cursor:pointer;
	text-shadow:1px 1px 3px #000;
}
.ノベル選択ボタン:hover{ color:#ffe9b0; box-shadow:0 0 14px rgba(201,162,75,.45); }
#図鑑閉じるボタン{
	padding:8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}

/* 拠点拡張（魔王城の施設増築・狩場選択 v0.7.1） */
#拠点ボタン{
	font-size:14px; padding:4px 8px;
	color:#cfc8e8; background:#1b1730;
	border:1px solid #3a3358; border-radius:4px;
}
#拠点幕{
	position:absolute; inset:0; z-index:31;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#拠点幕.非表示{ display:none; }
#拠点窓{
	width:min(420px, 90%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:10px;
}
#拠点拡張見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#拠点拡張説明{ font-size:11.5px; color:#9c93b8; text-align:center; }
#拠点表{ display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto; }
.記録行 small{ display:block; color:#9c93b8; font-size:11.5px; }
.拠点強化ボタン{
	min-width:90px; padding:5px 8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}
.拠点強化ボタン:disabled{ opacity:.4; filter:saturate(.3); }
.記録行 b.拠点MAX{ color:#8ee08e; align-self:center; }
.拠点狩場操作{ display:flex; gap:6px; align-items:center; }
.拠点狩場操作 button{
	padding:4px 8px; font-size:12px; font-weight:bold;
	color:#cfc8e8; background:#241f3a;
	border:1px solid #3a3358; border-radius:4px;
}
.拠点狩場操作 button.選択中{ color:var(--金明); border-color:var(--金); }
#拠点閉じるボタン{
	padding:8px; font-size:12px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}

/* 拠点収益（オフライン報酬）受取パネル */
#拠点収益幕{
	position:absolute; inset:0; z-index:30;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#拠点収益幕.非表示{ display:none; }
#拠点収益窓{
	width:min(380px, 88%);
	padding:22px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:12px;
}
#拠点見出し{
	font-family:var(--serif); font-size:17px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#拠点説明{ font-size:12px; color:#9c93b8; text-align:center; }
#拠点内訳{ display:flex; flex-direction:column; gap:5px; max-height:280px; overflow-y:auto; }
.拠点行{
	display:flex; justify-content:space-between; font-size:12px;
	padding:4px 8px; background:rgba(44,37,71,.5); border-radius:3px;
}
.拠点行 b{ color:var(--金明); }
#拠点受取ボタン{
	padding:9px; font-size:14px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}

/* アカウント切替確認・重複ログイン検知（セーブ同期 v0.8.40）。他モーダルより手前(z-index高め)に固定表示 */
#アカウント切替幕, #同時ログイン幕{
	position:absolute; inset:0; z-index:40;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.85);
}
#アカウント切替幕.非表示, #同時ログイン幕.非表示{ display:none; }
#アカウント切替窓, #同時ログイン窓{
	width:min(400px, 88%);
	padding:22px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:14px;
}
#アカウント切替見出し, #同時ログイン見出し{
	font-family:var(--serif); font-size:17px; color:var(--金);
	text-align:center; letter-spacing:.14em;
}
#アカウント切替説明, #同時ログイン説明{ font-size:13px; color:#d8d0f0; text-align:center; line-height:1.6; }
/* v0.8.60(A8): ローカル/サーバーの進行を2列で並べて判断材料にする */
#アカウント切替比較{ display:flex; gap:10px; }
#アカウント切替比較 .切替列{
	flex:1 1 0; min-width:0; padding:8px 10px;
	background:rgba(44,37,71,.45); border:1px solid rgba(201,162,75,.35); border-radius:4px;
}
#アカウント切替比較 .切替列見出し{ font-size:11px; color:#9d94bb; margin-bottom:4px; word-break:break-word; }
#アカウント切替比較 .切替列本文{ font-size:13px; color:#ffe9b0; line-height:1.5; word-break:break-word; }
#アカウント切替比較 .切替列本文 small{ font-size:10px; color:#9d94bb; }
#アカウント切替比較 .切替なし{ color:#7c749a; }
#アカウント切替操作行{ display:flex; flex-direction:column; gap:8px; }
#アカウント切替続行ボタン, #アカウント切替保存ボタン, #同時ログイン再開ボタン{
	padding:10px; font-size:13px; font-weight:bold;
	color:#ffe9b0; background:linear-gradient(180deg,#4a3c20,#2c2410);
	border:1px solid var(--金); border-radius:4px;
}
#アカウント切替再ログインボタン, #アカウント切替破棄ボタン{
	padding:10px; font-size:13px;
	color:#c9c2e0; background:rgba(44,37,71,.5);
	border:1px solid #3a3358; border-radius:4px;
}
#省エネ画面{
	display:flex; align-items:center; justify-content:center;
	background:#050409;
}
#省エネ窓{
	width: 340px;
	padding: 24px;
	background: linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金暗); border-radius:6px;
	box-shadow: var(--枠影);
	display:flex; flex-direction:column; gap:14px;
}
#省エネ見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.2em;
}
#省エネ表{ display:flex; flex-direction:column; gap:6px; }
.省エネ行{
	display:flex; justify-content:space-between;
	font-size:14px; color:#b0a8c8;
	border-bottom:1px dashed #2e2848; padding-bottom:4px;
}
.省エネ行 b{ color:var(--紙); font-size:15px; }
#省エネ復帰ボタン{
	font-size:15px; padding:10px;
	color:var(--金明); background:#241f3a;
	border:1px solid var(--金); border-radius:4px;
}
#省エネ復帰ボタン:hover{ background:#3a2f55; }

/* ============================================================
   ノベルパートのDG9調整（立ち絵は非透過jpg → 角丸+四辺フェードで馴染ませる）
   ============================================================ */
#Goセリフレイヤー{ background: rgba(5,4,10,.45); }
#Goセリフレイヤー .Go肖像{ border-radius: .5rem; }
/* 立ち絵の「文字側」をフェード＝下の黒吹き出しが透けて白文字が読める
   （左スロット=文字が右にあるので右をフェード、右スロットは逆）
   縁馴染ませのradialと文字側linearを intersect 合成 */
#Goセリフレイヤー .Go肖像.左{
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 58%, transparent 99%),
		linear-gradient(to right, #000 45%, rgba(0,0,0,.12) 92%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 58%, transparent 99%),
		linear-gradient(to right, #000 45%, rgba(0,0,0,.12) 92%);
	mask-composite: intersect;
}
#Goセリフレイヤー .Go肖像.右{
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 58%, transparent 99%),
		linear-gradient(to left, #000 45%, rgba(0,0,0,.12) 92%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 58%, transparent 99%),
		linear-gradient(to left, #000 45%, rgba(0,0,0,.12) 92%);
	mask-composite: intersect;
}
/* 正方形立ち絵(500x500)は横幅があるため、名前ラベルを立ち絵の内側手前まで退避 */
#Goセリフレイヤー .窓_下 .吹出名前{ right: 31cqw; }
#Goセリフレイヤー .窓_上 .吹出名前{ left: 31cqw; }
/* 縦ゲームモード: レイヤーはゲーム帯幅の16:9に縮小される→文字を拡大して可読性を確保
   （ブラウザの向きでなくゲーム比率基準。横長ブラウザ×縦ゲームでも効く） */
body.縦 #Goセリフレイヤー .吹出本文{ font-size: 3.0cqw; }
body.縦 #Goセリフレイヤー .吹出名前{ font-size: 2.4cqw; }

/* ============ スクロールバー ============ */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#100d1d; }
::-webkit-scrollbar-thumb{ background:#3a3358; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--金暗); }

/* ===== エンディング スタッフロール（v0.8.3・830_エンディング.js） ===== */
#EDロール{
	position: absolute; inset: 0; z-index: 40;
	background: #000; overflow: hidden; cursor: pointer;
}
#EDロール帯{
	position: absolute; left: 0; right: 0; top: 100%;
	text-align: center; color: #e8e0d0;
	animation: EDロール流れ 45s linear forwards;
}
@keyframes EDロール流れ{
	to{ transform: translateY(calc(-100% - var(--ED高, 800px))); }
}
.EDロール題{ font-size: 30px; letter-spacing: .12em; margin: 10px 0; color: #ffd97a; text-shadow: 0 0 14px rgba(255,200,80,.35); }
.EDロール見出し{ font-size: 14px; margin: 26px 0 6px; color: #b09a6a; letter-spacing: .25em; }
.EDロール行{ font-size: 19px; margin: 6px 0; letter-spacing: .08em; }
.EDロール空行{ height: 22px; }

/* ============ レビュー導線（v1.0.6・js/165_レビュー導線.jsが動的生成） ============ */
/* ED到達/やり込み層に生涯1回だけ出す。既存の「幕/窓」パターンに合わせる */
#レビュー幕{
	position:absolute; inset:0; z-index:34;
	display:flex; align-items:center; justify-content:center;
	background:rgba(5,4,9,.75);
}
#レビュー窓{
	width:min(420px, 92%);
	padding:20px;
	background:linear-gradient(180deg,#171426,#0d0b18);
	border:1px solid var(--金); border-radius:6px;
	box-shadow:0 0 30px rgba(201,162,75,.25);
	display:flex; flex-direction:column; gap:12px;
}
#レビュー見出し{
	font-family:var(--serif); font-size:16px; color:var(--金);
	text-align:center; letter-spacing:.18em;
}
#レビュー本文{
	font-size:12px; line-height:1.7; color:#cfc8e8;
	white-space:pre-line; text-align:center;
}
#レビューボタン列{ display:flex; gap:6px; }
#レビューボタン列 .設定選択ボタン{ padding:8px 2px; }
.レビュー主ボタン{
	flex:2;
	color:var(--金明); border-color:var(--金); background:#2c2547;
	box-shadow:0 0 8px rgba(201,162,75,.35);
}
#レビュー注記{ font-size:10px; color:#9c93b8; text-align:center; }