/* BargainSafe Clearance Spectacle: fun "everything must go" look for prosilver; Prosilver Dark overrides in styles/prosilver_dark. */
:root { --sp-a: #ff7a18; --sp-b: #ffd200; --sp-c: #ff3d77; }
@keyframes sp-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes sp-glow { 0%,100% { box-shadow: inset 4px 0 0 var(--sp-a); } 50% { box-shadow: 0 0 10px 1px rgba(255,170,0,.45), inset 4px 0 0 var(--sp-b); } }
.spectacle-mark { display: none; }
li.row:has(.spectacle-mark) {
	background-image: linear-gradient(90deg, rgba(255,210,0,.16), rgba(255,122,24,.10) 40%, rgba(255,61,119,.08));
	animation: sp-glow 2.8s ease-in-out infinite; border-radius: 4px;
}
.spectacle-badge {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
	font-size: .78em; font-weight: bold; letter-spacing: .04em; color: #3b1d00 !important; vertical-align: middle;
	background: linear-gradient(90deg, var(--sp-b), var(--sp-a), var(--sp-c), var(--sp-b)); background-size: 200% 100%;
	animation: sp-shimmer 3s linear infinite;
}
.spectacle-strip {
	margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; color: #3b1d00;
	background: linear-gradient(120deg, #fff3c4, #ffd9a8 45%, #ffc2d4); border: 2px solid var(--sp-a);
	box-shadow: 0 2px 10px rgba(255,122,24,.25);
}
.spectacle-strip-head { margin-bottom: 8px; }
.spectacle-strip-title {
	font-size: 1.35em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	background-image: linear-gradient(90deg, #d94f00, #ff3d77, #d98e00, #d94f00); background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; animation: sp-shimmer 4s linear infinite;
}
.spectacle-strip-sub { font-style: italic; opacity: .85; margin-left: 6px; }
.spectacle-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.spectacle-card a { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.75); color: #2a1600 !important; text-decoration: none !important; border: 1px solid rgba(255,122,24,.5); transition: transform .15s; }
.spectacle-card a:hover { transform: translateY(-2px) rotate(-.5deg); box-shadow: 0 4px 10px rgba(255,61,119,.25); }
.spectacle-tag { align-self: flex-start; font-size: .7em; font-weight: bold; padding: 0 6px; border-radius: 8px; background: var(--sp-c); color: #fff; }
.spectacle-name { font-weight: bold; line-height: 1.25; }
.spectacle-price { font-size: 1.3em; font-weight: 800; color: #c2410c; }
.spectacle-forum { font-size: .8em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { li.row:has(.spectacle-mark), .spectacle-badge, .spectacle-strip-title { animation: none; } }