/**
 * KatCanDo slot machine.
 * Theme colours arrive as CSS custom properties set by slots.js.
 */

.kcd-slots {
	--kcd-cell: 76px;
	margin: 1.5em auto;
	max-width: 400px;
}
.kcd-slots__loading {
	text-align: center;
	opacity: 0.7;
}

.kcd-sm {
	--kcd-bg: #7f1d1d;
	--kcd-frame: #facc15;
	--kcd-reel: #fffbeb;
	--kcd-text: #fff;
	--kcd-accent: #ef4444;
	--kcd-accent-ink: #fff;
	--kcd-frame-ink: #111;
	--kcd-glow: #fde047;
	--kcd-rarity: #9ca3af;
	--kcd-font: system-ui, sans-serif;
	position: relative;
	box-sizing: border-box;
	padding: 16px 16px 12px;
	border: 4px solid var(--kcd-frame);
	border-radius: 22px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
		var(--kcd-bg);
	color: var(--kcd-text);
	font-family: var(--kcd-font);
	box-shadow:
		0 0 0 3px rgba(0, 0, 0, 0.25),
		inset 0 2px 0 rgba(255, 255, 255, 0.2),
		0 14px 40px rgba(0, 0, 0, 0.35);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.kcd-sm *,
.kcd-sm *::before,
.kcd-sm *::after {
	box-sizing: border-box;
}

.kcd-sm__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.kcd-sm__title {
	margin: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kcd-text);
	text-shadow: 0 0 10px var(--kcd-glow);
}
.kcd-sm__streak {
	padding: 2px 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #f97316, #ef4444);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	animation: kcd-sm-pulse 1.2s ease-in-out infinite;
}

/* ---------------- window & reels ---------------- */

.kcd-sm__body {
	display: flex;
	align-items: center;
	gap: 8px;
}
.kcd-sm__window {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 6px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 3px var(--kcd-frame), inset 0 6px 14px rgba(0, 0, 0, 0.5);
}
.kcd-sm__reel {
	position: relative;
	height: calc(var(--kcd-cell) * 2);
	overflow: hidden;
	border-radius: 9px;
	background: var(--kcd-reel);
	box-shadow: inset 0 12px 14px -8px rgba(0, 0, 0, 0.55), inset 0 -12px 14px -8px rgba(0, 0, 0, 0.55);
}
.kcd-sm__reel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35));
}
.kcd-sm__strip {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--kcd-cell) * -0.5);
	will-change: transform;
}
.kcd-sm__strip.is-spinning {
	animation: kcd-sm-loop 0.34s linear infinite;
	filter: blur(2.5px);
}
.kcd-sm__strip.is-stopping {
	filter: blur(1px);
}
.kcd-sm__reel.is-landed .kcd-sm__strip {
	animation: kcd-sm-land 0.25s ease-out;
}
.kcd-sm__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--kcd-cell);
	line-height: 1;
}
.kcd-sm__glyph {
	font-size: calc(var(--kcd-cell) * 0.6);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.kcd-sm__cell img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}
.kcd-sm__line {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: var(--kcd-accent);
	opacity: 0.55;
	pointer-events: none;
	z-index: 2;
}
.kcd-sm__beams {
	position: absolute;
	inset: -40%;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg, var(--kcd-rarity) 0deg 10deg, transparent 10deg 30deg);
	-webkit-mask: radial-gradient(circle, #000 20%, transparent 65%);
	mask: radial-gradient(circle, #000 20%, transparent 65%);
	transition: opacity 0.3s;
}

/* ---------------- win states ---------------- */

.kcd-sm.is-win .kcd-sm__line {
	opacity: 1;
	height: 5px;
	margin-top: -2.5px;
	background: var(--kcd-rarity);
	box-shadow: 0 0 12px 3px var(--kcd-rarity), 0 0 30px 6px var(--kcd-rarity);
	animation: kcd-sm-pulse 0.8s ease-in-out 4;
}
.kcd-sm.is-win .kcd-sm__window {
	box-shadow: inset 0 0 0 3px var(--kcd-rarity), 0 0 26px 4px var(--kcd-rarity);
}
.kcd-sm.is-win .kcd-sm__beams {
	opacity: 0.55;
	animation: kcd-sm-spin-beams 6s linear infinite;
}
.kcd-sm.is-jackpot .kcd-sm__beams {
	opacity: 0.85;
	animation-duration: 3s;
}
.kcd-sm.is-shake {
	animation: kcd-sm-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.kcd-sm.is-hot {
	box-shadow:
		0 0 0 3px rgba(0, 0, 0, 0.25),
		0 0 24px 4px rgba(249, 115, 22, 0.7),
		0 14px 40px rgba(0, 0, 0, 0.35);
}

/* ---------------- lever ---------------- */

.kcd-sm__lever {
	position: relative;
	width: 22px;
	height: calc(var(--kcd-cell) * 2);
	cursor: pointer;
	flex: none;
}
.kcd-sm__lever::before {
	content: "";
	position: absolute;
	left: 3px;
	bottom: 18%;
	width: 16px;
	height: 26px;
	border-radius: 4px;
	background: var(--kcd-frame);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.kcd-sm__lever-arm {
	position: absolute;
	left: 8px;
	bottom: calc(18% + 13px);
	width: 6px;
	height: 70%;
	border-radius: 3px;
	background: linear-gradient(90deg, #9ca3af, #f3f4f6, #9ca3af);
	transform-origin: 50% 100%;
}
.kcd-sm__lever-knob {
	position: absolute;
	top: -12px;
	left: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--kcd-accent) 45%, rgba(0, 0, 0, 0.6));
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.kcd-sm__lever.is-pulled .kcd-sm__lever-arm {
	animation: kcd-sm-lever 0.55s ease-in-out;
}

/* ---------------- messages ---------------- */

.kcd-sm__msg {
	min-height: 2.6em;
	margin: 10px 0 4px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}
.kcd-sm__prize {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 4px 12px 4px 6px;
	border: 2px solid var(--kcd-rarity);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 14px var(--kcd-rarity);
	font-size: 0.9rem;
}
.kcd-sm__prize[hidden] {
	display: none;
}
.kcd-sm__prize-glyph {
	font-size: 1.5rem;
}
.kcd-sm__prize-rarity {
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--kcd-rarity);
	color: #111;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
}
.kcd-sm__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------- controls ---------------- */

.kcd-sm__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.kcd-sm button {
	font-family: inherit;
	cursor: pointer;
}
.kcd-sm button:disabled {
	cursor: not-allowed;
}
.kcd-sm__spin {
	min-width: 150px;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 55%), var(--kcd-accent);
	color: var(--kcd-accent-ink);
	font-size: 1.15rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 0 18px var(--kcd-glow);
	transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
}
.kcd-sm__spin:hover:not(:disabled) {
	filter: brightness(1.1);
}
.kcd-sm__spin:active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 12px var(--kcd-glow);
}
.kcd-sm__spin:disabled {
	filter: grayscale(0.7) brightness(0.8);
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}
.kcd-sm__mega,
.kcd-sm__buy {
	padding: 9px 16px;
	border: 2px solid var(--kcd-frame);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--kcd-text);
	font-size: 0.85rem;
	font-weight: 700;
}
.kcd-sm__mega {
	border-color: #a855f7;
	background: linear-gradient(90deg, #7c3aed, #a855f7, #f59e0b);
	color: #fff;
	box-shadow: 0 0 14px rgba(168, 85, 247, 0.7);
}
.kcd-sm__buy:disabled {
	opacity: 0.55;
}
.kcd-sm button:focus-visible,
.kcd-sm select:focus-visible,
.kcd-sm input:focus-visible,
.kcd-sm summary:focus-visible {
	outline: 3px solid var(--kcd-glow);
	outline-offset: 2px;
}
.kcd-sm__counter {
	margin: 10px 0 0;
	font-weight: 800;
	font-size: 0.95rem;
}
.kcd-sm__info {
	margin: 2px 0 0;
	font-size: 0.8rem;
	opacity: 0.9;
}
.kcd-sm__info:empty {
	display: none;
}
.kcd-sm__info a {
	color: var(--kcd-glow);
	font-weight: 700;
}

.kcd-sm__tools {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 0.8rem;
}
.kcd-sm__theme {
	max-width: 150px;
	padding: 3px 6px;
	border: 1px solid var(--kcd-frame);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.35);
	color: var(--kcd-text);
	font: inherit;
}
.kcd-sm__theme option {
	color: #111;
	background: #fff;
}
.kcd-sm__mute {
	padding: 2px 6px;
	border: 1px solid var(--kcd-frame);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.35);
	color: var(--kcd-text);
	font-size: 0.95rem;
	line-height: 1.2;
}
.kcd-sm__volume {
	width: 70px;
	accent-color: var(--kcd-accent);
}

.kcd-sm__odds {
	margin-top: 8px;
	font-size: 0.78rem;
	text-align: left;
}
.kcd-sm__odds summary {
	cursor: pointer;
	text-align: center;
	opacity: 0.9;
}
.kcd-sm__odds table {
	width: 100%;
	margin: 6px 0;
	border-collapse: collapse;
}
.kcd-sm__odds th,
.kcd-sm__odds td {
	padding: 3px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	color: inherit;
	background: transparent;
	text-align: left;
	font-weight: 400;
}
.kcd-sm__odds td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.kcd-sm__odds p {
	margin: 4px 0;
	opacity: 0.85;
}
.kcd-sm__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--kcd-r);
	box-shadow: 0 0 6px var(--kcd-r);
}
.kcd-sm__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
}

/* ---------------- dock ---------------- */

.kcd-slots-dock {
	position: fixed;
	left: max(16px, env(safe-area-inset-left));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 99990;
}
.kcd-slots-dock[hidden] {
	display: none;
}
.kcd-slots-dock__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 3px solid #facc15;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ef4444, #7f1d1d);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(250, 204, 21, 0.6);
	cursor: pointer;
	transition: transform 0.15s;
}
.kcd-slots-dock__btn:hover {
	transform: scale(1.06);
}
.kcd-slots-dock__btn:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}
.kcd-slots-dock__icon {
	font-size: 1.8rem;
	line-height: 1;
}
.kcd-slots-dock__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: 12px;
	background: #16a34a;
	font: 800 0.8rem/20px system-ui, sans-serif;
	text-align: center;
}
.kcd-slots-dock.is-empty .kcd-slots-dock__count {
	background: #6b7280;
}
.kcd-slots-dock__btn.is-pulse {
	animation: kcd-sm-bump 0.6s ease-out 2;
}
.kcd-slots-dock__dialog {
	width: min(420px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.kcd-slots-dock__dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}
.kcd-slots-dock__dialog .kcd-slots {
	margin: 0;
	max-width: none;
}
.kcd-slots-dock__close {
	position: absolute;
	top: -12px;
	right: -12px;
	z-index: 10;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.kcd-slots-dock__close:focus-visible {
	outline: 3px solid #facc15;
	outline-offset: 2px;
}

@media (max-width: 380px) {
	.kcd-slots {
		--kcd-cell: 62px;
	}
}

/* ---------------- keyframes ---------------- */

@keyframes kcd-sm-loop {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(var(--kcd-cell) * -12));
	}
}
@keyframes kcd-sm-land {
	0% {
		transform: translateY(6px);
	}
	60% {
		transform: translateY(-3px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes kcd-sm-pulse {
	50% {
		filter: brightness(1.5);
	}
}
@keyframes kcd-sm-spin-beams {
	to {
		transform: rotate(360deg);
	}
}
@keyframes kcd-sm-shake {
	10%,
	90% {
		transform: translate(-2px, 1px) rotate(-0.5deg);
	}
	20%,
	80% {
		transform: translate(4px, -2px) rotate(0.6deg);
	}
	30%,
	50%,
	70% {
		transform: translate(-6px, 2px) rotate(-1deg);
	}
	40%,
	60% {
		transform: translate(6px, -1px) rotate(1deg);
	}
}
@keyframes kcd-sm-lever {
	45% {
		transform: scaleY(-0.35);
	}
	100% {
		transform: scaleY(1);
	}
}
@keyframes kcd-sm-bump {
	40% {
		transform: scale(1.18);
	}
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
	.kcd-sm *,
	.kcd-sm,
	.kcd-slots-dock__btn {
		animation: none !important;
		transition: none !important;
	}
	.kcd-sm__strip.is-spinning,
	.kcd-sm__strip.is-stopping {
		filter: none;
	}
	.kcd-sm.is-win .kcd-sm__beams {
		opacity: 0.4;
	}
}