/* tasogare.css — screen effects of 黄昏のエチュード (generated by write.js) */
#image-area {
	position: relative;
	overflow: hidden;
}
#image-area img.img-base,
#image-area img.img-person1 {
	left: 0;
	top: 0;
}
/* bigger screens: scale the whole game up in steps, only while it still fits (phones stay at 1x) */
@media (min-width: 720px) and (min-height: 460px) { #main-area { zoom: 1.25; } }
@media (min-width: 860px) and (min-height: 540px) { #main-area { zoom: 1.5; } }
@media (min-width: 1000px) and (min-height: 620px) { #main-area { zoom: 1.75; } }
@media (min-width: 1140px) and (min-height: 700px) { #main-area { zoom: 2; } }
/* narrow phones (portrait): scale down so the whole 560px screen fits the width */
/* (some px to spare, so rounding at these scales never pushes the command box under the picture) */
@media (max-width: 579px) { #main-area { width: 570px; } }
@media (max-width: 579px) { #main-area { zoom: 0.95; } }
@media (max-width: 549px) { #main-area { zoom: 0.9; } }
@media (max-width: 519px) { #main-area { zoom: 0.85; } }
@media (max-width: 489px) { #main-area { zoom: 0.8; } }
@media (max-width: 459px) { #main-area { zoom: 0.75; } }
@media (max-width: 429px) { #main-area { zoom: 0.7; } }
@media (max-width: 399px) { #main-area { zoom: 0.65; } }
@media (max-width: 369px) { #main-area { zoom: 0.6; } }
@media (max-width: 339px) { #main-area { zoom: 0.55; } }
/* night scenes: the person picture takes the cold, dim light of the scene */
body.night #image-area img.img-person1 {
	filter: brightness(0.6) saturate(0.55) contrast(1.1);
}
.fx-shake {
	animation: fx-shake 0.6s;
}
@keyframes fx-shake {
	0%, 100% { transform: translate(0, 0); }
	15% { transform: translate(-6px, 2px); }
	30% { transform: translate(5px, -3px); }
	45% { transform: translate(-4px, 3px); }
	60% { transform: translate(3px, -2px); }
	75% { transform: translate(-2px, 1px); }
}
.fx-flash, .fx-black {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index: 5;
}
.fx-flash {
	background: white;
	animation: fx-flash 1.2s forwards;
}
@keyframes fx-flash {
	from { opacity: 1; }
	to { opacity: 0; }
}
.fx-black {
	background: black;
	opacity: 0;
	animation: fx-black 1.5s forwards;
}
@keyframes fx-black {
	to { opacity: 1; }
}
.fx-chalk {
	position: absolute;
	left: 30px; top: 34px;
	z-index: 3;
	color: rgba(245, 245, 235, 0.9);
	font-family: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", "MS Mincho", serif;
	font-size: 30px;
	letter-spacing: 0.2em;
	transform: rotate(-4deg);
	text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
	opacity: 0;
	animation: fx-chalk 2.5s forwards;
}
@keyframes fx-chalk {
	to { opacity: 1; }
}
/* evidence found: a small label that slides in at the top left and fades away */
.fx-found {
	position: absolute;
	left: 8px; top: 8px;
	z-index: 4;
	padding: 3px 12px;
	border: 1px solid #d8c48a;
	background: rgba(10, 10, 20, 0.75);
	color: #f3e6c0;
	font-size: 13px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	animation: fx-found 2.8s forwards;
}
@keyframes fx-found {
	0% { opacity: 0; transform: translateX(-12px); }
	12% { opacity: 1; transform: translateX(0); }
	75% { opacity: 1; }
	100% { opacity: 0; }
}