/* ===== DOHSCHOOL占い用(サイトに無い部分だけ) ===== */

/* ページの背景色(バナーの紫に固定) */
.uranai-section { background: #dea7ea; }
/* ヘッダーがページの上に重なって出るので、その高さぶん上をあける(PC: ヘッダー100px+余白100px / スマホ: ヘッダー120px+余白50px) */
.section-padding.uranai-section { padding-top: 200px; }
@media (max-width: 991px) {
	.section-padding.uranai-section { padding-top: 170px; }
}
/* スマホは上下の余白を広めに(ヘッダー下の空き 50px→80px、下 60px→90px) */
@media (max-width: 767px) {
	.section-padding.uranai-section { padding-top: 200px; padding-bottom: 90px; }
}

/* バナーと同じドット文字(x10y12pxDonguriDuel by hicc https://hicchicc.github.io/00ff/ 漢字は入っていない) */
@font-face {
	font-family: "x10y12pxDonguriDuel";
	src: url("fonts/x10y12pxDonguriDuel.ttf") format("truetype");
	font-display: swap;
}

/* タイトル(バナーの「ドースクールうらない」と同じドット文字・黒) */
.section-title .uranai-title {
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 .8em;            /* 左の余白は字間ぶん(中央に見せるため) */
	color: #000;
	font-family: "x10y12pxDonguriDuel", "DotGothic16", monospace;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: .8em;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.section-title .uranai-title { font-size: 22px; letter-spacing: .3em; padding-left: .3em; }   /* 360px幅でも1行に収まる大きさ */
}

/* 音のON/OFF */
.sound-toggle { font-size: 12px; color: #555; }   /* 音声 ON / OFF(文字だけ) */
.sound-toggle button {
	padding: 0 2px;
	background: none;
	border: 0;
	color: #555;
	cursor: pointer;
}
.sound-toggle button.active { color: #242424; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sound-toggle button:hover { color: #242424; }

/* 案内の文(状況に合わせて変わる) */
.guide { min-height: 2em; font-size: 18px; font-weight: 700; color: #242424; }
.guide em { font-style: normal; color: #ff7b00; }

/* カエルのボタン(外側の四角い線は付けない) */
.kaeru-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 30px 15px 25px;
	background: none;
	border: 0;
	text-align: center;
	cursor: pointer;
	transition: opacity .3s, filter .3s;
	-webkit-tap-highlight-color: transparent;
}
.kaeru-name {                 /* カエルの名前 */
	display: block;
	margin-top: 15px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #242424;
}
.kaeru-name { transition: opacity .3s; }
.spit .kaeru-name { opacity: 0; }

/* カエルの絵 */
.kaeru {
	position: relative;
	display: block;
	max-width: 240px;
	margin: 0 auto;
	animation: hop 2.4s ease-in-out infinite;
}
.kaeru-body {                 /* ためるとふくらむ部分(--s が大きさ) */
	--s: 1;
	position: relative;
	display: block;
	transform: scale(var(--s));
	transform-origin: 50% 90%;
	transition: transform .15s;
}
.kaeru img { display: block; width: 100%; height: auto; }
.kaeru .open { position: absolute; inset: 0; opacity: 0; }
.col-4:nth-child(2) .kaeru { animation-delay: .4s; }
.col-4:nth-child(3) .kaeru { animation-delay: .8s; }
@keyframes hop {
	0%, 70%, 100% { transform: translateY(0); }
	80% { transform: translateY(-12px); }
	90% { transform: translateY(0) scaleY(.94); }
}

/* 選んだあと */
.is-picked .kaeru-card { cursor: default; }
.is-picked .kaeru { animation: none; }
.is-picked .kaeru-card:not(.chosen) { opacity: .3; filter: grayscale(1); }
.is-picked .kaeru-card.chosen { cursor: pointer; }
.mouth-open .open { opacity: 1; }
.mouth-open .close { opacity: 0; }

/* タップするたびに「むにっ」 */
.kaeru-body.squash { animation: squash .2s ease-out; }
@keyframes squash {
	40% { transform: scale(calc(var(--s) * 1.1), calc(var(--s) * .88)); }
}
/* 出る直前のぶるぶる */
.kaeru-body.shake { animation: shake .08s linear infinite; }
@keyframes shake {
	0%   { transform: translate(-3px, 0) scale(var(--s)); }
	25%  { transform: translate(3px, -2px) scale(var(--s)); }
	50%  { transform: translate(-2px, 2px) scale(var(--s)); }
	75%  { transform: translate(2px, 0) scale(var(--s)); }
	100% { transform: translate(-3px, 0) scale(var(--s)); }
}


/* ===== ホバーしたとき(えらぶ前だけ) ===== */
/* カエルがうれしそうにくねくね */
#frogs:not(.is-picked):not(.is-locked) .kaeru-card:hover .kaeru,
#frogs:not(.is-picked):not(.is-locked) .kaeru-card:focus-visible .kaeru { animation: wiggle .6s ease-in-out infinite; }
@keyframes wiggle {
	0%, 100% { transform: translateY(-6px) scale(1.05) rotate(-4deg); }
	50%      { transform: translateY(-10px) scale(1.07) rotate(4deg); }
}
/* 名前をオレンジに */
#frogs:not(.is-picked):not(.is-locked) .kaeru-card:hover .kaeru-name,
#frogs:not(.is-picked):not(.is-locked) .kaeru-card:focus-visible .kaeru-name { text-decoration: underline; text-underline-offset: 4px; }
#frogs:not(.is-picked):not(.is-locked) .kaeru-card:focus-visible { outline: none; }
@media (max-width: 767px) {
}

/* 「タップ！」のふきだし */
.tap-hint {
	position: absolute;
	left: 50%;
	top: -10px;
	transform: translateX(-50%);
	padding: 4px 14px;
	background: #ff7b00;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	border-radius: 20px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}
.tap-hint::after {
	content: "";
	position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
	border: 6px solid transparent; border-bottom: 0; border-top-color: #ff7b00;
}
.charging .chosen .tap-hint { opacity: 1; animation: bounce .6s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translate(-50%, -6px); } }

/* おみくじパワーのゲージ */
.power { max-width: 420px; }
.power .progress { height: 14px; background: #ebebeb; }
.power .progress-bar { background: #ff7b00; transition: width .2s; }
.power.full .progress-bar { animation: blink .25s linear infinite; }
@keyframes blink { 50% { background: #ffc600; } }

/* おみくじ(口から出てくる紙=くしゃくしゃの紙 img/omikuji.svg) */
.omikuji {
	position: absolute;
	left: 50%;
	top: var(--mouth, 63%);    /* ← 口の高さ。カエルごとに style="--mouth:○%" で調整 */
	width: 80px;
	height: 62px;
	margin-left: -40px;
	margin-top: -31px;
	background: url("img/omikuji.svg") center / contain no-repeat;
	transform: scale(.1);
	opacity: 0;
	z-index: 2;
	pointer-events: none;
}
.spit .omikuji { animation: spit 1s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes spit {
	0%   { opacity: 1; transform: translateY(0) scale(.1) rotate(0); }
	60%  { opacity: 1; transform: translateY(46px) scale(1.1) rotate(-160deg); }
	80%  { opacity: 1; transform: translateY(34px) scale(1) rotate(-200deg); }
	100% { opacity: 1; transform: translateY(40px) scale(1) rotate(-210deg); }
}
.peek .omikuji { animation: peek 1s ease-in-out forwards; }   /* ちょっと出て、のみこむ */
@keyframes peek {
	0%   { opacity: 1; transform: translateY(0) scale(.1); }
	45%  { opacity: 1; transform: translateY(10px) scale(.6) rotate(10deg); }
	60%  { opacity: 1; transform: translateY(10px) scale(.6) rotate(-10deg); }
	100% { opacity: 0; transform: translateY(-6px) scale(.1); }
}

/* ===== 結果(画面いっぱいに出す) ===== */
.reveal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(36, 36, 36, .8);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s;
	overflow-y: auto;
}
.reveal.show { opacity: 1; pointer-events: auto; }

/* たたんだおみくじ */
#folded { outline: none; }
#folded:focus-visible .slip-hint { text-decoration: underline; }
.slip-folded {                     /* くしゃくしゃの紙(タップでひらく) */
	position: relative;
	width: 240px;
	height: 186px;
	background: url("img/omikuji.svg") center / contain no-repeat;
	cursor: pointer;
	animation: wobble 1.2s ease-in-out infinite;
}
.slip-folded.gold { filter: drop-shadow(0 0 14px #ffc600) drop-shadow(0 0 6px #ffe680); }   /* 大吉のときは光る */
@keyframes wobble {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg) scale(1.04); }
}
.slip-hint { margin-top: 20px; color: #fff; font-weight: 700; font-size: 18px; animation: bounce2 .8s ease-in-out infinite; }
@keyframes bounce2 { 50% { transform: translateY(-5px); } }

/* ひらいたおみくじ */
.slip-paper {
	width: 100%;
	max-width: 480px;
	padding: 30px 26px;
	background: #fffdf6;
	border: 3px solid #242424;
	text-align: center;
	transform-origin: top center;
	animation: unroll .6s cubic-bezier(.3,1.3,.5,1);
}
@keyframes unroll { from { transform: scaleY(.05); opacity: .3; } to { transform: none; opacity: 1; } }
.slip-rank { font-size: 72px; font-weight: 700; line-height: 1.2; color: #ff7b00; }
.slip-rank.spin { color: #ccc; }
.slip-msg { font-weight: 700; }
.slip-row {
	padding: 12px 14px;
	margin-top: 10px;
	background: #f7f7f7;
	text-align: left;
	opacity: 0;
	transform: translateY(10px);
	transition: .4s;
}
.slip-row.show { opacity: 1; transform: none; }
.slip-row .label { display: block; font-size: 12px; font-weight: 700; color: #ff7b00; }
.color-chip {                  /* ラッキーカラーの色見本 */
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -3px;
	border: 1px solid #242424;
	border-radius: 50%;
}
.slip-paper.gold { border-color: #b8860b; background: linear-gradient(#fffbe6, #fff3c4); }
.slip-paper.gold .slip-rank { color: #d4a017; text-shadow: 0 0 12px rgba(255, 198, 0, .8); }
@keyframes cursor { 50% { opacity: 0; } }   /* 三角の点滅 */
/* 1日1回のおしらせ(結果の紙の中) */
.come-back { font-weight: 700; color: #ff7b00; }
#come-back, #close { opacity: 0; transition: opacity .4s; }
#come-back.show, #close.show { opacity: 1; }
/* 今日もう占ったあとはカエルを押せない */
.is-locked .kaeru-card { cursor: default; }   /* 見た目は元のまま(ぴょこぴょこも)、押せないだけ */

/* 紙ふぶき */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2001; }

@media (max-width: 767px) {
	.kaeru-card { padding: 15px 5px; }
	.kaeru-name { margin-top: 10px; font-size: 16px; }
	.guide { font-size: 15px; }
	.tap-hint { font-size: 12px; padding: 3px 10px; }
	.slip-rank { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	#frogs .kaeru-card .kaeru { animation: none !important; }
	.kaeru, .kaeru-body.squash, .kaeru-body.shake, .spit .omikuji, .peek .omikuji, .slip-folded, .slip-paper { animation: none !important; }
	.spit .omikuji { opacity: 1; transform: translateY(40px); }
}