/* Wheel of Fortune — frontend styles (no external libraries) */

:root{
	--wof-dark:#1D1D1B;
	--wof-green:#616B47;
	--wof-orange:#BE7B3C;
	--wof-cream:#ECE7D8;
	--wof-card:#F4F1E7;
	--wof-badge:#F1EDE1;
	--wof-gray:#8C8C86;
	--wof-muted:#6E6E68;
	--wof-line:#D9D4C4;
	--wof-radius:26px;
}

.wof-widget{
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:9999;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Floating button (bottom-right) ---- */
.wof-fab{
	position:relative;
	width:60px;
	height:60px;
	border:none;
	border-radius:50%;
	background:unset;
	color:unset;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .18s ease, box-shadow .18s ease;
	padding:0;
	margin-left:auto;
}
.wof-fab:hover{ transform:scale(1.06); box-shadow:0 10px 28px rgba(0,0,0,.28); }
.wof-fab svg{ width:30px; height:30px; }
.wof-fab img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* ---- Popup anchored NEXT TO the button (bottom-right, not centered) ---- */
.wof-popup{
	position:absolute;
	right:0;
	bottom:76px;
	width:360px;
	max-width:calc(100vw - 32px);
	background:var(--wof-card);
	border-radius:var(--wof-radius);
	box-shadow:0 18px 50px rgba(0,0,0,.28);
	padding:26px 22px 22px;
	transform-origin:bottom right;
	transform:translateY(10px) scale(.94);
	opacity:0;
	pointer-events:none;
	visibility:hidden;
	transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s ease, visibility 0s linear .22s;
	box-sizing:border-box;
}
.wof-widget.is-open .wof-popup{
	transform:translateY(0) scale(1);
	opacity:1;
	pointer-events:auto;
	visibility:visible;
	transition:transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}

.wof-popup-close{
	position:absolute;
	top:12px;
	right:14px;
	width:28px;
	height:28px;
	border:none;
	background:transparent;
	color:var(--wof-muted);
	font-size:22px;
	line-height:1;
	cursor:pointer;
	border-radius:50%;
	transition:background .15s ease;
	padding: 0;
}
.wof-popup-close:hover, .wof-popup-close:focus { background:unset; color: #DB8622; }

/* ---- Header ---- */
.wof-title{
	margin:2px 0 8px;
	text-align:center;
	font-size:24px;
	font-weight:800;
	color:var(--wof-dark);
	letter-spacing:-.01em;
}
.wof-subtitle{
	margin:0 auto 14px;
	max-width:280px;
	text-align:center;
	font-size:15px;
	line-height:1.4;
	color:var(--wof-muted);
}

/* ---- Wheel ---- */
.wof-wheel-wrap{
	position:relative;
	width:280px;
	max-width:100%;
	margin:6px auto 18px;
	aspect-ratio:1/1;
}
.wof-wheel-svg{ width:100%; height:100%; display:block; }
.wof-wheel-rotor{
	transform-origin:50% 50%;
	transition:transform 5s cubic-bezier(.15,.9,.2,1);
}
.wof-badge-text{
	font-size:13px;
	font-weight:800;
	fill:var(--wof-dark);
}
.wof-badge-icon{ color:var(--wof-dark); }
.wof-badge-icon svg{ width:22px; height:22px; }
.wof-badge-icon img{ width:22px; height:22px; object-fit:contain; }

/* Pointer attached to the white ring */
.wof-pointer{ fill:#f5f1e6;}

/* ---- Buttons ---- */
.wof-btn{
	display:block;
	width:100%;
	border:none;
	border-radius:40px;
	padding:16px 20px;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	transition:filter .15s ease, transform .1s ease;
	box-sizing:border-box;
}
.wof-btn:active{ transform:translateY(1px); }
.wof-btn--active{ background:var(--wof-dark); color:var(--wof-card); }
.wof-btn--active:hover{ filter:brightness(1.12); }
.wof-btn--locked{ background:var(--wof-gray); color:#F4F1E7; cursor:not-allowed; }
.wof-btn[disabled]{ opacity:.9; cursor:default; }

/* ---- Prize screen ---- */
.wof-prize{ text-align:center; padding-top:6px; }
.wof-prize-icon{ margin:4px auto 14px; width:72px; height:72px; color:var(--wof-orange); }
.wof-prize-icon svg{ width:56px; height:56px; }
.wof-prize-icon img{ width:72px; height:72px; object-fit:contain; border-radius:10px; display:block; }
.wof-prize-title{ font-size:26px; font-weight:800; color:var(--wof-dark); margin:0 0 8px; }
.wof-prize-desc{ font-size:15px; line-height:1.4; color:var(--wof-muted); margin:0 auto 18px; max-width:280px; }

.wof-code{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	border:1px dashed var(--wof-line);
	border-radius:12px;
	padding:14px 16px;
	margin:0 0 16px;
	background:rgba(0,0,0,.015);
}
.wof-code code{
	font-size:17px;
	font-weight:700;
	letter-spacing:.02em;
	color:var(--wof-dark);
	font-family:inherit;
	background:none;
	padding:0;
}
.wof-copy{
	border:none;
	background:transparent;
	color:var(--wof-muted);
	cursor:pointer;
	padding:4px;
	border-radius:6px;
	display:flex;
	transition:color .15s ease, background .15s ease;
	position:relative;
}
.wof-copy:hover{ color:var(--wof-dark); background:rgba(0,0,0,.05); }
.wof-copy svg{ width:20px; height:20px; }
.wof-copy.copied::after{
	content:attr(data-copied);
	position:absolute;
	right:0;
	bottom:130%;
	white-space:nowrap;
	background:var(--wof-dark);
	color:#fff;
	font-size:12px;
	padding:4px 8px;
	border-radius:6px;
}

.wof-prize-footer{
	margin:14px auto 2px;
	max-width:290px;
	font-size:13px;
	line-height:1.4;
	color:var(--wof-gray);
	text-align:center;
}

/* ---- Loading / error ---- */
.wof-loading{ display:flex; justify-content:center; padding:60px 0; }
.wof-spinner{
	width:34px; height:34px;
	border:3px solid var(--wof-line);
	border-top-color:var(--wof-dark);
	border-radius:50%;
	animation:wof-spin 1s linear infinite;
}
@keyframes wof-spin{ to{ transform:rotate(360deg); } }
.wof-msg{ text-align:center; color:var(--wof-muted); padding:30px 6px; font-size:15px; }

@media (max-width:480px){
	.wof-widget{ right:16px; bottom:16px; }
	.wof-popup{ bottom:70px; padding:24px 18px 18px; }
	.wof-wheel-wrap{ width:250px; }
}