/* UCG Games Studio: shared chrome for every minigame */

.minigame_popup_child {
	--ucgs-accent: #ffd23f;
	--ucgs-accent-2: #ff4f8b;
	--ucgs-ink: #15121f;
}

/* ── Particle overlay + flash ── */
.ucgs-fx {
	position: fixed; inset: 0; width: 100vw; height: 100vh;
	pointer-events: none; z-index: 2147483646;
}
.ucgs-flash {
	position: absolute; inset: 0; pointer-events: none; z-index: 65; border-radius: inherit;
	background: radial-gradient(ellipse at center, transparent 45%, var(--ucgs-glow, #ffd23f) 130%);
	opacity: 0;
}
body > .ucgs-flash { position: fixed; }

/* ── Floating prize text ── */
.ucgs-float {
	position: fixed; z-index: 2147483647; pointer-events: none;
	font: 900 22px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #fff; white-space: nowrap; letter-spacing: .01em;
	text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,210,63,.75);
	-webkit-text-stroke: 1px rgba(0,0,0,.25);
}
.ucgs-float.is-big { font-size: 34px; }

/* ── Mute toggle: mirrors the close button, top-left ── */
.minigame_popup_child .ucgs-mute {
	position: absolute; top: -40px; left: 0; z-index: 5;
	width: 30px; height: 30px; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; cursor: pointer;
	background: rgb(255 255 255 / 10%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.85);
	transition: transform .15s ease, background .15s ease;
	box-shadow: none; min-height: 0; line-height: 0;
}
.minigame_popup_child .ucgs-mute:hover { background: rgb(255 255 255 / 18%); }
.minigame_popup_child .ucgs-mute:active { transform: scale(.92); }
.minigame_popup_child .ucgs-mute.is-muted { color: rgba(255,255,255,.5); }

/* ── Host bubble ── */
.minigame_popup_child .ucgs-host {
	position: absolute; top: 10px; left: 50%; z-index: 60;
	display: flex; align-items: center; gap: 10px;
	max-width: min(92%, 420px);
	padding: 7px 14px 7px 7px;
	background: rgba(18,14,30,.92);
	color: #fff;
	border: 2px solid var(--ucgs-accent);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(0,0,0,.12);
	transform: translate(-50%, -16px) scale(.92);
	opacity: 0; pointer-events: none;
	transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.minigame_popup_child .ucgs-host.is-outside {
	/* full card width over the sound / close button row; those buttons hide
	   while the host is talking (it's only for a couple of seconds) */
	top: auto; bottom: calc(100% + var(--ucgs-host-b, 2px));
	left: 0; right: 0;
	max-width: none;
	padding: 4px 12px 4px 4px; gap: 8px;
	border-radius: 22px;
	transform: translateY(10px) scale(.96); transform-origin: 50% 100%;
}
.minigame_popup_child .ucgs-host.is-outside.on { transform: none; }
.minigame_popup_child .ucgs-host.is-outside.hype { animation-name: ucgs-host-hype-out; }
.minigame_popup_child.ucgs-host-up > .ucgs-mute, .minigame_popup_child.ucgs-host-up > .ucgs-voice, .minigame_popup_child.ucgs-host-up > .close-minigame-popup { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s .15s; }
.minigame_popup_child > .ucgs-mute, .minigame_popup_child > .ucgs-voice, .minigame_popup_child > .close-minigame-popup { transition: opacity .2s ease; }
.minigame_popup_child .ucgs-host.is-outside .ucgs-host-av { flex-basis: 28px; width: 28px; height: 28px; font-size: 16px; }
.minigame_popup_child .ucgs-host.is-outside .ucgs-host-t { font-size: 13px; }
.minigame_popup_child .ucgs-host.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.minigame_popup_child .ucgs-host.hype { border-color: var(--ucgs-accent-2); animation: ucgs-host-hype .5s ease 2; }
.minigame_popup_child .ucgs-host-av {
	flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--ucgs-accent); font-size: 20px; line-height: 1; overflow: hidden;
	animation: ucgs-bob 1.6s ease-in-out infinite;
}
.minigame_popup_child .ucgs-host-av img { width: 100%; height: 100%; object-fit: cover; }
.minigame_popup_child .ucgs-host-b { display: flex; flex-direction: column; min-width: 0; }
.minigame_popup_child .ucgs-host-n { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ucgs-accent); line-height: 1.2; }
.minigame_popup_child .ucgs-host-t { font-size: 14px; font-weight: 600; line-height: 1.25; }
@keyframes ucgs-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes ucgs-host-hype { 0%,100% { transform: translate(-50%,0) scale(1); } 50% { transform: translate(-50%,0) scale(1.06); } }
@keyframes ucgs-host-hype-out { 0%,100% { transform: none; } 50% { transform: scale(1.04); } }

/* ── Big win / jackpot banner ── */
.minigame_popup_child .ucgs-banner {
	position: absolute; inset: 0; z-index: 70;
	display: flex; align-items: center; justify-content: center;
	/* never blocks the game: the next tap / hold goes straight through */
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
	animation: ucgs-fade-in .2s ease both;
}
.minigame_popup_child .ucgs-banner.out { animation: ucgs-fade-out .45s ease both; }
.minigame_popup_child .ucgs-banner-in {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	transform-origin: center;
	animation: ucgs-stamp .55s cubic-bezier(.2,1.6,.4,1) both;
}
.minigame_popup_child .ucgs-banner-t {
	font: 900 clamp(40px, 11vw, 74px)/.95 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: -.02em; color: #fff;
	background: linear-gradient(180deg, #fff 0%, var(--ucgs-accent) 55%, #e08a00 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(255,200,40,.6));
	transform: rotate(-4deg);
}
.minigame_popup_child .ucgs-banner-s {
	padding: 6px 16px; border-radius: 999px;
	background: var(--ucgs-ink); color: #fff;
	border: 2px solid var(--ucgs-accent);
	font: 800 16px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	max-width: 86vw; text-align: center;
}
.minigame_popup_child .ucgs-banner.tier-mega .ucgs-banner-t { animation: ucgs-glow 0.6s ease-in-out infinite alternate; }
.minigame_popup_child .ucgs-banner.tier-mega::before {
	content: ""; position: absolute; inset: -20%;
	background: repeating-conic-gradient(from 0deg, rgba(255,220,90,.22) 0 10deg, transparent 10deg 20deg);
	animation: ucgs-spin 6s linear infinite; pointer-events: none;
	-webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%);
}
@keyframes ucgs-stamp { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ucgs-glow { from { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,200,40,.5)); } to { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 34px rgba(255,220,80,.95)); } }
@keyframes ucgs-spin { to { transform: rotate(360deg); } }
@keyframes ucgs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ucgs-fade-out { to { opacity: 0; } }

/* ── Session summary ── */
.minigame_popup_child .ucgs-summary {
	display: flex !important; align-items: center; justify-content: center; gap: 12px;
	width: max-content !important; min-width: max-content !important; max-width: calc(100% - 20px); box-sizing: border-box;   /* never squashed or cut off */
	margin: 8px auto 10px; padding: 6px 14px !important;
	background: linear-gradient(180deg, #1d1830, #120e1f) !important;
	color: #fff !important; border-radius: 999px !important;
	border: 1.5px solid var(--ucgs-accent) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
	font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif !important;
	white-space: nowrap; text-align: left;
	animation: ucgs-stamp .45s cubic-bezier(.2,1.4,.4,1) both;
}
.minigame_popup_child .ucgs-sum-h { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ucgs-accent); }
.minigame_popup_child .ucgs-sum-i { display: inline-flex; align-items: baseline; gap: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); }
.minigame_popup_child .ucgs-sum-i b { font-size: 16px; font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.minigame_popup_child .ucgs-sum-w b { color: var(--ucgs-accent); }
.minigame_popup_child .ucgs-sum-i small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; color: #fff; }

/* ── Idle nudge (games add .ucgs-nudge to a target) ── */
.ucgs-nudge { animation: ucgs-nudge .7s ease both; }
@keyframes ucgs-nudge {
	0%,100% { translate: 0 0; rotate: 0deg; }
	20% { translate: 0 -6px; rotate: -3deg; }
	40% { translate: 0 0; rotate: 3deg; }
	60% { translate: 0 -3px; rotate: -2deg; }
	80% { rotate: 1deg; }
}

@media (prefers-reduced-motion: reduce) {
	.minigame_popup_child .ucgs-host, .minigame_popup_child .ucgs-host-av, .minigame_popup_child .ucgs-banner-in, .minigame_popup_child .ucgs-banner-t, .minigame_popup_child .ucgs-summary, .ucgs-nudge { animation: none !important; transition: opacity .2s ease !important; }
.minigame_popup_child .ucgs-banner.tier-mega::before { display: none; }
}

/* ══ Host Kit: face + voice ══ */
.minigame_popup_child .ucgs-voice {
	position: absolute; top: -40px; left: 36px; z-index: 5;
	width: 30px; height: 30px; padding: 0; margin: 0; min-height: 0; line-height: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; cursor: pointer;
	background: rgb(255 255 255 / 10%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.85); box-shadow: none;
}
.minigame_popup_child .ucgs-voice.is-muted { color: rgba(255,255,255,.4); }
.minigame_popup_child .ucgs-voice.is-muted::after {
	content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px;
}

/* the avatar "talks": scale + slight stretch from --talk (0..1) */
.minigame_popup_child .ucgs-host.has-face .ucgs-host-av { background: #fff; animation: none; border: 2px solid var(--ucgs-accent); }
.minigame_popup_child .ucgs-host-av img { transform: scale(calc(1 + var(--talk, 0) * .12), calc(1 + var(--talk, 0) * .2)); transform-origin: 50% 85%; transition: transform .05s linear; }
.minigame_popup_child .ucgs-host.has-face .ucgs-host-av { flex-basis: 40px; width: 40px; height: 40px; }
.minigame_popup_child .ucgs-host.is-outside.has-face .ucgs-host-av { flex-basis: 32px; width: 32px; height: 32px; }

/* face pop: springs up from the bottom-left of the card */
.minigame_popup_child .ucgs-facepop {
	position: absolute; left: 10px; bottom: 10px; z-index: 75;
	width: 78px; height: 78px; pointer-events: none;   /* 30% smaller than v1.2 */
	transform: translateY(140%) rotate(-12deg) scale(.6); opacity: 0;
	transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
.minigame_popup_child .ucgs-facepop.is-big { width: 105px; height: 105px; }
.minigame_popup_child .ucgs-facepop.on { transform: translateY(0) rotate(-6deg) scale(1); opacity: 1; animation: ucgsFaceBob 1.1s ease-in-out .5s infinite; }
.minigame_popup_child .ucgs-facepop img {
	position: relative; z-index: 1; display: block; width: 100%; height: 100%;
	border-radius: 50%; object-fit: cover; background: #fff;
	border: 4px solid var(--ucgs-accent);
	box-shadow: 0 10px 26px rgba(0,0,0,.4);
	transform: scale(calc(1 + var(--talk, 0) * .08), calc(1 + var(--talk, 0) * .14)); transform-origin: 50% 90%;
}
.minigame_popup_child .ucgs-facepop-rays {
	position: absolute; inset: -40%; z-index: 0; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255,220,90,.55) 0 12deg, transparent 12deg 24deg);
	-webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); mask: radial-gradient(circle, #000 30%, transparent 68%);
	animation: ucgs-spin 5s linear infinite;
}
@keyframes ucgsFaceBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) {
	.minigame_popup_child .ucgs-facepop, .minigame_popup_child .ucgs-facepop.on { animation: none; transition: opacity .2s; }
	.minigame_popup_child .ucgs-facepop-rays { animation: none; }
}

/* cut-out heads: no badge, keep the head's own silhouette */
.minigame_popup_child.ucgs-cutout .ucgs-host.has-face .ucgs-host-av { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.minigame_popup_child.ucgs-cutout .ucgs-host-av img { object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); scale: 1.3; translate: 0 -3px; }
.minigame_popup_child.ucgs-cutout .ucgs-facepop img {
	border: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.minigame_popup_child.ucgs-cutout .ucgs-facepop { width: 98px; height: 98px; }
.minigame_popup_child.ucgs-cutout .ucgs-facepop.is-big { width: 126px; height: 126px; }

/* themes often set img { max-width:100%; height:auto } which squashes the face images */
.minigame_popup_child .ucgs-host-av img, .minigame_popup_child .ucgs-facepop img { max-width: none; max-height: none; margin: 0; }

/* ══ Hardening: page builders (Elementor etc.) style every <button> and <img>
   on the page. Pin the Studio controls so a theme can't resize, recolour or
   re-pad them. ══ */
.minigame_popup_child button.ucgs-mute,
.minigame_popup_child button.ucgs-voice {
	position: absolute !important; top: -40px !important; bottom: auto !important; right: auto !important;
	width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
	max-width: 30px !important; max-height: 30px !important; flex: none !important;
	padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border-radius: 999px !important; border: 1px solid rgba(255,255,255,.12) !important; outline: none;
	background: rgb(255 255 255 / 10%) !important; background-image: none !important;
	color: rgba(255,255,255,.85) !important; box-shadow: none !important; text-shadow: none !important;
	font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; text-transform: none !important;
	float: none !important; opacity: 1 !important; visibility: visible; overflow: visible !important;
	-webkit-appearance: none !important; appearance: none !important;
}
.minigame_popup_child button.ucgs-mute { left: 0 !important; }
.minigame_popup_child button.ucgs-voice { left: 36px !important; }
.minigame_popup_child button.ucgs-mute:hover, .minigame_popup_child button.ucgs-mute:focus,
.minigame_popup_child button.ucgs-voice:hover, .minigame_popup_child button.ucgs-voice:focus { background: rgb(255 255 255 / 18%) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
.minigame_popup_child button.ucgs-mute.is-muted { color: rgba(255,255,255,.5) !important; }
.minigame_popup_child button.ucgs-voice.is-muted { color: rgba(255,255,255,.4) !important; }
.minigame_popup_child button.ucgs-mute svg,
.minigame_popup_child button.ucgs-voice svg {
	width: 16px !important; height: 16px !important; min-width: 0 !important; max-width: none !important;
	display: block !important; margin: 0 !important; padding: 0 !important; pointer-events: none;
}
.minigame_popup_child button.ucgs-mute svg path,
.minigame_popup_child button.ucgs-voice svg path { fill: currentColor !important; stroke: none !important; }
.minigame_popup_child.ucgs-host-up > button.ucgs-mute, .minigame_popup_child.ucgs-host-up > button.ucgs-voice { opacity: 0 !important; visibility: hidden; }
/* host bubble text: keep its own type whatever the theme sets on b / span */
.minigame_popup_child .ucgs-host, .minigame_popup_child .ucgs-host * { box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal; }
.minigame_popup_child .ucgs-host-n { font-size: 10px !important; line-height: 1.2 !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.minigame_popup_child .ucgs-host-t { font-size: 14px !important; line-height: 1.25 !important; margin: 0 !important; }
.minigame_popup_child .ucgs-host.is-outside .ucgs-host-t { font-size: 13px !important; }
.minigame_popup_child .ucgs-host-av img, .minigame_popup_child .ucgs-facepop img { height: 100% !important; width: 100% !important; border-radius: inherit; }
.minigame_popup_child .ucgs-host-av img { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; }
.minigame_popup_child .ucgs-facepop img { padding: 0 !important; margin: 0 !important; }
.minigame_popup_child:not(.ucgs-cutout) .ucgs-facepop img { border: 4px solid var(--ucgs-accent) !important; border-radius: 50% !important; }
.minigame_popup_child.ucgs-cutout .ucgs-facepop img { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }