/* PETTAN BEAT（旧仮題「高速餅つき」）— ゲーム本体の見た目（全画面の舞台・写真の閃光・記念写真の紙焼きと 2 つの丸いボタン）。
   外装（短冊・フォールバック）は shell.css。ここでは :root の変数を使わない（外装と名前がぶつからないように）。 */
html, body {
	margin: 0; height: 100%; overflow: hidden;
	background: #04060f;
	overscroll-behavior: none;
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
#stage {
	position: fixed; inset: 0;
	width: 100vw; height: 100vh; height: 100dvh;
	display: block;
	touch-action: none;
	cursor: pointer;
	outline: none;
}
#flash {
	position: fixed; inset: 0;
	background: #fffaf0;
	opacity: 0;
	pointer-events: none;
	z-index: 50;
}

/* ───────── 記念写真の紙焼き ───────── */
#print {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	top: calc(var(--tz-bottom, 84px) + 6px);
	z-index: 60;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(12px, 2.6vh, 22px);
	padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}
#print[hidden] { display: none; }
#print .card {
	margin: 0;
	pointer-events: auto;
	width: min(90vw, 760px, calc((100dvh - var(--tz-bottom, 84px) - 150px) * 1.62));
	padding: clamp(8px, 1.6vw, 14px) clamp(8px, 1.6vw, 14px) clamp(26px, 5vw, 44px);
	background: linear-gradient(170deg, #fffdf8, #f3eee4);
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,.45), 0 24px 50px -18px rgba(0,0,0,.85);
	transform: translateY(40px) rotate(-3deg) scale(.92);
	opacity: 0;
	transition: transform .7s cubic-bezier(.2,1.25,.4,1), opacity .35s ease;
	box-sizing: border-box;
}
#print.on .card { transform: rotate(-1.6deg); opacity: 1; }
#print img {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
	background: #0b0f22;
	/* iPhone の長押しで「写真に保存」ができるように、写真だけは長押しの献立を戻す */
	-webkit-touch-callout: default;
	-webkit-user-select: auto; user-select: auto;
}
#print .acts {
	display: flex; gap: clamp(18px, 5vw, 34px);
	/* 9/26 発注者「背景の色に溶けて見づらい」: 白いうさぎにも夜空にも溶けないよう、ボタンの下に暗い半透明の台を敷く */
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(14, 16, 34, .58);
	-webkit-backdrop-filter: blur(8px) saturate(1.2);
	backdrop-filter: blur(8px) saturate(1.2);
	box-shadow: 0 8px 22px -10px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.14);
	pointer-events: auto;
	opacity: 0; transform: translateY(12px);
	transition: opacity .4s ease .45s, transform .5s cubic-bezier(.2,1.2,.4,1) .45s;
}
#print.on .acts { opacity: 1; transform: none; }
#print button {
	width: 64px; height: 64px;
	border-radius: 50%;
	/* 白い縁で暗い所から浮かせ、外側の薄い影の輪で明るい所から浮かせる。保存は提灯と同じ朱・印は白 */
	border: 3px solid #fffaf0;
	box-sizing: border-box;
	display: grid; place-items: center;
	color: #ffffff;
	background: radial-gradient(120% 120% at 30% 25%, #ff6a4d, #d8341f);
	box-shadow: 0 3px 0 #8f2416, 0 0 0 2px rgba(0,0,0,.35), 0 10px 22px -6px rgba(0,0,0,.7);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .12s ease, box-shadow .12s ease;
}
#print button:hover { transform: translateY(-2px); }
#print button:active { transform: translateY(2px); box-shadow: 0 1px 0 #8f2416, 0 0 0 2px rgba(0,0,0,.35), 0 5px 12px -6px rgba(0,0,0,.7); }
#print button:focus-visible { outline: 3px dashed #ffd27a; outline-offset: 4px; }
#print button svg { width: 30px; height: 30px; display: block; }
#print-share { background: radial-gradient(120% 120% at 30% 25%, #34343d, #0c0c10) !important; color: #ffffff !important; box-shadow: 0 3px 0 #000, 0 0 0 2px rgba(0,0,0,.35), 0 10px 22px -6px rgba(0,0,0,.7) !important; }

/* 第 4 波: X ボタンを押した後の印（ボタンの上に小さく・写した= ⌘V／Ctrl V のキー・保存した= 受け皿の矢印）。文字の説明は出さない */
#print-share { position: relative; }
#print-share .share-hint {
	position: absolute; left: 50%; bottom: calc(100% + 8px);
	transform: translateX(-50%) translateY(6px) scale(.8);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1);
	filter: drop-shadow(0 4px 6px rgba(0,0,0,.55));
}
#print-share .share-hint svg { width: auto; height: 40px; display: block; }
#print-share.hinted .share-hint { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* 新しいタブを止められた時: もう一度押してほしいので、ボタンがゆっくり脈打つ */
#print-share::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	border: 3px solid #ffd27a; opacity: 0; pointer-events: none;
}
#print-share.again::after { animation: share-again 1.1s ease-in-out infinite; }
@keyframes share-again {
	0%, 100% { opacity: 0; transform: scale(.94); }
	50% { opacity: .9; transform: scale(1.12); }
}
/* 読み上げだけの知らせ（画面には出さない） */
#print .share-live {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	#print .card, #print .acts { transition: opacity .2s ease; transform: none !important; }
	#print-share .share-hint { transition: opacity .2s ease; }
	#print-share.again::after { animation: none; opacity: .9; }
}