/* --- polaroid markers ---
   Shared by play, preview and the admin map-upload preview.
   State is encoded in the frame color plus a highlight: locked gets a
   stamp across the photo, ready/started a small corner badge, completed
   a big centered check. Blur marks images inherited via fallback chain.
   Hidden stations show gray diagonal stripes instead of an image. */
.polaroid-marker { background: none; border: none; }
.polaroid {
	--polaroid-frame: #38aadd; /* ready (blue), matches classic pin colors */
	position: relative;
	width: 72px;
	padding: 5px 5px 14px;
	background: #fdfdf8;
	border: 2px solid var(--polaroid-frame);
	border-radius: 2px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
	transform-origin: 50% 8px;
}
.polaroid.is-locked { --polaroid-frame: #d63e2a; }
.polaroid.is-started { --polaroid-frame: #f69730; }
.polaroid.is-completed { --polaroid-frame: #72b026; }
.polaroid.is-hidden { --polaroid-frame: #575757; }
/* admin polaroid-upload cards mirror the in-game frame color per state */
.polaroid-card { border-width: 2px; }
.polaroid-card.is-locked { border-color: #d63e2a; }
.polaroid-card.is-ready { border-color: #38aadd; }
.polaroid-card.is-started { border-color: #f69730; }
.polaroid-card.is-completed { border-color: #72b026; }
/* the station currently being edited (admin map tab) gets a highlight ring */
.polaroid.is-current { box-shadow: 0 0 0 3px rgba(56, 170, 221, .9), 0 3px 8px rgba(0, 0, 0, .35); }
/* tilt (fixed per station) and zoom scale (set on the map container as
   --polaroid-scale) are combined here so neither clobbers the other */
.polaroid {
	transform: rotate(var(--polaroid-tilt, 0deg)) scale(var(--polaroid-scale, 1));
	/* matches Leaflet's zoom-animation timing so the scale grows in step
	   with the map instead of snapping at the end of the zoom */
	transition: transform .25s cubic-bezier(0, 0, .25, 1);
}
.polaroid.tilt-0 { --polaroid-tilt: -4deg; }
.polaroid.tilt-1 { --polaroid-tilt: 3deg; }
.polaroid.tilt-2 { --polaroid-tilt: -1deg; }
.polaroid-pin {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 60%), var(--polaroid-frame);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
	z-index: 2;
}
.polaroid-photo {
	display: block;
	overflow: hidden; /* keeps blurred edges inside the frame */
	background: #ddd;
}
.polaroid-photo img {
	display: block;
	width: 100%;
	height: 58px;
	object-fit: cover;
}
.polaroid-photo img.is-blurred { filter: blur(3px) grayscale(.2); }
.polaroid-photo.is-striped {
	height: 58px;
	background: repeating-linear-gradient(45deg, #e8e8e8 0 8px, #c9c9c9 8px 16px);
}
.polaroid-stamp {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	padding: 0 4px;
	border: 2px solid #d63e2a;
	border-radius: 3px;
	color: #d63e2a;
	background: rgba(255, 255, 255, .65);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.polaroid-badge {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--polaroid-frame);
	color: #fff;
	font-size: 10px;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.polaroid-check {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #72b026;
	font-size: 34px;
	line-height: 1;
	text-shadow: 0 0 6px #fff, 0 0 2px #fff;
}