* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	height: 100%;
	overflow: hidden;
	background: #fdf6ec;
	font-family: system-ui, sans-serif;
	/* 子供の連打でのダブルタップ拡大・長押し選択を防ぐ */
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	/* iOSの長押しプレビュー抑止 (子供対策) */
	-webkit-touch-callout: none;
}

/* #app: ⚙・キッズ画面・長押し案内をまとめて回す単位。通常はビューポートいっぱい */
#app {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
}
/* 向き固定 (端末基準): ビューポートの向きと固定した向きが違う時、幅と高さを入れ替えて 90° 回す。
   transform-origin を左上にし、回した後にビューポートへ収まるよう自身のサイズ分だけずらす */
#app[data-rotate="90"] {
	width: 100dvh;
	height: 100dvw;
	transform: rotate(90deg) translateY(-100%);
	transform-origin: top left;
}
#app[data-rotate="-90"] {
	width: 100dvh;
	height: 100dvw;
	transform: rotate(-90deg) translateX(-100%);
	transform-origin: top left;
}
#stage {
	width: 100%;
	height: 100%;
	display: flex;
}

/* フォーカスリング・タップハイライトを出さない (画面切替時に一瞬白枠が光る問題の対策) */
button {
	outline: none;
	-webkit-tap-highlight-color: transparent;
	font-family: inherit;
}

/* リロード確認用のバージョン表示 (右下に小さく) */
#ver {
	position: fixed;
	right: 4px;
	bottom: 4px;
	font-size: 10px;
	color: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: 9;
}

/* --- 設定への入り口: 左上の⚙ (2秒長押し)。長押し中は回転でフィードバック --- */
#gear {
	position: absolute; /* #app 内。#app が回る時に一緒に回る */
	top: env(safe-area-inset-top);
	left: env(safe-area-inset-left);
	/* 当たり判定は大きめ (指が多少ずれても押し続けられるように) */
	width: 72px;
	height: 72px;
	/* 指が動いた時にブラウザがスクロール操作と解釈して pointercancel を発火するのを禁止
	   (これが「ドラッグするとホールドが切れる」の正体) */
	touch-action: none;
	display: grid;
	place-items: center;
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.45;
	z-index: 10;
}
/* hidden属性がdisplay:gridに負けないように明示 (設定画面では⚙を消す) */
#gear[hidden] { display: none; }
/* --- 長押し中のフィードバック: 画面中央の進捗リング (⚙は指で隠れるため) --- */
.hold-overlay {
	position: absolute; /* #app 内 (回転に追従) */
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(253, 246, 236, 0.88);
	z-index: 5; /* ⚙(z=10)より下: pointerupイベントを妨げない */
	pointer-events: none;
}
.hold-box { text-align: center; }
.hold-ring { width: 96px; height: 96px; }
.hold-progress { animation: ring-fill 2s linear forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }
.hold-label {
	margin-top: 8px;
	font-size: 14px;
	color: #6e6052;
}

/* --- 2択画面: 横=左右 / 縦=上下。縦横は JS (applyOrientation) が #app の data-layout に置く
   (自動なら ビューポートの向き、固定なら設定の向き。メディアクエリ直参照はしない) --- */
.pair {
	width: 100%;
	display: flex;
}
#app[data-layout="portrait"] .pair { flex-direction: column; }

/* 注意: :active での縮小演出を入れないこと。pointerdown で即画面が切り替わるため、
   本物の押下では見えず、切替後の「幽霊クリック」(タッチ後に新要素へ飛ぶ合成click) が
   新しいボタンを一瞬 :active にした時だけ縮んで、背景が白い縁に見えるバグになる (v3→v4の教訓) */
.choice {
	flex: 1;
	/* 縦長画像対策1: flexアイテムは既定で中身より縮まない (min-height:auto) ため、
	   画像が大きいとパネルが画面外まで膨張する → 0 を明示してパネル高さを固定する */
	min-height: 0;
	min-width: 0;
	position: relative;
	border: none;
	cursor: pointer;
}
.choice.first  { background: #ffe9e3; }
.choice.second { background: #e3f0ff; }

/* 縦長画像対策2: %サイズはgrid autoトラック内で解決されないことがあるため、
   絶対配置でパネル全体に貼り、余白はpadding・収まりはobject-fit:containで作る */
.choice img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10%;
}

/* --- 全画面表示: センタリング + 広がるアニメーション。背景色は選んだ側を引き継ぐ --- */
.full {
	width: 100%;
	position: relative;
	border: none;
	cursor: pointer;
}
.full.first  { background: #ffe9e3; }
.full.second { background: #e3f0ff; }

.full img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	animation: grow 0.35s ease-out;
}
@keyframes grow {
	from { transform: scale(0.35); }
	to   { transform: scale(1); }
}

/* --- 表示ペアが0のときの案内 --- */
.empty {
	margin: auto;
	padding: 24px;
	white-space: pre-line;
	text-align: center;
	color: #6e6052;
	font-size: 16px;
	line-height: 1.8;
}

/* --- 設定画面 (親用) --- */
.settings {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: calc(16px + env(safe-area-inset-top)) 20px 32px;
	color: #4a4038;
}
.settings-title {
	font-size: 20px;
	margin-bottom: 12px;
	text-align: center;
}
.pair-list { list-style: none; }
/* グリッドで列を固定: サムネ2 + 表示チェック + アクション(固定幅)。
   「削除」「サンプル」の文字数差でチェックボックス位置がずれないように */
.pair-row {
	display: grid;
	grid-template-columns: 56px 56px 1fr 76px 28px;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eadfd0;
}
/* ドラッグ中の行: 「持ち上げている」ことがはっきり分かる強調 */
.pair-row.dragging {
	background: #eef7e8;
	outline: 2px solid #7bb661;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(74, 64, 56, 0.25);
	padding-left: 6px;
	padding-right: 6px;
}
/* 並べ替えハンドル: この上のドラッグだけ行の入れ替え (スクロールと干渉しないよう touch-action: none) */
.drag-handle {
	touch-action: none;
	font-size: 20px;
	color: #a89880;
	cursor: grab;
	justify-self: center;
	padding: 8px 4px;
	user-select: none;
}
.thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	background: #fff;
}
.row-action { justify-self: center; text-align: center; }
/* ユーザーペアのサムネはタップで差し替え可能 (ボタン化) */
.thumb-btn {
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	width: 56px;
	height: 56px;
}
.thumb-btn:active { opacity: 0.6; }
.toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	justify-self: end;
}
.toggle input { width: 20px; height: 20px; }

/* 追加行「＋ ＋」 */
.slot {
	display: grid;
	place-items: center;
	border: 2px dashed #d9cbb6;
	color: #8a7a66;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
}
.slot-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.add-hint {
	grid-column: 3 / 6;
	align-self: center;
}

/* 表示オプション (ペアを表示する順番 / 絵の位置): 見出しの下に選択肢を1つずつ縦に並べる
   (選択肢の文が長く、横並びだとスマホ幅で折り返して見出しとの境目が読みにくいため) */
.option-group {
	margin-top: 16px;
	font-size: 14px;
}
.option-title {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}
.option-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
}
.option-group input { width: 18px; height: 18px; flex: none; }
.sample-tag {
	font-size: 12px;
	color: #6e6052;
	border: 1px solid #d9cbb6;
	border-radius: 999px;
	padding: 2px 8px;
}
.btn {
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
	background: #eadfd0;
	color: #4a4038;
}
.btn.primary { background: #4e7c3a; color: #fff; }
.btn.danger  { background: #a84c38; color: #fff; }
.close-btn {
	display: block;
	margin: 24px auto 0;
	padding: 10px 40px;
	font-size: 16px;
}
.hint { font-size: 13px; color: #6e6052; }