/* =========================================
   Slot Machine — Shadow DOM CSS
   ========================================= */

:host {
	display: block;
	/* Color vars — set by JS via _applyColors() */
	--sm-accent:        #FFD700;
	--sm-bg:            #1a1a2e;
	--sm-cabinet:       #16213e;
	--sm-border:        #FFD700;
	--sm-window:        #0f3460;
	--sm-reel-bg:       rgba(0,0,0,0.3);
	--sm-title:         #FFD700;
	--sm-subtitle:      rgba(255,255,255,0.75);
	--sm-btn-bg:        #FFD700;
	--sm-btn-text:      #1a1a2e;
	--sm-msg-win:       #FFD700;
	--sm-msg-near-miss: #ff9f43;
	--sm-msg-lose:      rgba(255,255,255,0.6);
	/* Layout */
	--sm-radius: 16px;
	font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ---- Outer Wrapper ---- */

.slot-machine {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 2rem 1.5rem;
	background: var(--sm-bg);
	border-radius: var(--sm-radius);
	max-width: 420px;
	margin: 0 auto;
}

/* ---- Title ---- */

.slot-machine__title {
	margin: 0;
	font-size: clamp(1.25rem, 4vw, 1.75rem);
	font-weight: 800;
	color: var(--sm-title);
	text-shadow: 0 0 12px color-mix(in srgb, var(--sm-title) 60%, transparent);
	letter-spacing: 0.04em;
	text-align: center;
}

/* ---- Subtitle ---- */

.slot-machine__subtitle {
	margin: -0.5rem 0 0;
	font-size: clamp(0.85rem, 2.5vw, 1rem);
	font-weight: 400;
	color: var(--sm-subtitle);
	text-align: center;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* ---- Cabinet ---- */

.slot-machine__cabinet {
	position: relative;
	background: var(--sm-cabinet);
	border: 3px solid var(--sm-border);
	border-radius: var(--sm-radius);
	padding: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	box-shadow:
		0 0 20px color-mix(in srgb, var(--sm-accent) 30%, transparent),
		inset 0 0 30px rgba(0,0,0,0.4);
	transition: box-shadow 0.4s ease;
}

.slot-machine__cabinet--win {
	box-shadow:
		0 0 40px color-mix(in srgb, var(--sm-accent) 80%, transparent),
		0 0 80px color-mix(in srgb, var(--sm-accent) 40%, transparent),
		inset 0 0 30px rgba(0,0,0,0.4);
	animation: sm-cabinet-pulse 0.6s ease-in-out 2;
}

@keyframes sm-cabinet-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.02); }
}

/* ---- Reel Window ---- */

.slot-machine__window {
	display: flex;
	gap: 0.75rem;
	background: var(--sm-window);
	border-radius: 10px;
	padding: 1rem;
	border: 2px inset rgba(255,255,255,0.1);
	position: relative;
}

.slot-machine__payline {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: linear-gradient(90deg, transparent 5%, var(--sm-accent) 30%, var(--sm-accent) 70%, transparent 95%);
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Reels ---- */

.slot-machine__reel {
	flex: 1;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2rem, 8vw, 2.75rem);
	background: var(--sm-reel-bg);
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	transition: transform 0.1s;
	user-select: none;
	overflow: hidden;
}

.slot-machine__reel--spinning {
	animation: sm-reel-blur 0.08s linear infinite;
}

@keyframes sm-reel-blur {
	0%   { transform: translateY(-4px); filter: blur(1px); }
	50%  { transform: translateY(4px);  filter: blur(2px); }
	100% { transform: translateY(-4px); filter: blur(1px); }
}

.slot-machine__reel--stopping {
	animation: sm-reel-snap 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sm-reel-snap {
	0%   { transform: translateY(-12px) scale(1.1); filter: blur(1px); }
	60%  { transform: translateY(3px) scale(1.03);  filter: none; }
	100% { transform: translateY(0) scale(1); }
}

/* ---- Message ---- */

.slot-machine__message {
	min-height: 1.6rem;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
}

.slot-machine__message--win {
	color: var(--sm-msg-win);
	text-shadow: 0 0 8px color-mix(in srgb, var(--sm-msg-win) 70%, transparent);
	animation: sm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slot-machine__message--near-miss {
	color: var(--sm-msg-near-miss);
	text-shadow: 0 0 8px color-mix(in srgb, var(--sm-msg-near-miss) 50%, transparent);
	animation: sm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slot-machine__message--lose {
	color: var(--sm-msg-lose);
}

.slot-machine__message--exhausted {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.95rem;
}

@keyframes sm-pop {
	0%   { transform: scale(0.7); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}

/* ---- Spin Button ---- */

.slot-machine__btn {
	background: var(--sm-btn-bg);
	color: var(--sm-btn-text);
	border: none;
	border-radius: 50px;
	padding: 0.75rem 2.5rem;
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--sm-btn-bg) 50%, transparent);
	min-width: 140px;
}

.slot-machine__btn:hover:not(:disabled) {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--sm-btn-bg) 60%, transparent);
}

.slot-machine__btn:active:not(:disabled) {
	transform: translateY(1px) scale(0.97);
}

.slot-machine__btn:disabled {
	filter: brightness(0.6) saturate(0.5);
	cursor: not-allowed;
}

/* ---- Confetti ---- */

.slot-machine__confetti {
	position: absolute;
	top: -10px;
	pointer-events: none;
	font-size: 1.4rem;
	animation: sm-confetti-fall 1.2s ease-in var(--delay, 0s) forwards;
}

@keyframes sm-confetti-fall {
	0%   { transform: translateY(0) translateX(0) rotate(0deg);             opacity: 1; }
	100% { transform: translateY(100px) translateX(var(--x, 40px)) rotate(360deg); opacity: 0; }
}

/* ---- Coupon Code ---- */

.slot-machine__coupon {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 2px dashed var(--sm-border);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	box-sizing: border-box;
	text-align: center;
}

.slot-machine__coupon--reveal {
	animation: sm-coupon-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sm-coupon-appear {
	0%   { transform: scale(0.85); opacity: 0; }
	100% { transform: scale(1);    opacity: 1; }
}

.slot-machine__coupon-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.5rem;
}

.slot-machine__coupon-code-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.slot-machine__coupon-code {
	font-family: 'Courier New', Courier, monospace;
	font-size: clamp(1.1rem, 4vw, 1.4rem);
	font-weight: 900;
	letter-spacing: 0.12em;
	color: var(--sm-msg-win);
	text-shadow: 0 0 10px color-mix(in srgb, var(--sm-msg-win) 50%, transparent);
	background: rgba(0, 0, 0, 0.3);
	padding: 0.25rem 0.75rem;
	border-radius: 6px;
	user-select: all;
}

.slot-machine__coupon-copy {
	background: transparent;
	color: var(--sm-btn-bg);
	border: 1px solid var(--sm-btn-bg);
	border-radius: 6px;
	padding: 0.3rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.slot-machine__coupon-copy:hover,
.slot-machine__coupon-copy--success {
	background: var(--sm-btn-bg);
	color: var(--sm-btn-text);
}