@charset "utf-8";
:root {
	--bg:#0f1724;
	--accent:#ffd166;
	--muted:#98a8c3;
	--size:min(720px,90vmin);
	--part-color:#ffffff22;
	--outline:#cfe8ff33;
}
html, body {
	height:100%;
	margin:0;
	background:linear-gradient(180deg,#071021 0%, #0f1724 100%);
	font-family:Inter, Roboto, Arial, sans-serif;
	color:#e6eef8;
}
.header-title {
	display:block;
	text-align:center;
	color:#ffd166;
	padding:24px;
	font-weight:600;
	letter-spacing:0.03em;
	font-size: 1.7rem;
}
.wrap {
	display:grid;
	place-items:center;
	height:calc(100% - 48px);
	padding:20px;
	box-sizing:border-box;
}
.stage {
	width:var(--size);
	height:var(--size);
	position:relative;
	user-select:none;
	display:block;
	background:linear-gradient(180deg,#071227 0%, #092235 100%);
	border-radius:20px;
	box-shadow:0 8px 30px #0008;
	overflow:hidden;
	padding:3%;
	box-sizing:border-box;
}
svg {
	width:100%;
	height:100%;
	display:block;
}
.label {
	position:absolute;
	left:50%;
	top:8%;
	transform:translateX(-50%) scale(0.95);
	pointer-events:none;
	font-weight:700;
	font-size:clamp(18px,4.2vmin,40px);
	letter-spacing:-0.02em;
	color:var(--accent);
	text-shadow:0 6px 20px #0008;
	opacity:0;
	transition:opacity .25s,transform .25s;
	text-align:center;
	width:90%;
	z-index:15;
}
.spirit {
	position:absolute;
	width:8vmin;
	height:8vmin;
	border-radius:999px;
	z-index:10;
	pointer-events:none;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle at 35% 35%, #ffffff 0%, #fff9d6 25%, #fff1b0 45%, rgba(255,215,102,0.12) 60%, rgba(255,215,102,0.08) 100%);
	box-shadow:0 12px 30px rgba(255,230,140,0.14), inset 0 6px 14px rgba(255,255,255,0.35);
	transition:width .25s,height .25s,transform .4s, left .35s, top .35s;
	display:flex;
	align-items:center;
	justify-content:center;
}
.spirit::after {
	content:'';
	position:absolute;
	inset:0;
	border-radius:999px;
	border:1px solid rgba(255,255,255,0.06);
}
.part {
	fill:var(--part-color);
	stroke:var(--outline);
	stroke-width:1;
	cursor:pointer;
	transition:filter .2s,transform .2s;
}
.part:active, .part.active {
	filter:brightness(1.4) drop-shadow(0 10px 18px rgba(0,0,0,0.5));
}
.sway-slow {
	animation:sway 6.5s ease-in-out infinite;
}
.sway-med {
	animation:sway 5.5s ease-in-out infinite;
}
.sway-fast {
	animation:sway 4.5s ease-in-out infinite;
}
@keyframes sway {
	0% {
		transform:rotate(-2deg);
	}
	50% {
		transform:rotate(2deg);
	}
	100% {
		transform:rotate(-2deg);
	}
}
@media (max-width:600px) {
	.label {
		top:6%;
		font-size:clamp(16px,5.5vmin,30px);
	}
	.spirit {
		width:12vmin;
		height:12vmin;
	}
}