@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500&display=swap');

.sti-kz-widget {
	--sti-ink: #2b2a24;
	--sti-parchment: #f6f1e6;
	--sti-forest: #1f3a2e;
	--sti-forest-dark: #14261e;
	--sti-gold: #c9a24b;
	--sti-rose: #c98a76;
	max-width: 420px;
	margin: 2.5rem auto;
	text-align: center;
	font-family: 'Jost', sans-serif;
	color: var(--sti-ink);
}

.sti-kz-empty {
	font-style: italic;
	opacity: 0.7;
}

.sti-kz-scene {
	perspective: 1400px;
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.sti-kz-card {
	width: 270px;
	height: 403px;
	position: relative;
	cursor: default;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(20, 38, 30, 0.28);
}

.sti-kz-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.9s cubic-bezier(0.4, 0.15, 0.2, 1);
	transform-style: preserve-3d;
}

.sti-kz-card-inner.sti-kz-flipped {
	transform: rotateY(180deg);
}

.sti-kz-card-inner.sti-kz-shuffling {
	animation: sti-kz-shuffle 0.6s ease-in-out;
}

@keyframes sti-kz-shuffle {
	0%   { transform: translateX(0) rotate(0deg); }
	20%  { transform: translateX(-14px) rotate(-4deg); }
	40%  { transform: translateX(12px) rotate(3deg); }
	60%  { transform: translateX(-8px) rotate(-2deg); }
	80%  { transform: translateX(6px) rotate(1deg); }
	100% { transform: translateX(0) rotate(0deg); }
}

.sti-kz-card-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: 14px;
	overflow: hidden;
	background: var(--sti-face-bg, var(--sti-parchment));
}

.sti-kz-card-back {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sti-forest);
}

.sti-kz-card-back img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sti-kz-placeholder {
	color: var(--sti-parchment);
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	letter-spacing: 0.05em;
}

.sti-kz-card-front {
	transform: rotateY(180deg);
}

.sti-kz-card-front img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.sti-kz-controls {
	display: flex;
	gap: 0.9rem;
	justify-content: center;
}

.sti-kz-btn {
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	padding: 0.75rem 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--sti-forest);
	background: transparent;
	color: var(--sti-forest);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.sti-kz-btn:hover:not(:disabled) {
	background: var(--sti-forest);
	color: var(--sti-parchment);
}

.sti-kz-btn:active:not(:disabled) {
	transform: scale(0.97);
}

.sti-kz-btn-mischen {
	border-color: var(--sti-gold);
	color: var(--sti-forest-dark);
	background: var(--sti-gold);
}

.sti-kz-btn-mischen:hover {
	background: #b98f3c;
	color: var(--sti-parchment);
}

.sti-kz-btn-umdrehen {
	border-color: var(--sti-rose);
	color: var(--sti-rose);
}

.sti-kz-btn-umdrehen:hover:not(:disabled) {
	background: var(--sti-rose);
	color: var(--sti-parchment);
}

.sti-kz-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.sti-kz-card {
		width: 220px;
		height: 328px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sti-kz-card-inner,
	.sti-kz-card-inner.sti-kz-shuffling {
		animation: none;
		transition: none;
	}
}