/**
 * FrecheShirts Schicksals-Kiste – Plugin-Styles (self-contained)
 */
:root {
	--fss-cream: #FFF8F0;
	--fss-ink: #1A1423;
	--fss-pink: #FF3E8A;
	--fss-yellow: #FFD23F;
	--fss-purple: #6C3FC5;
	--fss-white: #FFFFFF;
	--fss-gray: #6E6878;
	--fss-border: 3px solid var(--fss-ink);
	--fss-shadow: 4px 4px 0 var(--fss-ink);
	--fss-shadow-lg: 8px 8px 0 var(--fss-ink);
	--fss-radius: 14px;
	--fss-radius-sm: 8px;
	--fss-display: 'Arial Black', 'Segoe UI Black', sans-serif;
}

.fss-app { max-width: 1100px; margin: 0 auto; }

.fss-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }

.fss-head__title { font-family: var(--fss-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); }

.fss-head__sub { color: var(--fss-gray); }

[hidden] { display: none !important; }

.fss-btn {
	display: inline-block;
	padding: 14px 28px;
	font-family: var(--fss-display);
	font-size: 1rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fss-ink);
	background: var(--fss-yellow);
	border: var(--fss-border);
	border-radius: var(--fss-radius-sm);
	box-shadow: var(--fss-shadow);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.fss-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fss-ink); }

.fss-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fss-ink); }

.fss-btn--pink { background: var(--fss-pink); color: var(--fss-white); }

.fss-legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }

.fss-rarity {
	font-size: 0.85rem;
	font-weight: 900;
	padding: 6px 14px;
	border-radius: 999px;
	border: 2px solid var(--fss-ink);
	background: var(--fss-white);
}

.fss-rarity--gewoehnlich { box-shadow: inset 0 -3px 0 #A9B7C6; }
.fss-rarity--selten { box-shadow: inset 0 -3px 0 #4B69FF; }
.fss-rarity--episch { box-shadow: inset 0 -3px 0 var(--fss-pink); }
.fss-rarity--legendaer { box-shadow: inset 0 -3px 0 #FFB800; background: #FFF6DB; }

.fss-case { text-align: center; padding: 12px 0 36px; }

.fss-case__box {
	background: var(--fss-white);
	border: var(--fss-border);
	border-radius: var(--fss-radius);
	box-shadow: var(--fss-shadow-lg);
	padding: 40px 64px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-family: var(--fss-display);
}

.fss-case__box:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--fss-ink); }

.fss-case__box:hover .fss-case__lid { animation: fss-wiggle 0.5s ease infinite; }

.fss-case__lid { font-size: 5rem; display: block; margin-bottom: 12px; }

.fss-case__label { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; color: var(--fss-ink); }

@keyframes fss-wiggle {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg); }
}

.fss-spinner { position: relative; margin: 24px 0 48px; }

.fss-spinner__marker {
	position: absolute;
	top: -14px;
	bottom: -14px;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	background: var(--fss-pink);
	z-index: 5;
	border-radius: 4px;
}

.fss-spinner__marker::before,
.fss-spinner__marker::after {
	content: '▼';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--fss-pink);
	font-size: 1rem;
}

.fss-spinner__marker::before { top: -18px; }
.fss-spinner__marker::after { bottom: -18px; content: '▲'; }

.fss-spinner__window {
	overflow: hidden;
	border: var(--fss-border);
	border-radius: var(--fss-radius);
	background: var(--fss-ink);
	padding: 20px 0;
	box-shadow: var(--fss-shadow);
}

.fss-spinner__track { display: flex; gap: 12px; will-change: transform; }

.fss-tile {
	flex: 0 0 150px;
	width: 150px;
	background: var(--fss-white);
	border-radius: var(--fss-radius-sm);
	border-bottom: 6px solid #A9B7C6;
	padding: 10px 10px 8px;
	text-align: center;
}

.fss-tile img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }

.fss-tile span {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	margin-top: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fss-tile--selten { border-bottom-color: #4B69FF; }
.fss-tile--episch { border-bottom-color: var(--fss-pink); }
.fss-tile--legendaer { border-bottom-color: #FFB800; background: #FFF6DB; }

.fss-reveal { display: flex; justify-content: center; padding-bottom: 24px; }

.fss-reveal__card {
	max-width: 460px;
	width: 100%;
	background: var(--fss-white);
	border: var(--fss-border);
	border-radius: var(--fss-radius);
	box-shadow: var(--fss-shadow-lg);
	padding: 32px;
	text-align: center;
	animation: fss-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes fss-pop {
	from { opacity: 0; transform: scale(0.6) rotate(-3deg); }
	to { opacity: 1; transform: scale(1) rotate(0); }
}

.fss-reveal__card--legendaer { background: linear-gradient(180deg, #FFF6DB, var(--fss-white) 60%); border-color: #C89600; }

.fss-reveal__rarity {
	display: inline-block;
	font-weight: 900;
	font-size: 0.85rem;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	border: 2px solid var(--fss-ink);
	background: var(--fss-white);
	margin-bottom: 16px;
}

.fss-reveal__img {
	width: 220px;
	height: 220px;
	object-fit: cover;
	margin: 0 auto 16px;
	border: var(--fss-border);
	border-radius: var(--fss-radius-sm);
	display: block;
}

.fss-reveal__title { font-family: var(--fss-display); font-size: 1.4rem; margin: 0 0 8px; }

.fss-reveal__desc { color: var(--fss-gray); font-size: 0.95rem; }

.fss-reveal__price { font-family: var(--fss-display); font-size: 1.6rem; font-weight: 900; margin: 12px 0 6px; }

.fss-reveal__price-old { text-decoration: line-through; color: var(--fss-gray); font-size: 1.05rem; margin-right: 10px; }

.fss-reveal__price-deal { color: var(--fss-pink); }

.fss-reveal__note { font-size: 0.82rem; font-weight: 700; color: var(--fss-purple); margin-bottom: 18px; }

.fss-reveal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }

.fss-reveal__link { font-weight: 700; font-size: 0.9rem; color: var(--fss-pink); }

.fss-empty { text-align: center; color: var(--fss-gray); }

.fss-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--fss-ink);
	color: var(--fss-cream);
	font-weight: 700;
	padding: 14px 24px;
	border-radius: 999px;
	border: 2px solid var(--fss-yellow);
	z-index: 99999;
	max-width: 90vw;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.fss-app *, .fss-app *::before, .fss-app *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* v1.1.0 – Variantenwahl in der Reveal-Card
   ========================================================================== */
.fss-variants {
	margin: 4px 0 18px;
	padding: 16px;
	background: var(--fss-cream);
	border: 2px dashed var(--fss-ink);
	border-radius: var(--fss-radius-sm);
	text-align: left;
}

.fss-variants__loading { color: var(--fss-gray); font-size: 0.9rem; }

.fss-variants__row { margin-bottom: 12px; }

.fss-variants__row:last-child { margin-bottom: 0; }

.fss-variants__label {
	display: block;
	font-family: var(--fss-display);
	font-weight: 900;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.fss-variants__options { display: flex; flex-wrap: wrap; gap: 8px; }

.fss-variant {
	min-width: 46px;
	padding: 9px 14px;
	background: var(--fss-white);
	border: 2px solid var(--fss-ink);
	border-radius: var(--fss-radius-sm);
	box-shadow: 2px 2px 0 var(--fss-ink);
	font-family: var(--fss-display);
	font-weight: 900;
	font-size: 0.85rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.fss-variant:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--fss-ink); }

.fss-variant.is-active { background: var(--fss-pink); color: var(--fss-white); }

.fss-variant.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
	transform: none;
	box-shadow: 1px 1px 0 var(--fss-ink);
}

.fss-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: var(--fss-shadow);
}