/* =========================================================
   STORY — Dragon Ball World Collision
   Giostra delle categorie, con l anello di avanzamento.
   ========================================================= */

.story-body {
	position: relative;
	overflow-x: hidden;
	background-color: #000;
}

/*
   Lo sfondo sta su uno pseudoelemento fisso e piu grande della
   finestra: cosi puo muoversi senza scoprire i bordi.
*/
.story-body::before {
	content: "";
	position: fixed;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
	z-index: -1;
	background: url('../static/story.png') center / cover no-repeat;
	image-rendering: pixelated;
	animation: storyFloat 10s linear infinite alternate;
}

@keyframes storyFloat {
	0%   { transform: translate(0, 0) scale(1); }
	25%  { transform: translate(12px, -15px) scale(1.01); }
	50%  { transform: translate(20px, -40px) scale(1.02); }
	75%  { transform: translate(-8px, -25px) scale(1.01); }
	100% { transform: translate(0, 0) scale(1); }
}


/* =========================================================
   ANELLI
   ========================================================= */

.circle-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.4s ease;
}

.circle-progress.main {
	width: 210px;
	height: 210px;
	box-shadow: 6px 6px 0 #000;
	cursor: pointer;
	image-rendering: pixelated;
}

@media (min-width: 768px) {
	.circle-progress.main { width: 260px; height: 260px; }
}

.circle-progress.preview {
	width: 130px;
	height: 130px;
	opacity: 0.4;
	transform: scale(0.9);
}

.circle-inner {
	position: relative;
	width: 92%;
	height: 92%;
	overflow: hidden;
	border-radius: 50%;
	background: #000;
}

.locked-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35px;
	background: rgba(0, 0, 0, 0.6);
}


/* =========================================================
   FRECCE
   ========================================================= */

.story-arrow {
	padding: 0 8px;
	color: var(--ui-text);
	cursor: pointer;
	user-select: none;
	transition: transform 0.1s ease, color 0.1s ease;
}

.story-arrow:hover {
	transform: scale(1.2);
	color: var(--ui-accent);
}


@media (prefers-reduced-motion: reduce) {
	.story-body::before { animation: none; }
	.circle-progress, .story-arrow { transition: none; }
}