/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
	color: #111;
	background: radial-gradient(circle at 20% 10%, #fff 0, #f2f5ff 50%, #e9f0ff 100%);
	display: grid;
	grid-template-rows: auto 1fr auto;
}

header { text-align: center; padding: 1.25rem 1rem 0.5rem; }
h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: .3px; }
.tag { background: #111; color: #fff; font-size: .75rem; padding: .1rem .4rem; border-radius: .35rem; margin-left: .5rem; }
.sub { margin: .25rem auto 0; color: #555; max-width: 680px; }

main { display: grid; place-items: center; gap: 1rem; padding: 1rem; }

.wheel-wrap {
	position: relative;
	width: min(92vw, 520px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

#pointer {
	position: absolute;
	top: -14px;
	font-size: clamp(24px, 4vw, 34px);
	text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.18);
}

#wheel {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 10px 30px rgba(0,0,0,.18));
	transition: transform 0.2s linear;
	will-change: transform;
}

.slice text {
	font-size: 18px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	fill: #101010;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

.center-cap {
	fill: #fff;
	stroke: #111;
	stroke-width: 4;
}

.controls {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
}

button {
	border: 0;
	padding: .8rem 1rem;
	font-weight: 700;
	border-radius: .6rem;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0,0,0,.12);
	transition: transform .05s ease, box-shadow .2s ease, opacity .2s ease;
}
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button:active { transform: translateY(1px); }
.primary { background: #4f8bff; color: #fff; }
.danger { background: #ff4f5e; color: #fff; }
.ghost { background: #fff; color: #111; border: 2px solid #111; }

#result {
	min-height: 2.2rem;
	font-size: 1.2rem;
	font-weight: 800;
	text-align: center;
}

.about {
	max-width: 850px;
	margin: 1rem auto;
	padding: 0 .5rem 1.5rem;
	color: #333;
}

footer { text-align: center; padding: 1rem; color: #555; }