/* ===== レイアウト基礎 ===== */

body {
	user-select: none; /* 標準的な書き方 */
	-webkit-user-select: none; /* Chrome / Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Edge (古いバージョン) */
}

img,
a {
	-webkit-user-drag: none; /* 画像やリンクのドラッグを防止 */
}

.container {
	max-width: 960px;
}

:root,
:host {
	--md-sys-color-background-light: rgb(255, 255, 255);
	--md-sys-color-surface-tint-light: rgb(250, 250, 250);
	--md-sys-color-surface-light: rgb(250, 250, 250);
	--md-sys-color-secondary-container-light: rgb(255, 255, 255);
}

.btn,
.btn.outlined {
	border-style: solid;
	border-width: 1px;
	border-color: rgba(13, 35, 105, 0.37);
}

.card {
	border-radius: 0px;
}

.card-panel {
	border-radius: 0px;
}

span i {
	padding-right: 0.5em;
}

button i {
	padding-right: 0.5em;
}

/* ===== タイトル ===== */

.titleicon {
	position: relative;
	top: -0.15em;
	vertical-align: middle;
}

/* ===== ホームへ ===== */

.pe-top-actions {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* ===== トップ画面 ===== */

#app-root .container > div {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* ===== 設定画面 ===== */

.pe-settings .card-title {
	font-weight: 600;
}

.pe-textarea-iodata {
	height: 2em;
	overflow-wrap: anywhere;
	overflow-x: none;
	overflow-y: hidden;
	background-color: lightsteelblue;
	margin: 0px;
}

.pe-btn-export,
.pe-btn-import {
	padding-left: 1em;
	padding-right: 1.5em;
}

.pe-btn-reset {
	margin-top: 20px;
}

.pe-btn-policy {
	margin-bottom: 20px;
}

/* ===== 結果画面 ===== */

.pe-summary-cards .card-panel {
	padding-top: 14px;
	padding-bottom: 14px;
}
.pe-res-val {
	font-size: 1.6rem;
	font-weight: 600;
}

.pe-wrong-list .pe-wrong {
	margin-bottom: 12px;
}
.pe-wrong-img {
	width: 96px;
	height: 96px;
	object-fit: contain;
}
.pe-wrong-word {
	font-size: 1.2rem;
	font-weight: 600;
}

/* ===== 画像 ===== */

.pe-quiz-img {
	width: 128px;
	height: 128px;
	object-fit: contain;
}

/* ===== 正解画面 ===== */

.pe-correct .card {
}

.pe-correct-img {
}

.pe-understanding {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.pe-understanding label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	min-width: 200px;
}

/* ===== 質問画面 ===== */

.pe-q-title {
	margin-bottom: 1em;
}

.pe-q-progress {
	font-size: 60%;
}

.pe-q-buttons {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

.pe-q-buttons button {
	margin-left: 0em;
	margin-right: 0em;
	padding-left: 1em;
	padding-right: 1.5em;
}

/* ===== 画像4択グリッド ===== */

.pe-choices-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(140px, 1fr));
	gap: 16px;
}
@media (min-width: 600px) {
	.pe-choices-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===== カード風の選択肢 ===== */

/* カード */
.pe-choice {
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	margin-bottom: 0.5em;
	background-color: white;
	height: 192px;
}

/* 音声選択用 */
.pe-choice.pe-choice-mode_audio {
	height: 64px;
}

/* 画像選択用 */
.pe-choice .pe-choice-mode_image {
	padding: 12px;
	text-align: center;
	padding-bottom: 5px;
}
.pe-choice .pe-choice-img {
	width: 128px;
	height: 128px;
	object-fit: contain;
}

/* キャプション */
.pe-choice .pe-choice-caption {
	font-weight: 500;
	text-align: center;
}

/* 選択中 */
.pe-choice.pe-selected {
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35);
}

/* ===== 再生中 ===== */

.pe-playing {
	animation: pe-pulse 0.8s ease-in-out;
}

@keyframes pe-pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow:
			0 0 5px #3cf,
			0 0 10px #3cf;
	}
	50% {
		transform: scale(1.03);
		box-shadow:
			0 0 15px #3cf,
			0 0 25px #3cf;
	}
}

/* ===== 誤答シェイク ===== */

.pe-shake {
	animation: pe-shake-key 0.4s ease;
	border-color: #ff5252 !important;
	box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.25);
}

@keyframes pe-shake-key {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-6px);
	}
	50% {
		transform: translateX(6px);
	}
	75% {
		transform: translateX(-4px);
	}
	100% {
		transform: translateX(0);
	}
}
/* ===== 画像選択モード ===== */

.pe-target-word {
	font-weight: 600;
	font-size: 1.25rem;
	margin: 8px 0 12px;
	text-align: center;
}

/* ===== モーダルウィンドウ ===== */

.pe-info-root {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.pe-info-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	animation: pe-fade-in 120ms ease;
}

.pe-info-card {
	position: relative;
	width: min(720px, 92vw);
	max-height: 84vh;
	margin: 6vh auto 0;
	background: #fff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: pe-pop-in 120ms ease;
}

.pe-info-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}
.pe-info-title {
	font-size: 1.2rem;
	font-weight: 600;
}
.pe-info-card .btn-flat {
	min-width: 0;
}

.pe-info-body {
	padding: 16px;
	overflow: auto;
}
.pe-info-footer {
	padding: 12px 16px;
	border-top: 1px solid #eee;
}

.pe-info-closing .pe-info-backdrop {
	animation: pe-fade-out 120ms ease forwards;
}
.pe-info-closing .pe-info-card {
	animation: pe-pop-out 120ms ease forwards;
}

@keyframes pe-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes pe-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes pe-pop-in {
	from {
		transform: translateY(8px);
		opacity: 0.96;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes pe-pop-out {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(8px);
		opacity: 0.96;
	}
}

/* ===== ユーティリティ ===== */

.pe-hidden {
	display: none !important;
}